fix: modified stylings for small screen devices (AstarNetwork#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

@@ -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 {

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;
   }

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;
 

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;
 

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;
+  }
 }
 </style>

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;

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);
     };
 

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;
 

src/hooks/dapps-staking/useStakerInfo.ts

@@ -23,7 +23,6 @@ export function useStakerInfo() {
   const myStakeInfos = ref<MyStakeInfo[]>();
   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[] = [];

src/hooks/useClaimAll.ts

@@ -27,7 +27,7 @@ export function useClaimAll() {
   const amountOfEras = ref<number>(0);
   const canClaim = ref<boolean>(false);
   const canClaimWithoutError = ref<boolean>(true);
-  const isLoading = ref<boolean>(true);
+  const isLoading = ref<boolean>(false);
   const store = useStore();
   const senderAddress = computed(() => store.getters['general/selectedAddress']);
   const dapps = computed<DappCombinedInfo[]>(() => store.getters['dapps/getAllDapps']);
@@ -97,7 +97,7 @@ export function useClaimAll() {
     }
   };
 
-  watch([isSendingTx, senderAddress], updateClaimEras);
+  watch([isSendingTx, senderAddress, era], updateClaimEras);
 
   const claimAll = async (): Promise<void> => {
     const api = $api;