Update UI button labels (#487)

Author: ericglau

packages/ui/src/common/icons/WizIcon.svelte

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+<svg xmlns="http://www.w3.org/2000/svg" class="vertical-align" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
   <path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z"/>
   <path d="m14 7 3 3"/>
   <path d="M5 6v4"/>

packages/ui/src/common/icons/XIcon.svelte

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+<svg xmlns="http://www.w3.org/2000/svg" class="vertical-align" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
   <path d="M18 6 6 18"/>
   <path d="m6 6 12 12"/>
 </svg>

packages/ui/src/common/styles/global.css

@@ -13,6 +13,10 @@ body {
   font-family: var(--sans-serif);
 }
 
+svg.vertical-align {
+  vertical-align: calc(-1 * var(--icon-adjust));
+}
+
 svg.keepcolor {
   fill: currentColor;
 }

packages/ui/src/solidity/App.svelte

@@ -335,10 +335,9 @@
           class="action-button"
           class:disabled={opts?.upgradeable === "transparent"}
           on:click={remixHandler}
-          title="Open in Remix"
         >
           <RemixIcon />
-          
+          Open in Remix
         </button>
         <div slot="content">
           Transparent upgradeable contracts are not supported on Remix.
@@ -437,7 +436,7 @@
             }
           }
         >
-          Deploy with Defender
+        <ArrowsLeft /> Deploy
         </button>
       </div>
       {/if}

packages/ui/src/solidity/DefenderDeployModal.svelte

@@ -23,7 +23,7 @@
 
 {#if isOpen}
   <div 
-    class="fixed right-3.5 rounded-r-3xl h-[calc(100vh-84px)] w-[360px] bg-white z-20"
+    class="fixed right-3.5 rounded-r-3xl h-[calc(100vh-84px)] w-[360px] bg-white z-30"
     transition:fly={{x: 380, duration: 450 }}
   >
     <div class="p-2 h-full flex flex-col">
@@ -40,7 +40,7 @@
   id="defender-deploy"
   title="Defender Deploy"
   src={devMode ? 'http://localhost:5173' : 'https://defender-deploy-wizard.netlify.app/'}
-  class={`fixed z-30 right-3.5 w-[360px] h-[calc(100vh-84px)] border-none 
+  class={`fixed z-30 right-3.5 w-[360px] h-[calc(100vh-84px)] border-none
     ${!showIframe ? 'invisible' : ''} 
     ${!loaded ? 'hidden' : ''}`}
   on:load={handleLoad}

packages/ui/src/solidity/Wiz.svelte

@@ -155,7 +155,7 @@
 </script>
 
 <div class="absolute bottom-8 right-8 h-[calc(100%-188px)]">
-  <div class={`${showing ? '' : 'hidden'} ${expanded ? 'w-[40rem]' : 'w-80'} max-w-[400px] min-h-[200px] absolute flex flex-col-reverse right-0 bottom-[4.5rem] border-0 shadow-xl bg-gray-50 rounded-md animate-fade-up max-h-full overflow-y-auto z-50`}>
+  <div class={`${showing ? '' : 'hidden'} ${expanded ? 'w-[40rem]' : 'w-80'} max-w-[400px] min-h-[200px] absolute flex flex-col-reverse right-0 bottom-[3.75rem] border-0 shadow-xl bg-gray-50 rounded-md animate-fade-up max-h-full overflow-y-auto z-20`}>
     <div class={`flex flex-col-reverse gap-3 overflow-y-auto p-4 h-[calc(100%-800px)]`}>
       <div class="w-full flex items-center justify-between gap-2">
         <textarea bind:value={input} on:keypress={listener} placeholder="Ask me anything..." class="w-full text-sm shadow-lg h-32 p-4 rounded-md outline-none border-0 resize-none" />
@@ -235,17 +235,21 @@
       </div>
     </div>
   </div>
-  <button class="z-50 absolute flex right-0 bottom-0 items-center justify-center border-0 shadow-xl bg-gray-50 h-16 w-16 p-4 rounded-full cursor-pointer hover:bg-white" on:click={() => {
-    showing = !showing
-  }}>
-    {#if showing}
+  {#if showing}
+    <button class="text-sm z-20 absolute flex right-0 bottom-1 items-center justify-center border-0 shadow-xl bg-gray-50 h-10 w-10 p-4 rounded-full cursor-pointer hover:bg-white" on:click={() => {
+      showing = false
+    }}>
       <div class="animate-fade-in">
         <XIcon />
       </div>
-    {:else}
-      <div class="animate-fade-in" title="AI Assistant">
-        <WizIcon />
+    </button>
+  {:else}
+    <button class="text-sm z-20 absolute flex right-0 bottom-1 items-center justify-center border-0 shadow-xl bg-gray-50 h-10 w-32 p-4 rounded-full cursor-pointer hover:bg-white" on:click={() => {
+      showing = true
+    }}>
+      <div class="animate-fade-in">
+        <WizIcon /> AI Assistant
       </div>
-    {/if}
-  </button>
+    </button>
+  {/if}
 </div>