From 1364af2fe8562f6ac38cf6513ebee1266395a56c Mon Sep 17 00:00:00 2001 From: lukachi Date: Tue, 18 Feb 2025 16:03:42 +0200 Subject: [PATCH] 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. --- .../icons/material-symbols-info-icon.svg | 5 +++ src/common/ChainNetworkBadge.vue | 2 +- src/enums/icon-names.enum.ts | 1 + src/localization/resources/en.json | 1 + .../components/BuildersStakeModal.vue | 12 +++--- .../components/BuilderWithdrawModal.vue | 39 +++++++++---------- .../components/BuildersClaimModal.vue | 12 +++--- .../Builders/pages/BuildersItem/index.vue | 2 +- .../Builders/pages/BuildersList/index.vue | 7 ++-- src/theme/config/typography.ts | 27 ++++++++++++- 10 files changed, 70 insertions(+), 38 deletions(-) create mode 100644 src/assets/icons/material-symbols-info-icon.svg diff --git a/src/assets/icons/material-symbols-info-icon.svg b/src/assets/icons/material-symbols-info-icon.svg new file mode 100644 index 00000000..02b041f1 --- /dev/null +++ b/src/assets/icons/material-symbols-info-icon.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/common/ChainNetworkBadge.vue b/src/common/ChainNetworkBadge.vue index 973b7300..411847a5 100644 --- a/src/common/ChainNetworkBadge.vue +++ b/src/common/ChainNetworkBadge.vue @@ -6,7 +6,7 @@ :alt="chainDetails?.chainName" /> - + {{ chainDetails?.chainName }} diff --git a/src/enums/icon-names.enum.ts b/src/enums/icon-names.enum.ts index 0a5a6f52..b73de13e 100644 --- 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 index 53b34e03..2a132802 100644 --- 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 index 3b7c21c0..10dbd516 100644 --- a/src/pages/Builders/components/BuildersStakeModal.vue +++ b/src/pages/Builders/components/BuildersStakeModal.vue @@ -64,11 +64,11 @@ {{ $t('builders-stake-modal.power-factor-lbl') }} - + @@ -81,7 +81,7 @@
- + {{ $t('builders-stake-modal.power-factor-value', { powerFactor: formatAmount(potentialPowerFactor, 25), @@ -108,7 +108,7 @@ {{ el.label }} - + {{ el.value }}
@@ -123,7 +123,7 @@ {{ el.label }} - + {{ el.value }} @@ -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 index 0b303507..19b6e57c 100644 --- 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" >
+
+ + {{ $t('builder-withdraw-modal.available-to-withdraw-balance') }} + + + {{ + $t('builder-withdraw-modal.available-to-withdraw-amount', { + amount: formatAmount(buildersSubnetUserAccount?.staked ?? 0, 18, { + decimals: 18, + }), + }) + }} + +
+
- -
- - {{ $t('builder-withdraw-modal.available-to-withdraw-balance') }} - - - {{ - $t('builder-withdraw-modal.available-to-withdraw-amount', { - amount: formatAmount( - buildersSubnetUserAccount?.staked ?? 0, - 18, - { - decimals: 18, - }, - ), - }) - }} - -
@@ -58,7 +55,7 @@ {{ el.label }} - + {{ el.value }} @@ -73,7 +70,7 @@ {{ el.label }} - + {{ el.value }} diff --git a/src/pages/Builders/pages/BuildersItem/components/BuildersClaimModal.vue b/src/pages/Builders/pages/BuildersItem/components/BuildersClaimModal.vue index 35e10412..5460351b 100644 --- a/src/pages/Builders/pages/BuildersItem/components/BuildersClaimModal.vue +++ b/src/pages/Builders/pages/BuildersItem/components/BuildersClaimModal.vue @@ -23,7 +23,7 @@ {{ el.label }} - + {{ el.value }} @@ -40,7 +40,7 @@ > {{ el.label }} - + {{ el.value }} @@ -48,14 +48,16 @@
- + {{ el.label }} - + {{ el.value }}
diff --git a/src/pages/Builders/pages/BuildersItem/index.vue b/src/pages/Builders/pages/BuildersItem/index.vue index 8acaa3c0..b44d0d34 100644 --- a/src/pages/Builders/pages/BuildersItem/index.vue +++ b/src/pages/Builders/pages/BuildersItem/index.vue @@ -601,7 +601,7 @@ const stakersOrderBy = ref( ) const stakersOrderDirection = ref(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 index 94fb4852..2d68bc59 100644 --- 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 index d406db1a..32b78bb6 100644 --- 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', }, }