Refactor UI styles and update builders' components logic.

Adjusted font weights to enforce consistent styling across text elements. Enhanced builders-related modals and components for better data binding and user feedback. Introduced a new icon for improved accessibility and added new localization strings for withdrawal functionality.
MorpheusAIs · Feb 18, 2025 · 1364af2 · 1364af2
1 parent 06861e6
commit 1364af2
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 38 deletions.
diff --git a/src/assets/icons/material-symbols-info-icon.svg b/src/assets/icons/material-symbols-info-icon.svg
diff --git a/src/common/ChainNetworkBadge.vue b/src/common/ChainNetworkBadge.vue
@@ -6,7 +6,7 @@
       :alt="chainDetails?.chainName"
     />
 
-    <span class="font-bold text-textSecondaryMain typography-body3">
+    <span class="!font-bold text-textSecondaryMain typography-body3">
       {{ chainDetails?.chainName }}
     </span>
   </div>

diff --git a/src/enums/icon-names.enum.ts b/src/enums/icon-names.enum.ts
@@ -28,4 +28,5 @@ export enum ICON_NAMES {
   link = 'link',
   info = 'info',
   arrowUp = 'arrow-up',
+  materialSymbolsInfo = 'material-symbols-info',
 }
diff --git a/src/localization/resources/en.json b/src/localization/resources/en.json
@@ -895,6 +895,7 @@
     "balance-after-withdrawal-lbl": "Stake After Withdrawal",
     "balance-after-withdrawal-value": "{amount} MOR",
     "withdraw-amount-plh": "MOR amount",
+    "withdraw-amount-note": "Enter the number of tokens you want to withdraw",
     "withdraw-amount-max-btn": "max",
     "available-to-withdraw-balance": "Available to Withdraw",
     "available-to-withdraw-amount": "{amount} MOR",

diff --git a/src/pages/Builders/components/BuildersStakeModal.vue b/src/pages/Builders/components/BuildersStakeModal.vue
@@ -64,11 +64,11 @@
             <span class="text-textSecondaryMain typography-body3">
               {{ $t('builders-stake-modal.power-factor-lbl') }}
             </span>
-            <v-dropdown class="size-6">
+            <v-dropdown class="flex size-6 items-center justify-center">
               <!-- This will be the popover target (for the events and position) -->
               <button type="button" class="text-textSecondaryMain">
                 <app-icon
-                  :name="$icons.info"
+                  :name="$icons.materialSymbolsInfo"
                   class="color-textSecondaryMain size-4"
                 />
               </button>
@@ -81,7 +81,7 @@
             </v-dropdown>
           </div>
           <div class="flex items-center gap-2">
-            <span class="font-bold text-textSecondaryMain typography-body3">
+            <span class="!font-bold text-textSecondaryMain typography-body3">
               {{
                 $t('builders-stake-modal.power-factor-value', {
                   powerFactor: formatAmount(potentialPowerFactor, 25),
@@ -108,7 +108,7 @@
           <span class="text-textSecondaryMain typography-body3">
             {{ el.label }}
           </span>
-          <span class="font-bold text-textSecondaryMain typography-body3">
+          <span class="!font-bold text-textSecondaryMain typography-body3">
             {{ el.value }}
           </span>
         </div>
@@ -123,7 +123,7 @@
           <span class="text-textSecondaryMain typography-body3">
             {{ el.label }}
           </span>
-          <span class="font-bold text-textSecondaryMain typography-body3">
+          <span class="!font-bold text-textSecondaryMain typography-body3">
             {{ el.value }}
           </span>
         </div>
@@ -275,7 +275,7 @@ const { getFieldErrorMessage, isFieldsValid, isFormValid, touchField } =
 const { data: potentialPowerFactor } = useLoad(
   '',
   async () => {
-    if (!buildersSubnetUserAccount.value) return ''
+    if (!buildersSubnetUserAccount.value || !props.isShown) return ''
 
     let to = 1
 

diff --git a/src/pages/Builders/pages/BuildersItem/components/BuilderWithdrawModal.vue b/src/pages/Builders/pages/BuildersItem/components/BuilderWithdrawModal.vue
@@ -7,11 +7,27 @@
     :has-close-button="!isSubmitting"
   >
     <form @submit.prevent="submit" class="max-h-[80dvh] overflow-auto">
+      <div class="mt-8 flex items-center justify-between">
+        <span class="text-textSecondaryMain typography-body3">
+          {{ $t('builder-withdraw-modal.available-to-withdraw-balance') }}
+        </span>
+        <span class="!font-bold text-textSecondaryMain typography-body3">
+          {{
+            $t('builder-withdraw-modal.available-to-withdraw-amount', {
+              amount: formatAmount(buildersSubnetUserAccount?.staked ?? 0, 18, {
+                decimals: 18,
+              }),
+            })
+          }}
+        </span>
+      </div>
+
       <div class="mt-8 flex flex-col gap-5">
         <div class="flex flex-col items-end gap-3">
           <input-field
             v-model="form.withdrawAmount"
             :placeholder="$t('builder-withdraw-modal.withdraw-amount-plh')"
+            :note="$t('builder-withdraw-modal.withdraw-amount-note')"
             :error-message="getFieldErrorMessage('withdrawAmount')"
             @blur="touchField('withdrawAmount')"
             :disabled="isSubmitting"
@@ -27,25 +43,6 @@
               </button>
             </template>
           </input-field>
-
-          <div class="flex items-center justify-between gap-2">
-            <span class="stake-modal__details-label">
-              {{ $t('builder-withdraw-modal.available-to-withdraw-balance') }}
-            </span>
-            <span class="stake-modal__details-value">
-              {{
-                $t('builder-withdraw-modal.available-to-withdraw-amount', {
-                  amount: formatAmount(
-                    buildersSubnetUserAccount?.staked ?? 0,
-                    18,
-                    {
-                      decimals: 18,
-                    },
-                  ),
-                })
-              }}
-            </span>
-          </div>
         </div>
       </div>
 
@@ -58,7 +55,7 @@
           <span class="text-textSecondaryMain typography-body3">
             {{ el.label }}
           </span>
-          <span class="font-bold text-textSecondaryMain typography-body3">
+          <span class="!font-bold text-textSecondaryMain typography-body3">
             {{ el.value }}
           </span>
         </div>
@@ -73,7 +70,7 @@
           <span class="text-textSecondaryMain typography-body3">
             {{ el.label }}
           </span>
-          <span class="font-bold text-textSecondaryMain typography-body3">
+          <span class="!font-bold text-textSecondaryMain typography-body3">
             {{ el.value }}
           </span>
         </div>

diff --git a/src/pages/Builders/pages/BuildersItem/components/BuildersClaimModal.vue b/src/pages/Builders/pages/BuildersItem/components/BuildersClaimModal.vue
@@ -23,7 +23,7 @@
           <span class="text-textSecondaryMain typography-body3">
             {{ el.label }}
           </span>
-          <span class="font-bold text-textSecondaryMain typography-body3">
+          <span class="!font-bold text-textSecondaryMain typography-body3">
             {{ el.value }}
           </span>
         </div>
@@ -40,22 +40,24 @@
           >
             {{ el.label }}
           </span>
-          <span class="font-bold text-textSecondaryMain typography-body3">
+          <span class="!font-bold text-textSecondaryMain typography-body3">
             {{ el.value }}
           </span>
         </div>
 
         <div class="my-2 h-[1px] w-full bg-backgroundPrimaryMain opacity-20" />
 
         <div
-          class="flex items-center justify-between"
+          class="flex items-start justify-between"
           v-for="(el, i) in builderDetails.slice(5)"
           :key="i"
         >
-          <span class="text-textSecondaryMain typography-body3">
+          <span class="whitespace-nowrap text-textSecondaryMain typography-h4">
             {{ el.label }}
           </span>
-          <span class="font-bold text-textSecondaryMain typography-body3">
+          <span
+            class="text-right !font-bold text-textSecondaryMain typography-h4"
+          >
             {{ el.value }}
           </span>
         </div>

diff --git a/src/pages/Builders/pages/BuildersItem/index.vue b/src/pages/Builders/pages/BuildersItem/index.vue
@@ -601,7 +601,7 @@ const stakersOrderBy = ref<BuilderUser_OrderBy>(
 )
 const stakersOrderDirection = ref<OrderDirection>(OrderDirection.Asc)
 
-const selectedClaimReceiver = ref('')
+const selectedClaimReceiver = ref(provider.value.selectedAddress)
 
 const {
   data: buildersData,

diff --git a/src/pages/Builders/pages/BuildersList/index.vue b/src/pages/Builders/pages/BuildersList/index.vue
@@ -537,9 +537,10 @@ const { data: listData, ...builderSubnetsState } =
         ...el,
         chain: targetNetworkForSelectedBuildersApolloClient.value,
       }))
-      const userAccountBuilderSubnets = data.builderUsers.map(
-        el => el.builderSubnet,
-      )
+      const userAccountBuilderSubnets = data.builderUsers.map(el => ({
+        ...el.builderSubnet,
+        chain: targetNetworkForSelectedBuildersApolloClient.value,
+      }))
       const buildersCounters = data.counters[0]
 
       return {

diff --git a/src/theme/config/typography.ts b/src/theme/config/typography.ts
@@ -27,9 +27,34 @@ export const typography: CSSRuleObject = {
     fontWeight: '600',
     lineHeight: '34px',
   },
+  '.typography-body1': {
+    fontWeight: '400',
+    fontSize: '22px',
+    lineHeight: '32px',
+  },
+  '.typography-body2': {
+    fontWeight: '400',
+    fontSize: '20px',
+    lineHeight: '30px',
+  },
   '.typography-body3': {
     fontSize: '18px',
-    fontWeight: '400',
     lineHeight: '26px',
+    fontWeight: '400',
+  },
+  '.typography-body4': {
+    fontWeight: '400',
+    fontSize: '16px',
+    lineHeight: '22px',
+  },
+  '.typography-body5': {
+    fontWeight: '400',
+    fontSize: '14px',
+    lineHeight: '20px',
+  },
+  '.typography-body6': {
+    fontWeight: '400',
+    fontSize: '12px',
+    lineHeight: '16px',
   },
 }