Release Wizard

src/lib/wizard/components/ApprovalProcess.svelte

@@ -99,7 +99,8 @@
   );
 </script>
 
-<div class="form-check">
+<div class="form-check flex flex-col gap-2">
+  <div>
   <input
     class="form-check-input"
     type="radio"
@@ -110,8 +111,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
@@ -130,27 +131,29 @@
     />
   {/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}
->
-  <input
-    class="text-xs"
-    type="radio"
-    name="flexRadioDefault"
-    id="new"
-    onclick={(e) => onRadioChange(e)}
-    disabled={disableCreation}
-    title={disableCreation ? "Deploy Environment already exists" : undefined}
-  />
+><div>
+
   <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>
+  <div class="pl-4 gap-2 flex flex-col">
   <Dropdown
     items={approvalProcessTypes.map(approvalProcessTypeToDropdownItem)}
     placeholder="Approval Process Type"
@@ -163,7 +166,7 @@
   />
 
   {#if approvalProcessType === "EOA" || approvalProcessType === "Safe"}
-    <div class="mt-2">
+    <div>
       <Input value={address} placeholder="* Address" type="text" onchange={onAddressChange} />
     </div>
   {:else if approvalProcessType === "Relayer"}
@@ -183,7 +186,7 @@
       />
     {/if}
   {/if}
-</div>
+</div></div>
 <div class="form-check mt-3">
   <input
     class="form-check-input"

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" />

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} />
 

src/lib/wizard/components/shared/Button.svelte

@@ -9,19 +9,19 @@
   const { loading, onClick, label, disabled, type }: Props = $props();
 
   let buttonClass = $derived.by(() => {
-    if (loading) {
+    if (loading || disabled) {
       return 'bg-gray-400 text-white text-sm rounded-md p-2 mt-2';
     }
     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>
 
 <button onclick={onClick} disabled={disabled || loading} class={buttonClass}>
   {#if loading}
-    <i class="fa fa-spinner fa-spin"></i>
+    <i class="fa fa-circle-o-notch fa-spin"></i>
   {/if}
   {#if !loading}
     {label}

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,20 +82,20 @@
     <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}
           </button>
         {/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}

src/lib/wizard/components/shared/Input.svelte

@@ -15,7 +15,7 @@
 </script>
 
 {#if label}
-  <label class="text-xs" for="apiSecret">{label}</label>
+  <label class="text-sm" for="apiSecret">{label}</label>
 {/if}
 <input
   name={name}
@@ -24,5 +24,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"
 />

src/routes/wizard.svelte

@@ -20,7 +20,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)}>
@@ -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)} >
@@ -50,7 +50,7 @@
       class:cursor-not-allowed={!globalState.authenticated}
       class:text-gray-300={!globalState.authenticated}
     >
-      <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)}>
@@ -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)}>
@@ -75,3 +75,14 @@
     </div>
   </div>
 </div>
+<style>
+  button 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>