UI clean up cross chain sync

balancer · Jun 21, 2023 · 7b3d222 · 7b3d222
1 parent 7ba06d3
commit 7b3d222
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 19 deletions.
diff --git a/src/components/_global/BalCheckbox/BalCheckbox.vue b/src/components/_global/BalCheckbox/BalCheckbox.vue
@@ -148,7 +148,7 @@ export default defineComponent({
 }
 
 .bal-checkbox-input {
-  @apply text-blue-600 dark:text-blue-400 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600
+  @apply text-blue-600 dark:text-blue-400 bg-white dark:bg-gray-700 border border-gray-500 dark:border-gray-500
     rounded leading-none;
 
   appearance: none;

diff --git a/src/components/contextual/pages/vebal/cross-chain-boost/CrossChainBoostCards.vue b/src/components/contextual/pages/vebal/cross-chain-boost/CrossChainBoostCards.vue
@@ -122,7 +122,7 @@ function onCloseModal() {
                   <img
                     :src="buildNetworkIconURL(network)"
                     alt=""
-                    class="rounded-full w-[32px]"
+                    class="p-0.5 rounded-full w-[32px]"
                   />
                 </IconLoaderWrapper>
               </div>

diff --git a/src/components/contextual/pages/vebal/cross-chain-boost/SyncNetworkAction.vue b/src/components/contextual/pages/vebal/cross-chain-boost/SyncNetworkAction.vue
@@ -103,8 +103,8 @@ const networkSyncSteps = computed(() => {
 
 <template>
   <div class="flex flex-col">
-    <div class="mb-1.5 text-lg font-bold">Sync veBAL</div>
-    <div class="mb-5 text-sm text-gray-600">
+    <div class="mb-2 text-lg font-bold">Sync veBAL</div>
+    <div class="mb-5 text-sm text-secondary">
       {{ $t('crossChainBoost.syncNetworkAction.title') }}
     </div>
 
@@ -114,29 +114,31 @@ const networkSyncSteps = computed(() => {
       class="mb-4 rounded-lg border-2 border-gray-200 dark:border-gray-800"
     >
       <div
-        class="flex items-center py-1 px-4 border-b-2 border-gray-200 dark:border-gray-800 bg-slate-100 dark:bg-slate-800"
+        class="flex items-center py-1 px-3 border-b-2 border-gray-200 dark:border-gray-800 bg-slate-100 dark:bg-slate-800"
       >
         <img
           :src="buildNetworkIconURL(network)"
           alt=""
-          class="mr-2 w-8 h-8 rounded-full cursor-pointer"
+          class="p-0.5 mr-2 w-8 h-8 rounded-full cursor-pointer"
         />
         <div class="font-semibold">{{ configs[network].chainName }}</div>
       </div>
 
       <div>
         <div class="flex border-b-2 last:border-b-0 dark:border-gray-800">
           <div class="p-4 w-6/12 text-gray-600 border-r-2 dark:border-gray-800">
-            <div class="font-medium dark:text-gray-300">
+            <div class="text-sm font-medium text-secondary">
               {{ $t('crossChainBoost.currentBalance') }}
             </div>
-            <div class="font-bold text-black dark:text-white">
+            <div class="text-lg font-semibold text-black dark:text-white">
               {{ l2VeBalBalances?.[network] || '0.0000' }} veBAL
             </div>
           </div>
-          <div class="p-4 w-6/12 text-gray-600 dark:text-gray-300">
-            <div>{{ $t('crossChainBoost.postSyncBalance') }}</div>
-            <div class="font-bold text-black dark:text-white">
+          <div class="p-4 w-6/12 text-secondary">
+            <div class="text-sm font-medium text-secondary">
+              {{ $t('crossChainBoost.postSyncBalance') }}
+            </div>
+            <div class="text-lg font-semibold text-black dark:text-white">
               {{ veBalBalance || '0.0000' }} veBAL
             </div>
           </div>

diff --git a/src/components/contextual/pages/vebal/cross-chain-boost/SyncSelectNetwork.vue b/src/components/contextual/pages/vebal/cross-chain-boost/SyncSelectNetwork.vue
@@ -35,18 +35,20 @@ async function syncNetworks() {
       {{ $t('crossChainBoost.selectNetworkModal.title') }}
     </div>
 
-    <div class="mb-5 text-sm text-gray-600">
+    <div class="mb-5 text-sm text-secondary">
       {{ $t('crossChainBoost.selectNetworkModal.description') }}
     </div>
 
     <div
-      class="flex justify-between p-4 mb-3 rounded-lg border-2 border-gray-200 dark:border-gray-800 bg-slate-100 dark:bg-slate-800"
+      class="flex justify-between p-4 -mb-0.5 rounded-t-lg border-2 border-gray-200 dark:border-gray-800 bg-slate-100 dark:bg-slate-800"
     >
-      <span>Ethereum</span>
-      <div class="text-gray-600">{{ veBalBalance }} veBal</div>
+      <span class="font-semibold">Ethereum</span>
+      <div class="font-semibold">{{ veBalBalance }} veBAL</div>
     </div>
 
-    <div class="mb-5 rounded-lg border-2 border-gray-200 dark:border-gray-800">
+    <div
+      class="mb-5 rounded-b-lg border-2 border-gray-200 dark:border-gray-800"
+    >
       <div
         v-for="network in veBalSyncSupportedNetworks"
         :key="network"
@@ -68,10 +70,11 @@ async function syncNetworks() {
             :name="network.toString()"
             :modelValue="chosenNetworks.has(network)"
             :label="configs[network].chainName"
+            class="font-medium"
             @input="toggleNetwork(network)"
           />
-          <div class="text-gray-600">
-            {{ l2VeBalBalances?.[network] || '0.0000' }} veBal
+          <div class="font-medium">
+            {{ l2VeBalBalances?.[network] || '0.0000' }} veBAL
           </div>
         </div>
       </div>

diff --git a/src/locales/default.json b/src/locales/default.json
@@ -261,7 +261,7 @@
     },
     "selectNetworkModal": {
       "title": "Sync veBAL: Select networks",
-      "description": "Layer 2 (L2) networks don’t know your veBAL balance on Ethereum, unless you sync it. On any L2 where you stake, sync your veBAL balance to get your max possible boost. Resync after acquiring more veBAL to continue your max boost. Note: Each network to sync costs more gas."
+      "description": "Layer 2 (L2) networks don’t know your veBAL balance from Ethereum, unless you sync it. Each network costs additional gas to sync, so it’s best to only sync networks where you plan to stake."
     },
     "syncNetworkModal": {
       "title": "Sync veBal",