Merge pull request #1507 from sultanmyrza/feature-adjust-wallet-page-and-transfer-page-UI-for-screen-size-less-than-360px-with-media-query

Feature adjust wallet page and transfer page UI for screen size less than 360px with media query

Author: shc261392

src/app/features/wallets/transfer/transfer.page.html

@@ -94,11 +94,11 @@ <h5>
           <ion-icon name="wallet"></ion-icon>
         </ion-col>
         <ion-col size="5" *ngrxLet="gasFee$ as gasFee">
-          <h6>
+          <h6 class="gas-fee-text">
             {{ t('wallets.gasFee') }}:
             {{ gasFee > 0 ? (gasFee | number: '1.2-2') : t('wallets.pending') }}
           </h6>
-          <h4>
+          <h4 class="wallet-total-text">
             {{ t('wallets.total') }} {{ totalCost$ | ngrxPush | currency }}
           </h4>
         </ion-col>

src/app/features/wallets/transfer/transfer.page.scss

@@ -32,12 +32,24 @@ ion-card {
     margin-bottom: 0;
   }
 
+  h6.gas-fee-text {
+    @media (max-width: 360px) {
+      font-size: 14px;
+    }
+  }
+
   h4 {
     margin-top: 2%;
     font-weight: bold;
     letter-spacing: 0.02em;
   }
 
+  h4.wallet-total-text {
+    @media (max-width: 360px) {
+      font-size: 14px;
+    }
+  }
+
   #deposit-withdraw-btn-col {
     padding-left: 0;
     padding-right: 0;
@@ -53,6 +65,10 @@ ion-card {
     width: 80%;
 
     --border-radius: 10px;
+
+    @media (max-width: 360px) {
+      font-size: 12px;
+    }
   }
 }
 
@@ -73,6 +89,16 @@ ion-card {
       margin-top: 0;
       font-weight: bold;
       letter-spacing: 0.02em;
+
+      @media (max-width: 360px) {
+        font-size: 16px;
+      }
+    }
+
+    h1 {
+      @media (max-width: 360px) {
+        font-size: 20px;
+      }
     }
   }
 

src/app/features/wallets/wallets.page.html

@@ -16,14 +16,16 @@
       <ion-row>
         <ion-col size="8">
           <ion-text class="text-black">
-            <h1>{{ totalBalance$ | ngrxPush | currency }} NUM</h1>
+            <h1 class="balance-text">
+              {{ totalBalance$ | ngrxPush | currency }} NUM
+            </h1>
           </ion-text>
         </ion-col>
         <ion-col offset="0.3">
           <ion-row id="num-icon-row">
             <ion-img src="../../../assets/images/num-icon.svg"></ion-img>
             <ion-text class="text-black">
-              <h3>NUM</h3>
+              <h3 class="num-text">NUM</h3>
             </ion-text>
           </ion-row>
         </ion-col>

src/app/features/wallets/wallets.page.scss

@@ -33,18 +33,32 @@ ion-card {
     margin-left: 12px;
     margin-right: 8px;
 
+    h1.balance-text {
+      @media (max-width: 360px) {
+        font-size: 20px;
+      }
+    }
+
     #num-icon-row {
       ion-img {
         margin-top: 10px;
         width: 29px;
+
+        @media (max-width: 360px) {
+          width: 20px;
+        }
       }
 
-      h3 {
+      h3.num-text {
         flex: none;
         order: 1;
         flex-grow: 0;
         margin-top: 21px;
         margin-left: 7px;
+
+        @media (max-width: 360px) {
+          font-size: 20px;
+        }
       }
     }