From ae0ae51989b28e66442a3ce15a995024855e975a Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Thu, 1 Oct 2020 23:05:44 +0530
Subject: [PATCH] 0.0.47

---
 css/main.css     | 147 +++++++++++++++++++++--------
 css/main.min.css |   2 +-
 css/main.scss    | 209 +++++++++++++++++++++++++++--------------
 index.html       | 240 ++++++++++++++++++++++++++++++-----------------
 4 files changed, 401 insertions(+), 197 deletions(-)

diff --git a/css/main.css b/css/main.css
index 587e74f..9112c5e 100644
--- a/css/main.css
+++ b/css/main.css
@@ -5,10 +5,6 @@
   font-family: "Roboto", sans-serif;
 }
 
-:root {
-  scroll-behavior: smooth;
-}
-
 body {
   --accent-color: #4527A0;
   --text-color: 17, 17, 17;
@@ -36,12 +32,9 @@ body[data-theme=dark] {
   --lightness: 70%;
   background-color: var(--background-color);
 }
-body[data-theme=dark] .balance:nth-of-type(3) {
+body[data-theme=dark] .flo-balance-card {
   color: rgba(var(--text-color), 1);
 }
-body[data-theme=dark] .person .person-initials {
-  color: rgba(var(--text-color), 0.9) !important;
-}
 
 a {
   font-weight: 600;
@@ -198,6 +191,10 @@ button:disabled ~ .loader {
   transform: none !important;
 }
 
+.capitalize {
+  text-transform: capitalize;
+}
+
 sm-button[variant=outlined] {
   --accent-color: rgba(var(--text-color), 1);
 }
@@ -228,6 +225,14 @@ sm-button[variant=outlined] {
     stroke-dashoffset: -210;
   }
 }
+@keyframes load-btn-loader {
+  50% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: -220;
+  }
+}
 .action {
   position: relative;
   display: inline-flex;
@@ -253,6 +258,14 @@ sm-button[variant=outlined] {
   position: absolute;
   z-index: 1;
   padding: 0.4em;
+  stroke-dashoffset: 220;
+  stroke-dasharray: 220;
+}
+.action .loader:not(.animate-loader) {
+  opacity: 0;
+}
+.action .animate-loader {
+  animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear;
 }
 
 .clip {
@@ -578,13 +591,33 @@ details p {
 .user-panel .icon {
   stroke: rgba(var(--foreground-color), 1);
 }
-.user-panel sm-button {
+.user-panel .action {
+  width: auto;
+  justify-content: flex-end;
+}
+.user-panel .action h4 {
   border-radius: 2rem;
+  background-color: rgba(var(--text-color), 0.1);
+  color: rgba(var(--text-color), 1);
+  width: auto;
+}
+.user-panel .action .loader {
+  align-self: flex-end;
+}
+.user-panel .action .clip {
+  clip-path: circle(0 at 100% 0) !important;
+}
+
+#deposit .user-panel {
+  padding: 0 1rem;
+}
+#deposit .display-balance {
+  grid-template-areas: "rupee rupee" "flo flo";
 }
 
 .display-balance {
   grid-template-columns: 1fr 1fr;
-  grid-template-areas: ". ." "flo flo";
+  grid-template-areas: "rupee ." "flo flo";
   gap: 0.8rem;
   margin-top: 1rem;
 }
@@ -620,33 +653,35 @@ details p {
 .balance .tooltip {
   border-radius: 1rem;
   color: rgba(var(--text-color), 1);
+  margin-left: auto;
 }
-.balance:nth-of-type(1) {
-  background: url(bg-art2.svg) bottom, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2));
-  background-size: cover;
+
+.rupee-balance-card {
+  grid-area: rupee;
+  background: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2));
+  background-size: 9rem, cover;
 }
-.balance:nth-of-type(1) .tooltip {
+.rupee-balance-card .tooltip {
   box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset;
 }
-.balance:nth-of-type(2) {
-  background: url(bg-art1.svg) left bottom, linear-gradient(135deg, #fd946a, #ff4857);
+
+.in-process-balance {
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom, linear-gradient(135deg, #fd946a, #ff4857);
   background-size: cover;
 }
-.balance:nth-of-type(2) .tooltip {
+.in-process-balance .tooltip {
   box-shadow: 0 0 0 0.4rem #ff4857 inset;
 }
-.balance:nth-of-type(3) {
+
+.flo-balance-card {
   grid-area: flo;
   color: rgba(var(--foreground-color), 1);
-  background: url(bg-art3.svg) center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980);
+  background: url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980);
   background-size: cover;
 }
-.balance:nth-of-type(3) .tooltip {
+.flo-balance-card .tooltip {
   box-shadow: 0 0 0 0.4rem #1b0980 inset;
 }
-.balance .tooltip {
-  margin-left: auto;
-}
 
 .tooltip {
   position: absolute;
@@ -782,13 +817,18 @@ sm-panel {
   border-radius: 0.4em;
   border: solid 1px rgba(var(--text-color), 0.2);
 }
+.request h4 {
+  font-weight: 500;
+}
 .request h5 {
   margin-bottom: 0.2rem;
   text-transform: capitalize;
+  font-weight: 500;
+  opacity: 0.8;
 }
 .request h3,
 .request h4 {
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
 }
 .request h4:last-of-type {
   margin-bottom: 0;
@@ -797,7 +837,7 @@ sm-panel {
   align-self: flex-end;
 }
 .request .amount {
-  font-size: 1.4em;
+  font-family: "Roboto", sans-serif;
 }
 .request button {
   width: auto;
@@ -1031,14 +1071,8 @@ sm-panel {
 #transaction_result {
   z-index: 12;
 }
-#transaction_result::part(popup) {
-  background-image: url(card-back.svg);
-  background-size: cover;
-  background-position-y: -3rem;
-  background-repeat: no-repeat;
-}
 #transaction_result #transaction_heading {
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
 }
 #transaction_result .copy-row {
   grid-template-areas: "label label" ". .";
@@ -1057,7 +1091,7 @@ sm-panel {
 }
 #transaction_result > h4 {
   font-size: 1.2rem;
-  margin-top: 6rem;
+  margin-top: 2rem;
   margin-bottom: 0.5rem;
 }
 #transaction_result sm-button {
@@ -1072,7 +1106,7 @@ sm-panel {
   align-self: center;
   stroke: none;
   stroke-dasharray: 50;
-  fill: rgba(var(--foreground-color), 1);
+  fill: rgba(var(--text-color), 0.1);
   animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
@@ -1245,9 +1279,14 @@ sm-panel {
   font-weight: 400;
   font-family: "Roboto", sans-serif;
   opacity: 0.8;
-  margin-bottom: 0.2rem;
+  margin-bottom: 0.4rem;
   text-transform: capitalize;
 }
+#transaction_page p:last-of-type {
+  margin: 2rem 0 1rem 0;
+  font-size: 0.9rem;
+  opacity: 0.8;
+}
 #transaction_page #transaction_details {
   position: relative;
   margin: 1.5rem 0;
@@ -1265,7 +1304,7 @@ sm-panel {
   margin-bottom: 2rem;
 }
 #transaction_page #transaction_details .flex {
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
   align-items: baseline;
 }
 #transaction_page #transaction_details strong {
@@ -1295,6 +1334,7 @@ sm-panel {
   cursor: pointer;
   display: flex;
   flex-direction: column;
+  width: 5rem;
   text-align: center;
   transition: transform 0.3s;
   font-size: 0.85rem;
@@ -1308,10 +1348,12 @@ sm-panel {
   height: 3rem;
   width: 3rem;
   border-radius: 2rem;
+  stroke-width: 10;
   padding: 1rem;
   background: rgba(var(--text-color), 0.06);
   align-self: center;
   margin-bottom: 0.4rem;
+  box-shadow: 0 0.1rem 0.1rem #00000016, 0 0.1rem 0.3rem #00000040;
 }
 
 .person {
@@ -1321,11 +1363,13 @@ sm-panel {
   cursor: pointer;
   transition: transform 0.3s;
   width: 5rem;
+  -webkit-tap-highlight-color: transparent;
 }
 .person:active {
   transform: scale(0.95);
 }
-.person .person-initials {
+
+.person-initials, #person_initials {
   display: flex;
   justify-content: center;
   height: 3rem;
@@ -1336,8 +1380,10 @@ sm-panel {
   border-radius: 2rem;
   margin-bottom: 0.4rem !important;
   text-transform: uppercase;
+  box-shadow: 0 0.1rem 0.1rem #00000016, 0 0.1rem 0.3rem #00000040;
 }
-.person .person-name {
+
+.person-name {
   font-size: 0.85rem;
   opacity: 0.8;
   font-weight: 500;
@@ -1345,12 +1391,33 @@ sm-panel {
   text-align: center;
 }
 
+#person_popup > .flex:first-of-type {
+  margin: 1rem 0;
+}
+#person_popup > .flex:first-of-type .flex {
+  margin-top: 0.5rem;
+}
+#person_popup > .flex:first-of-type .flex .icon {
+  height: 2.6rem;
+  width: 2.6rem;
+  padding: 0.8rem;
+  cursor: pointer;
+}
 #person_popup h3 {
   text-transform: capitalize;
 }
 #person_popup .copy-row {
   margin-bottom: 1.5rem;
 }
+#person_popup #show_person_name {
+  padding: 0.5rem 1rem;
+  border-radius: 0.4rem;
+  max-width: 30ch;
+}
+#person_popup #show_person_name:focus {
+  outline: none;
+  background: rgba(var(--text-color), 0.1);
+}
 
 #activity_page .empty-state,
 #request_page .empty-state,
@@ -1397,6 +1464,10 @@ sm-panel {
   #transaction_page header {
     padding: 1.5rem 0;
   }
+
+  #deposit .user-panel {
+    padding: 0;
+  }
 }
 @media only screen and (min-width: 640px) {
   .hide-on-desktop {
diff --git a/css/main.min.css b/css/main.min.css
index 25b0922..62b1158 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-#transaction_page h5,*,.activity .activity-amount,.balance h4{font-family:Roboto,sans-serif}a,h1,h2,h3,h4,h5{font-weight:600}.action,button{display:inline-flex}.complaint-placeholder h5,button,textarea{background:rgba(var(--text-color),.1)}.option,button{-webkit-tap-highlight-color:transparent;transition:transform .3s;text-transform:capitalize}.icon,.loader{overflow:visible;fill:none}*{box-sizing:border-box;padding:0;margin:0}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}:root{scroll-behavior:smooth}body{--accent-color:#4527A0;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:rgba(var(--foreground-color), 1);--dark-shade:#f4f4f4;--hue:255;--saturation:61%;--lightness:39%;color:rgba(var(--text-color),1);font-size:16px;background-size:cover}body[data-theme=dark]{--accent-color:#a293d0;--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#222;--hue:255;--saturation:39%;--lightness:70%;background-color:var(--background-color)}body[data-theme=dark] .balance:nth-of-type(3){color:rgba(var(--text-color),1)}body[data-theme=dark] .person .person-initials{color:rgba(var(--text-color),.9)!important}a{text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.8rem}p{line-height:1.5;max-width:60ch;color:rgba(var(--text-color),.9)}strong{font-weight:500}button{position:relative;align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;cursor:pointer;border-radius:.3rem;color:var(--accent-color);border:none}.flex,.logo{display:flex}.btn,.primary-btn{color:rgba(var(--foreground-color),1)}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.5)}button:disabled~.loader{opacity:0}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.bottom-margin{margin-bottom:1.5rem}.top-margin{margin-top:1.5rem}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.align-center{align-items:center}#confirmation,#prompt,.balance,.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{opacity:.7}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.breakable{word-break:break-all}.separator{padding:.1em}.no-transformations{transform:none!important}sm-button[variant=outlined]{--accent-color:rgba(var(--text-color), 1)}.loader{stroke-width:10;stroke:var(--accent-color);height:2rem;width:2rem;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}.action,.logo{align-items:center}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}.action{position:relative;justify-content:center;padding:0;background:0 0}.action[disabled] .primary-btn{background:0 0}.action h4{padding:.5rem 1.2rem;font-size:.9rem;clip-path:circle(100%);transition:clip-path .3s;border-radius:.2rem}.action .btn{z-index:2}.action .loader{position:absolute;z-index:1;padding:.4em}.clip{clip-path:circle(0)!important}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}.expand{width:100%}.fade-left{animation:fadeleft .3s}.fade-right{animation:faderight .3s}@keyframes faderight{from{opacity:0;transform:translateX(-1em)}to{opacity:1;transform:none}}@keyframes fadeleft{from{opacity:0;transform:translateX(1em)}to{opacity:1;transform:none}}.logo h4{font-weight:500;font-size:clamp(1.1rem,2vw,1.2rem)}.logo .main-logo{height:clamp(1.4rem,2vw,1.6rem);width:clamp(1.4rem,2vw,1.6rem);fill:rgba(var(--text-color),1);stroke:none;margin-right:.2rem}textarea{width:100%;max-width:100%;border:none;border-radius:.2rem;resize:none;font-size:1rem;line-height:1.6;padding:.8rem}:empty+.empty-state{display:grid}.empty-state{display:none;place-items:center;width:100%}.empty-state svg{stroke:rgba(var(--text-color),.8);height:12em;width:12em}.container-header{display:flex;align-items:center;flex-direction:row;width:100%;padding:1rem 0}.container-header h2{flex:1}.container-header button{align-self:center}.btn{background:var(--accent-color);padding:.4em 1em}.back-arrow{stroke:rgba(var(--text-color),1);fill:none;height:2rem;cursor:pointer}.card{border-radius:.6rem;padding:1.5em;background:rgba(var(--foreground-color),1)}.solid-background{background:rgba(var(--foreground-color),1)!important}#confirmation p,#prompt p{margin:1rem}#confirmation h4,#prompt h4{font-weight:500;margin-bottom:1.5rem}#confirmation .flex sm-button:first-of-type,#prompt .flex sm-button:first-of-type{margin-right:.6em;margin-left:auto}.refresh{margin-top:.6em;margin-bottom:1em}sm-popup .illustration{position:relative;height:4rem;width:4rem;padding:1rem;stroke:var(--accent-color);margin-bottom:1rem;border-radius:5rem;background:rgba(var(--text-color),.06)}#main_loader,#navbar{position:fixed;left:0}sm-popup sm-input:not(:last-of-type){margin-bottom:1rem}sm-popup p{margin-block-end:1rem}sm-popup .action h4{padding:.5rem 1rem;font-weight:500}sm-popup .message{margin-bottom:.2rem}sm-popup .message+.copy-row{margin-bottom:1.5rem}sm-popup h5:not(.tag){font-family:Roboto,sans-serif;margin-bottom:.4rem;margin-top:1rem;font-weight:500}.popup-header{padding:1.5rem;padding-bottom:0;display:flex;align-items:center;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10;cursor:pointer}.popup-header button{width:auto;margin-left:auto}details,summary{margin-bottom:1rem}summary{cursor:pointer}details h5{line-height:.6;margin-bottom:0;margin-top:1.2rem!important}details p{font-size:.9rem;line-height:1.4}#sign_in_popup::part(background){background:rgba(var(--foreground-color),1)}#sign_in_popup h3{margin-top:2rem}#sign_in_popup h4{font-weight:500;margin-bottom:3rem}#sign_in_popup button{margin:1rem 0}#sign_in_popup p{margin-top:1rem;margin-bottom:0!important}.primary-btn{background:var(--accent-color);justify-content:center}#main_header{align-items:center;padding:clamp(1rem,2vw,2rem) 1rem;justify-content:space-between}.icon{height:1.2rem;width:1.2rem;stroke:rgba(var(--text-color),.8);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}#navbar{display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;right:0;bottom:0;top:auto;z-index:3;background:rgba(var(--foreground-color),1);box-shadow:0 -.5rem 1rem #00010;border-radius:1rem 1rem 0 0}#navbar .navbar-item{position:relative;text-align:center;cursor:pointer;padding:.3rem;padding-top:.8rem;border-radius:.4em;opacity:.6;color:rgba(var(--text-color),1);font-size:.8em;text-transform:capitalize;width:100%;font-weight:600}#navbar .navbar-item h5{margin-top:.4em}#navbar .navbar-item .icon{stroke:rgba(var(--text-color),1)}#navbar .active{opacity:1}.banking{stroke-width:4}#home_page{padding:0 0 4rem}#home_page .left{width:auto;border-radius:.6rem}#home_page .left h3,#home_page .left h4,#home_page .left p{padding:0 1.5rem}#home_page .left h3{font-size:2rem;margin-bottom:1rem}.user-panel{position:relative;padding:1.5rem;padding-top:1rem;align-self:flex-start}.request .action,.request button{align-self:flex-end}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel sm-button{border-radius:2rem}.display-balance{grid-template-columns:1fr 1fr;grid-template-areas:". ." "flo flo";gap:.8rem;margin-top:1rem}.display-balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10;cursor:pointer}.balance{height:10rem;position:relative;display:flex;border-radius:1rem;padding:1rem;justify-content:flex-end}.balance h4{font-size:2.5rem;font-weight:500;text-shadow:1px .1rem .2rem #00040;word-break:break-all;flex:1}.balance h5{opacity:.8;margin-bottom:.2rem}.balance .tooltip{border-radius:1rem;color:rgba(var(--text-color),1);margin-left:auto}.balance:nth-of-type(1){background:url(bg-art2.svg) bottom,linear-gradient(200deg,rgba(var(--text-color),.1),rgba(var(--text-color),.2));background-size:cover}.balance:nth-of-type(1) .tooltip{box-shadow:0 0 0 .4rem rgba(var(--text-color),.1) inset}.balance:nth-of-type(2){background:url(bg-art1.svg) left bottom,linear-gradient(135deg,#fd946a,#ff4857);background-size:cover}.balance:nth-of-type(2) .tooltip{box-shadow:0 0 0 .4rem #ff4857 inset}.balance:nth-of-type(3){grid-area:flo;color:rgba(var(--foreground-color),1);background:url(bg-art3.svg) center no-repeat,linear-gradient(270deg,#2f69e6,#1b0980);background-size:cover}.complaint .processed,.deposited{color:#007732}.page .container-header,.tooltip{top:0;background:rgba(var(--foreground-color),1)}.balance:nth-of-type(3) .tooltip{box-shadow:0 0 0 .4rem #1b0980 inset}.tooltip{position:absolute;left:0;right:0;bottom:0;cursor:help;display:flex;flex-direction:column;z-index:1;transition:clip-path .4s ease-out;clip-path:circle(.8rem at calc(100% - 1.5rem) 1.4rem);scrollbar-width:thin}.tooltip .tt-icon{display:inline-flex;width:3rem;height:3rem;align-items:center;justify-content:center;margin-left:auto;font-weight:600}.tooltip .tooltip-text{padding:1rem;padding-top:0;line-height:1.4;font-size:.9rem;font-weight:400;overflow-y:auto;max-height:calc(100% - 3rem);max-width:30ch}.tooltip:hover{clip-path:circle(100%)}.user-type{font-weight:500}.options-tab{display:grid;grid-template-columns:repeat(4,1fr);padding:1.5rem;gap:2rem .2rem}.option{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:.4rem;width:5rem;cursor:pointer}.option .icon{height:3rem;width:3rem;background:rgba(var(--text-color),.06);border-radius:2rem;padding:.8rem;margin-bottom:.6rem}.option h4{font-size:.85rem;opacity:.8;font-weight:500}.option:active{transform:scale(.95)}.request-icon{transform:rotate(180deg)}.notification-dot::after{content:"";position:absolute;z-index:1;top:0;right:0;height:.6em;width:.6em;background-color:#E53935;border-radius:.4em;transition:transform .3s}.shrink.notification-dot::after{transform:scale(0)}#deposit .container-header,#withdraw .container-header{background:linear-gradient(rgba(var(--foreground-color),1) 90%,transparent)}sm-tab-header{position:sticky;top:0;display:inline-flex;background-color:var(--dark-shade);z-index:2;padding:.3rem;margin:1rem 0;border-radius:3rem}sm-tab{text-transform:capitalize}sm-tab::part(tab){padding:.4rem 1.2rem}sm-panel{width:100%}.request{display:inline-flex;flex-direction:column;padding:1.5em;border-radius:.4em;border:1px solid}.request h5{margin-bottom:.2rem;text-transform:capitalize}.request h3,.request h4{margin-bottom:1.5rem}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request .amount{font-size:1.4em}.request button{width:auto;margin-top:1.5rem}.request .copy-row{margin-bottom:1.5rem}.request .flex{align-items:center;justify-content:flex-end;margin-top:1.5rem}.request .flex button,.request .flex h5{margin:0}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.container{display:grid;gap:1em;width:100%;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}.copy-row,.page .container-header{display:grid;grid-template-columns:1fr auto}.page{padding:1rem 1.5rem;padding-bottom:5rem}.page .container-header{grid-template-areas:". ." "search search";gap:1rem;will-change:auto;z-index:2}.page .container-header .search{grid-area:search}.page .container-header .search input{padding:1em;border:none;width:100%;background:var(--dark-shade);font-size:1rem;font-weight:500;color:rgba(var(--text-color),1);border-radius:.2em}.page .container-header .search input:focus{outline:0;background:rgba(var(--text-color-light),.2)}.copy-row{align-items:center;gap:.5rem;width:auto}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time{margin-bottom:1.5rem!important;font-weight:500}#report_popup{width:32rem}#profile_page{display:flex;flex-direction:column}#profile_page button{align-self:flex-start}.complaint{display:grid;gap:1.5rem 0}.complaint .complaint-actions{align-items:center;margin:1.5rem 0 0}#helpline_page sm-select,.complaint .processed,.complaint .unprocessed{margin-bottom:1.5rem}.complaint .unprocessed{color:#d43125}#settings_page p,#transaction_result h5,.activity .activity-time{color:rgba(var(--text-color),.7)}.complaint button .icon{padding:.2rem;margin-right:.5rem;stroke:var(--accent-color);stroke-width:8}.complaints-container{padding-top:1.5rem;display:grid;align-items:flex-start;gap:1.5rem}.complaint-placeholder{animation:pulse infinite .6s alternate}.complaint-placeholder h4,.complaint-placeholder h5{border-radius:.2rem}.complaint-placeholder h5{padding:.5rem .6rem}.complaint-placeholder h4{background:rgba(var(--text-color),.2);padding:.8rem}.complaint-placeholder .demo-btn{padding:.8rem 3rem}@keyframes pulse{from{opacity:.4}to{opacity:1}}#main_loader{text-align:center;place-content:center;height:100vh;width:100vw}#main_loader sm-button{margin-left:0;margin-top:1rem}#main_loader svg{height:2rem;width:2rem;stroke:var(--accent-color);stroke-width:6;fill:none;overflow:visible;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}.activity,.select{align-items:center}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}#upi_txId_section .copy-row{margin-bottom:1.5rem}@keyframes popup{0%{stroke-dashoffset:50;transform:translateY(4rem) scale(.2,.6)}40%,41%{transform:translateY(0) scale(.2)}50%{stroke-dashoffset:50;transform:translateY(0) scale(1)}100%{stroke-dashoffset:0}}#transaction_result{z-index:12}#transaction_result::part(popup){background-image:url(card-back.svg);background-size:cover;background-position-y:-3rem;background-repeat:no-repeat}.activity,.activity .icon{background:rgba(var(--text-color),.06)}#transaction_result #transaction_heading{margin-bottom:2rem}#transaction_result .copy-row{grid-template-areas:"label label" ". .";margin-top:1rem;gap:0 1rem}#transaction_result .copy-row h4{font-weight:500}#transaction_result h5{grid-area:label}#transaction_result h4,#transaction_result h5,#transaction_result p{text-align:center}#transaction_result>h4{font-size:1.2rem;margin-top:6rem;margin-bottom:.5rem}#transaction_result sm-button{align-self:center;width:auto}#failure_svg,#success_svg{height:5rem;width:5rem;stroke-width:4;align-self:center;stroke:none;stroke-dasharray:50;fill:rgba(var(--foreground-color),1);animation:popup 2s forwards cubic-bezier(.175,.885,.32,1.275)}#success_svg polyline{fill:none;stroke:#00C853}#failure_svg line{stroke:#EF5350}.rupee-symbol{height:1rem;width:1rem;fill:rgba(var(--text-color),.5)}#deposit_rupee .copy-row{margin-bottom:1rem}.activity-container{display:grid;gap:1rem}.activity{display:grid;border-radius:.6rem;padding:1rem 1.2rem;gap:0 1rem;grid-template-columns:auto 1fr auto;grid-template-areas:"icon type amount" "icon receiver time";cursor:pointer;transition:transform .3s}.activity:active{transform:scale(.95)}.activity .icon{grid-area:icon;height:3rem;width:3rem;padding:.8rem;background-size:cover;border-radius:2rem}#add_person_btn .icon,#transaction_page #transaction_details .icon,.select{background:rgba(var(--text-color),.06)}.activity .activity-type{grid-area:type;text-transform:capitalize;font-weight:400;font-size:.8rem}.activity .activity-receiver{grid-area:receiver;font-weight:500;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity .activity-amount{text-align:right;grid-area:amount}.activity .activity-time{text-align:right;grid-area:time;font-weight:500}#add_person_btn,.person .person-name{text-align:center;opacity:.8;font-weight:500}.back-arrow{stroke-width:10;margin-right:.5rem;padding:.2rem}.select{max-width:50ch;position:relative;display:flex;width:100%;border-radius:.3rem}.select:first-of-type:not(:last-of-type){border-radius:.3rem .3rem 0 0}.select+.select{margin-top:0;border-radius:0 0 .3rem .3rem;border-top:solid 1px rgba(var(--text-color),.16)}.select label{display:flex;align-items:center;cursor:pointer;flex:1;padding:.8rem 1rem}.select input[type=radio]{display:none}.select input:checked~.radio .outer-ring{stroke:var(--accent-color)}.select input:checked~.radio .inner-disc{transform:none}.select .radio{width:1.2rem;height:1.2rem;fill:none;overflow:visible;margin-right:.6rem}.select .radio .outer-ring{stroke-width:8;stroke:rgba(var(--text-color),.5)}.select .radio .inner-disc{transform-origin:center;fill:var(--accent-color);transform:scale(0);transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}#add_person_btn:active,.person:active{transform:scale(.95)}#add_person_btn,.person{cursor:pointer;transition:transform .3s}.select .remove{width:3rem;height:2rem;padding:.7rem;cursor:pointer;stroke-width:10}.select .tag{grid-area:tag;opacity:.6;font-weight:500;border:1px solid;padding:.2rem .4rem;border-radius:.3rem;margin-right:.5rem}.select h4{font-weight:400}.add-upi{margin-top:.4rem;justify-self:flex-start;width:max-content}#transaction_page header{padding:.5rem 0}#transaction_page header .back-arrow{grid-area:back}#transaction_page header h4{text-transform:capitalize}#transaction_page h5{font-weight:400;opacity:.8;margin-bottom:.2rem;text-transform:capitalize}#transaction_page #transaction_details{position:relative;margin:1.5rem 0;padding:1.5rem;background-color:rgba(var(--text-color),.06);max-width:50ch;border-radius:.5rem}#transaction_page #transaction_details .icon{height:4rem;width:4rem;padding:1.2rem;border-radius:4rem;margin-bottom:2rem}#transaction_page #transaction_details .flex{margin-bottom:1rem;align-items:baseline}#transaction_page #transaction_details strong{font-weight:500}#transaction_page #transaction_details strong:not(:last-of-type){margin-bottom:1rem}#transaction_page .transaction-amount{font-size:2rem;font-weight:400}#transaction_page #transaction_time{right:0;position:absolute;margin:1.5rem}#people_container{display:grid;grid-template-columns:repeat(4,1fr);padding:1.5rem;gap:2rem .2rem}#add_person_btn{display:flex;flex-direction:column;font-size:.85rem}#add_person_btn .icon{height:3rem;width:3rem;border-radius:2rem;padding:1rem;align-self:center;margin-bottom:.4rem}.person{display:flex;flex-direction:column;align-items:center;width:5rem}.person .person-initials{display:flex;justify-content:center;height:3rem;width:3rem;font-size:1.2rem!important;font-weight:500;align-items:center;border-radius:2rem;margin-bottom:.4rem!important;text-transform:uppercase}#person_popup h3,.person .person-name{text-transform:capitalize}.person .person-name{font-size:.85rem}#person_popup .copy-row{margin-bottom:1.5rem}#activity_page .empty-state,#request_page .empty-state,#settings_page .empty-state{justify-content:left}#settings_page>h4{margin-top:2rem;margin-bottom:.4rem}#settings_page sm-button{margin-top:.8rem}#settings_page .flex{max-width:60ch}@media only screen and (max-width:640px){#deposit,#home_page{display:grid;gap:1.5rem;grid-template-areas:"." "left";grid-template-columns:minmax(0,1fr)}#deposit .left,#home_page .left{grid-area:left}sm-select{width:100%}.hide-on-mobile{display:none!important}#transaction_page{padding-top:0}#transaction_page header{padding:1.5rem 0}}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}body{padding:0 2rem;margin-left:4rem}sm-popup{background:rgba(var(--foreground-color),1)}#navbar,#navbar .active{background:rgba(var(--text-color),.06)}#confirmation,sm-popup::part(popup){width:24rem}#navbar{justify-content:flex-start;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;border-top:none;border-radius:0;box-shadow:-.5rem 0 .5rem #00008 inset}#navbar .navbar-item{display:flex;width:auto;padding:.8rem 1.2rem}#navbar .logo h4,#navbar .navbar-item h5{display:none}#navbar .logo .main-logo,#navbar .navbar-item .icon{height:1.2rem;width:1.2rem}#navbar .navbar-item:hover{opacity:1}#navbar .logo{margin:1.5rem 1rem}.page{padding-bottom:2rem}#sign_in_popup{width:24rem}#home_page{padding-top:.5rem}#home_page .left{margin-top:1rem}#people_container,.options-tab{grid-template-columns:repeat(auto-fill,minmax(5rem,1fr));gap:2rem .8rem}.display-balance .balance{height:9rem}#settings_page .copy-row{display:inline-grid}}@media only screen and (min-width:800px){body{margin-left:11rem}.complaint{gap:0 1.5rem;grid-template-columns:1fr 1fr;grid-template-areas:". . " "header header"}.complaint .complaint-actions{grid-area:header}.complaint .left{border-right:1px solid rgba(var(--text-color),.2);padding-right:1.5rem}.complaint .right{display:flex;justify-content:center;flex-direction:column}#navbar .navbar-item h5{font-size:.9rem;margin:0;display:block}#navbar .icon{margin-right:.8rem}#navbar .logo h4{display:block;font-size:1rem}.user-panel{position:sticky;top:1.5rem;padding-top:1.5rem}#deposit,#home_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 22rem}.activity{width:60ch}}@media only screen and (min-width:1920px){body{font-size:24px}}@media only screen and (min-width:2048px){body{font-size:24px}}@media only screen and (max-width:320px){body{font-size:14px}}@media (any-hover:hover){.navbar-item:hover{background:rgba(var(--text-color),.06)}.remove{opacity:.6}.remove:hover{opacity:1}}
\ No newline at end of file
+#transaction_page h5,*,.activity .activity-amount,.balance h4,.request .amount{font-family:Roboto,sans-serif}body,body[data-theme=dark] .flo-balance-card{color:rgba(var(--text-color),1)}a,h1,h2,h3,h4,h5{font-weight:600}#navbar .navbar-item,#transaction_page h5,#transaction_page header h4,.activity .activity-type,.capitalize,.option,.request h5,button,sm-tab{text-transform:capitalize}#navbar .navbar-item,.action,.balance,.user-panel,button,sm-popup .illustration{position:relative}.icon,.loader{overflow:visible}.balance h4,.breakable{word-break:break-all}.option,.person,button{-webkit-tap-highlight-color:transparent}*{box-sizing:border-box;padding:0;margin:0}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}body{--accent-color:#4527A0;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:rgba(var(--foreground-color), 1);--dark-shade:#f4f4f4;--hue:255;--saturation:61%;--lightness:39%;font-size:16px;background-size:cover}body[data-theme=dark]{--accent-color:#a293d0;--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#222;--hue:255;--saturation:39%;--lightness:70%;background-color:var(--background-color)}a{text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.8rem}p{line-height:1.5;max-width:60ch;color:rgba(var(--text-color),.9)}strong{font-weight:500}button{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;cursor:pointer;border-radius:.3rem;color:var(--accent-color);transition:transform .3s;border:none;background:rgba(var(--text-color),.1)}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.5)}button:disabled~.loader{opacity:0}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.bottom-margin{margin-bottom:1.5rem}.top-margin{margin-top:1.5rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.align-center{align-items:center}#confirmation,#prompt,.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{opacity:.7}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.separator{padding:.1em}.no-transformations{transform:none!important}sm-button[variant=outlined]{--accent-color:rgba(var(--text-color), 1)}.loader{fill:none;stroke-width:10;stroke:var(--accent-color);height:2rem;width:2rem;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}.action,.logo{align-items:center}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}@keyframes load-btn-loader{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-220}}.action{display:inline-flex;justify-content:center;padding:0;background:0 0}.action[disabled] .primary-btn{background:0 0}.action h4{padding:.5rem 1.2rem;font-size:.9rem;clip-path:circle(100%);transition:clip-path .3s;border-radius:.2rem}.action .btn{z-index:2}.action .loader{position:absolute;z-index:1;padding:.4em;stroke-dashoffset:220;stroke-dasharray:220}.action .loader:not(.animate-loader){opacity:0}.action .animate-loader{animation:load-btn-loader 2.6s infinite,rotate 1s infinite linear}.clip{clip-path:circle(0)!important}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}.expand{width:100%}.fade-left{animation:fadeleft .3s}.fade-right{animation:faderight .3s}@keyframes faderight{from{opacity:0;transform:translateX(-1em)}to{opacity:1;transform:none}}@keyframes fadeleft{from{opacity:0;transform:translateX(1em)}to{opacity:1;transform:none}}.logo{display:flex}.logo h4{font-weight:500;font-size:clamp(1.1rem,2vw,1.2rem)}.logo .main-logo{height:clamp(1.4rem,2vw,1.6rem);width:clamp(1.4rem,2vw,1.6rem);fill:rgba(var(--text-color),1);stroke:none;margin-right:.2rem}textarea{width:100%;max-width:100%;background:rgba(var(--text-color),.1);border:none;border-radius:.2rem;resize:none;font-size:1rem;line-height:1.6;padding:.8rem}:empty+.empty-state{display:grid}.empty-state{display:none;place-items:center;width:100%}.empty-state svg{stroke:rgba(var(--text-color),.8);height:12em;width:12em}.container-header{display:flex;align-items:center;flex-direction:row;width:100%;padding:1rem 0}.container-header h2{flex:1}.container-header button{align-self:center}.btn{background:var(--accent-color);color:rgba(var(--foreground-color),1);padding:.4em 1em}.back-arrow{stroke:rgba(var(--text-color),1);fill:none;height:2rem;cursor:pointer}.card{border-radius:.6rem;padding:1.5em;background:rgba(var(--foreground-color),1)}.solid-background{background:rgba(var(--foreground-color),1)!important}#confirmation p,#prompt p{margin:1rem}#confirmation h4,#prompt h4{font-weight:500;margin-bottom:1.5rem}#confirmation .flex sm-button:first-of-type,#prompt .flex sm-button:first-of-type{margin-right:.6em;margin-left:auto}.refresh{margin-top:.6em;margin-bottom:1em}sm-popup .illustration{height:4rem;width:4rem;padding:1rem;stroke:var(--accent-color);margin-bottom:1rem;border-radius:5rem;background:rgba(var(--text-color),.06)}#main_loader,#navbar{position:fixed;left:0}sm-popup sm-input:not(:last-of-type){margin-bottom:1rem}sm-popup p{margin-block-end:1rem}sm-popup .action h4{padding:.5rem 1rem;font-weight:500}sm-popup .message{margin-bottom:.2rem}sm-popup .message+.copy-row{margin-bottom:1.5rem}sm-popup h5:not(.tag){font-family:Roboto,sans-serif;margin-bottom:.4rem;margin-top:1rem;font-weight:500}.popup-header{padding:1.5rem;padding-bottom:0;display:flex;align-items:center;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10;cursor:pointer}.popup-header button{width:auto;margin-left:auto}details,summary{margin-bottom:1rem}summary{cursor:pointer}details h5{line-height:.6;margin-bottom:0;margin-top:1.2rem!important}details p{font-size:.9rem;line-height:1.4}#sign_in_popup::part(background){background:rgba(var(--foreground-color),1)}#sign_in_popup h3{margin-top:2rem}#sign_in_popup h4{font-weight:500;margin-bottom:3rem}#sign_in_popup button{margin:1rem 0}#sign_in_popup p{margin-top:1rem;margin-bottom:0!important}.primary-btn{background:var(--accent-color);justify-content:center;color:rgba(var(--foreground-color),1)}#navbar .navbar-item,.balance .tooltip,.user-panel .action h4{color:rgba(var(--text-color),1)}#main_header{align-items:center;padding:clamp(1rem,2vw,2rem) 1rem;justify-content:space-between}.icon{height:1.2rem;width:1.2rem;fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}#navbar{display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;right:0;bottom:0;top:auto;z-index:3;background:rgba(var(--foreground-color),1);box-shadow:0 -.5rem 1rem #00010;border-radius:1rem 1rem 0 0}#navbar .navbar-item{text-align:center;cursor:pointer;padding:.3rem;padding-top:.8rem;border-radius:.4em;opacity:.6;font-size:.8em;width:100%;font-weight:600}#navbar .navbar-item h5{margin-top:.4em}#navbar .navbar-item .icon{stroke:rgba(var(--text-color),1)}#navbar .active{opacity:1}.banking{stroke-width:4}#home_page{padding:0 0 4rem}#home_page .left{width:auto;border-radius:.6rem}#home_page .left h3,#home_page .left h4,#home_page .left p{padding:0 1.5rem}#home_page .left h3{font-size:2rem;margin-bottom:1rem}.user-panel{padding:1.5rem;padding-top:1rem;align-self:flex-start}.request .action,.request button,.user-panel .action .loader{align-self:flex-end}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel .action{width:auto;justify-content:flex-end}.balance,.tooltip{display:flex;flex-direction:column}.user-panel .action h4{border-radius:2rem;background-color:rgba(var(--text-color),.1);width:auto}.user-panel .action .clip{clip-path:circle(0 at 100% 0)!important}#deposit .user-panel{padding:0 1rem}#deposit .display-balance{grid-template-areas:"rupee rupee" "flo flo"}.display-balance{grid-template-columns:1fr 1fr;grid-template-areas:"rupee ." "flo flo";gap:.8rem;margin-top:1rem}.display-balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10;cursor:pointer}.balance{height:10rem;border-radius:1rem;padding:1rem;justify-content:flex-end}.balance h4{font-size:2.5rem;font-weight:500;text-shadow:1px .1rem .2rem #00040;flex:1}.balance h5{opacity:.8;margin-bottom:.2rem}.balance .tooltip{border-radius:1rem;margin-left:auto}.rupee-balance-card{grid-area:rupee;background:url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat,linear-gradient(200deg,rgba(var(--text-color),.1),rgba(var(--text-color),.2));background-size:9rem,cover}.rupee-balance-card .tooltip{box-shadow:0 0 0 .4rem rgba(var(--text-color),.1) inset}.in-process-balance{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom,linear-gradient(135deg,#fd946a,#ff4857);background-size:cover}.in-process-balance .tooltip{box-shadow:0 0 0 .4rem #ff4857 inset}.flo-balance-card{grid-area:flo;color:rgba(var(--foreground-color),1);background:url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat,linear-gradient(270deg,#2f69e6,#1b0980);background-size:cover}.flo-balance-card .tooltip{box-shadow:0 0 0 .4rem #1b0980 inset}.tooltip{position:absolute;left:0;right:0;top:0;bottom:0;cursor:help;background:rgba(var(--foreground-color),1);z-index:1;transition:clip-path .4s ease-out;clip-path:circle(.8rem at calc(100% - 1.5rem) 1.4rem);scrollbar-width:thin}.activity,.option{transition:transform .3s;cursor:pointer}.tooltip .tt-icon{display:inline-flex;width:3rem;height:3rem;align-items:center;justify-content:center;margin-left:auto;font-weight:600}.tooltip .tooltip-text{padding:1rem;padding-top:0;line-height:1.4;font-size:.9rem;font-weight:400;overflow-y:auto;max-height:calc(100% - 3rem);max-width:30ch}.option h4,.page .container-header .search input,.request h4,.request h5,.time,.user-type{font-weight:500}.tooltip:hover{clip-path:circle(100%)}.options-tab{display:grid;grid-template-columns:repeat(4,1fr);padding:1.5rem;gap:2rem .2rem}.option{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:.4rem;width:5rem}.option .icon{height:3rem;width:3rem;background:rgba(var(--text-color),.06);border-radius:2rem;padding:.8rem;margin-bottom:.6rem}.option h4{font-size:.85rem;opacity:.8}.option:active{transform:scale(.95)}.request-icon{transform:rotate(180deg)}.notification-dot::after{content:"";position:absolute;z-index:1;top:0;right:0;height:.6em;width:.6em;background-color:#E53935;border-radius:.4em;transition:transform .3s}.shrink.notification-dot::after{transform:scale(0)}#deposit .container-header,#withdraw .container-header{background:linear-gradient(rgba(var(--foreground-color),1) 90%,transparent)}sm-tab-header{position:sticky;top:0;display:inline-flex;background-color:var(--dark-shade);z-index:2;padding:.3rem;margin:1rem 0;border-radius:3rem}sm-tab::part(tab){padding:.4rem 1.2rem}sm-panel{width:100%}.request{display:inline-flex;flex-direction:column;padding:1.5em;border-radius:.4em;border:1px solid}.request h5{margin-bottom:.2rem;opacity:.8}.request h3,.request h4{margin-bottom:1rem}.copy-row h4,.request button{margin-bottom:0}.request h4:last-of-type{margin-bottom:0}.request button{width:auto;margin-top:1.5rem}.request .copy-row{margin-bottom:1.5rem}.request .flex{align-items:center;justify-content:flex-end;margin-top:1.5rem}.request .flex button,.request .flex h5{margin:0}.deposited{color:#007732}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.container{display:grid;gap:1em;width:100%;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}.copy-row,.page .container-header{display:grid;grid-template-columns:1fr auto}.page{padding:1rem 1.5rem;padding-bottom:5rem}.page .container-header{grid-template-areas:". ." "search search";gap:1rem;top:0;background:rgba(var(--foreground-color),1);will-change:auto;z-index:2}.page .container-header .search{grid-area:search}.page .container-header .search input{padding:1em;border:none;width:100%;background:var(--dark-shade);font-size:1rem;color:rgba(var(--text-color),1);border-radius:.2em}.page .container-header .search input:focus{outline:0;background:rgba(var(--text-color-light),.2)}.copy-row{align-items:center;gap:.5rem;width:auto}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time{margin-bottom:1.5rem!important}#report_popup{width:32rem}#profile_page{display:flex;flex-direction:column}#profile_page button{align-self:flex-start}.complaint{display:grid;gap:1.5rem 0}.complaint .complaint-actions{align-items:center;margin:1.5rem 0 0}#helpline_page sm-select,.complaint .processed,.complaint .unprocessed{margin-bottom:1.5rem}.complaint .processed{color:#007732}.complaint .unprocessed{color:#d43125}#settings_page p,#transaction_result h5,.activity .activity-time{color:rgba(var(--text-color),.7)}.complaint button .icon{padding:.2rem;margin-right:.5rem;stroke:var(--accent-color);stroke-width:8}.complaints-container{padding-top:1.5rem;display:grid;align-items:flex-start;gap:1.5rem}.complaint-placeholder{animation:pulse infinite .6s alternate}.complaint-placeholder h4,.complaint-placeholder h5{border-radius:.2rem}.complaint-placeholder h5{background:rgba(var(--text-color),.1);padding:.5rem .6rem}.complaint-placeholder h4{background:rgba(var(--text-color),.2);padding:.8rem}.activity,.activity .icon{background:rgba(var(--text-color),.06)}.complaint-placeholder .demo-btn{padding:.8rem 3rem}@keyframes pulse{from{opacity:.4}to{opacity:1}}#main_loader{text-align:center;place-content:center;height:100vh;width:100vw}#main_loader sm-button{margin-left:0;margin-top:1rem}#main_loader svg{height:2rem;width:2rem;stroke:var(--accent-color);stroke-width:6;fill:none;overflow:visible;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}.activity,.select{align-items:center}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}#upi_txId_section .copy-row{margin-bottom:1.5rem}@keyframes popup{0%{stroke-dashoffset:50;transform:translateY(4rem) scale(.2,.6)}40%,41%{transform:translateY(0) scale(.2)}50%{stroke-dashoffset:50;transform:translateY(0) scale(1)}100%{stroke-dashoffset:0}}#add_person_btn:active,.activity:active,.person:active{transform:scale(.95)}#transaction_result{z-index:12}#transaction_result #transaction_heading{margin-bottom:1rem}#transaction_result .copy-row{grid-template-areas:"label label" ". .";margin-top:1rem;gap:0 1rem}#transaction_result .copy-row h4{font-weight:500}#transaction_result h5{grid-area:label}#transaction_result h4,#transaction_result h5,#transaction_result p{text-align:center}#transaction_result>h4{font-size:1.2rem;margin-top:2rem;margin-bottom:.5rem}#transaction_result sm-button{align-self:center;width:auto}#failure_svg,#success_svg{height:5rem;width:5rem;stroke-width:4;align-self:center;stroke:none;stroke-dasharray:50;fill:rgba(var(--text-color),.1);animation:popup 2s forwards cubic-bezier(.175,.885,.32,1.275)}#success_svg polyline{fill:none;stroke:#00C853}#failure_svg line{stroke:#EF5350}.rupee-symbol{height:1rem;width:1rem;fill:rgba(var(--text-color),.5)}#deposit_rupee .copy-row{margin-bottom:1rem}.activity-container{display:grid;gap:1rem}.activity{display:grid;border-radius:.6rem;padding:1rem 1.2rem;gap:0 1rem;grid-template-columns:auto 1fr auto;grid-template-areas:"icon type amount" "icon receiver time"}.activity .icon{grid-area:icon;height:3rem;width:3rem;padding:.8rem;background-size:cover;border-radius:2rem}#add_person_btn .icon,#transaction_page #transaction_details .icon,.select{background:rgba(var(--text-color),.06)}.activity .activity-type{grid-area:type;font-weight:400;font-size:.8rem}.activity .activity-receiver{grid-area:receiver;font-weight:500;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity .activity-amount{text-align:right;grid-area:amount}.activity .activity-time{text-align:right;grid-area:time;font-weight:500}.back-arrow{stroke-width:10;margin-right:.5rem;padding:.2rem}.select{max-width:50ch;position:relative;display:flex;width:100%;border-radius:.3rem}.select:first-of-type:not(:last-of-type){border-radius:.3rem .3rem 0 0}.select+.select{margin-top:0;border-radius:0 0 .3rem .3rem;border-top:solid 1px rgba(var(--text-color),.16)}.select label{display:flex;align-items:center;cursor:pointer;flex:1;padding:.8rem 1rem}.select input[type=radio]{display:none}.select input:checked~.radio .outer-ring{stroke:var(--accent-color)}.select input:checked~.radio .inner-disc{transform:none}.select .radio{width:1.2rem;height:1.2rem;fill:none;overflow:visible;margin-right:.6rem}.select .radio .outer-ring{stroke-width:8;stroke:rgba(var(--text-color),.5)}.select .radio .inner-disc{transform-origin:center;fill:var(--accent-color);transform:scale(0);transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.select .remove{width:3rem;height:2rem;padding:.7rem;cursor:pointer;stroke-width:10}.select .tag{grid-area:tag;opacity:.6;font-weight:500;border:1px solid;padding:.2rem .4rem;border-radius:.3rem;margin-right:.5rem}.select h4{font-weight:400}.add-upi{margin-top:.4rem;justify-self:flex-start;width:max-content}#transaction_page header{padding:.5rem 0}#transaction_page header .back-arrow{grid-area:back}#transaction_page h5{font-weight:400;opacity:.8;margin-bottom:.4rem}#transaction_page p:last-of-type{margin:2rem 0 1rem;font-size:.9rem;opacity:.8}#transaction_page #transaction_details{position:relative;margin:1.5rem 0;padding:1.5rem;background-color:rgba(var(--text-color),.06);max-width:50ch;border-radius:.5rem}#transaction_page #transaction_details .icon{height:4rem;width:4rem;padding:1.2rem;border-radius:4rem;margin-bottom:2rem}#add_person_btn .icon,#person_initials,.person-initials{border-radius:2rem;box-shadow:0 .1rem .1rem #00016,0 .1rem .3rem #00040}#transaction_page #transaction_details .flex{margin-bottom:1.5rem;align-items:baseline}#add_person_btn,.person{flex-direction:column;transition:transform .3s;cursor:pointer}#transaction_page #transaction_details strong{font-weight:500}#transaction_page #transaction_details strong:not(:last-of-type){margin-bottom:1rem}#transaction_page .transaction-amount{font-size:2rem;font-weight:400}#transaction_page #transaction_time{right:0;position:absolute;margin:1.5rem}#people_container{display:grid;grid-template-columns:repeat(4,1fr);padding:1.5rem;gap:2rem .2rem}#add_person_btn{display:flex;width:5rem;text-align:center;font-size:.85rem;opacity:.8;font-weight:500}#add_person_btn .icon{height:3rem;width:3rem;stroke-width:10;padding:1rem;align-self:center;margin-bottom:.4rem}.person{display:flex;align-items:center;width:5rem}#person_initials,.person-initials{display:flex;justify-content:center;height:3rem;width:3rem;font-size:1.2rem!important;font-weight:500;align-items:center;margin-bottom:.4rem!important;text-transform:uppercase}#person_popup h3,.person-name{text-transform:capitalize}.person-name{font-size:.85rem;opacity:.8;font-weight:500;text-align:center}#person_popup>.flex:first-of-type{margin:1rem 0}#person_popup>.flex:first-of-type .flex{margin-top:.5rem}#person_popup>.flex:first-of-type .flex .icon{height:2.6rem;width:2.6rem;padding:.8rem;cursor:pointer}#person_popup .copy-row{margin-bottom:1.5rem}#person_popup #show_person_name{padding:.5rem 1rem;border-radius:.4rem;max-width:30ch}#person_popup #show_person_name:focus{outline:0;background:rgba(var(--text-color),.1)}#activity_page .empty-state,#request_page .empty-state,#settings_page .empty-state{justify-content:left}#settings_page>h4{margin-top:2rem;margin-bottom:.4rem}#settings_page sm-button{margin-top:.8rem}#settings_page .flex{max-width:60ch}@media only screen and (max-width:640px){#deposit,#home_page{display:grid;gap:1.5rem;grid-template-areas:"." "left";grid-template-columns:minmax(0,1fr)}#deposit .left,#home_page .left{grid-area:left}sm-select{width:100%}.hide-on-mobile{display:none!important}#transaction_page{padding-top:0}#transaction_page header{padding:1.5rem 0}#deposit .user-panel{padding:0}}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}body{padding:0 2rem;margin-left:4rem}sm-popup{background:rgba(var(--foreground-color),1)}#navbar,#navbar .active{background:rgba(var(--text-color),.06)}#confirmation,sm-popup::part(popup){width:24rem}#navbar{justify-content:flex-start;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;border-top:none;border-radius:0;box-shadow:-.5rem 0 .5rem #00008 inset}#navbar .navbar-item{display:flex;width:auto;padding:.8rem 1.2rem}#navbar .logo h4,#navbar .navbar-item h5{display:none}#navbar .logo .main-logo,#navbar .navbar-item .icon{height:1.2rem;width:1.2rem}#navbar .navbar-item:hover{opacity:1}#navbar .logo{margin:1.5rem 1rem}.page{padding-bottom:2rem}#sign_in_popup{width:24rem}#home_page{padding-top:.5rem}#home_page .left{margin-top:1rem}#people_container,.options-tab{grid-template-columns:repeat(auto-fill,minmax(5rem,1fr));gap:2rem .8rem}.display-balance .balance{height:9rem}#settings_page .copy-row{display:inline-grid}}@media only screen and (min-width:800px){body{margin-left:11rem}.complaint{gap:0 1.5rem;grid-template-columns:1fr 1fr;grid-template-areas:". . " "header header"}.complaint .complaint-actions{grid-area:header}.complaint .left{border-right:1px solid rgba(var(--text-color),.2);padding-right:1.5rem}.complaint .right{display:flex;justify-content:center;flex-direction:column}#navbar .navbar-item h5{font-size:.9rem;margin:0;display:block}#navbar .icon{margin-right:.8rem}#navbar .logo h4{display:block;font-size:1rem}.user-panel{position:sticky;top:1.5rem;padding-top:1.5rem}#deposit,#home_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 22rem}.activity{width:60ch}}@media only screen and (min-width:1920px){body{font-size:24px}}@media only screen and (min-width:2048px){body{font-size:24px}}@media only screen and (max-width:320px){body{font-size:14px}}@media (any-hover:hover){.navbar-item:hover{background:rgba(var(--text-color),.06)}.remove{opacity:.6}.remove:hover{opacity:1}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 9b45d48..690a89f 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -4,11 +4,6 @@
     margin: 0;
     font-family: 'Roboto', sans-serif;
 }
-
-:root {
-    scroll-behavior: smooth;
-}
-
 body {
     --accent-color: #4527A0;
     --text-color: 17, 17, 17;
@@ -34,14 +29,9 @@ body[data-theme="dark"]{
     --saturation: 39%;
     --lightness: 70%;
     background-color: var(--background-color);
-    .balance:nth-of-type(3){
+    .flo-balance-card{
         color: rgba(var(--text-color), 1);
     }
-    .person{
-        .person-initials{
-            color: rgba(var(--text-color), 0.9) !important;
-        }
-    }
 }
 
 a {
@@ -198,6 +188,9 @@ button {
 .no-transformations {
     transform: none !important;
 }
+.capitalize{
+    text-transform: capitalize;
+}
 
 sm-button[variant="outlined"]{
     --accent-color: rgba(var(--text-color), 1);
@@ -231,6 +224,15 @@ sm-button[variant="outlined"]{
         stroke-dashoffset: -210;
     }
 }
+@keyframes load-btn-loader {
+    50% {
+        stroke-dashoffset: 0;
+    }
+
+    100% {
+        stroke-dashoffset: -220;
+    }
+}
 
 .action {
     position: relative;
@@ -261,7 +263,16 @@ sm-button[variant="outlined"]{
         position: absolute;
         z-index: 1;
         padding: 0.4em;
+        stroke-dashoffset: 220;
+        stroke-dasharray: 220;
     }
+    .loader:not(.animate-loader){
+        opacity: 0;
+    }
+    .animate-loader {
+        animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear;
+    }
+    
 }
 
 .clip {
@@ -602,14 +613,34 @@ details{
     .icon{
         stroke: rgba(var(--foreground-color), 1);
     }
-    sm-button{
-        border-radius: 2rem;
+    .action{
+        width: auto;
+        justify-content: flex-end;
+        h4{
+            border-radius: 2rem;
+            background-color: rgba(var(--text-color), 0.1);
+            color: rgba(var(--text-color), 1);
+            width: auto ;
+        }
+        .loader{
+            align-self: flex-end;
+        }
+        .clip{
+            clip-path: circle(0 at 100% 0) !important;
+        }
+    }
+}
+#deposit{
+    .user-panel{
+        padding: 0 1rem;
+    }
+    .display-balance {
+        grid-template-areas: 'rupee rupee' 'flo flo';
     }
 }
-
 .display-balance {
     grid-template-columns: 1fr 1fr;
-    grid-template-areas: '. .' 'flo flo';
+    grid-template-areas: 'rupee .' 'flo flo';
     gap: 0.8rem;
     margin-top: 1rem;
     .icon {
@@ -643,34 +674,33 @@ details{
     .tooltip{
         border-radius: 1rem;
         color: rgba(var(--text-color), 1);
-    }
-    &:nth-of-type(1){
-        background: url(bg-art2.svg) bottom, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2));
-        background-size: cover;
-        .tooltip{
-            box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset; 
-        }
-    }
-    &:nth-of-type(2){
-        background: url(bg-art1.svg) left bottom, linear-gradient(135deg, #fd946a, #ff4857);
-        background-size: cover;
-        .tooltip{
-            box-shadow: 0 0 0 0.4rem #ff4857 inset;
-        }
-    }
-    &:nth-of-type(3){
-        grid-area: flo;
-        color: rgba(var(--foreground-color), 1);
-        background: url(bg-art3.svg) center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980);
-        background-size: cover;
-        .tooltip{
-            box-shadow: 0 0 0 0.4rem#1b0980 inset; 
-        }
-    }
-    .tooltip{
         margin-left: auto;
     }
 }
+.rupee-balance-card{
+    grid-area: rupee;
+    background: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2));
+    background-size: 9rem, cover;
+    .tooltip{
+        box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset; 
+    }
+}
+.in-process-balance{
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom, linear-gradient(135deg, #fd946a, #ff4857);
+    background-size: cover;
+    .tooltip{
+        box-shadow: 0 0 0 0.4rem #ff4857 inset;
+    }
+}
+.flo-balance-card{
+    grid-area: flo;
+    color: rgba(var(--foreground-color), 1);
+    background: url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980);
+    background-size: cover;
+    .tooltip{
+        box-shadow: 0 0 0 0.4rem#1b0980 inset; 
+    }
+}
 
 .tooltip{
     position: absolute;
@@ -807,14 +837,19 @@ sm-panel{
     border-radius: 0.4em;
     border: solid 1px rgba(var(--text-color), 0.2);
 
+    h4{
+        font-weight: 500;
+    }
     h5 {
         margin-bottom: 0.2rem;
         text-transform: capitalize;
+        font-weight: 500;
+        opacity: 0.8;
     }
 
     h3,
     h4 {
-        margin-bottom: 1.5rem;
+        margin-bottom: 1rem;
     }
 
     h4:last-of-type {
@@ -826,7 +861,7 @@ sm-panel{
     }
 
     .amount {
-        font-size: 1.4em;
+        font-family: 'Roboto', sans-serif;
     }
 
     button {
@@ -1091,14 +1126,8 @@ sm-panel{
 }
 #transaction_result{
     z-index: 12;
-    &::part(popup){
-        background-image: url(card-back.svg);
-        background-size: cover;
-        background-position-y: -3rem;
-        background-repeat: no-repeat;
-    }
     #transaction_heading{
-        margin-bottom: 2rem;
+        margin-bottom: 1rem;
     }
     .copy-row{
         grid-template-areas: 'label label' '. .';
@@ -1117,7 +1146,7 @@ sm-panel{
     }
     & > h4{
         font-size: 1.2rem;
-        margin-top: 6rem;
+        margin-top: 2rem;
         margin-bottom: 0.5rem;
     }
     sm-button{
@@ -1132,7 +1161,7 @@ sm-panel{
     align-self: center;
     stroke: none;
     stroke-dasharray: 50;
-    fill: rgba(var(--foreground-color), 1);
+    fill: rgba(var(--text-color), 0.1);
     animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
@@ -1306,9 +1335,14 @@ sm-panel{
         font-weight: 400;
         font-family: 'Roboto', sans-serif;
         opacity: 0.8;
-        margin-bottom: 0.2rem;
+        margin-bottom: 0.4rem;
         text-transform: capitalize;
     }
+    p:last-of-type{
+        margin: 2rem 0 1rem 0;
+        font-size: 0.9rem;
+        opacity: 0.8;
+    }
     #transaction_details{
         position: relative;
         margin: 1.5rem 0;
@@ -1325,7 +1359,7 @@ sm-panel{
             margin-bottom: 2rem;
         }
         .flex{
-            margin-bottom: 1rem;
+            margin-bottom: 1.5rem;
             align-items: baseline;
         }
         strong{
@@ -1355,6 +1389,7 @@ sm-panel{
     cursor: pointer;
     display: flex;
     flex-direction: column;
+    width: 5rem;
     text-align: center;
     transition: transform 0.3s;
     font-size: 0.85rem;
@@ -1367,10 +1402,12 @@ sm-panel{
         height: 3rem;
         width: 3rem;
         border-radius: 2rem;
+        stroke-width: 10;
         padding: 1rem;
         background: rgba(var(--text-color), 0.06);
         align-self: center;
         margin-bottom: 0.4rem;
+        box-shadow: 0 0.1rem 0.1rem #00000016, 0 0.1rem 0.3rem #00000040;
     }
 }
 .person{
@@ -1380,37 +1417,60 @@ sm-panel{
     cursor: pointer;
     transition: transform 0.3s;
     width: 5rem;
+    -webkit-tap-highlight-color: transparent;
     &:active{
         transform: scale(0.95);
     }
-    .person-initials{
-        display: flex;
-        justify-content: center;
-        height: 3rem;
-        width: 3rem;
-        font-size: 1.2rem !important;
-        font-weight: 500;
-        align-items: center;
-        border-radius: 2rem;
-        margin-bottom: 0.4rem !important;
-        text-transform: uppercase;
-    }
-    .person-name{
-        font-size: 0.85rem;
-        opacity: 0.8;
-        font-weight: 500;
-        text-transform: capitalize;
-        text-align: center;
-    }
+}
+.person-initials, #person_initials{
+    display: flex;
+    justify-content: center;
+    height: 3rem;
+    width: 3rem;
+    font-size: 1.2rem !important;
+    font-weight: 500;
+    align-items: center;
+    border-radius: 2rem;
+    margin-bottom: 0.4rem !important;
+    text-transform: uppercase;
+    box-shadow: 0 0.1rem 0.1rem #00000016, 0 0.1rem 0.3rem #00000040;
+}
+.person-name{
+    font-size: 0.85rem;
+    opacity: 0.8;
+    font-weight: 500;
+    text-transform: capitalize;
+    text-align: center;
 }
 
 #person_popup{
+    & > .flex:first-of-type{
+        margin: 1rem 0;
+        .flex{
+            margin-top: 0.5rem;
+            .icon{
+                height: 2.6rem;
+                width: 2.6rem;
+                padding: 0.8rem;
+                cursor: pointer;
+            }
+        }
+    }
     h3{
         text-transform: capitalize;
     }
     .copy-row{
         margin-bottom: 1.5rem;
     }
+    #show_person_name{
+        padding: 0.5rem 1rem;
+        border-radius: 0.4rem;
+        max-width: 30ch;
+        &:focus{
+            outline: none;
+            background: rgba(var(--text-color), 0.1);
+        }
+    }
 }
 
 #activity_page,
@@ -1457,6 +1517,11 @@ sm-panel{
             padding: 1.5rem 0;
         }
     }
+    #deposit{
+        .user-panel{
+            padding: 0;
+        }
+    }
 }
 
 @media only screen and (min-width: 640px) {
diff --git a/index.html b/index.html
index 403bcc0..f4d52a2 100644
--- a/index.html
+++ b/index.html
@@ -53,7 +53,7 @@
             Sign In
         </button>
     </sm-popup>
-    <sm-popup id="cash_transfer">
+    <sm-popup id="send_rupee_popup">
         <header class="popup-header" slot="header">
             <svg class="icon" onclick="this.closest('sm-popup').hide()" viewBox="0 0 64 64">
                 <title>close</title>
@@ -381,7 +381,16 @@
                 <line x1="64" y1="64" x2="0" y2="0" />
             </svg>
         </header>
-        <h3 id="show_person_name"></h3>
+        <div class="flex direction-column align-center">
+            <h3 id="person_initials"></h3>
+            <div class="flex space-between align-center">
+                <h4 class="capitalize" id="show_person_name"></h4>
+                <svg id="edit_person_name" class="icon" onclick="setNameEditable()" viewBox="0 0 64 64">
+                    <title>edit</title>
+                    <path d="M46.73,14.81l7,7,7.65-7.6A7.15,7.15,0,0,0,61.39,4L60.11,2.77a7.23,7.23,0,0,0-10.19,0L3.87,48.57a5,5,0,0,0-1.39,2.6L.53,61.27a1.74,1.74,0,0,0,2,2l10.15-1.94A5.06,5.06,0,0,0,15.34,60L49.6,25.9"/>
+                </svg>
+            </div>
+        </div>
         <h5>FLO ID</h5>
         <div class="copy-row grid">
             <h4 id="show_person_flo_id" class="copy"></h4>
@@ -391,21 +400,20 @@
                 <path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
             </svg>
         </div>
-        <h5>Rupee actions</h5>
         <div class="flex">
-            <div class="option" onclick="showPopup('cash_transfer')">
+            <div class="option" onclick="showPopup('send_rupee_popup')">
                 <svg class="icon" viewBox="0 0 64 64">
                     <path
                         d="M47.28,16.8,29.6,34.64a3.3,3.3,0,0,1-3.59.71L2.5,25.42a3.28,3.28,0,0,1,.26-6.13L59.21.87A3.28,3.28,0,0,1,63.32,5l-18.93,56a3.26,3.26,0,0,1-6.12.18l-6.4-15.68" />
                 </svg>
-                <h4>Send</h4>
+                <h4>Send rupee</h4>
             </div>
             <div class="option" onclick="showPopup('request_rupee')">
                 <svg class="icon request-icon" viewBox="0 0 64 64">
                     <path
                         d="M47.28,16.8,29.6,34.64a3.3,3.3,0,0,1-3.59.71L2.5,25.42a3.28,3.28,0,0,1,.26-6.13L59.21.87A3.28,3.28,0,0,1,63.32,5l-18.93,56a3.26,3.26,0,0,1-6.12.18l-6.4-15.68" />
                 </svg>
-                <h4>Request</h4>
+                <h4>Request rupee</h4>
             </div>
         </div>
     </sm-popup>
@@ -504,7 +512,7 @@
             <div class="left">
                 <h4>Rupee actions</h4>
                 <section class="options-tab">
-                    <div class="option" onclick="showPopup('cash_transfer')">
+                    <div class="option" onclick="showPopup('send_rupee_popup')">
                         <svg class="icon" viewBox="0 0 64 64">
                             <path
                                 d="M47.28,16.8,29.6,34.64a3.3,3.3,0,0,1-3.59.71L2.5,25.42a3.28,3.28,0,0,1,.26-6.13L59.21.87A3.28,3.28,0,0,1,63.32,5l-18.93,56a3.26,3.26,0,0,1-6.12.18l-6.4-15.68" />
@@ -565,12 +573,19 @@
                 </section>
             </div>
             <div class="user-panel">
-                <div class="flex align-items space-between">
+                <div class="flex align-center space-between">
                     <h4>My Balances</h4>
-                    <sm-button class="small round" onclick="refresh_balance(this)">Check Balance</sm-button>
+                    <button id="refresh_balance_btn" onclick="refresh_balance(this)" class="action expand" type="submit">
+                        <h4 class="primary-btn expand">
+                            Refresh Balance
+                        </h4>
+                        <svg viewBox="0 0 73 73" class="loader">
+                            <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
+                        </svg>
+                    </button>
                 </div>
                 <div class="display-balance grid">
-                    <div class="balance">
+                    <div class="balance rupee-balance-card">
                         <div class="tooltip help">
                             <div class="tt-icon">?</div>
                             <p class="tooltip-text">Your wallet balance</p>
@@ -578,7 +593,7 @@
                         <h5>Rupee</h5>
                         <h4 class="token-balance">0</h4>
                     </div>
-                    <div class="balance">
+                    <div class="balance in-process-balance">
                         <div class="tooltip help">
                             <div class="tt-icon">?</div>
                             <p class="tooltip-text">Money that is in-process after deposit.</p>
@@ -586,7 +601,7 @@
                         <h5>In-process</h5>
                         <h4 class="uncnf-token-balance">0</h4>
                     </div>
-                    <div class="balance">
+                    <div class="balance flo-balance-card">
                         <div class="tooltip help"> 
                             <div class="tt-icon">?</div>
                             <p class="tooltip-text">FLO balance required for each transaction.</p>
@@ -607,11 +622,9 @@
                 </sm-tab-header>
                 <sm-tab-panels id="requests_to_cashier">
                     <sm-panel>
-                        <div class="container-header">
-                            <sm-button id="fetch_deposits" onclick="show_deposit_request()">
-                                Load pending
-                            </sm-button>
-                        </div>
+                        <sm-button id="fetch_deposits" onclick="show_deposit_request()" class="bottom-margin">
+                            Load pending
+                        </sm-button>
                         <div id="pending_deposits_container" class="container"></div>
                         <div id="deposit_illustration" class="empty-state">
                             <svg viewBox="0 0 529.94 446.5">
@@ -668,9 +681,7 @@
                         </div>
                     </sm-panel>
                     <sm-panel>
-                        <div class="container-header">
-                            <sm-button id="fetch_withdraws" onclick="show_withdraw_request()">Load pending</sm-button>
-                        </div>
+                        <sm-button id="fetch_withdraws" onclick="show_withdraw_request()" class="bottom-margin">Load pending</sm-button>
                         <div id="pending_withdrawals_container" class="container"></div>
                         <div id="withdraw_illustration" class="empty-state">
                             <svg viewBox="0 0 529.94 446.5">
@@ -727,11 +738,9 @@
                         </div>
                     </sm-panel>
                     <sm-panel>
-                        <div class="container-header">
-                            <sm-button id="fetch_pay_requests" onclick="showPayRequests()">
-                                Load pending
-                            </sm-button>
-                        </div>
+                        <sm-button id="fetch_pay_requests" onclick="showPayRequests()" class="bottom-margin">
+                            Load pending
+                        </sm-button>
                         <div id="pay_requests_container" class="container"></div>
                         <div id="pay_illustration" class="empty-state">
                             <svg viewBox="0 0 529.94 446.5">
@@ -795,11 +804,11 @@
                     <sm-button class="small round" onclick="refresh_balance(this)">Check Balance</sm-button>
                 </div>
                 <div class="display-balance grid">
-                    <div class="balance">
+                    <div class="balance rupee-balance-card">
                         <h5>Rupee</h5>
                         <h4 class="token-balance">0</h3>
                     </div>
-                    <div class="balance">
+                    <div class="balance flo-balance-card">
                         <h5>FLO</h5>
                         <h4 class="flo-balance">0</h4>
                     </div>
@@ -904,10 +913,12 @@
                 <p>Toggle dark theme</p>
                 <sm-switch id="theme_switcher" class="justify-right"></sm-switch>
             </div>
-            <h4>My UPIs</h4>
-            <div class="upi-container"></div>
-            <p class="empty-state">Add UPI address for easier access during various transactions.</p>
-            <sm-button variant="no-outline" onclick="showPopup('add_upi_popup')">+ Add UPI address</sm-button>
+            <div class="user-option">
+                <h4 class="top-margin">My UPIs</h4>
+                <div class="upi-container"></div>
+                <p class="empty-state">Add UPI address for easier access during various transactions.</p>
+                <sm-button variant="no-outline" onclick="showPopup('add_upi_popup')">+ Add UPI address</sm-button>
+            </div>
             <h4>Sign Out</h4>
             <p>Signing out will erase all the data stored in local storage and Indexed DB. This will remove saved private key, UPI addresses.</p>
             <sm-button variant="primary" onclick="signOut()">Sign out</sm-button>    
@@ -921,6 +932,7 @@
                 <h4 id="transaction_type"></h4>
             </header>
             <div id="transaction_details" class="grid direction-column"></div>
+            <p>It may take upto 48 working hours for a transaction to complete. If even after 48 hours transction wasn't completed and your money was deducted, use <Strong>Report</Strong> button to report your issue.</p>
             <sm-button onclick="showPopup('report_popup')" variant="outlined">Report</div>
         </section>
     </main>
@@ -965,9 +977,6 @@
                 console.log(`Welcome ${myFloID}`)
                 refresh_balance()
                 userFloIdContainers.forEach(container => container.textContent = myFloID)
-                defaultUPI = localStorage.getItem(`defaultUPI${myFloID}`)
-                renderUserUPI()
-                renderAllContacts()
                 hideLoader()
                 await token_app.actions.doShreeGanesh();
             }).catch(error => console.error(error))
@@ -979,7 +988,7 @@
             notificationSound = document.getElementById('notification_sound');
             let defaultUPI
             const render = {
-            depositRequest(txid, floId) {
+            depositRequest(txid, floId, amount) {
                 let card = document.createElement('div');
                 card.classList.add('request')
                 setAttributes(card, {
@@ -990,12 +999,14 @@
                                     <h4 class="breakable">${floId}</h4>
                                     <h5>UPI TXID</h5>
                                     <h4 class="breakable">${txid}</h4>
+                                    <h5>Amount</h5>
+                                    <h4 class="breakable">₹${amount}</h4>
                                     <button id="" class="confirm-deposit-btn">
                                         Confirm
                                     </button>`;
                 return card;
             },
-            withdrawRequest(txid, upiId, floId) {
+            withdrawRequest(txid, upiId, floId, amount) {
                 let card = document.createElement('div');
                 card.classList.add('request')
                 setAttributes(card, {
@@ -1006,9 +1017,9 @@
                 card.innerHTML = `  <h5>FLO address</h5>
                                     <h4 class="breakable">${floId}</h4>
                                     <h5>UPI ID</h5>
-                                    <h3 class="breakable">${upiId}</h3>
-                                    <h5>Transaction ID</h5>
-                                    <h4 class="breakable">${txid}</h4>
+                                    <h4 class="breakable">${upiId}</h4>
+                                    <h5>TAmount</h5>
+                                    <h4 class="breakable">₹${amount}</h4>
                                     <button id="" class="confirm-withdraw-btn"">
                                         Confirm
                                     </button>`;
@@ -1115,7 +1126,7 @@
                     <h4 class="activity-type">${transaction}</h4>`
                 if(receiver)
                     composition += `
-                        <h4 class="activity-receiver ">${receiver}</h4>
+                        <h4 class="activity-receiver breakable">${allContacts[receiver]  ? allContacts[receiver].name : receiver}</h4>
                     `
                 composition += `
                     <h4 class="activity-amount ${className}">${sign} ₹${amount}</h4>
@@ -1136,16 +1147,9 @@
                 })
                 markup = `   <h5 class="time">${formatedTime(time)}</h5>
                                     <h5>Request by</h5>
-                                    <div class="copy-row">
-                                        <h4 class="copy">${senderAddress}</h4>
-                                        <svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64">
-                                            <title>Copy</title>
-                                            <rect x="16" y="16" width="48" height="48" rx="6" />
-                                            <path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
-                                        </svg>
-                                    </div>
+                                    <h4 class="breakable">${allContacts[senderAddress]  ? allContacts[senderAddress].name : senderAddress}</h4>
                                     <h5 class="label">amount</h5>
-                                    <h4>₹ ${amount}</h4>
+                                    <h4 class="amount">₹ ${amount}</h4>
                                     `;
                 if (enableActions)
                     markup += `
@@ -1409,14 +1413,12 @@
                     </div>`
                 return card;
             },
-            contact(floId, name){
-                console.log(floId, name)
+            contact(floId, name, color){
                 let card = document.createElement('div')
                 card.classList.add('person')
                 setAttributes(card, {'data-flo-id': floId, 'data-name': name})
-                let color = randomHsl()
                 card.innerHTML = `
-                    <h3 class="person-initials" style="background-color: ${color.light}; color: ${color.primary}">${name.charAt(0)}</h3>
+                    <h3 class="person-initials" style="background-color: ${color.light};">${name.charAt(0)}</h3>
                     <h4 class="person-name">${name}</h4>
                 `
                 return card
@@ -1505,9 +1507,22 @@
             switch(e.detail.popup.id){
                 case 'deposit_rupee' :
                     request_rupee_token()
-                    break;
-                }
-            })
+                break;
+                case 'person_popup':
+                    personPopupOpen = true
+                break;
+                case 'send_rupee_popup':
+                    if(personPopupOpen){
+                        tokenReceiver.value = person.dataset.floId
+                    }
+                break;
+                case 'request_rupee':
+                    if(personPopupOpen){
+                        requestedAddress.value = person.dataset.floId
+                    }
+                break;
+            }   
+        })
         document.addEventListener('popupclosed', e => {
             popupStack = e.detail.popupStack    
             let thisPopup = e.detail.popup,
@@ -1528,7 +1543,7 @@
                     document.querySelector('#navbar').classList.remove('hide-completely')
                     document.querySelector('#main_header').classList.remove('hide-completely')
                 break;
-                case 'cash_transfer' : 
+                case 'send_rupee_popup' : 
                     payingRequested = false;
                     tokenReceiver.readOnly = false
                     tokenAmount.readOnly = false
@@ -1543,6 +1558,9 @@
                     transactionFailedSection.classList.add('hide-completely')
                 }, 300);
                 break;
+                case 'person_popup':
+                    personPopupOpen = false
+                break;
                 case 'prompt':
                 if (thisPopup.querySelector('sm-input').value == '')
                     thisPopup.querySelector('.cancel-btn').click()
@@ -1740,11 +1758,20 @@
         }
 
         let payingRequested = false,
-            currentPaymentRequest;
+            currentPaymentRequest,
+            person,
+            personName;
         const   tokenReceiver = document.getElementById('token_receiver'),
                 tokenAmount = document.getElementById('token_amount'),
                 depositRupeeAmount = document.getElementById('token_amount_to_buy')
 
+        const   requestedAddress = document.getElementById('requested_address'),
+                requestedAmount = document.getElementById('requested_amount')      
+        
+        const   showPersonName = document.getElementById('show_person_name'),
+                showPersonFloId = document.getElementById('show_person_flo_id'),
+                personInitials = document.getElementById('person_initials')
+        
         window.addEventListener('load', () => {
             document.addEventListener('input', e => {
                 if (e.target.closest('sm-input')) {
@@ -1763,12 +1790,12 @@
 
             //Function for handling contact click event
 
-            const showPersonName = document.getElementById('show_person_name'),
-                    showPersonFloId = document.getElementById('show_person_flo_id')
             peopleContainer.addEventListener('click', e => {
                 if(e.target.closest('.person')){
-                    let person = e.target.closest('.person')
+                    person = e.target.closest('.person')
                     showPersonName.textContent = person.dataset.name
+                    personInitials.textContent = person.dataset.name.charAt(0)
+                    personInitials.style.background = allContacts[person.dataset.floId].color.light
                     showPersonFloId.textContent = person.dataset.floId
                     showPopup('person_popup')
                 }
@@ -1778,6 +1805,15 @@
                 }
             })
 
+            document.getElementById('person_popup').addEventListener('click', e => {
+                if(!e.target.closest('#show_person_name') && !e.target.closest('#edit_person_name')){
+                    if(showPersonName.isContentEditable && personName !== showPersonName.textContent){
+                        changePersonName()
+                        showPersonName.contentEditable = 'false'
+                    }
+                }
+            })
+
             // Function for confirming deposit requests 
             document.getElementById('pending_deposits_container').addEventListener('click', async (e) => {
                 if (e.target.closest('.confirm-deposit-btn'))
@@ -1845,12 +1881,10 @@
                         customMsg)
                 }
             })
-            // Function for requesting rupee
+            // Function for requesting rupee     
             document.getElementById('request_rupee_btn').addEventListener('click', (e) => {
-                let requestedAddress = document.getElementById('requested_address').value,
-                    requestedAmount = document.getElementById('requested_amount').value
                 btnLoading('request_rupee_btn', 'start')
-                request_payment(requestedAddress, requestedAmount)
+                request_payment(requestedAddress.value, requestedAmount.value)
             })
 
             // Function for accepting payment request
@@ -1860,7 +1894,7 @@
                         senderAddress = parent.dataset.senderAddress,
                         amount = parent.dataset.amount,
                         paymentRequestId = parent.dataset.paymentRequestId;;
-                    showPopup('cash_transfer');
+                    showPopup('send_rupee_popup');
                     payingRequested = true;
                     currentPaymentRequest = {
                         paymentRequest: parent,
@@ -2015,7 +2049,7 @@
 
             if(receiver !== 'undefined')
                 composition +=`
-                    <h5>${transaction}</h5> <strong>${receiver}</strong>`
+                    <h5>${transaction}</h5> <strong>${allContacts[receiver] ? allContacts[receiver].name : receiver}</strong>`
 
             if(upiTxId !== 'undefined')
                 composition += `
@@ -2035,22 +2069,22 @@
         }
 
 
-        let allPages = document.querySelectorAll('.page'),
-            allTabs = document.querySelectorAll('.navbar-item');
+        const allPages = document.querySelectorAll('.page'),
+            allTabs = document.querySelectorAll('.navbar-item')
 
         function showPage(page, btn) {
             allPages.forEach((page) => {
                 page.classList.add('hide-completely')
             })
+            document.getElementById(page).classList.remove('hide-completely')
             allTabs.forEach((tab) => {
                 tab.classList.remove('active')
             })
             if(btn){
                 if(typeof btn === 'string')
-                    btn = document.getElementById(btn)
+                btn = document.getElementById(btn)
                 btn.classList.add('active', 'shrink')
             }
-            document.getElementById(page).classList.remove('hide-completely')
             if (page === 'request_page') {
                 show_payment_requests()
             }
@@ -2134,7 +2168,7 @@
         const contactFlo = document.getElementById('person_flo_id'),
                 contactName = document.getElementById('person_name')
         async function addPerson(){
-            compactIDB.addData('contacts', {name: contactName.value}, contactFlo.value)
+            compactIDB.addData('contacts', {name: contactName.value, color: randomHsl()}, contactFlo.value)
             .then(success => {
                 notify('Contact added', 'success')
                 renderAllContacts()
@@ -2146,11 +2180,12 @@
         }
 
         const peopleContainer = document.getElementById('people_container')
+        let allContacts
         async function renderAllContacts(){
-            const allContacts = await compactIDB.readAllData('contacts')
+            allContacts = await compactIDB.readAllData('contacts')
             peopleContainer.innerHTML = ``
             for(contact in allContacts){
-                frag.append(render.contact(contact, allContacts[contact].name))
+                frag.append(render.contact(contact, allContacts[contact].name, allContacts[contact].color))
             }
             peopleContainer.append(frag)
             let addPersonButton = document.createElement('div')
@@ -2166,6 +2201,30 @@
             peopleContainer.prepend(addPersonButton)
         }
 
+        function setNameEditable(){
+            showPersonName.contentEditable = 'true'
+            showPersonName.focus()
+            document.execCommand('selectAll', false, null);
+            document.getSelection().collapseToEnd();
+            personName = showPersonName.textContent
+        }
+
+        async function changePersonName(){
+            let contact = await compactIDB.readData('contacts', person.dataset.floId)
+            contact.name = showPersonName.textContent
+            if(showPersonName.textContent === '')
+                contact.name = 'Unknown'
+            compactIDB.writeData('contacts', contact, person.dataset.floId)
+            .then(success => {
+                notify('Changes saved', 'success')
+                renderAllContacts()
+                personInitials.textContent = contact.name.charAt(0)
+            })
+            .catch(error => {
+                notify(error, 'error')
+            })
+        }
+
         function signIn() {
             return new Promise((resolve, reject) => {
                 hideLoader()
@@ -11663,15 +11722,14 @@
                 #!#helplineFloId=F9MAyvT5b9aSfsuukAungrbt1L5fgmJmuK
                 #!#cashiers=
                 {
-                    "FCja6sLv58e3RMy41T5AmWyvXEWesqBCkX": {
-                        "upi_id": "8507742774@ybl"
-                    },
                     "FPFeL5PXzW9bGosUjQYCxTHSMHidnygvvd": {
                         "upi_id": "7744023898@paytm"        
                     }
                 }`
             /*
-            ,
+                    "FCja6sLv58e3RMy41T5AmWyvXEWesqBCkX": {
+                        "upi_id": "8507742774@ybl"
+                    },
                     "FHW2kgYEhDt85vjAiMMF7bQqdP74L7iwvQ": {
                         "upi_id": "8340617958@ybl"
                     },
@@ -11805,7 +11863,7 @@
                 })
                 let cashierList = ``,
                     cashierSelect = document.getElementById('select_cashier')
-                cashierList += `<sm-strip-option value = "">Select Cashier...</sm-strip-option>`;
+                cashierList += `<sm-strip-option value = "">Select Cashier</sm-strip-option>`;
                 for (cashier in token_app.master_configurations.cashiers)
                     cashierList += `<sm-strip-option value = "${cashier}">${cashier}</sm-strip-option>`
                 cashierSelect.innerHTML = cashierList;
@@ -11827,6 +11885,10 @@
                     option.classList.remove('hide-completely')
                 })
                 userType.forEach(user => user.textContent = 'User')
+                defaultUPI = localStorage.getItem(`defaultUPI${myFloID}`)
+                renderUserUPI()
+                renderAllContacts()
+                
                 show_all_user_activities()
                 show_payment_requests()
                 showPage('home_page', 'home_page_btn')
@@ -12035,11 +12097,13 @@
                 for (const m of general_msg) {
                     if (cash_deposits_upi_txid_list.includes(m.message.upi_txid)) continue;
                     if (processed_deposits.includes(m.message.upi_txid)) continue;
+                    console.log(m)
                     let {
                         user_flo_id,
-                        upi_txid
+                        upi_txid,
+                        deposit_amount
                     } = m.message;
-                    frag.append(render.depositRequest(upi_txid, user_flo_id))
+                    frag.append(render.depositRequest(upi_txid, user_flo_id, deposit_amount))
                 }
 
                 depositsContainer.append(frag)
@@ -12083,12 +12147,14 @@
                 for (const m of general_msg) {
                     if (cash_withdraws_token_txid_list.includes(m.message.token_txid)) continue;
                     if (processed_withdraws.includes(m.message.token_txid)) continue;
+                    console.log(m)
                     let {
                         token_txid,
                         user_flo_id,
-                        withdrawer_upi
+                        withdrawer_upi,
+                        withdraw_amount
                     } = m.message
-                    frag.append(render.withdrawRequest(token_txid, withdrawer_upi, user_flo_id))
+                    frag.append(render.withdrawRequest(token_txid, withdrawer_upi, user_flo_id, withdraw_amount))
                 }
 
                 withdrawsContainer.append(frag)
@@ -12299,7 +12365,7 @@
         async function refresh_balance(refreshButton) {
             try {
                 if (refreshButton)
-                    refreshButton.textContent = 'Checking...'
+                    btnLoading(refreshButton, 'start')
                 const current_token_balance = document.querySelector('.token-balance').textContent;
                 if (typeof current_token_balance == "string") {
                     const [get_user_rupee_balance, get_user_flo_balance] = await Promise.all([ ajaxGet(
@@ -12327,12 +12393,14 @@
                     
                 }
                 if (refreshButton) {
-                    notify('Balance Updated')
-                    refreshButton.textContent = 'Check Balance'
+                    btnLoading(refreshButton, 'stop')
                 }
                 return true;
             } catch (error) {
                 notify("Unable to load balance", 'error')
+                if (refreshButton) {
+                    btnLoading(refreshButton, 'stop')
+                }
                 throw new Error(error);
             }
         }