fix: change merge switch style

zkLinkProtocol · Apr 7, 2024 · 057f998 · 057f998
1 parent fc3cd08
commit 057f998
Showing 1 changed file with 29 additions and 8 deletions.
diff --git a/views/transactions/Deposit.vue b/views/transactions/Deposit.vue
@@ -119,14 +119,6 @@
             </div>
           </template>
         </CommonInputTransactionAddress>
-        <div class="flex justify-between gap-3 sm:mt-block-gap" v-if="mergeSupported">
-          <CommonButton class="flex-1" :class="{ merge: isMerge }" @click="isMerge = true">
-            Merge <img src="/img/Shape.svg" class="ml-2 h-3 w-3" alt="" />
-          </CommonButton>
-          <CommonButton class="flex-1" :class="{ notMerge: !isMerge }" @click="isMerge = false">
-            Not Merge <img src="/img/Shape.svg" class="ml-2 h-3 w-3" alt="" />
-          </CommonButton>
-        </div>
         <CommonButton
           v-if="tokenCustomBridge"
           type="submit"
@@ -220,6 +212,17 @@
             <NuxtLink :to="{ name: 'receive-methods' }" class="alert-link">Receive funds</NuxtLink>
           </CommonAlert>
         </transition>
+        <div class="flex justify-between gap-3 sm:mt-2" v-if="mergeSupported">
+          <CommonButtonLabel as="span" class="text-left relative showTip">
+            Merge Token <img src="/img/Shape.svg" class="ml-1 h-3 w-3 inline-block" alt="" />
+            <div class="tooltip">
+              All supported source tokens with the same entity from different networks can be merged into a single merged token. <a href="https://docs.zklink.io/how-it-works/token-merge" target="_blank">Learn More</a>.
+            </div>
+          </CommonButtonLabel>
+          <CommonButtonLabel as="span" class="text-right">
+            {{ isMerge?'Merge':'Not Merge' }} <span class="underline cursor-pointer"  @click="isMerge = !isMerge">Switch</span>
+          </CommonButtonLabel>
+        </div>
         <CommonErrorBlock v-if="allowanceRequestError" class="mt-2" @try-again="requestAllowance">
           Checking allowance error: {{ allowanceRequestError.message }}
         </CommonErrorBlock>
@@ -957,4 +960,22 @@ onboardStore.subscribeOnNetworkChange((newchainId) => {
   border-radius: 16px;
   background: rgba(23, 85, 244, 0.25) !important;
 }
+.showTip:hover{
+  .tooltip{
+    display: block;
+  }
+}
+.tooltip{
+  display: none;
+  position: absolute;
+  padding: 12px 20px 12px 24px;
+  top: -4.5rem;
+  width: 35rem;
+  left: -10rem;
+  border-radius: 8px;
+  background: #1F2127;
+  a{
+    color: #1755F4;
+  }
+}
 </style>