hide button moved

OpenZeppelin · Dec 9, 2024 · a33656f · a33656f
1 parent ad85dce
commit a33656f
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 29 deletions.
diff --git a/packages/ui/src/App.svelte b/packages/ui/src/App.svelte
@@ -332,28 +332,30 @@
 
     <div class="output rounded-r-3xl flex flex-col grow overflow-auto h-[calc(100vh-84px)] relative">
       <div class="
-      {showDeployModal ? '' : 'button-bg'}
+      {showDeployModal ? 'hide-deploy' : 'button-bg'}
         absolute
         p-px
         right-4
         rounded-full
         top-4
-        z-30 
+        z-10
         ">
       <button 
         class="text-sm
         border-solid
+        border
         p-2
         pr-4
-        pl-4
+
         rounded-full
         cursor-pointer
         flex items-center
         gap-2
-        {showDeployModal ? 'bg-white text-gray-800 border border-zinc-300' : 'bg-indigo-600 text-white border-indigo-600'}"
+        transition-all
+        {showDeployModal ? 'pl-2 bg-white border-white' : 'pl-4 bg-indigo-600 border-indigo-600 text-white'}"
         on:click={() => showDeployModal = !showDeployModal}
       >
-        {#if showDeployModal}Hide
+        {#if showDeployModal}<ArrowsRight/>
         {:else}Deploy with Defender
         {/if}
 
@@ -433,10 +435,38 @@
 .button-bg{
   animation: conic-effect 12s ease-in-out infinite;
   animation-delay: 4.2s;
-  background: conic-gradient(rgb(79, 70, 229) calc(var(--angle) - var(--spread)),#7E7ADA var(--angle),rgb(79, 70, 229) calc(var(--angle) + var(--spread)));
+  background: conic-gradient(#4f46e5 calc(var(--angle) - var(--spread)),#7E7ADA var(--angle),rgb(79, 70, 229) calc(var(--angle) + var(--spread)));
   box-shadow: var(--x) var(--y) var(--blur) #9793da45;
   display: inline-flex;
 }
+
+.button-bg:hover {
+  transform: translatex(-2px);;
+}
+
+.hide-deploy {
+  transform: translateX(-328px);
+  background-color: white; 
+  transition: transform 0.2s 300ms;
+
+}
+.hide-deploy button{
+  background-color: white;
+  border: 1px solid white;
+  /* transition: background-color 600ms linear; */
+}
+
+.hide-deploy:hover {
+  transform: translatex(-330px);
+}
+
+/* .button-bg button {
+  
+}
+.button-bg button:hover {
+  background-color: #453dd9;
+  border-color: #453dd9;
+} */
 /* end of the magic */
   .container {
     background-color: var(--gray-1);
@@ -509,11 +539,6 @@
     padding: var(--size-4);
   }
 
-  /* .controls, .output {
-    border-radius: 5px; 
-    box-shadow: var(--shadow);
-  }*/
-
   .controls-footer {
     display: flex;
     flex-direction: row;

diff --git a/packages/ui/src/DefenderDeployModal.svelte b/packages/ui/src/DefenderDeployModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { fly } from 'svelte/transition';
+  import { elasticIn } from 'svelte/easing';
 
   const devMode = window.location.href.includes('localhost');
 
@@ -14,8 +15,8 @@
 
 {#if isOpen}
   <div 
-    class="fixed right-0 h-[calc(100vh-84px)] w-[360px] bg-white z-20"
-    transition:fly={{ x: 360, duration: 200 }}
+    class="fixed right-4 rounded-r-3xl h-[calc(100vh-84px)] w-[360px] bg-white z-20"
+    transition:fly={{x: 380, duration: 450 }}
   >
     <div class="p-2 h-full flex flex-col">
       {#if !loaded}

diff --git a/packages/ui/src/cairo/App.svelte b/packages/ui/src/cairo/App.svelte
@@ -101,7 +101,7 @@
 
 </script>
 
-<div class="container flex flex-col gap-4 p-4">
+<div class="container flex flex-col gap-4 p-4 rounded-3xl">
   <div class="header flex flex-row justify-between">
     <div class="tab overflow-hidden">
       <OverflowMenu>
@@ -124,13 +124,13 @@
     </div>
 
     <div class="action flex flex-row gap-2 shrink-0">
-      <button class="action-button min-w-[165px]" on:click={copyHandler}>
+      <button class="action-button p-3 min-w-[40px]" on:click={copyHandler}>
         {#if copied}
           <CheckIcon />
-          Copied
+          <!-- Copied -->
         {:else}
           <CopyIcon />
-          Copy to Clipboard
+          <!-- Copy to Clipboard -->
         {/if}
       </button>
 
@@ -151,8 +151,8 @@
     </div>
   </div>
 
-  <div class="flex flex-row gap-4 grow">
-    <div class="controls w-64 flex flex-col shrink-0 justify-between h-[calc(100vh-84px)] overflow-auto">
+  <div class="flex flex-row grow">
+    <div class="controls rounded-l-3xl w-64 flex flex-col shrink-0 justify-between h-[calc(100vh-84px)] overflow-auto">
       <div class:hidden={tab !== 'ERC20'}>
         <ERC20Controls bind:opts={allOpts.ERC20} errors={errors.ERC20} />
       </div>
@@ -169,7 +169,7 @@
         <CustomControls bind:opts={allOpts.Custom} errors={errors.Custom}/>
       </div>
     </div>
-    <div class="output flex flex-col grow overflow-auto h-[calc(100vh-84px)]">
+    <div class="output rounded-r-3xl flex flex-col grow overflow-auto h-[calc(100vh-84px)]">
       <pre class="flex flex-col grow basis-0 overflow-auto"><code class="hljs grow overflow-auto p-4">{@html highlightedCode}</code></pre>
     </div>
   </div>
@@ -178,8 +178,8 @@
 <style lang="postcss">
   .container {
     background-color: var(--gray-1);
-    border: 1px solid var(--gray-2);
-    border-radius: 10px;
+    /* border: 1px solid var(--gray-2); */
+    /* border-radius: 10px; */
     min-width: 32rem;
   }
 
@@ -191,9 +191,9 @@
     color: var(--gray-5);
   }
 
-  .tab button, .action-button, :global(.overflow-btn) {
+  .tab button, :global(.overflow-btn) {
     padding: var(--size-2) var(--size-3);
-    border-radius: 6px;
+    border-radius: 12px;
     font-weight: bold;
     cursor: pointer;
   }
@@ -203,6 +203,11 @@
     background-color: transparent;
   }
 
+  .action-button {
+    padding: var(--size-2);
+    border-radius: 12px; 
+  }
+
   .tab button:hover, :global(.overflow-btn):hover {
     background-color: var(--gray-2);
   }
@@ -232,7 +237,7 @@
     }
 
     :global(.icon) {
-      margin-right: var(--size-1);
+      margin-right: 0 var(--size-1);
     }
   }
 
@@ -241,10 +246,6 @@
     padding: var(--size-4);
   }
 
-  .controls, .output {
-    border-radius: 5px;
-    box-shadow: var(--shadow);
-  }
 
   .controls-footer {
     display: flex;