UI tweaks

css/main.css

@@ -1008,7 +1008,7 @@ strip-option:last-of-type {
 #transaction,
 #account {
   grid-template-rows: auto 1fr;
-  gap: 1.5rem 0;
+  gap: 1rem 0;
   padding: 1.5rem 0;
   -ms-flex-line-pack: start;
       align-content: flex-start;
@@ -1021,6 +1021,10 @@ strip-option:last-of-type {
   grid-template-rows: auto 1fr;
 }
 
+.positive {
+  color: var(--green);
+}
+
 #transaction_top,
 #account_top {
   display: -webkit-box;
@@ -1058,10 +1062,20 @@ strip-option:last-of-type {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  font-size: 1.8rem;
+  font-size: 1.5rem;
   font-weight: 700;
 }
 
+#account_detail__interest_type,
+#account_detail__type {
+  color: rgba(var(--text-color), 0.8);
+  font-weight: 500;
+}
+
+#account_detail__interest {
+  font-size: 1.2rem;
+}
+
 #transaction__cta {
   margin-top: 2rem;
 }
@@ -1129,7 +1143,6 @@ strip-option:last-of-type {
   grid-column: 2/3;
 }
 .account-step .button {
-  margin-top: 0.5rem;
   justify-self: flex-start;
 }
 
@@ -1375,6 +1388,16 @@ strip-option:last-of-type {
     text-align: center;
     justify-items: center;
   }
+
+  #account_process,
+#transaction__steps {
+    border-top: solid rgba(var(--text-color), 0.2) thin;
+    padding-top: 1.5rem;
+  }
+
+  .account-step .button {
+    margin-top: 0.5rem;
+  }
 }
 @media screen and (min-width: 640px) {
   #confirmation_popup {

css/main.scss

@@ -879,7 +879,7 @@ strip-option {
 #transaction,
 #account {
   grid-template-rows: auto 1fr;
-  gap: 1.5rem 0;
+  gap: 1rem 0;
   padding: 1.5rem 0;
   align-content: flex-start;
 }
@@ -889,6 +889,9 @@ strip-option {
   gap: 2rem;
   grid-template-rows: auto 1fr;
 }
+.positive {
+  color: var(--green);
+}
 #transaction_top,
 #account_top {
   display: flex;
@@ -913,9 +916,17 @@ strip-option {
 #transaction_detail__amount,
 #account_detail__amount {
   display: flex;
-  font-size: 1.8rem;
+  font-size: 1.5rem;
   font-weight: 700;
 }
+#account_detail__interest_type,
+#account_detail__type {
+  color: rgba(var(--text-color), 0.8);
+  font-weight: 500;
+}
+#account_detail__interest {
+  font-size: 1.2rem;
+}
 #transaction__cta {
   margin-top: 2rem;
 }
@@ -979,7 +990,6 @@ strip-option {
     }
   }
   .button {
-    margin-top: 0.5rem;
     justify-self: flex-start;
   }
 }
@@ -1147,6 +1157,16 @@ strip-option {
     text-align: center;
     justify-items: center;
   }
+  #account_process,
+  #transaction__steps {
+    border-top: solid rgba(var(--text-color), 0.2) thin;
+    padding-top: 1.5rem;
+  }
+  .account-step {
+    .button {
+      margin-top: 0.5rem;
+    }
+  }
 }
 @media screen and (min-width: 640px) {
   #confirmation_popup {

index.html

@@ -559,9 +559,13 @@
                     <div id="account_detail__status"></div>
                 </div>
                 <div class="grid gap-0-5">
-                    <div id="account_detail__type" class="capitalize"></div>
+                    <h5 id="account_detail__type" class="capitalize"></h5>
                     <h3 id="account_detail__amount"></h3>
                 </div>
+                <div class="grid gap-0-5">
+                    <h5 id="account_detail__interest_type" class="capitalize"></h5>
+                    <h4 id="account_detail__interest" class="h4"></h4>
+                </div>
                 <sm-button id="account_action_button" onclick="processAccount()" variant="primary"></sm-button>
             </div>
             <div id="account_process">
@@ -1527,12 +1531,15 @@
             const { index } = params
             const { type, status, openTime, closeTime = 0, amount, netAmt } = bank_app.getUserDetails(myFloID).accounts[index]
             const icon = utils.getRelatedIcon(type)
-
+            const interest = netAmt - amount
             getRef('account_detail__icon').innerHTML = icon
             getRef('account_detail__status').textContent = status
             getRef('account_detail__status').className = `status-tag flex align-center ${status}`
             getRef('account_detail__type').textContent = type
             getRef('account_detail__amount').textContent = amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
+            getRef('account_detail__interest_type').textContent = `Interest ${type === 'deposit' ? 'earned' : 'accrued'}`
+            getRef('account_detail__interest').textContent = interest.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
+            getRef('account_detail__interest').className = type === 'deposit' ? 'positive' : 'negative'
             renderAccountProgress(index)
 
             if (status === 'active' && !getAccountStatus(index).isPending) {