From beea07e40524c67daf6b6931622b5acf162d4ea5 Mon Sep 17 00:00:00 2001
From: makiopen <piotr.makarewicz@openzeppelin.com>
Date: Tue, 10 Dec 2024 09:55:10 +0100
Subject: [PATCH 1/3] styling change for headers

---
 src/routes/wizard.svelte | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/routes/wizard.svelte b/src/routes/wizard.svelte
index 02794fe..cc2e8af 100644
--- a/src/routes/wizard.svelte
+++ b/src/routes/wizard.svelte
@@ -311,7 +311,7 @@
 <div class="h-[calc(100vh-2rem)] flex flex-col pt-2">
   <div class="flex-1 overflow-y-auto">
     <button onclick={() => toggleStep(0)} class="flex items-center justify-between w-full p-4 text-sm font-medium rtl:text-right text-gray-800 rounded-t-xl gap-3" >
-      <span>Configuration</span>
+      <h1>Configuration</h1>
       <i class={`pr-2 ${currentStep === 0 ? "fa fa-angle-down" : "fa fa-angle-right"}`}></i>
     </button>
     <div class:hidden={!(currentStep === 0)}>
@@ -320,7 +320,7 @@
       </div>
     </div>
     <button disabled={!globalState.authenticated} onclick={() => toggleStep(1)} class="flex items-center justify-between w-full p-4 text-sm font-medium rtl:text-right text-gray-800 rounded-t-xl gap-3">
-      <span>Network</span>
+      <h1>Network</h1>
       <i class={`pr-2 ${currentStep === 1 ? "fa fa-angle-down" : "fa fa-angle-right"}`}></i>
     </button>
     <div class:hidden={!(currentStep === 1)} >
@@ -329,7 +329,7 @@
       </div>
     </div>
     <button disabled={!globalState.authenticated} onclick={() => toggleStep(2)} class="flex items-center justify-between w-full p-4 text-sm font-medium rtl:text-right text-gray-800 rounded-t-xl gap-3">
-      <span>Approval Process</span>
+      <h1>Approval Process</h1>
       <i class={`pr-2 ${currentStep === 2 ? "fa fa-angle-down" : "fa fa-angle-right"}`}></i>
     </button>
     <div class:hidden={!(currentStep === 2)}>
@@ -346,3 +346,14 @@
     {/if}
   </div>
 </div>
+<style>
+  h1 {
+    margin-top: 0;
+    margin-bottom: 0;
+    text-transform: lowercase;
+    font-variant: small-caps;
+    font-size: 14px;
+    color: rgb(129, 137, 152);
+    font-weight: 600;
+  }
+  </style>
\ No newline at end of file

From ff851ded0be25e208fe7a95cbe40abab8e56071c Mon Sep 17 00:00:00 2001
From: makiopen <piotr.makarewicz@openzeppelin.com>
Date: Tue, 10 Dec 2024 13:28:05 +0100
Subject: [PATCH 2/3] basic authenticate validation plus styling changes

---
 .../wizard/components/ApprovalProcess.svelte  | 21 +++++++++++--------
 .../wizard/components/Configuration.svelte    |  4 ++--
 .../wizard/components/shared/Button.svelte    |  4 ++--
 .../wizard/components/shared/Dropdown.svelte  |  8 +++----
 src/lib/wizard/components/shared/Input.svelte |  4 ++--
 5 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/lib/wizard/components/ApprovalProcess.svelte b/src/lib/wizard/components/ApprovalProcess.svelte
index 5450f97..37c4ebc 100644
--- a/src/lib/wizard/components/ApprovalProcess.svelte
+++ b/src/lib/wizard/components/ApprovalProcess.svelte
@@ -98,7 +98,8 @@
   );
 </script>
 
-<div class="form-check">
+<div class="form-check flex flex-col gap-2">
+  <div>
   <input
     class="form-check-input"
     type="radio"
@@ -109,8 +110,8 @@
   />
   <label class="text-sm" for="flexRadioDefault1">
     Use existing Approval Process
-  </label>
-
+  </label></div>
+  <div class="pl-4">
   {#key globalState.form.approvalProcessSelected}
     <Dropdown
       items={globalState.approvalProcesses
@@ -129,10 +130,11 @@
     />
   {/key}
 </div>
+</div>
 <div
-  class="form-check mt-3"
+  class="form-check mt-3 flex flex-col gap-2"
   title={disableCreation ? "Deploy Environment already exists" : undefined}
->
+><div>
   <input
     class="text-xs"
     type="radio"
@@ -149,7 +151,8 @@
   >
     Create new Approval Process
   </label>
-
+  </div>
+  <div class="pl-4 gap-2 flex flex-col">
   <Dropdown
     items={approvalProcessTypes.map(approvalProcessTypeToDropdownItem)}
     placeholder="Approval Process Type"
@@ -162,12 +165,12 @@
   />
 
   {#if approvalProcessType === "EOA" || approvalProcessType === "Safe"}
-    <div class="mt-2">
+    <div>
       <Input value={address} placeholder="* Address" type="text" onchange={onAddressChange} />
     </div>
   {:else if approvalProcessType === "Relayer"}
     {#if disableRelayers}
-      <div class="alert alert-warning d-flex align-items-center mt-2">
+      <div class="alert alert-warning d-flex align-items-center">
         <i class="fa fa-exclamation-triangle mr-2"></i>
         <p class="m-0 lh-1">
           <small class="lh-sm">API Key not allowed to manage Relayers</small>
@@ -185,7 +188,7 @@
       />
     {/if}
   {/if}
-</div>
+</div></div>
 <div class="form-check mt-3">
   <input
     class="form-check-input"
diff --git a/src/lib/wizard/components/Configuration.svelte b/src/lib/wizard/components/Configuration.svelte
index 087dbb6..986c018 100644
--- a/src/lib/wizard/components/Configuration.svelte
+++ b/src/lib/wizard/components/Configuration.svelte
@@ -67,7 +67,7 @@
 <div class="flex flex-col gap-2">
   <div class="flex flex-row justify-between">
     <div>
-      <label class="text-xs" for="apiKey">API Key</label>
+      <label class="text-sm" for="apiKey">API Key</label>
       <i
         class="fa fa-info-circle text-xs text-gray-500"
         title="Get your API key from the Defender Dashboard"
@@ -90,7 +90,7 @@
     type="password"
   />
 
-  <Button {loading} label="Authenticate" onClick={authenticate} />
+  <Button {loading} disabled={!(apiKey && apiSecret)}  label="Authenticate" onClick={authenticate} />
 
   {#if successMessage}
     <Message message={successMessage} type="success" />
diff --git a/src/lib/wizard/components/shared/Button.svelte b/src/lib/wizard/components/shared/Button.svelte
index 7bfaaf8..3644acf 100644
--- a/src/lib/wizard/components/shared/Button.svelte
+++ b/src/lib/wizard/components/shared/Button.svelte
@@ -8,9 +8,9 @@
   const { loading, onClick, label, disabled }: Props = $props();
 </script>
 
-<button onclick={onClick} disabled={disabled || loading} class="bg-blue-600 text-white text-sm rounded-md p-2 mt-2" class:bg-gray-400={loading}>
+<button onclick={onClick} disabled={disabled || loading} class=" text-white text-sm rounded-md p-2 mt-2 {loading || disabled ? 'bg-gray-400' : 'bg-indigo-600'}">
   {#if loading}
-    <i class="fa fa-spinner fa-spin"></i>
+    <i class="fa fa-circle-o-notch fa-spin"></i>
   {/if}
   {#if !loading}
     {label}
diff --git a/src/lib/wizard/components/shared/Dropdown.svelte b/src/lib/wizard/components/shared/Dropdown.svelte
index 244f7da..37a429c 100644
--- a/src/lib/wizard/components/shared/Dropdown.svelte
+++ b/src/lib/wizard/components/shared/Dropdown.svelte
@@ -67,7 +67,7 @@
 <div class="relative w-full" use:clickOutside={handleClickOutside}>
   <button
     type="button"
-    class="w-full flex items-center justify-between border border-gray-300 disabled:opacity-50 rounded-md p-2 text-xs bg-white"
+    class="w-full flex items-center justify-between border border-gray-300 disabled:opacity-50 rounded-md p-2 text-sm bg-white"
     onclick={toggleDropdown}
     disabled={disabled}
     {name}
@@ -82,12 +82,12 @@
     <div class="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto">
       {#each Object.entries(groupedItems) as [group, items]}
         {#if group !== 'default'}
-          <div class="px-2 py-1 text-xs font-semibold bg-gray-50 text-gray-700">{group}</div>
+          <div class="px-2 py-1 text-sm font-semibold bg-gray-50 text-gray-700">{group}</div>
         {/if}
         {#each items.sort((a, b) => a.label.localeCompare(b.label)) as item}
           <button
             type="button"
-            class="w-full text-left px-2 py-1.5 text-xs hover:bg-gray-100 focus:bg-gray-100 focus:outline-none {selected?.value === item.value ? 'bg-gray-50' : ''}"
+            class="w-full text-left px-2 py-1.5 text-sm hover:bg-gray-100 focus:bg-gray-100 focus:outline-none {selected?.value === item.value ? 'bg-gray-50' : ''}"
             onclick={() => handleSelect(item)}
           >
             {item.label}
@@ -95,7 +95,7 @@
         {/each}
       {/each}
       {#if items.length === 0}
-        <div class="px-2 py-1.5 text-xs text-gray-500">
+        <div class="px-2 py-1.5 text-sm text-gray-500">
           {emptyLabel ?? "No items available"}
         </div>
       {/if}
diff --git a/src/lib/wizard/components/shared/Input.svelte b/src/lib/wizard/components/shared/Input.svelte
index d0e72b6..77ef1d3 100644
--- a/src/lib/wizard/components/shared/Input.svelte
+++ b/src/lib/wizard/components/shared/Input.svelte
@@ -14,7 +14,7 @@
 </script>
 
 {#if label}
-  <label class="text-xs" for="apiSecret">{label}</label>
+  <label class="text-sm" for="apiSecret">{label}</label>
 {/if}
 <input
   name="apiSecret"
@@ -23,5 +23,5 @@
   placeholder={placeholder}
   disabled={disabled}
   onchange={onchange}
-  class="border text-xs border-gray-300 disabled:opacity-50 rounded-md p-2 w-full"
+  class="border text-sm border-gray-300 disabled:opacity-50 rounded-md p-2 w-full"
 />

From 8c938a87f8d095d66e25842e3beac87895dbbd56 Mon Sep 17 00:00:00 2001
From: makiopen <piotr.makarewicz@openzeppelin.com>
Date: Wed, 11 Dec 2024 14:48:18 +0100
Subject: [PATCH 3/3] style fixes for parameters

---
 .../wizard/components/ApprovalProcess.svelte  | 20 +++++------
 src/lib/wizard/components/Deploy.svelte       | 36 ++++++++++---------
 .../wizard/components/shared/Button.svelte    |  2 +-
 src/routes/wizard.svelte                      |  8 ++---
 4 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/src/lib/wizard/components/ApprovalProcess.svelte b/src/lib/wizard/components/ApprovalProcess.svelte
index 023ea0b..b93e049 100644
--- a/src/lib/wizard/components/ApprovalProcess.svelte
+++ b/src/lib/wizard/components/ApprovalProcess.svelte
@@ -136,20 +136,20 @@
   class="form-check mt-3 flex flex-col gap-2"
   title={disableCreation ? "Deploy Environment already exists" : undefined}
 ><div>
-  <input
-    class="text-xs"
-    type="radio"
-    name="flexRadioDefault"
-    id="new"
-    onclick={(e) => onRadioChange(e)}
-    disabled={disableCreation}
-    title={disableCreation ? "Deploy Environment already exists" : undefined}
-  />
+
   <label
     class={`text-sm ${disableCreation ? 'text-gray-500' : ''}`}
     for="flexRadioDefault2"
     title={disableCreation ? "Deploy Environment already exists" : undefined}
-  >
+  >  <input
+  class="text-xs"
+  type="radio"
+  name="flexRadioDefault"
+  id="new"
+  onclick={(e) => onRadioChange(e)}
+  disabled={disableCreation}
+  title={disableCreation ? "Deploy Environment already exists" : undefined}
+/>
     Create new Approval Process
   </label>
   </div>
diff --git a/src/lib/wizard/components/Deploy.svelte b/src/lib/wizard/components/Deploy.svelte
index f2b7b34..1ee82c1 100644
--- a/src/lib/wizard/components/Deploy.svelte
+++ b/src/lib/wizard/components/Deploy.svelte
@@ -309,21 +309,30 @@
 
 </script>
 
-<div class="px-4 flex flex-col gap-2">
+<div class="flex flex-col gap-2">
 
   {#if displayUpgradeableWarning}
     <Message type="warn" message="Upgradable contracts are not yet fully supported. This action will only deploy the implementation contract without initializing. <br />We recommend using <u><a href='https://github.com/OpenZeppelin/openzeppelin-upgrades' target='_blank'>openzeppelin-upgrades</a></u> package instead." />
   {/if}
 
-  <div class="pt-2 relative">
+  {#if inputs.length > 0}
+  <h6 class="text-sm">Constructor Arguments</h6>
+  {#each inputs as input}
+    <Input name={input.name} placeholder={`${input.name} (${input.type})`} onchange={handleInputChange} value={''} type="text"/>
+  {/each}
+{:else}
+  <Message type="info" message="No constructor arguments found" />
+{/if}
+
+  <div class="pt-2 flex">
     <input 
-      type="checkbox"
-      id="isDeterministic" 
-      checked={isDeterministic || enforceDeterministic} 
-      onchange={() => (isDeterministic = !isDeterministic)}
-      disabled={enforceDeterministic}
-    >
-    <label class="text-xs absolute bottom-1 left-4" for="isDeterministic">
+    type="checkbox"
+    id="isDeterministic" 
+    checked={isDeterministic || enforceDeterministic} 
+    onchange={() => (isDeterministic = !isDeterministic)}
+    disabled={enforceDeterministic}
+  >
+    <label class="text-sm left-4 pl-2" for="isDeterministic">
       Deterministic
     </label>
   </div>
@@ -342,14 +351,7 @@
     <Message message={compilationError} type="error" />
   {/if}
 
-  {#if inputs.length > 0}
-    <h6 class="text-sm">Constructor Arguments</h6>
-    {#each inputs as input}
-      <Input name={input.name} placeholder={`${input.name} (${input.type})`} onchange={handleInputChange} value={''} type="text"/>
-    {/each}
-  {:else}
-    <Message type="info" message="No constructor arguments found" />
-  {/if}
+
 
   <Button disabled={!globalState.authenticated || busy} loading={busy} label="Deploy" onClick={triggerDeploy} />
 
diff --git a/src/lib/wizard/components/shared/Button.svelte b/src/lib/wizard/components/shared/Button.svelte
index 2978756..93d6ac2 100644
--- a/src/lib/wizard/components/shared/Button.svelte
+++ b/src/lib/wizard/components/shared/Button.svelte
@@ -15,7 +15,7 @@
     if (type === 'secondary') {
       return 'bg-transparent text-gray-800 text-sm border border-gray-800 rounded-md p-2 mt-2';
     }
-    return 'bg-blue-600 text-white text-sm rounded-md p-2 mt-2';
+    return 'bg-indigo-600 text-white text-sm rounded-md p-2 mt-2';
   });
 </script>
 
diff --git a/src/routes/wizard.svelte b/src/routes/wizard.svelte
index 7a1bd18..1ba981c 100644
--- a/src/routes/wizard.svelte
+++ b/src/routes/wizard.svelte
@@ -35,7 +35,7 @@
       class:cursor-not-allowed={!globalState.authenticated}
       class:text-gray-300={!globalState.authenticated}
     >
-      <span>Network</span>
+      <h1>Network</h1>
       <i class={`pr-2 ${currentStep === 1 ? "fa fa-angle-down" : "fa fa-angle-right"}`}></i>
     </button>
     <div class:hidden={!(currentStep === 1)} >
@@ -65,7 +65,7 @@
       class:cursor-not-allowed={!globalState.authenticated}
       class:text-gray-300={!globalState.authenticated}
     >
-    <span>Deploy</span>
+    <h1>Deploy</h1>
       <i class={`pr-2 ${currentStep === 3 ? "fa fa-angle-down" : "fa fa-angle-right"}`}></i>
     </button>
     <div class:hidden={!(currentStep === 3)}>
@@ -76,13 +76,13 @@
   </div>
 </div>
 <style>
-  h1 {
+  button h1 {
     margin-top: 0;
     margin-bottom: 0;
     text-transform: lowercase;
     font-variant: small-caps;
     font-size: 14px;
-    color: rgb(129, 137, 152);
+    /* color: rgb(129, 137, 152); */
     font-weight: 600;
   }
   </style>
\ No newline at end of file