From 725032d9c00bc0a9da9027b92ad749e773969f38 Mon Sep 17 00:00:00 2001 From: impelcrypto <92044428+impelcrypto@users.noreply.github.com> Date: Wed, 24 May 2023 00:33:04 -0700 Subject: [PATCH] fix: modified stylings for small screen devices (#807) * fix: input box size for small screen devices * fix: loading staking information * fix: initial state of isLoading in useClaimAll * refactor: clean up * fix: fetch unclaimed rewards * fix: align the buttons on assets page for mobile devices * fix: theme switch icon when light theme for mobile screen devices * fix: round up the number of total page on On-Chain Data panel --- src/components/assets/NativeAssetList.vue | 4 +++- src/components/assets/styles/asset-list.scss | 4 ++++ .../assets/transfer/styles/local-transfer.scss | 1 - .../assets/transfer/styles/xcm-bridge.scss | 1 - src/components/common/LightDarkMode.vue | 17 +++++++++++++++-- .../common/styles/speed-configuration.scss | 1 - .../dapp-staking/my-staking/OnChainData.vue | 2 +- .../stake-manage/styles/stake-form.scss | 1 - src/hooks/dapps-staking/useStakerInfo.ts | 1 - src/hooks/useClaimAll.ts | 4 ++-- 10 files changed, 25 insertions(+), 11 deletions(-) diff --git a/src/components/assets/NativeAssetList.vue b/src/components/assets/NativeAssetList.vue index 78f1a85cf..9e317af96 100644 --- a/src/components/assets/NativeAssetList.vue +++ b/src/components/assets/NativeAssetList.vue @@ -315,7 +315,9 @@ export default defineComponent({ bal.value = Number(ethers.utils.formatEther(balance.value.toString())); isShibuya.value = tokenSymbolRef === 'SBY'; isRocstar.value = tokenSymbolRef === 'RSTR'; - isFaucet.value = isRocstar ? false : isShibuya.value || faucetBalRequirement > bal.value; + isFaucet.value = isRocstar.value + ? false + : isShibuya.value || faucetBalRequirement > bal.value; if (nativeTokenUsd.value) { balUsd.value = nativeTokenUsd.value * bal.value; } else { diff --git a/src/components/assets/styles/asset-list.scss b/src/components/assets/styles/asset-list.scss index e6f753a2f..ec4b49b0a 100644 --- a/src/components/assets/styles/asset-list.scss +++ b/src/components/assets/styles/asset-list.scss @@ -256,6 +256,10 @@ } .column---title-button { + margin-right: -22px; + @media (min-width: $sm) { + margin-right: -64px; + } @media (min-width: $md) { margin-right: 8px; } diff --git a/src/components/assets/transfer/styles/local-transfer.scss b/src/components/assets/transfer/styles/local-transfer.scss index b5b8fcdbb..ec4aa48b2 100644 --- a/src/components/assets/transfer/styles/local-transfer.scss +++ b/src/components/assets/transfer/styles/local-transfer.scss @@ -11,7 +11,6 @@ row-gap: 12px; padding: 9px 15px; border-radius: 6px; - width: 320px; height: 88px; background: transparent; diff --git a/src/components/assets/transfer/styles/xcm-bridge.scss b/src/components/assets/transfer/styles/xcm-bridge.scss index 4b146c091..410a695b6 100644 --- a/src/components/assets/transfer/styles/xcm-bridge.scss +++ b/src/components/assets/transfer/styles/xcm-bridge.scss @@ -11,7 +11,6 @@ row-gap: 12px; padding: 9px 15px; border-radius: 6px; - width: 320px; height: 88px; background: transparent; diff --git a/src/components/common/LightDarkMode.vue b/src/components/common/LightDarkMode.vue index 785019b62..c45b5ac3f 100644 --- a/src/components/common/LightDarkMode.vue +++ b/src/components/common/LightDarkMode.vue @@ -79,15 +79,28 @@ export default defineComponent({ .icon--selected { width: 20px; height: 20px; + stroke: $gray-5; cursor: default; - stroke: $gray-1; opacity: 0.4; + @media (min-width: $lg) { + stroke: $gray-1; + } } .icon { width: 20px; height: 20px; - stroke: $gray-1; + stroke: $gray-5; cursor: pointer; + @media (min-width: $lg) { + stroke: $gray-1; + } +} + +.body--dark { + .icon--selected, + .icon { + stroke: $gray-1; + } } diff --git a/src/components/common/styles/speed-configuration.scss b/src/components/common/styles/speed-configuration.scss index 8b424a3e6..d632ad77f 100644 --- a/src/components/common/styles/speed-configuration.scss +++ b/src/components/common/styles/speed-configuration.scss @@ -5,7 +5,6 @@ row-gap: 12px; padding: 9px 15px; border-radius: 6px; - width: 320px; background: transparent; border: 1px solid $navy-1; border-radius: 6px; diff --git a/src/components/dapp-staking/my-staking/OnChainData.vue b/src/components/dapp-staking/my-staking/OnChainData.vue index c711f0a16..0f74bdc80 100644 --- a/src/components/dapp-staking/my-staking/OnChainData.vue +++ b/src/components/dapp-staking/my-staking/OnChainData.vue @@ -223,7 +223,7 @@ export default defineComponent({ data.sort((a: Data, b: Data) => Number(a.balance) - Number(b.balance)); } - pageTtl.value = Number((data.length / numItems.value).toFixed(0)); + pageTtl.value = Math.ceil(data.length / numItems.value); dataArray.value = paginate(data, numItems.value, page.value); }; diff --git a/src/components/dapp-staking/stake-manage/styles/stake-form.scss b/src/components/dapp-staking/stake-manage/styles/stake-form.scss index e26877010..a17f6e478 100644 --- a/src/components/dapp-staking/stake-manage/styles/stake-form.scss +++ b/src/components/dapp-staking/stake-manage/styles/stake-form.scss @@ -11,7 +11,6 @@ row-gap: 12px; padding: 9px 15px; border-radius: 6px; - width: 320px; height: 88px; background: transparent; diff --git a/src/hooks/dapps-staking/useStakerInfo.ts b/src/hooks/dapps-staking/useStakerInfo.ts index bb83e1969..03433fd34 100644 --- a/src/hooks/dapps-staking/useStakerInfo.ts +++ b/src/hooks/dapps-staking/useStakerInfo.ts @@ -23,7 +23,6 @@ export function useStakerInfo() { const myStakeInfos = ref(); const isLoading = computed(() => store.getters['general/isLoading']); const dapps = computed(() => store.getters['dapps/getAllDapps']); - const isH160 = computed(() => store.getters['general/isH160Formatted']); const setStakeInfo = async () => { let data: StakeInfo[] = []; diff --git a/src/hooks/useClaimAll.ts b/src/hooks/useClaimAll.ts index 4f2916fb2..d0e1e1a29 100644 --- a/src/hooks/useClaimAll.ts +++ b/src/hooks/useClaimAll.ts @@ -27,7 +27,7 @@ export function useClaimAll() { const amountOfEras = ref(0); const canClaim = ref(false); const canClaimWithoutError = ref(true); - const isLoading = ref(true); + const isLoading = ref(false); const store = useStore(); const senderAddress = computed(() => store.getters['general/selectedAddress']); const dapps = computed(() => store.getters['dapps/getAllDapps']); @@ -97,7 +97,7 @@ export function useClaimAll() { } }; - watch([isSendingTx, senderAddress], updateClaimEras); + watch([isSendingTx, senderAddress, era], updateClaimEras); const claimAll = async (): Promise => { const api = $api;