From c8d11d0d11378f4d530474c92947ee70578caa2b Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Sun, 10 Apr 2022 23:06:45 +0530
Subject: [PATCH 1/8] major UI update

---
 css/main.css          | 269 +++++++++++++++--------------
 css/main.min.css      |   2 +-
 css/main.scss         | 266 ++++++++++++++---------------
 index.html            | 385 ++++++++++++++++++++++++------------------
 scripts/components.js |  14 +-
 scripts/fn_ui.js      | 175 +++++++++++++------
 scripts/std_ui.js     | 132 +++------------
 7 files changed, 637 insertions(+), 606 deletions(-)

diff --git a/css/main.css b/css/main.css
index bc2ec5a..d310320 100644
--- a/css/main.css
+++ b/css/main.css
@@ -17,8 +17,8 @@ body {
 body {
   --accent-color: #256eff;
   --text-color: 20, 20, 20;
-  --background-color: 240, 240, 240;
-  --foreground-color: 250, 250, 250;
+  --foreground-color: 252, 253, 255;
+  --background-color: 241, 243, 248;
   --danger-color: rgb(255, 75, 75);
   --green: #1cad59;
   scrollbar-width: thin;
@@ -28,16 +28,13 @@ body {
   transition: background-color 0.3s;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
 }
 
 body[data-theme=dark] {
-  --accent-color: #86afff;
+  --accent-color: #90b8f8;
   --text-color: 220, 220, 220;
-  --background-color: 10, 10, 10;
-  --foreground-color: 24, 24, 24;
+  --foreground-color: 27, 28, 29;
+  --background-color: 21, 22, 22;
   --danger-color: rgb(255, 106, 106);
   --green: #00e676;
 }
@@ -65,6 +62,14 @@ a:focus-visible {
   box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
 }
 
+a.button {
+  padding: 0.4rem 0.6rem;
+  border-radius: 0.3rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: inherit;
+}
+
 button {
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -458,6 +463,20 @@ h3 {
   fill: var(--accent-color);
 }
 
+.page {
+  height: 100%;
+}
+
+.page-layout {
+  display: grid;
+  gap: 1.5rem 0;
+  grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
+  align-content: flex-start;
+}
+.page-layout > * {
+  grid-column: 2/3;
+}
+
 #confirmation_popup,
 #prompt_popup {
   flex-direction: column;
@@ -492,7 +511,6 @@ h3 {
   width: 100%;
   padding: 0 1.5rem;
   align-items: center;
-  grid-auto-flow: column;
 }
 
 .popup__header__close {
@@ -501,17 +519,51 @@ h3 {
   cursor: pointer;
 }
 
+#landing > section {
+  justify-content: center;
+  justify-items: center;
+  align-items: center;
+  text-align: center;
+  padding: 8vw 0;
+}
+#landing h1 {
+  font-size: clamp(2rem, 5vw, 5rem);
+}
+
+#sign_in,
+#sign_up {
+  justify-items: center;
+  align-content: center;
+}
+#sign_in section,
+#sign_up section {
+  margin-top: -8rem;
+  width: min(24rem, 100%);
+}
+#sign_in sm-form,
+#sign_up sm-form {
+  margin: 2rem 0;
+}
+
+#sign_up .h2 {
+  margin-bottom: 0.5rem;
+}
+#sign_up .card {
+  margin: 1.5rem 0;
+}
+#sign_up h5 {
+  font-weight: 500;
+  color: rgba(var(--text-color), 0.8);
+}
+#sign_up .warning {
+  margin-top: 2rem;
+}
+
 #main_header {
   padding: 1rem 1.5rem;
 }
-
-#main_card {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  background-color: rgba(var(--foreground-color), 1);
-  transition: background-color 0.3s;
+#main_header a {
+  color: rgba(var(--text-color), 1);
 }
 
 #pages_container {
@@ -519,63 +571,6 @@ h3 {
   overflow-y: auto;
 }
 
-#main_navbar {
-  display: flex;
-  background: rgba(var(--text-color), 0.03);
-}
-#main_navbar.hide-away {
-  position: absolute;
-}
-#main_navbar ul {
-  display: flex;
-  height: 100%;
-  width: 100%;
-}
-#main_navbar ul li {
-  width: 100%;
-}
-
-.nav-item {
-  position: relative;
-  display: flex;
-  flex: 1;
-  width: 100%;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem 0.3rem;
-  color: var(--text-color);
-  font-size: 0.7rem;
-  border-radius: 0.3rem;
-}
-.nav-item .icon {
-  transition: transform 0.2s;
-}
-.nav-item__title {
-  margin-top: 0.3rem;
-  transition: opacity 0.2s, transform 0.2s;
-}
-.nav-item--active {
-  color: var(--accent-color);
-}
-.nav-item--active .icon {
-  fill: var(--accent-color);
-  transform: translateY(50%);
-}
-.nav-item--active .nav-item__title {
-  transform: translateY(100%);
-  opacity: 0;
-}
-.nav-item__indicator {
-  position: absolute;
-  bottom: 0;
-  width: 2rem;
-  height: 0.3rem;
-  background: var(--accent-color);
-  border-radius: 1rem 1rem 0 0;
-  z-index: 1;
-}
-
 .password-field label {
   display: flex;
 }
@@ -605,37 +600,70 @@ h3 {
 
 .primary-action {
   display: flex;
+  flex-direction: column;
+  align-items: center;
   padding: 0.8rem 1rem;
   gap: 0.5rem;
   white-space: normal;
   font-size: 0.8rem;
   border-radius: 0.5rem;
   background-color: transparent;
-  border: thin solid rgba(var(--text-color), 0.3);
+  min-width: 5rem;
+  max-width: 6rem;
+  text-align: center;
 }
 .primary-action .icon {
   fill: var(--accent-color);
 }
-.primary-action:not(:last-of-type) {
-  margin-right: 0.5rem;
+
+#user {
+  padding: 1rem 1.5rem;
 }
 
-.page {
-  position: relative;
+#saved_ids_list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.saved-id {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  color: inherit;
+  padding: 0.5rem 0;
+}
+.saved-id__initials {
   display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  align-content: flex-start;
-  padding: 1.5rem;
+  align-items: center;
+  justify-content: center;
+  height: 2.5rem;
+  width: 2.5rem;
+  color: rgba(var(--background-color), 1);
+  background-color: var(--accent-color);
+  border-radius: 1rem;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+.saved-id__title {
+  font-size: 0.9rem;
 }
 
-#wallet_section {
-  background-color: rgba(var(--text-color), 0.03);
+.card {
+  background-color: rgba(var(--foreground-color), 1);
   border-radius: 0.5rem;
   padding: 1.5rem;
 }
 
-#transactions_list {
+#history > *,
+#wallet_history > * {
+  width: min(60ch, 100%);
+  justify-self: center;
+}
+
+#token_transactions {
   flex-direction: column;
   padding-bottom: 4rem;
 }
@@ -681,6 +709,9 @@ h3 {
 .transaction__amount.sent::before {
   content: "-";
 }
+.transaction__amount.received {
+  color: var(--green);
+}
 .transaction__amount.received::before {
   content: "+";
 }
@@ -814,67 +845,31 @@ h3 {
     --width: 24rem;
   }
 
+  .page-layout {
+    grid-template-columns: 1fr 90vw 1fr;
+  }
+
   .popup__header {
     grid-column: 1/-1;
     padding: 1rem 1.5rem 0 1.5rem;
   }
 
-  #main_card {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto 1fr;
-    grid-template-areas: "nav header" "nav main";
-    position: relative;
-    border-radius: 0.5rem;
-    overflow: hidden;
-    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 1rem 3rem rgba(0, 0, 0, 0.2);
-    background-color: rgba(var(--foreground-color), 0.9);
-  }
-
-  #main_header {
-    grid-area: header;
-  }
-
-  #pages_container {
-    grid-area: main;
-  }
-
-  #main_navbar {
-    grid-area: nav;
-    border-top: none;
-    flex-direction: column;
-    height: 100%;
-  }
-  #main_navbar ul {
-    flex-direction: column;
-    gap: 0.5rem;
-    padding: 0.3rem;
-  }
-  #main_navbar ul li:last-of-type {
-    margin-top: auto;
-  }
-
-  .nav-item {
-    aspect-ratio: 1/1;
-  }
-  .nav-item__indicator {
-    width: 0.25rem;
-    height: 50%;
-    left: 0;
-    border-radius: 0 1rem 1rem 0;
-    bottom: auto;
-  }
-
   #user {
+    padding: 1.5rem 8vmax;
     grid-template-columns: 1fr 20rem;
     align-content: flex-start;
     align-items: flex-start;
   }
-}
-@media screen and (min-width: 56rem) {
-  #main_card {
-    height: 80vh;
-    width: 56rem;
+
+  .saved-id {
+    padding: 1rem;
+    border-radius: 0.5rem;
+    background-color: rgba(var(--text-color), 0.03);
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  #wallet_section {
+    grid-area: 1/2/3/3;
   }
 }
 @media (any-hover: hover) {
diff --git a/css/main.min.css b/css/main.min.css
index f425764..b9af1e7 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #256eff;--text-color: 20, 20, 20;--background-color: 240, 240, 240;--foreground-color: 250, 250, 250;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}body[data-theme=dark]{--accent-color: #86afff;--text-color: 220, 220, 220;--background-color: 10, 10, 10;--foreground-color: 24, 24, 24;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1)}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:1rem}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details{padding:1rem 0}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.6rem 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}h3{font-size:1.2rem;line-height:1.3}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center;grid-auto-flow:column}.popup__header__close{padding:.5rem;margin-left:-0.5rem;cursor:pointer}#main_header{padding:1rem 1.5rem}#main_card{display:flex;flex-direction:column;height:100%;width:100%;background-color:rgba(var(--foreground-color), 1);transition:background-color .3s}#pages_container{flex:1;overflow-y:auto}#main_navbar{display:flex;background:rgba(var(--text-color), 0.03)}#main_navbar.hide-away{position:absolute}#main_navbar ul{display:flex;height:100%;width:100%}#main_navbar ul li{width:100%}.nav-item{position:relative;display:flex;flex:1;width:100%;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .3rem;color:var(--text-color);font-size:.7rem;border-radius:.3rem}.nav-item .icon{transition:transform .2s}.nav-item__title{margin-top:.3rem;transition:opacity .2s,transform .2s}.nav-item--active{color:var(--accent-color)}.nav-item--active .icon{fill:var(--accent-color);transform:translateY(50%)}.nav-item--active .nav-item__title{transform:translateY(100%);opacity:0}.nav-item__indicator{position:absolute;bottom:0;width:2rem;height:.3rem;background:var(--accent-color);border-radius:1rem 1rem 0 0;z-index:1}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.clip{-webkit-clip-path:circle(0);clip-path:circle(0)}.primary-action{display:flex;padding:.8rem 1rem;gap:.5rem;white-space:normal;font-size:.8rem;border-radius:.5rem;background-color:transparent;border:thin solid rgba(var(--text-color), 0.3)}.primary-action .icon{fill:var(--accent-color)}.primary-action:not(:last-of-type){margin-right:.5rem}.page{position:relative;display:flex;flex-direction:column;overflow-y:auto;align-content:flex-start;padding:1.5rem}#wallet_section{background-color:rgba(var(--text-color), 0.03);border-radius:.5rem;padding:1.5rem}#transactions_list{flex-direction:column;padding-bottom:4rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;padding:.8rem;align-items:center;background-color:rgba(var(--text-color), 0.03);border-radius:.3rem}.transaction:not(:last-of-type){margin-bottom:.5rem}.transaction__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:.5rem}.transaction__icon .icon{fill:var(--accent-color)}.transaction__receiver{font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8)}.transaction__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{font-size:1rem;font-weight:700;grid-area:1/3/3/4}.transaction__amount.sent::before{content:"-"}.transaction__amount.received::before{content:"+"}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}#transaction_result{display:grid;gap:.5rem;height:max(40vh,24rem);align-items:center;justify-content:center;text-align:center;align-content:center}#transaction_result.success .icon--failed{display:none}#transaction_result.failed .icon--success{display:none}#transaction_result h3{text-align:center;width:100%}#transaction_result .icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:1rem;-webkit-animation:popup 1s;animation:popup 1s}#transaction_result .icon--success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}#transaction_result .icon--failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}#transaction_result sm-copy{font-size:.8rem}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}.cashier-request,.wallet-request,.payment-request{display:flex;gap:1rem;align-items:center;padding:.8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06)}.cashier-request:not(:last-of-type),.wallet-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:1rem}.cashier-request__time,.wallet-request__time,.payment-request__time{font-size:.8rem}.payment-request{display:grid;grid-template-columns:1fr auto}.payment-request__amount{font-weight:700;text-align:right}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}#main_card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"nav header" "nav main";position:relative;border-radius:.5rem;overflow:hidden;box-shadow:0 .1rem .2rem rgba(0,0,0,.05),0 1rem 3rem rgba(0,0,0,.2);background-color:rgba(var(--foreground-color), 0.9)}#main_header{grid-area:header}#pages_container{grid-area:main}#main_navbar{grid-area:nav;border-top:none;flex-direction:column;height:100%}#main_navbar ul{flex-direction:column;gap:.5rem;padding:.3rem}#main_navbar ul li:last-of-type{margin-top:auto}.nav-item{aspect-ratio:1/1}.nav-item__indicator{width:.25rem;height:50%;left:0;border-radius:0 1rem 1rem 0;bottom:auto}#user{grid-template-columns:1fr 20rem;align-content:flex-start;align-items:flex-start}}@media screen and (min-width: 56rem){#main_card{height:80vh;width:56rem}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}.button:not([disabled]){transition:background-color .3s,filter .3s}.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #256eff;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s;display:flex;flex-direction:column}body[data-theme=dark]{--accent-color: #90b8f8;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1)}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:1rem}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details{padding:1rem 0}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.6rem 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}h3{font-size:1.2rem;line-height:1.3}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.page{height:100%}.page-layout{display:grid;gap:1.5rem 0;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;align-content:flex-start}.page-layout>*{grid-column:2/3}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem;cursor:pointer}#landing>section{justify-content:center;justify-items:center;align-items:center;text-align:center;padding:8vw 0}#landing h1{font-size:clamp(2rem,5vw,5rem)}#sign_in,#sign_up{justify-items:center;align-content:center}#sign_in section,#sign_up section{margin-top:-8rem;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#main_header{padding:1rem 1.5rem}#main_header a{color:rgba(var(--text-color), 1)}#pages_container{flex:1;overflow-y:auto}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.clip{-webkit-clip-path:circle(0);clip-path:circle(0)}.primary-action{display:flex;flex-direction:column;align-items:center;padding:.8rem 1rem;gap:.5rem;white-space:normal;font-size:.8rem;border-radius:.5rem;background-color:transparent;min-width:5rem;max-width:6rem;text-align:center}.primary-action .icon{fill:var(--accent-color)}#user{padding:1rem 1.5rem}#saved_ids_list{display:grid;grid-template-columns:repeat(auto-fill, minmax(10rem, 1fr));gap:1rem;margin-top:1.5rem}.saved-id{display:grid;gap:1rem;grid-template-columns:auto 1fr;align-items:center;color:inherit;padding:.5rem 0}.saved-id__initials{display:flex;align-items:center;justify-content:center;height:2.5rem;width:2.5rem;color:rgba(var(--background-color), 1);background-color:var(--accent-color);border-radius:1rem;text-transform:uppercase;font-weight:700}.saved-id__title{font-size:.9rem}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:1.5rem}#history>*,#wallet_history>*{width:min(60ch,100%);justify-self:center}#token_transactions{flex-direction:column;padding-bottom:4rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;padding:.8rem;align-items:center;background-color:rgba(var(--text-color), 0.03);border-radius:.3rem}.transaction:not(:last-of-type){margin-bottom:.5rem}.transaction__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:.5rem}.transaction__icon .icon{fill:var(--accent-color)}.transaction__receiver{font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8)}.transaction__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{font-size:1rem;font-weight:700;grid-area:1/3/3/4}.transaction__amount.sent::before{content:"-"}.transaction__amount.received{color:var(--green)}.transaction__amount.received::before{content:"+"}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}#transaction_result{display:grid;gap:.5rem;height:max(40vh,24rem);align-items:center;justify-content:center;text-align:center;align-content:center}#transaction_result.success .icon--failed{display:none}#transaction_result.failed .icon--success{display:none}#transaction_result h3{text-align:center;width:100%}#transaction_result .icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:1rem;-webkit-animation:popup 1s;animation:popup 1s}#transaction_result .icon--success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}#transaction_result .icon--failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}#transaction_result sm-copy{font-size:.8rem}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}.cashier-request,.wallet-request,.payment-request{display:flex;gap:1rem;align-items:center;padding:.8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06)}.cashier-request:not(:last-of-type),.wallet-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:1rem}.cashier-request__time,.wallet-request__time,.payment-request__time{font-size:.8rem}.payment-request{display:grid;grid-template-columns:1fr auto}.payment-request__amount{font-weight:700;text-align:right}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}#user{padding:1.5rem 8vmax;grid-template-columns:1fr 20rem;align-content:flex-start;align-items:flex-start}.saved-id{padding:1rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.03);grid-template-columns:minmax(0, 1fr)}#wallet_section{grid-area:1/2/3/3}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}.button:not([disabled]){transition:background-color .3s,filter .3s}.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 52d52af..22019df 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -17,8 +17,8 @@ body {
 body {
   --accent-color: #256eff;
   --text-color: 20, 20, 20;
-  --background-color: 240, 240, 240;
-  --foreground-color: 250, 250, 250;
+  --foreground-color: 252, 253, 255;
+  --background-color: 241, 243, 248;
   --danger-color: rgb(255, 75, 75);
   --green: #1cad59;
   scrollbar-width: thin;
@@ -28,16 +28,13 @@ body {
   transition: background-color 0.3s;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
 }
 
 body[data-theme="dark"] {
-  --accent-color: #86afff;
+  --accent-color: #90b8f8;
   --text-color: 220, 220, 220;
-  --background-color: 10, 10, 10;
-  --foreground-color: 24, 24, 24;
+  --foreground-color: 27, 28, 29;
+  --background-color: 21, 22, 22;
   --danger-color: rgb(255, 106, 106);
   --green: #00e676;
   sm-popup::part(popup) {
@@ -63,6 +60,13 @@ a {
     box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
   }
 }
+a.button {
+  padding: 0.4rem 0.6rem;
+  border-radius: 0.3rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: inherit;
+}
 
 button {
   user-select: none;
@@ -426,6 +430,18 @@ h3 {
     fill: var(--accent-color);
   }
 }
+.page {
+  height: 100%;
+}
+.page-layout {
+  display: grid;
+  gap: 1.5rem 0;
+  grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
+  align-content: flex-start;
+  & > * {
+    grid-column: 2/3;
+  }
+}
 #confirmation_popup,
 #prompt_popup {
   flex-direction: column;
@@ -455,7 +471,6 @@ h3 {
   width: 100%;
   padding: 0 1.5rem;
   align-items: center;
-  grid-auto-flow: column;
 }
 
 .popup__header__close {
@@ -463,78 +478,57 @@ h3 {
   margin-left: -0.5rem;
   cursor: pointer;
 }
+#landing {
+  & > section {
+    justify-content: center;
+    justify-items: center;
+    align-items: center;
+    text-align: center;
+    padding: 8vw 0;
+  }
+  h1 {
+    font-size: clamp(2rem, 5vw, 5rem);
+  }
+}
+
+#sign_in,
+#sign_up {
+  justify-items: center;
+  align-content: center;
+  section {
+    margin-top: -8rem;
+    width: min(24rem, 100%);
+  }
+  sm-form {
+    margin: 2rem 0;
+  }
+}
+#sign_up {
+  .h2 {
+    margin-bottom: 0.5rem;
+  }
+  .card {
+    margin: 1.5rem 0;
+  }
+  h5 {
+    font-weight: 500;
+    color: rgba(var(--text-color), 0.8);
+  }
+  .warning {
+    margin-top: 2rem;
+  }
+}
 #main_header {
   padding: 1rem 1.5rem;
-}
-#main_card {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  background-color: rgba(var(--foreground-color), 1);
-  transition: background-color 0.3s;
+  a {
+    color: rgba(var(--text-color), 1);
+  }
 }
 #pages_container {
   flex: 1;
   overflow-y: auto;
 }
 
-#main_navbar {
-  display: flex;
-  background: rgba(var(--text-color), 0.03);
-  &.hide-away {
-    position: absolute;
-  }
-  ul {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    li {
-      width: 100%;
-    }
-  }
-}
-.nav-item {
-  position: relative;
-  display: flex;
-  flex: 1;
-  width: 100%;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem 0.3rem;
-  color: var(--text-color);
-  font-size: 0.7rem;
-  border-radius: 0.3rem;
-  .icon {
-    transition: transform 0.2s;
-  }
-  &__title {
-    margin-top: 0.3rem;
-    transition: opacity 0.2s, transform 0.2s;
-  }
-  &--active {
-    color: var(--accent-color);
-    .icon {
-      fill: var(--accent-color);
-      transform: translateY(50%);
-    }
-    .nav-item__title {
-      transform: translateY(100%);
-      opacity: 0;
-    }
-  }
-  &__indicator {
-    position: absolute;
-    bottom: 0;
-    width: 2rem;
-    height: 0.3rem;
-    background: var(--accent-color);
-    border-radius: 1rem 1rem 0 0;
-    z-index: 1;
-  }
-}
-
 .password-field {
   label {
     display: flex;
@@ -562,37 +556,68 @@ h3 {
 }
 .primary-action {
   display: flex;
+  flex-direction: column;
+  align-items: center;
   padding: 0.8rem 1rem;
   gap: 0.5rem;
   white-space: normal;
   font-size: 0.8rem;
   border-radius: 0.5rem;
+  // background-color: rgba(var(--text-color), 0.06);
   background-color: transparent;
-  border: thin solid rgba(var(--text-color), 0.3);
+  min-width: 5rem;
+  max-width: 6rem;
+  text-align: center;
   .icon {
     fill: var(--accent-color);
   }
-  &:not(:last-of-type) {
-    margin-right: 0.5rem;
+}
+#user {
+  padding: 1rem 1.5rem;
+}
+#saved_ids_list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+.saved-id {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  color: inherit;
+  padding: 0.5rem 0;
+  &__initials {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 2.5rem;
+    width: 2.5rem;
+    color: rgba(var(--background-color), 1);
+    background-color: var(--accent-color);
+    border-radius: 1rem;
+    text-transform: uppercase;
+    font-weight: 700;
+  }
+  &__title {
+    font-size: 0.9rem;
   }
 }
 
-.page {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  align-content: flex-start;
-  padding: 1.5rem;
-}
-
-#wallet_section {
-  background-color: rgba(var(--text-color), 0.03);
+.card {
+  background-color: rgba(var(--foreground-color), 1);
   border-radius: 0.5rem;
   padding: 1.5rem;
 }
-
-#transactions_list {
+#history,
+#wallet_history {
+  & > * {
+    width: min(60ch, 100%);
+    justify-self: center;
+  }
+}
+#token_transactions {
   flex-direction: column;
   padding-bottom: 4rem;
 }
@@ -638,6 +663,7 @@ h3 {
       }
     }
     &.received {
+      color: var(--green);
       &::before {
         content: "+";
       }
@@ -751,65 +777,27 @@ h3 {
   sm-popup {
     --width: 24rem;
   }
+  .page-layout {
+    grid-template-columns: 1fr 90vw 1fr;
+  }
   .popup__header {
     grid-column: 1/-1;
     padding: 1rem 1.5rem 0 1.5rem;
   }
-  #main_card {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto 1fr;
-    grid-template-areas: "nav header" "nav main";
-    position: relative;
-    border-radius: 0.5rem;
-    overflow: hidden;
-    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05),
-      0 1rem 3rem rgba(0, 0, 0, 0.2);
-    // backdrop-filter: blur(2rem);
-    background-color: rgba(var(--foreground-color), 0.9);
-  }
-  #main_header {
-    grid-area: header;
-  }
-  #pages_container {
-    grid-area: main;
-  }
-
-  #main_navbar {
-    grid-area: nav;
-    border-top: none;
-    flex-direction: column;
-    height: 100%;
-    ul {
-      flex-direction: column;
-      gap: 0.5rem;
-      padding: 0.3rem;
-
-      li:last-of-type {
-        margin-top: auto;
-      }
-    }
-  }
-  .nav-item {
-    aspect-ratio: 1/1;
-    &__indicator {
-      width: 0.25rem;
-      height: 50%;
-      left: 0;
-      border-radius: 0 1rem 1rem 0;
-      bottom: auto;
-    }
-  }
   #user {
+    padding: 1.5rem 8vmax;
     grid-template-columns: 1fr 20rem;
     align-content: flex-start;
     align-items: flex-start;
   }
-}
-@media screen and (min-width: 56rem) {
-  #main_card {
-    height: 80vh;
-    width: 56rem;
+  .saved-id {
+    padding: 1rem;
+    border-radius: 0.5rem;
+    background-color: rgba(var(--text-color), 0.03);
+    grid-template-columns: minmax(0, 1fr);
+  }
+  #wallet_section {
+    grid-area: 1/2/3/3;
   }
 }
 
diff --git a/index.html b/index.html
index 31e0463..8cd467a 100644
--- a/index.html
+++ b/index.html
@@ -45,7 +45,7 @@
     </script>
 </head>
 
-<body onload="onLoadStartUp()">
+<body onload="onLoadStartUp()" class="hide">
     <sm-notifications id="notification_drawer"></sm-notifications>
     <sm-popup id="confirmation_popup">
         <h4 id="confirm_title"></h4>
@@ -55,16 +55,11 @@
             <sm-button variant="no-outline" class="submit-btn">OK</sm-button>
         </div>
     </sm-popup>
-    <div id="loader" class="grid gap-1 text-center">
-        <sm-spinner></sm-spinner>
-        <h4>Loading RanchiMall Pay</h4>
-    </div>
-    <div id="main_card" class="hide">
-        <header id="main_header" class="flex align-center space-between">
-            <div class="flex align-center">
-                <svg class="icon" style="margin-right:0.3rem" viewBox="0 0 96 108"
-                    style="enable-background:new 0 0 90.5 106.3;" xml:space="preserve">
-                    <path d="M90.2,102.5c-2.4-8.2-9.9-14.5-27.4-23.1c-7.1-3.5-11.8-6.2-14-8.3c-1.7-1.6-3.5-4-4.2-5.5c-0.7-1.7-0.7-5.5,0-7.5
+    <header id="main_header" class="flex align-center gap-1">
+        <a href="#/home" class="flex align-center flex-1">
+            <svg class="icon" style="margin-right:0.3rem" viewBox="0 0 96 108"
+                style="enable-background:new 0 0 90.5 106.3;" xml:space="preserve">
+                <path d="M90.2,102.5c-2.4-8.2-9.9-14.5-27.4-23.1c-7.1-3.5-11.8-6.2-14-8.3c-1.7-1.6-3.5-4-4.2-5.5c-0.7-1.7-0.7-5.5,0-7.5
                             c1.3-3.6,2.6-5.2,12.9-15.1c6.2-5.9,9.3-10.3,11.1-15.5c0.7-2.1,0.8-7.6,0.2-9.4C66.5,12,61.7,6.7,53.7,1.6c-3-1.9-4.3-2.1-4.3-0.8
                             c0,0.3-0.5,1.4-1,2.4l-1,1.8l-2.8-1.9c-1.5-1.1-3.4-2.2-4.1-2.6c-1.3-0.7-2.4-0.6-2.4,0.2c0,0.3-1.4,3.4-2,4.4
                             c0,0.1-0.4-0.1-0.9-0.4c-6.1-4.4-8.7-5.5-8.7-3.9c0,0.7-1.8,4.2-4,7.9C16,19.5,9.4,24.9,2.6,24.9c-3,0-2.9-0.1-2,3.4
@@ -86,14 +81,79 @@
                             c-1.2,1.7-6.5,5.7-8.6,6.5v0c-1.1,0.4-2.8,0.8-3.9,0.9L24.9,25l2.1-2.6c2.5-3.1,5.1-7,7-10.4c0.7-1.4,1.4-2.5,1.5-2.6
                             c0.3-0.4,1.7,1.4,3,4.1l1.5,3L39.3,17.4z M44.6,10c-0.7,1.2-1.4,2.1-1.5,2.1c-0.1,0-1.5-1.4-3-3l-2.8-3l0.6-1.5
                             c1.1-2.6,1.3-2.7,3.4-1c1.9,1.5,4.5,3.8,4.5,4.1C45.8,7.8,45.3,8.9,44.6,10z" />
-                </svg>
-                <h4>RanchiMall Pay</h4>
+            </svg>
+            <h4>RanchiMall Pay</h4>
+        </a>
+        <theme-toggle></theme-toggle>
+        <a href="#/settings" class="icon-only">
+            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                fill="#000000">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path
+                    d="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+            </svg>
+        </a>
+    </header>
+    <section id="pages_container">
+        <article id="landing" class="page page-layout hide">
+            <section class="grid justify-center gap-1">
+                <h1 class="h1">Send.request</h1>
+                <div class="flex gap-0-5">
+                    <a href="#/sign_up" class="button">Sign up</a>
+                    <a href="#/sign_in" class="button button--primary">Sign in</a>
+                </div>
+            </section>
+        </article>
+        <article id="sign_in" class="page page-layout hide">
+            <section>
+                <h1 class="h2">Sign In</h1>
+                <p>Welcome back, glad to see you again</p>
+                <sm-form>
+                    <sm-input id="private_key_field" type="password" placeholder="FLO private key"
+                        error-text="Private key is invalid" data-private-key required></sm-input>
+                    <sm-button id="sign_in_button" variant="primary" disabled>Sign In</sm-button>
+                </sm-form>
+                <p>
+                    New here? <a href="#/sign_up">get your FLO login credentials</a>
+                </p>
+            </section>
+        </article>
+        <article id="sign_up" class="page page-layout hide">
+            <section class="grid">
+                <h1 class="h2">FLO credentials</h1>
+                <p>Get your FLO credentials to use RanchiMall Pay and all RanchiMall FLO apps. </p>
+                <div class="grid gap-1-5 card">
+                    <div class="grid gap-0-5">
+                        <h5>FLO ID</h5>
+                        <sm-copy id="generated_flo_id"></sm-copy>
+                    </div>
+                    <div class="grid gap-0-5">
+                        <h5>Private key</h5>
+                        <sm-copy id="generated_private_key"></sm-copy>
+                    </div>
+                </div>
+                <sm-button id="sign_up_button" variant="primary">Sign in with these credentials</sm-button>
+                <strong class="warning">
+                    Keep your private key secure and don't share with anyone.
+                    Once lost there is no way to recover private key.
+                </strong>
+            </section>
+        </article>
+        <div id="loading" class="page flex align-center justify-center">
+            <div class="grid gap-1 text-center">
+                <sm-spinner></sm-spinner>
+                <h4>Loading RanchiMall Pay</h4>
             </div>
-            <theme-toggle></theme-toggle>
-        </header>
-        <section id="pages_container" class="gap-2">
-            <section id="home" class="page hide">
-                <div id="user" class="hide grid gap-2 user-element">
+        </div>
+        <section id="home" class="page hide">
+            <div id="user" class="hide grid gap-1-5 user-element">
+                <div class="card grid gap-1-5">
+                    <div class="flex align-center space-between">
+                        <h4>Quick actions </h4>
+                        <a href="#/history" class="button flex align-center">
+                            See history
+                        </a>
+                    </div>
                     <div class="flex">
                         <button class="button primary-action" onclick="showTokenTransfer('send')">
                             <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
@@ -117,7 +177,9 @@
                             Request
                         </button>
                     </div>
-                    <section id="wallet_section" class="grid gap-1-5">
+                </div>
+                <section id="wallet_section" class="card grid gap-1-5">
+                    <div class="flex align-center space-between">
                         <h4 class="flex align-center">
                             <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg"
                                 enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"
@@ -132,156 +194,141 @@
                             </svg>
                             Wallet
                         </h4>
-                        <div class="grid gap-0-5">
-                            <h5>Balance</h5>
-                            <h1 class="h1" id="rupee_balance"></h1>
-                        </div>
-                        <div class="grid gap-1">
-                            <sm-input id="request_cashier_amount" type="number" name="amount" placeholder="Amount"
+                        <a href="#/wallet_history" class="button">See History</a>
+                    </div>
+                    <div class="grid gap-0-5">
+                        <h5>Balance</h5>
+                        <h1 class="h1" id="rupee_balance"></h1>
+                    </div>
+                    <div class="grid gap-1">
+                        <!-- <sm-input id="request_cashier_amount" type="number" name="amount" placeholder="Amount"
                                 animate>
-                            </sm-input>
-                            <div class="flex">
-                                <button class="primary-action flex-1" onclick="userUI.requestTokenFromCashier()">
-                                    <svg class="icon" xmlns="http://www.w3.org/2000/svg"
-                                        enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"
-                                        fill="#000000">
-                                        <rect fill="none" height="24" width="24" />
-                                        <g>
-                                            <path
-                                                d="M19.83,7.5l-2.27-2.27c0.07-0.42,0.18-0.81,0.32-1.15C17.96,3.9,18,3.71,18,3.5C18,2.67,17.33,2,16.5,2 c-1.64,0-3.09,0.79-4,2l-5,0C4.46,4,2,6.46,2,9.5S4.5,21,4.5,21l5.5,0v-2h2v2l5.5,0l1.68-5.59L22,14.47V7.5H19.83z M13,9H8V7h5V9z M16,11c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C17,10.55,16.55,11,16,11z" />
-                                        </g>
-                                    </svg>
-                                    Deposit
-                                </button>
-                                <button class="primary-action flex-1" onclick="userUI.withdrawCashFromCashier()">
-                                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px"
-                                        viewBox="0 0 24 24" width="24px" fill="#000000">
-                                        <path d="M0 0h24v24H0z" fill="none" />
+                            </sm-input> -->
+                        <div class="flex">
+                            <button class="flex gap-0-5 flex-1" onclick="userUI.requestTokenFromCashier()">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                                    height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                                    <rect fill="none" height="24" width="24" />
+                                    <g>
                                         <path
-                                            d="M19 14V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zm-9-1c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-6v11c0 1.1-.9 2-2 2H4v-2h17V7h2z" />
-                                    </svg>
-                                    Withdraw
-                                </button>
-                            </div>
+                                            d="M19.83,7.5l-2.27-2.27c0.07-0.42,0.18-0.81,0.32-1.15C17.96,3.9,18,3.71,18,3.5C18,2.67,17.33,2,16.5,2 c-1.64,0-3.09,0.79-4,2l-5,0C4.46,4,2,6.46,2,9.5S4.5,21,4.5,21l5.5,0v-2h2v2l5.5,0l1.68-5.59L22,14.47V7.5H19.83z M13,9H8V7h5V9z M16,11c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C17,10.55,16.55,11,16,11z" />
+                                    </g>
+                                </svg>
+                                Deposit
+                            </button>
+                            <button class="flex gap-0-5 flex-1" onclick="userUI.withdrawCashFromCashier()">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                                    width="24px" fill="#000000">
+                                    <path d="M0 0h24v24H0z" fill="none" />
+                                    <path
+                                        d="M19 14V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zm-9-1c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-6v11c0 1.1-.9 2-2 2H4v-2h17V7h2z" />
+                                </svg>
+                                Withdraw
+                            </button>
                         </div>
-                    </section>
-                </div>
-                <section id="cashier" class=" grid gap-1 hide admin-element">
-                    <h4>Requests</h4>
-                    <ul id="cashier_request_list" class="observe-empty-state"></ul>
+                    </div>
+                </section>
+                <div class="card">
+                    <div class="flex align-center space-between">
+                        <h4>Saved IDs</h4>
+                        <button class="button" onclick="showPopup('save_id_popup')">Save FLO ID</button>
+                    </div>
+                    <ul id="saved_ids_list" class="observe-empty-state"></ul>
                     <div class="empty-state">
-                        <h4>No requests to process</h4>
+                        <h4>No saved FLO IDs</h4>
                     </div>
-                </section>
-            </section>
-            <section id="history" class="page hide grid gap-1">
-                <h4>Transactions history</h4>
-                <ul id="token_transactions" class="observe-empty-state">
-                </ul>
-                <div class=" empty-state gap-1 justify-center text-center">
-                    <h4>No transactions</h4>
                 </div>
-            </section>
-            <section id="activity" class="page hide grid gap-1">
-                <h4>Activity</h4>
-                <tab-header target="user_sections">
-                    <sm-tab>Wallet transactions</sm-tab>
-                    <sm-tab>Payment requests</sm-tab>
-                </tab-header>
-                <tab-panels id="user_sections">
-                    <section>
-                        <ul id="user-cashier-requests" class="observe-empty-state"></ul>
-                        <div class=" empty-state gap-1 justify-center text-center">
-                            <h4>No transactions</h4>
-                        </div>
-                    </section>
-                    <section>
-                        <ul id="user-money-requests" class="observe-empty-state"></ul>
-                        <div class=" empty-state gap-1 justify-center text-center">
-                            <h4>No requests</h4>
-                        </div>
-                    </section>
-                </tab-panels>
-            </section>
-            <section id="settings" class="page hide gap-2">
-                <h4>Settings</h4>
-                <section class="grid gap-1">
-                    <div class="grid">
-                        <h5>My FLO ID</h5>
-                        <sm-copy id="logged_in_user_id" style="font-size: 0.9rem;"></sm-copy>
-                    </div>
-                    <sm-button class="danger justify-self-start" onclick="signOut()">Sign out</sm-button>
-                </section>
-                <section class="admin-element grid gap-1">
-                    <h4>Change UPI ID</h4>
-                    <sm-form style="width: min(100%,24rem);">
-                        <sm-input id="upi_id" placeholder="UPI ID" pattern="[a-zA-Z0-9_]{3,}@[a-zA-Z]{3,}"
-                            error-text="Invalid UPI ID" animate required></sm-input>
-                        <button class="button button--primary cta justify-self-start" type="submit"
-                            onclick="changeUpi()">
-                            Change
-                        </button>
-                    </sm-form>
-                </section>
+            </div>
+            <section id="cashier" class=" grid gap-1 hide admin-element">
+                <h4>Requests</h4>
+                <ul id="cashier_request_list" class="observe-empty-state"></ul>
+                <div class="empty-state">
+                    <h4>No requests to process</h4>
+                </div>
             </section>
         </section>
-        <nav id="main_navbar">
-            <ul>
-                <li>
-                    <a href="#/home" class="nav-item interact">
-                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-                            width="24px" fill="#000000">
-                            <path d="M0 0h24v24H0z" fill="none" />
-                            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
-                        </svg>
-                        <span class="nav-item__title">Home</span>
-                    </a>
-                </li>
-                <li>
-                    <a href="#/history" class="nav-item interact">
-                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
-                            height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
-                            <path d="M0,0h24v24H0V0z" fill="none" />
-                            <g>
-                                <path
-                                    d="M19.5,3.5L18,2l-1.5,1.5L15,2l-1.5,1.5L12,2l-1.5,1.5L9,2L7.5,3.5L6,2v14H3v3c0,1.66,1.34,3,3,3h12c1.66,0,3-1.34,3-3V2 L19.5,3.5z M19,19c0,0.55-0.45,1-1,1s-1-0.45-1-1v-3H8V5h11V19z" />
-                                <rect height="2" width="6" x="9" y="7" />
-                                <rect height="2" width="2" x="16" y="7" />
-                                <rect height="2" width="6" x="9" y="10" />
-                                <rect height="2" width="2" x="16" y="10" />
-                            </g>
-                        </svg>
-                        <span class="nav-item__title">History</span>
-                    </a>
-                </li>
-                <li>
-                    <a href="#/activity" class="nav-item interact user-element">
-                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-                            width="24px" fill="#000000">
-                            <path
-                                d="M11 21h-1l1-7H7.5c-.58 0-.57-.32-.38-.66.19-.34.05-.08.07-.12C8.48 10.94 10.42 7.54 13 3h1l-1 7h3.5c.49 0 .56.33.47.51l-.07.15C12.96 17.55 11 21 11 21z" />
-                        </svg>
-                        <span class="nav-item__title">Activity</span>
-                    </a>
-                </li>
-                <li>
-                    <a href="#/settings" class="nav-item interact">
-                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
-                            height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
-                            <g>
-                                <path d="M0,0h24v24H0V0z" fill="none" />
-                                <path
-                                    d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />
-                            </g>
-                        </svg>
-                        <span class="nav-item__title">Settings</span>
-                        </button>
-                    </a>
-                </li>
+        <section id="history" class="page page-layout hide grid gap-1">
+            <div class="grid gap-1" style="justify-items: flex-start;">
+                <a href="#/home" class="button align-start">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                        fill="#000000">
+                        <path d="M0 0h24v24H0z" fill="none" />
+                        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
+                    </svg>
+                </a>
+                <h4>Transactions history</h4>
+            </div>
+            <ul id="token_transactions" class="observe-empty-state">
             </ul>
-        </nav>
-    </div>
+            <div class=" empty-state gap-1 justify-center text-center">
+                <h4>No transactions</h4>
+            </div>
+        </section>
+        <section id="wallet_history" class="page page-layout hide">
+            <div class="grid gap-1" style="justify-items: flex-start;">
+                <a href="#/home" class="button align-start">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                        fill="#000000">
+                        <path d="M0 0h24v24H0z" fill="none" />
+                        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
+                    </svg>
+                </a>
+                <h4>Wallet history</h4>
+            </div>
+            <ul id="user-cashier-requests" class="observe-empty-state"></ul>
+            <div class=" empty-state gap-1 justify-center text-center">
+                <h4>No transactions</h4>
+            </div>
+        </section>
+        <section id="activity" class="page page-layout hide">
+            <h4>Activity</h4>
+            <ul id="user-money-requests" class="observe-empty-state"></ul>
+            <div class=" empty-state gap-1 justify-center text-center">
+                <h4>No requests</h4>
+            </div>
+        </section>
+        <section id="settings" class="page page-layout hide">
+            <h4>Settings</h4>
+            <section class="grid gap-1">
+                <div class="grid">
+                    <h5>My FLO ID</h5>
+                    <sm-copy id="logged_in_user_id" style="font-size: 0.9rem;"></sm-copy>
+                </div>
+                <sm-button class="danger justify-self-start" onclick="signOut()">Sign out</sm-button>
+            </section>
+            <section class="admin-element grid gap-1">
+                <h4>Change UPI ID</h4>
+                <sm-form style="width: min(100%,24rem);">
+                    <sm-input id="upi_id" placeholder="UPI ID" pattern="[a-zA-Z0-9_]{3,}@[a-zA-Z]{3,}"
+                        error-text="Invalid UPI ID" animate required></sm-input>
+                    <button class="button button--primary cta justify-self-start" type="submit" onclick="changeUpi()">
+                        Change
+                    </button>
+                </sm-form>
+            </section>
+        </section>
+    </section>
     <!-- Popups -->
+    <sm-popup id="save_id_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close justify-self-start" onclick="hidePopup()">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                    fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                </svg>
+            </button>
+            <h4>Save FLO ID</h4>
+        </header>
+        <sm-form>
+            <sm-input id="flo_id_to_save" placeholder="FLO ID" error-text="Invalid FLO ID" data-flo-id animate required
+                autofocus>
+            </sm-input>
+            <sm-input id="flo_id_title_to_save" placeholder="Title" animate required></sm-input>
+            <button class="button button--primary cta" onclick="userUI.saveId()" type="submit">Save</button>
+        </sm-form>
+    </sm-popup>
     <sm-popup id="token_transfer_popup">
         <header slot="header" class="popup__header">
             <button class="popup__header__close justify-self-start" onclick="hidePopup()">
@@ -321,6 +368,15 @@
     </sm-popup>
 
     <!-- templates -->
+    <template id="saved_id_template">
+        <li>
+            <a class="saved-id interact" href="">
+                <div class="saved-id__initials"></div>
+                <span class="saved-id__title"></span>
+                <!-- <sm-copy class="saved-id__flo-id"></sm-copy> -->
+            </a>
+        </li>
+    </template>
     <template id="transaction_template">
         <li class="transaction grid">
             <div class="transaction__icon"></div>
@@ -370,7 +426,10 @@
     <script id="onLoadStartUp">
         function onLoadStartUp() {
             console.log("Starting the app! Please Wait!")
+            floDapps.setCustomPrivKeyInput(getSignedIn)
+            floDapps.setAppObjectStores({ savedIds: {} })
             floDapps.launchStartUp().then(result => {
+                history.replaceState(null, null, " ")
                 console.log(`Welcome ${myFloID}`);
                 getRef('logged_in_user_id').value = myFloID;
                 floGlobals.isSubAdmin = floGlobals.subAdmins.includes(myFloID)
@@ -383,10 +442,10 @@
                         console.log(result);
                         document.querySelectorAll('.admin-element').forEach(elem => elem.classList.remove('hide'))
                         document.querySelectorAll('.user-element').forEach(elem => elem.classList.add('hide'))
-                        getRef('loader').classList.add('hide')
-                        getRef('main_card').classList.remove('hide')
+                        showPage(window.location.hash, { firstLoad: true })
                     }).catch(error => console.error(error))
                 } else {
+                    userUI.renderSavedIds()
                     userUI.renderCashierRequests(User.cashierRequests);
                     userUI.renderMoneyRequests(User.moneyRequests);
                     User.init().then(result => {
@@ -394,12 +453,10 @@
                         console.log("Cashiers:", cashierUPI);
                         document.querySelectorAll('.admin-element').forEach(elem => elem.classList.add('hide'))
                         document.querySelectorAll('.user-element').forEach(elem => elem.classList.remove('hide'))
-                        getRef('loader').classList.add('hide')
-                        getRef('main_card').classList.remove('hide')
+                        showPage(window.location.hash, { firstLoad: true })
                     }).catch(error => console.error(error))
                 }
                 renderAllTokenTransactions();
-                showPage(window.location.hash, { firstLoad: true })
             }).catch(error => console.error(error))
         }
     </script>
diff --git a/scripts/components.js b/scripts/components.js
index 85d5d80..90d6b7b 100644
--- a/scripts/components.js
+++ b/scripts/components.js
@@ -885,9 +885,19 @@ customElements.define('sm-notifications', class extends HTMLElement {
     push(message, options = {}) {
         const notification = this.createNotification(message, options);
         this.notificationPanel.append(notification);
+        this.notificationPanel.animate(
+            [
+                {
+                    transform: `translateY(${notification.clientHeight}px)`,
+                },
+                {
+                    transform: `none`,
+                },
+            ], this.animationOptions
+        )
         notification.animate([
             {
-                transform: `translateY(1rem)`,
+                transform: `translateX(-1rem)`,
                 opacity: '0'
             },
             {
@@ -905,7 +915,7 @@ customElements.define('sm-notifications', class extends HTMLElement {
                 opacity: '1'
             },
             {
-                transform: `translateY(0.5rem)`,
+                transform: `translateX(-1rem)`,
                 opacity: '0'
             }
         ], this.animationOptions).onfinish = () => {
diff --git a/scripts/fn_ui.js b/scripts/fn_ui.js
index b9e1502..46c4dc0 100644
--- a/scripts/fn_ui.js
+++ b/scripts/fn_ui.js
@@ -1,10 +1,10 @@
-/*jshint esversion: 6 */
+/*jshint esversion: 8 */
 const userUI = {};
 
 userUI.requestTokenFromCashier = function () {
     let cashier = User.findCashier();
     if (!cashier)
-        return alert("No cashier online");
+        return notify("No cashier online", 'error');
     let amount = parseFloat(getRef('request_cashier_amount').value.trim());
     //get UPI txid from user
     let upiTxID = prompt(`Send Rs. ${amount} to ${cashierUPI[cashier]} and enter UPI txid`);
@@ -19,7 +19,7 @@ userUI.requestTokenFromCashier = function () {
 userUI.withdrawCashFromCashier = function () {
     let cashier = User.findCashier();
     if (!cashier)
-        return alert("No cashier online");
+        return notify("No cashier online", 'error');
     let amount = parseFloat(getRef('request_cashier_amount').value.trim());
     //get confirmation from user
     let upiID = prompt(`${amount} ${floGlobals.currency}# will be sent to ${cashier}. Enter UPI ID`);
@@ -86,6 +86,50 @@ userUI.renderMoneyRequests = function (requests, error = null) {
     getRef('user-money-requests').append(frag)
 }
 
+userUI.renderSavedIds = async function () {
+    floGlobals.savedIds = {}
+    const frag = document.createDocumentFragment()
+    const savedIds = await floCloudAPI.requestApplicationData('savedIds', { mostRecent: true, senderIDs: [myFloID], receiverID: myFloID });
+    if (savedIds.length && await compactIDB.readData('savedIds', 'lastSyncTime') !== savedIds[0].time) {
+        await compactIDB.clearData('savedIds');
+        const dataToDecrypt = floCloudAPI.util.decodeMessage(savedIds[0].message)
+        const data = JSON.parse(floCrypto.decryptData(dataToDecrypt, myPrivKey));
+        console.log(data)
+        for (let key in data) {
+            floGlobals.savedIds[key] = data[key];
+            compactIDB.addData('savedIds', data[key], key);
+        }
+        compactIDB.addData('savedIds', savedIds[0].time, 'lastSyncTime');
+    } else {
+        const idsToRender = await compactIDB.readAllData('savedIds');
+        for (const key in idsToRender) {
+            if (key !== 'lastSyncTime')
+                floGlobals.savedIds[key] = idsToRender[key];
+        }
+    }
+    console.log(floGlobals.savedIds)
+    for (const key in floGlobals.savedIds) {
+        frag.append(render.savedId(key, floGlobals.savedIds[key]));
+    }
+    getRef('saved_ids_list').append(frag);
+}
+
+userUI.saveId = async function () {
+    const floID = getRef('flo_id_to_save').value.trim();
+    const title = getRef('flo_id_title_to_save').value.trim();
+    const dataToSend = floCrypto.encryptData(JSON.stringify({ ...floGlobals.savedIds, [floID]: { title } }), myPubKey)
+    floCloudAPI.sendApplicationData(dataToSend, 'savedIds', { receiverID: myFloID }).then(result => {
+        console.log(result);
+        floGlobals.savedIds[floID] = { title }
+        notify(`Saved ${floID}`, 'success');
+        getRef('saved_ids_list').append(render.savedId(floID, { title }));
+        hidePopup();
+    }).catch(error => {
+        console.error(error);
+        notify(error, 'error');
+    })
+}
+
 userUI.payRequest = function (reqID) {
     let request = User.moneyRequests[reqID];
     getConfirmation('Pay?', { message: `Do you want to pay ${request.message.amount} to ${request.senderID}?` }).then(confirmation => {
@@ -188,66 +232,79 @@ function renderAllTokenTransactions() {
         getRef('token_transactions').innerHTML = ''
         const frag = document.createDocumentFragment();
         for (let txid in result.transactions) {
-            frag.append(render.transactionCard(txid, tokenAPI.util.parseTxData(result.transactions[txid])))
+            frag.append(render.transactionCard(txid, tokenAPI.util.parseTxData(result.transactions[txid])));
         }
-        getRef('token_transactions').append(frag)
-    }).catch(error => console.error(error))
+        getRef('token_transactions').append(frag);
+    }).catch(error => console.error(error));
+}
+
+function getFloIdName(floID) {
+    return floGlobals.savedIds[floID] ? floGlobals.savedIds[floID].title : floID;
 }
 
 const render = {
+    savedId(floID, details) {
+        const { title } = details.hasOwnProperty('title') ? details : { title: details };
+        const clone = getRef('saved_id_template').content.cloneNode(true).firstElementChild;
+        clone.dataset.floId = floID;
+        clone.querySelector('a').href = `#/saved&id=${floID}`;
+        clone.querySelector('.saved-id__initials').textContent = title.charAt(0);
+        clone.querySelector('.saved-id__title').textContent = title;
+        return clone;
+    },
     transactionCard(txid, transactionDetails) {
-        const { time, sender, receiver, tokenAmount } = transactionDetails
+        const { time, sender, receiver, tokenAmount } = transactionDetails;
         const clone = getRef('transaction_template').content.cloneNode(true).firstElementChild;
-        clone.dataset.txid = txid
-        clone.querySelector('.transaction__time').textContent = getFormattedTime(time * 1000)
-        clone.querySelector('.transaction__amount').textContent = tokenAmount
+        clone.dataset.txid = txid;
+        clone.querySelector('.transaction__time').textContent = getFormattedTime(time * 1000);
+        clone.querySelector('.transaction__amount').textContent = tokenAmount;
         if (sender === myFloID) {
-            clone.querySelector('.transaction__amount').classList.add('sent')
-            clone.querySelector('.transaction__receiver').textContent = `Sent to ${receiver || 'Myself'}`
-            clone.querySelector('.transaction__icon').innerHTML = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/></svg>`
+            clone.querySelector('.transaction__amount').classList.add('sent');
+            clone.querySelector('.transaction__receiver').textContent = `Sent to ${getFloIdName(receiver) || 'Myself'}`;
+            clone.querySelector('.transaction__icon').innerHTML = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/></svg>`;
         } else if (receiver === myFloID) {
-            clone.querySelector('.transaction__amount').classList.add('received')
-            clone.querySelector('.transaction__receiver').textContent = `Received from ${sender}`
-            clone.querySelector('.transaction__icon').innerHTML = `<svg class="icon xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 5.41L18.59 4 7 15.59V9H5v10h10v-2H8.41z"/></svg>`
+            clone.querySelector('.transaction__amount').classList.add('received');
+            clone.querySelector('.transaction__receiver').textContent = `Received from ${getFloIdName(sender)}`;
+            clone.querySelector('.transaction__icon').innerHTML = `<svg class="icon xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 5.41L18.59 4 7 15.59V9H5v10h10v-2H8.41z"/></svg>`;
         } else { //This should not happen unless API returns transaction that does not involve myFloID
             row.insertCell().textContent = tx.sender;
             row.insertCell().textContent = tx.receiver;
         }
-        return clone
+        return clone;
     },
     cashierRequestCard(details) {
         const { time, senderID, message: { mode }, note, tag, vectorClock } = details;
         const clone = getRef('cashier_request_template').content.cloneNode(true).firstElementChild;
-        clone.id = vectorClock
+        clone.id = vectorClock;
         const status = tag || note; //status tag for completed, note for rejected
-        clone.querySelector('.cashier-request__requestor').textContent = senderID
-        clone.querySelector('.cashier-request__time').textContent = getFormattedTime(time)
-        clone.querySelector('.cashier-request__mode').textContent = mode
+        clone.querySelector('.cashier-request__requestor').textContent = senderID;
+        clone.querySelector('.cashier-request__time').textContent = getFormattedTime(time);
+        clone.querySelector('.cashier-request__mode').textContent = mode;
         if (status)
-            clone.querySelector('.cashier-request__status').textContent = status
+            clone.querySelector('.cashier-request__status').textContent = status;
         else
-            clone.querySelector('.cashier-request__status').innerHTML = `<button class="button" onclick="cashierUI.completeRequest('${vectorClock}')">Process</button>`
-        return clone
+            clone.querySelector('.cashier-request__status').innerHTML = `<button class="button" onclick="cashierUI.completeRequest('${vectorClock}')">Process</button>`;
+        return clone;
     },
     walletRequestCard(details) {
         const { time, receiverID, message: { mode }, note, tag, vectorClock } = details;
         const clone = getRef('wallet_request_template').content.cloneNode(true).firstElementChild;
-        clone.id = vectorClock
-        clone.querySelector('.wallet-request__requestor').textContent = receiverID
-        clone.querySelector('.wallet-request__time').textContent = getFormattedTime(time)
-        clone.querySelector('.wallet-request__mode').textContent = mode === 'cash-to-token' ? 'Deposit' : 'Withdraw'
+        clone.id = vectorClock;
+        clone.querySelector('.wallet-request__requestor').textContent = receiverID;
+        clone.querySelector('.wallet-request__time').textContent = getFormattedTime(time);
+        clone.querySelector('.wallet-request__mode').textContent = mode === 'cash-to-token' ? 'Deposit' : 'Withdraw';
         let status = tag ? (tag + ":" + note) : (note || "PENDING");
-        clone.querySelector('.wallet-request__status').textContent = status
-        return clone
+        clone.querySelector('.wallet-request__status').textContent = status;
+        return clone;
     },
     paymentRequestCard(details) {
         const { time, senderID, message: { amount, remark }, note, vectorClock } = details;
         const clone = getRef('payment_request_template').content.cloneNode(true).firstElementChild;
-        clone.id = vectorClock
-        clone.querySelector('.payment-request__requestor').textContent = senderID
-        clone.querySelector('.payment-request__time').textContent = getFormattedTime(time)
-        clone.querySelector('.payment-request__amount').textContent = amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
-        clone.querySelector('.payment-request__remark').textContent = remark
+        clone.id = vectorClock;
+        clone.querySelector('.payment-request__requestor').textContent = senderID;
+        clone.querySelector('.payment-request__time').textContent = getFormattedTime(time);
+        clone.querySelector('.payment-request__amount').textContent = amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' });
+        clone.querySelector('.payment-request__remark').textContent = remark;
 
         let status = note;
         if (status)
@@ -257,20 +314,20 @@ const render = {
                 `<button class="button" onclick="userUI.payRequest('${vectorClock}')">Pay</button>
                 <button class="button" onclick="userUI.declineRequest('${vectorClock}')">Decline</button>`;
 
-        return clone
+        return clone;
     },
-}
+};
 
-let currentUserAction
+let currentUserAction;
 function showTokenTransfer(type) {
     getRef('tt_button').textContent = type;
-    currentUserAction = type
+    currentUserAction = type;
     if (type === 'send') {
         getRef('token_transfer__title').textContent = 'Send money to FLO ID';
     } else {
         getRef('token_transfer__title').textContent = 'Request money from FLO ID';
     }
-    showPopup('token_transfer_popup')
+    showPopup('token_transfer_popup');
 }
 
 function executeUserAction() {
@@ -278,28 +335,46 @@ function executeUserAction() {
         amount = parseFloat(getRef('tt_amount').value),
         remark = getRef('tt_remark').value.trim();
     if (currentUserAction === 'send') {
-        userUI.sendMoneyToUser(floID, amount, remark)
+        userUI.sendMoneyToUser(floID, amount, remark);
 
     } else {
-        userUI.requestMoneyFromUser(floID, amount, remark)
+        userUI.requestMoneyFromUser(floID, amount, remark);
     }
 }
 
 function changeUpi() {
-    const upiID = getRef('upi_id').value.trim()
+    const upiID = getRef('upi_id').value.trim();
     Cashier.updateUPI(upiID).then(() => {
-        notify('UPI ID updated successfully', 'success')
+        notify('UPI ID updated successfully', 'success');
     }).catch(err => {
-        notify(err, 'error')
-    })
+        notify(err, 'error');
+    });
+}
+function getSignedIn() {
+    return new Promise((resolve, reject) => {
+        if (window.location.hash.includes('sign_in') || window.location.hash.includes('sign_up')) {
+            showPage(window.location.hash);
+        } else {
+            location.hash = `#/sign_in`;
+        }
+        getRef('sign_in_button').onclick = () => {
+            resolve(getRef('private_key_field').value.trim());
+            getRef('private_key_field').value = '';
+            showPage('loading');
+        };
+        getRef('sign_up_button').onclick = () => {
+            resolve(getRef('generated_private_key').value.trim());
+            getRef('generated_private_key').value = '';
+            showPage('loading');
+        };
+    });
 }
-
 function signOut() {
     getConfirmation('Sign out?', 'You are about to sign out of the app, continue?', 'Stay', 'Leave')
         .then(async (res) => {
             if (res) {
-                await floDapps.clearCredentials()
-                location.reload()
+                await floDapps.clearCredentials();
+                location.reload();
             }
-        })
+        });
 }
\ No newline at end of file
diff --git a/scripts/std_ui.js b/scripts/std_ui.js
index 1985074..56522e7 100644
--- a/scripts/std_ui.js
+++ b/scripts/std_ui.js
@@ -256,14 +256,17 @@ const pagesData = {
     params: {}
 }
 
-let tempData
 async function showPage(targetPage, options = {}) {
-    const { firstLoad, hashChange, isPreview } = options
+    const { firstLoad, hashChange } = options
     let pageId
     let params = {}
     let searchParams
     if (targetPage === '') {
-        pageId = 'home'
+        if (typeof myFloID === "undefined") {
+            pageId = 'sign_in'
+        } else {
+            pageId = 'home'
+        }
     } else {
         if (targetPage.includes('/')) {
             if (targetPage.includes('?')) {
@@ -281,6 +284,7 @@ async function showPage(targetPage, options = {}) {
             pageId = targetPage
         }
     }
+    if (typeof myFloID === "undefined" && !(['sign_up', 'sign_in', 'loading', 'landing'].includes(pageId))) return
     if (searchParams) {
         const urlSearchParams = new URLSearchParams('?' + searchParams);
         params = Object.fromEntries(urlSearchParams.entries());
@@ -291,126 +295,28 @@ async function showPage(targetPage, options = {}) {
     if (params)
         pagesData.params = params
     switch (pageId) {
+        case 'sign_in':
+            setTimeout(() => {
+                getRef('private_key_field').focusIn()
+            }, 0);
+            targetPage = 'sign_in'
+            break;
+        case 'sign_up':
+            const { floID, privKey } = floCrypto.generateNewID()
+            getRef('generated_flo_id').value = floID
+            getRef('generated_private_key').value = privKey
+            targetPage = 'sign_up'
+            break;
         case 'transactions':
             break;
         default:
 
     }
-    const animOptions = {
-        duration: 100,
-        fill: 'forwards',
-    }
-    let previousActiveElement = getRef('main_navbar').querySelector('.nav-item--active')
-    const currentActiveElement = document.querySelector(`.nav-item[href="#/${pageId}"]`)
-    if (currentActiveElement) {
-        if (getRef('main_navbar').classList.contains('hide')) {
-            getRef('main_navbar').classList.remove('hide-away')
-            getRef('main_navbar').classList.remove('hide')
-            getRef('main_navbar').animate([
-                {
-                    transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
-                    opacity: 0,
-                },
-                {
-                    transform: `none`,
-                    opacity: 1,
-                },
-            ], {
-                duration: 100,
-                fill: 'forwards',
-                easing: 'ease'
-            })
-        }
-        getRef('main_header').classList.remove('hide')
-        const previousActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(previousActiveElement)
-        const currentActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(currentActiveElement)
-        const isOnTop = previousActiveElementIndex < currentActiveElementIndex
-        const currentIndicator = createElement('div', { className: 'nav-item__indicator' });
-        let previousIndicator = getRef('main_navbar').querySelector('.nav-item__indicator')
-        if (!previousIndicator) {
-            previousIndicator = currentIndicator.cloneNode(true)
-            previousActiveElement = currentActiveElement
-            previousActiveElement.append(previousIndicator)
-        } else if (currentActiveElementIndex !== previousActiveElementIndex) {
-            const indicatorDimensions = previousIndicator.getBoundingClientRect()
-            const currentActiveElementDimensions = currentActiveElement.getBoundingClientRect()
-            let moveBy
-            if (isMobileView) {
-                moveBy = ((currentActiveElementDimensions.width - indicatorDimensions.width) / 2) + indicatorDimensions.width
-            } else {
-                moveBy = ((currentActiveElementDimensions.height - indicatorDimensions.height) / 2) + indicatorDimensions.height
-            }
-            indicatorObserver.observe(previousIndicator)
-            previousIndicator.animate([
-                {
-                    transform: 'none',
-                    opacity: 1,
-                },
-                {
-                    transform: `translate${isMobileView ? 'X' : 'Y'}(${isOnTop ? `${moveBy}px` : `-${moveBy}px`})`,
-                    opacity: 0,
-                },
-            ], { ...animOptions, easing: 'ease-in' }).onfinish = () => {
-                previousIndicator.remove()
-            }
-            tempData = {
-                currentActiveElement,
-                currentIndicator,
-                isOnTop,
-                animOptions,
-                moveBy
-            }
-        }
-        previousActiveElement.classList.remove('nav-item--active');
-        currentActiveElement.classList.add('nav-item--active')
-    } else {
-        if (!getRef('main_navbar').classList.contains('hide')) {
-            getRef('main_navbar').classList.add('hide-away')
-            getRef('main_navbar').animate([
-                {
-                    transform: `none`,
-                    opacity: 1,
-                },
-                {
-                    transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
-                    opacity: 0,
-                },
-            ], {
-                duration: 200,
-                fill: 'forwards',
-                easing: 'ease'
-            }).onfinish = () => {
-                getRef('main_navbar').classList.add('hide')
-            }
-            getRef('main_header').classList.add('hide')
-        }
-    }
     document.querySelectorAll('.page').forEach(page => page.classList.add('hide'))
     getRef(pageId).classList.remove('hide')
     getRef(pageId).animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, fill: 'forwards', easing: 'ease' })
 }
 
-const indicatorObserver = new IntersectionObserver(entries => {
-    entries.forEach(entry => {
-        if (!entry.isIntersecting) {
-            const { currentActiveElement, currentIndicator, isOnTop, animOptions, moveBy } = tempData
-            currentActiveElement.append(currentIndicator)
-            currentIndicator.animate([
-                {
-                    transform: `translate${isMobileView ? 'X' : 'Y'}(${isOnTop ? `-${moveBy}px` : `${moveBy}px`})`,
-                    opacity: 0,
-                },
-                {
-                    transform: 'none',
-                    opacity: 1
-                },
-            ], { ...animOptions, easing: 'ease-out' })
-        }
-    })
-}, {
-    threshold: 1
-})
-
 // class based lazy loading
 class LazyLoader {
     constructor(container, elementsToRender, renderFn, options = {}) {

From 9f2826d8878f1bdb82f5fd8f3a668fa6f3b358db Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Mon, 11 Apr 2022 02:00:20 +0530
Subject: [PATCH 2/8] added dismissing notification with swipe

---
 scripts/components.js | 75 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 71 insertions(+), 4 deletions(-)

diff --git a/scripts/components.js b/scripts/components.js
index 90d6b7b..13bd9a7 100644
--- a/scripts/components.js
+++ b/scripts/components.js
@@ -718,6 +718,7 @@ smNotifications.innerHTML = `
         overflow: hidden auto;
         -ms-scroll-chaining: none;
             overscroll-behavior: contain;
+        touch-action: none;
     }
     .notification-panel:empty{
         display:none;
@@ -741,6 +742,7 @@ smNotifications.innerHTML = `
         max-width: 100%;
         padding: 1rem;
         align-items: center;
+        touch-action: none;
     }
     .icon-container:not(:empty){
         margin-right: 0.5rem;
@@ -849,7 +851,19 @@ customElements.define('sm-notifications', class extends HTMLElement {
         this.createNotification = this.createNotification.bind(this)
         this.removeNotification = this.removeNotification.bind(this)
         this.clearAll = this.clearAll.bind(this)
+        this.handlePointerMove = this.handlePointerMove.bind(this)
 
+
+        this.startX = 0;
+        this.currentX = 0;
+        this.endX = 0;
+        this.swipeDistance = 0;
+        this.swipeDirection = '';
+        this.swipeThreshold = 0;
+        this.startTime = 0;
+        this.swipeTime = 0;
+        this.swipeTimeThreshold = 200;
+        this.currentTarget = null;
     }
 
     randString(length) {
@@ -904,18 +918,22 @@ customElements.define('sm-notifications', class extends HTMLElement {
                 transform: `none`,
                 opacity: '1'
             },
-        ], this.animationOptions);
+        ], this.animationOptions).onfinish = (e) => {
+            e.target.commitStyles()
+            e.target.cancel()
+        }
         return notification.id;
     }
 
-    removeNotification(notification) {
+    removeNotification(notification, direction = 'left') {
+        const sign = direction === 'left' ? '-' : '+';
         notification.animate([
             {
-                transform: `none`,
+                transform: this.currentX ? `translateX(${this.currentX}px)` : `none`,
                 opacity: '1'
             },
             {
-                transform: `translateX(-1rem)`,
+                transform: `translateX(calc(${sign}${this.currentX}px ${sign} 1rem))`,
                 opacity: '0'
             }
         ], this.animationOptions).onfinish = () => {
@@ -929,7 +947,56 @@ customElements.define('sm-notifications', class extends HTMLElement {
         });
     }
 
+    handlePointerMove(e) {
+        this.currentX = e.clientX - this.startX;
+        this.currentTarget.style.transform = `translateX(${this.currentX}px)`;
+    }
+
     connectedCallback() {
+        this.notificationPanel.addEventListener('pointerdown', e => {
+            if (e.target.closest('.notification')) {
+                this.swipeThreshold = this.clientWidth / 2;
+                this.currentTarget = e.target.closest('.notification');
+                this.currentTarget.setPointerCapture(e.pointerId);
+                this.startTime = Date.now();
+                this.startX = e.clientX;
+                this.startY = e.clientY;
+                this.notificationPanel.addEventListener('pointermove', this.handlePointerMove);
+            }
+        });
+        this.notificationPanel.addEventListener('pointerup', e => {
+            this.endX = e.clientX;
+            this.endY = e.clientY;
+            this.swipeDistance = Math.abs(this.endX - this.startX);
+            this.swipeTime = Date.now() - this.startTime;
+            if (this.endX > this.startX) {
+                this.swipeDirection = 'right';
+            } else {
+                this.swipeDirection = 'left';
+            }
+            if (this.swipeTime < this.swipeTimeThreshold) {
+                this.removeNotification(this.currentTarget, this.swipeDirection);
+            } else {
+                if (this.swipeDistance > this.swipeThreshold) {
+                    this.removeNotification(this.currentTarget, this.swipeDirection);
+                } else {
+                    this.currentTarget.animate([
+                        {
+                            transform: `translateX(${this.currentX}px)`,
+                        },
+                        {
+                            transform: `none`,
+                        },
+                    ], this.animationOptions).onfinish = (e) => {
+                        e.target.commitStyles()
+                        e.target.cancel()
+                    }
+                }
+            }
+            this.notificationPanel.removeEventListener('pointermove', this.handlePointerMove)
+            this.notificationPanel.releasePointerCapture(e.pointerId);
+            this.currentX = 0;
+        });
         this.notificationPanel.addEventListener('click', e => {
             if (e.target.closest('.close')) {
                 this.removeNotification(e.target.closest('.notification'));

From 62ec6de8ba330410e0be704f32c2bdc7eb46f65b Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Wed, 13 Apr 2022 01:40:46 +0530
Subject: [PATCH 3/8] Feature and UI update

Added lazy loading to transactions history
---
 css/main.css          |  80 ++++++++--
 css/main.css.map      |   9 --
 css/main.min.css      |   2 +-
 css/main.scss         |  81 ++++++++--
 index.html            | 126 +++++++++-------
 scripts/components.js | 333 ++++++++++++++++++++++--------------------
 scripts/fn_ui.js      |  37 +++--
 scripts/std_ui.js     |  80 ++++++++--
 8 files changed, 469 insertions(+), 279 deletions(-)
 delete mode 100644 css/main.css.map

diff --git a/css/main.css b/css/main.css
index d310320..5638492 100644
--- a/css/main.css
+++ b/css/main.css
@@ -26,9 +26,20 @@ body {
   color: rgba(var(--text-color), 1);
   background-color: rgba(var(--background-color), 1);
   transition: background-color 0.3s;
+  position: relative;
   display: flex;
   flex-direction: column;
 }
+body::before {
+  content: "";
+  position: absolute;
+  height: max(12rem, 16vmax);
+  background-color: #256eff;
+  width: 100%;
+  left: 0;
+  top: 0;
+  z-index: -1;
+}
 
 body[data-theme=dark] {
   --accent-color: #90b8f8;
@@ -182,7 +193,7 @@ sm-textarea button .icon {
 }
 
 sm-button {
-  --padding: 0.6rem 0.8rem;
+  --padding: 0.8rem;
 }
 sm-button[variant=primary] .icon {
   fill: rgba(var(--background-color), 1);
@@ -560,7 +571,8 @@ h3 {
 }
 
 #main_header {
-  padding: 1rem 1.5rem;
+  --text-color: 220, 220, 220;
+  padding: 1rem max(4vw, 1.5rem);
 }
 #main_header a {
   color: rgba(var(--text-color), 1);
@@ -598,6 +610,17 @@ h3 {
           clip-path: circle(0);
 }
 
+#user {
+  gap: 0.5rem;
+  padding: 0 1.5rem;
+}
+
+#quick_actions_container {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
+}
+
 .primary-action {
   display: flex;
   flex-direction: column;
@@ -608,16 +631,38 @@ h3 {
   font-size: 0.8rem;
   border-radius: 0.5rem;
   background-color: transparent;
-  min-width: 5rem;
-  max-width: 6rem;
   text-align: center;
 }
 .primary-action .icon {
   fill: var(--accent-color);
 }
 
-#user {
-  padding: 1rem 1.5rem;
+#rupee_balance span:first-of-type {
+  font-size: 1.5rem;
+}
+#rupee_balance span:last-of-type {
+  font-size: 0.8rem;
+}
+
+.wallet-action {
+  display: flex;
+  flex-direction: column;
+  white-space: normal;
+  font-size: 0.85rem;
+  padding: 0.8rem 0.5rem;
+  color: rgba(var(--text-color), 1);
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(var(--text-color), 0.03);
+  flex: 1;
+}
+.wallet-action:nth-of-type(2) {
+  margin: 0 0.5rem;
+}
+.wallet-action .icon {
+  margin-bottom: 0.8rem;
+  fill: var(--accent-color);
 }
 
 #saved_ids_list {
@@ -649,6 +694,7 @@ h3 {
 }
 .saved-id__title {
   font-size: 0.9rem;
+  color: rgba(var(--text-color), 1);
 }
 
 .card {
@@ -657,14 +703,21 @@ h3 {
   padding: 1.5rem;
 }
 
-#history > *,
-#wallet_history > * {
+#history {
+  height: 100%;
+  align-content: flex-start;
+  background-color: rgba(var(--foreground-color), 1);
   width: min(60ch, 100%);
   justify-self: center;
+  margin: 0 auto;
+  padding: 1.5rem;
+  overflow-y: auto;
+  border-radius: 0.5rem;
+  grid-template-columns: minmax(0, 1fr);
 }
 
-#token_transactions {
-  flex-direction: column;
+#payments_history_wrapper,
+#wallet_history_wrapper {
   padding-bottom: 4rem;
 }
 
@@ -855,6 +908,7 @@ h3 {
   }
 
   #user {
+    gap: 1rem;
     padding: 1.5rem 8vmax;
     grid-template-columns: 1fr 20rem;
     align-content: flex-start;
@@ -893,10 +947,12 @@ h3 {
     background-color: rgba(var(--text-color), 0.06);
   }
 
-  .button:not([disabled]) {
+  button,
+.button:not([disabled]) {
     transition: background-color 0.3s, filter 0.3s;
   }
-  .button:not([disabled]):hover {
+  button:hover,
+.button:not([disabled]):hover {
     filter: contrast(2);
   }
 }
diff --git a/css/main.css.map b/css/main.css.map
deleted file mode 100644
index b51315e..0000000
--- a/css/main.css.map
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-    "version": 3,
-    "mappings": "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",
-    "sources": [
-        "main.scss"
-    ],
-    "names": [],
-    "file": "main.css"
-}
\ No newline at end of file
diff --git a/css/main.min.css b/css/main.min.css
index b9af1e7..5780331 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #256eff;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s;display:flex;flex-direction:column}body[data-theme=dark]{--accent-color: #90b8f8;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1)}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:1rem}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details{padding:1rem 0}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.6rem 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}h3{font-size:1.2rem;line-height:1.3}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.page{height:100%}.page-layout{display:grid;gap:1.5rem 0;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;align-content:flex-start}.page-layout>*{grid-column:2/3}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem;cursor:pointer}#landing>section{justify-content:center;justify-items:center;align-items:center;text-align:center;padding:8vw 0}#landing h1{font-size:clamp(2rem,5vw,5rem)}#sign_in,#sign_up{justify-items:center;align-content:center}#sign_in section,#sign_up section{margin-top:-8rem;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#main_header{padding:1rem 1.5rem}#main_header a{color:rgba(var(--text-color), 1)}#pages_container{flex:1;overflow-y:auto}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.clip{-webkit-clip-path:circle(0);clip-path:circle(0)}.primary-action{display:flex;flex-direction:column;align-items:center;padding:.8rem 1rem;gap:.5rem;white-space:normal;font-size:.8rem;border-radius:.5rem;background-color:transparent;min-width:5rem;max-width:6rem;text-align:center}.primary-action .icon{fill:var(--accent-color)}#user{padding:1rem 1.5rem}#saved_ids_list{display:grid;grid-template-columns:repeat(auto-fill, minmax(10rem, 1fr));gap:1rem;margin-top:1.5rem}.saved-id{display:grid;gap:1rem;grid-template-columns:auto 1fr;align-items:center;color:inherit;padding:.5rem 0}.saved-id__initials{display:flex;align-items:center;justify-content:center;height:2.5rem;width:2.5rem;color:rgba(var(--background-color), 1);background-color:var(--accent-color);border-radius:1rem;text-transform:uppercase;font-weight:700}.saved-id__title{font-size:.9rem}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:1.5rem}#history>*,#wallet_history>*{width:min(60ch,100%);justify-self:center}#token_transactions{flex-direction:column;padding-bottom:4rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;padding:.8rem;align-items:center;background-color:rgba(var(--text-color), 0.03);border-radius:.3rem}.transaction:not(:last-of-type){margin-bottom:.5rem}.transaction__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:.5rem}.transaction__icon .icon{fill:var(--accent-color)}.transaction__receiver{font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8)}.transaction__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{font-size:1rem;font-weight:700;grid-area:1/3/3/4}.transaction__amount.sent::before{content:"-"}.transaction__amount.received{color:var(--green)}.transaction__amount.received::before{content:"+"}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}#transaction_result{display:grid;gap:.5rem;height:max(40vh,24rem);align-items:center;justify-content:center;text-align:center;align-content:center}#transaction_result.success .icon--failed{display:none}#transaction_result.failed .icon--success{display:none}#transaction_result h3{text-align:center;width:100%}#transaction_result .icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:1rem;-webkit-animation:popup 1s;animation:popup 1s}#transaction_result .icon--success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}#transaction_result .icon--failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}#transaction_result sm-copy{font-size:.8rem}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}.cashier-request,.wallet-request,.payment-request{display:flex;gap:1rem;align-items:center;padding:.8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06)}.cashier-request:not(:last-of-type),.wallet-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:1rem}.cashier-request__time,.wallet-request__time,.payment-request__time{font-size:.8rem}.payment-request{display:grid;grid-template-columns:1fr auto}.payment-request__amount{font-weight:700;text-align:right}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}#user{padding:1.5rem 8vmax;grid-template-columns:1fr 20rem;align-content:flex-start;align-items:flex-start}.saved-id{padding:1rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.03);grid-template-columns:minmax(0, 1fr)}#wallet_section{grid-area:1/2/3/3}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}.button:not([disabled]){transition:background-color .3s,filter .3s}.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #256eff;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s;position:relative;display:flex;flex-direction:column}body::before{content:"";position:absolute;height:max(12rem,16vmax);background-color:#256eff;width:100%;left:0;top:0;z-index:-1}body[data-theme=dark]{--accent-color: #90b8f8;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1)}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:1rem}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details{padding:1rem 0}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}h3{font-size:1.2rem;line-height:1.3}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.page{height:100%}.page-layout{display:grid;gap:1.5rem 0;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;align-content:flex-start}.page-layout>*{grid-column:2/3}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem;cursor:pointer}#landing>section{justify-content:center;justify-items:center;align-items:center;text-align:center;padding:8vw 0}#landing h1{font-size:clamp(2rem,5vw,5rem)}#sign_in,#sign_up{justify-items:center;align-content:center}#sign_in section,#sign_up section{margin-top:-8rem;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#main_header{--text-color: 220, 220, 220;padding:1rem max(4vw,1.5rem)}#main_header a{color:rgba(var(--text-color), 1)}#pages_container{flex:1;overflow-y:auto}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.clip{-webkit-clip-path:circle(0);clip-path:circle(0)}#user{gap:.5rem;padding:0 1.5rem}#quick_actions_container{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill, minmax(4rem, 1fr))}.primary-action{display:flex;flex-direction:column;align-items:center;padding:.8rem 1rem;gap:.5rem;white-space:normal;font-size:.8rem;border-radius:.5rem;background-color:transparent;text-align:center}.primary-action .icon{fill:var(--accent-color)}#rupee_balance span:first-of-type{font-size:1.5rem}#rupee_balance span:last-of-type{font-size:.8rem}.wallet-action{display:flex;flex-direction:column;white-space:normal;font-size:.85rem;padding:.8rem .5rem;color:rgba(var(--text-color), 1);text-align:center;align-items:center;justify-content:center;background-color:rgba(var(--text-color), 0.03);flex:1}.wallet-action:nth-of-type(2){margin:0 .5rem}.wallet-action .icon{margin-bottom:.8rem;fill:var(--accent-color)}#saved_ids_list{display:grid;grid-template-columns:repeat(auto-fill, minmax(10rem, 1fr));gap:1rem;margin-top:1.5rem}.saved-id{display:grid;gap:1rem;grid-template-columns:auto 1fr;align-items:center;color:inherit;padding:.5rem 0}.saved-id__initials{display:flex;align-items:center;justify-content:center;height:2.5rem;width:2.5rem;color:rgba(var(--background-color), 1);background-color:var(--accent-color);border-radius:1rem;text-transform:uppercase;font-weight:700}.saved-id__title{font-size:.9rem;color:rgba(var(--text-color), 1)}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:1.5rem}#history{height:100%;align-content:flex-start;background-color:rgba(var(--foreground-color), 1);width:min(60ch,100%);justify-self:center;margin:0 auto;padding:1.5rem;overflow-y:auto;border-radius:.5rem;grid-template-columns:minmax(0, 1fr)}#payments_history_wrapper,#wallet_history_wrapper{padding-bottom:4rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;padding:.8rem;align-items:center;background-color:rgba(var(--text-color), 0.03);border-radius:.3rem}.transaction:not(:last-of-type){margin-bottom:.5rem}.transaction__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:.5rem}.transaction__icon .icon{fill:var(--accent-color)}.transaction__receiver{font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8)}.transaction__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{font-size:1rem;font-weight:700;grid-area:1/3/3/4}.transaction__amount.sent::before{content:"-"}.transaction__amount.received{color:var(--green)}.transaction__amount.received::before{content:"+"}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}#transaction_result{display:grid;gap:.5rem;height:max(40vh,24rem);align-items:center;justify-content:center;text-align:center;align-content:center}#transaction_result.success .icon--failed{display:none}#transaction_result.failed .icon--success{display:none}#transaction_result h3{text-align:center;width:100%}#transaction_result .icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:1rem;-webkit-animation:popup 1s;animation:popup 1s}#transaction_result .icon--success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}#transaction_result .icon--failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}#transaction_result sm-copy{font-size:.8rem}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}.cashier-request,.wallet-request,.payment-request{display:flex;gap:1rem;align-items:center;padding:.8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06)}.cashier-request:not(:last-of-type),.wallet-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:1rem}.cashier-request__time,.wallet-request__time,.payment-request__time{font-size:.8rem}.payment-request{display:grid;grid-template-columns:1fr auto}.payment-request__amount{font-weight:700;text-align:right}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}#user{gap:1rem;padding:1.5rem 8vmax;grid-template-columns:1fr 20rem;align-content:flex-start;align-items:flex-start}.saved-id{padding:1rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.03);grid-template-columns:minmax(0, 1fr)}#wallet_section{grid-area:1/2/3/3}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}button,.button:not([disabled]){transition:background-color .3s,filter .3s}button:hover,.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 22019df..d28920e 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -26,8 +26,19 @@ body {
   color: rgba(var(--text-color), 1);
   background-color: rgba(var(--background-color), 1);
   transition: background-color 0.3s;
+  position: relative;
   display: flex;
   flex-direction: column;
+  &::before {
+    content: "";
+    position: absolute;
+    height: max(12rem, 16vmax);
+    background-color: #256eff;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: -1;
+  }
 }
 
 body[data-theme="dark"] {
@@ -160,7 +171,7 @@ sm-textarea {
   }
 }
 sm-button {
-  --padding: 0.6rem 0.8rem;
+  --padding: 0.8rem;
   &[variant="primary"] {
     .icon {
       fill: rgba(var(--background-color), 1);
@@ -519,7 +530,8 @@ h3 {
   }
 }
 #main_header {
-  padding: 1rem 1.5rem;
+  --text-color: 220, 220, 220;
+  padding: 1rem max(4vw, 1.5rem);
   a {
     color: rgba(var(--text-color), 1);
   }
@@ -554,6 +566,15 @@ h3 {
 .clip {
   clip-path: circle(0);
 }
+#user {
+  gap: 0.5rem;
+  padding: 0 1.5rem;
+}
+#quick_actions_container {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
+}
 .primary-action {
   display: flex;
   flex-direction: column;
@@ -565,16 +586,40 @@ h3 {
   border-radius: 0.5rem;
   // background-color: rgba(var(--text-color), 0.06);
   background-color: transparent;
-  min-width: 5rem;
-  max-width: 6rem;
   text-align: center;
   .icon {
     fill: var(--accent-color);
   }
 }
-#user {
-  padding: 1rem 1.5rem;
+#rupee_balance {
+  span:first-of-type {
+    font-size: 1.5rem;
+  }
+  span:last-of-type {
+    font-size: 0.8rem;
+  }
 }
+.wallet-action {
+  display: flex;
+  flex-direction: column;
+  white-space: normal;
+  font-size: 0.85rem;
+  padding: 0.8rem 0.5rem;
+  color: rgba(var(--text-color), 1);
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(var(--text-color), 0.03);
+  flex: 1;
+  &:nth-of-type(2) {
+    margin: 0 0.5rem;
+  }
+  .icon {
+    margin-bottom: 0.8rem;
+    fill: var(--accent-color);
+  }
+}
+
 #saved_ids_list {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
@@ -602,6 +647,7 @@ h3 {
   }
   &__title {
     font-size: 0.9rem;
+    color: rgba(var(--text-color), 1);
   }
 }
 
@@ -610,15 +656,20 @@ h3 {
   border-radius: 0.5rem;
   padding: 1.5rem;
 }
-#history,
-#wallet_history {
-  & > * {
-    width: min(60ch, 100%);
-    justify-self: center;
-  }
+#history {
+  height: 100%;
+  align-content: flex-start;
+  background-color: rgba(var(--foreground-color), 1);
+  width: min(60ch, 100%);
+  justify-self: center;
+  margin: 0 auto;
+  padding: 1.5rem;
+  overflow-y: auto;
+  border-radius: 0.5rem;
+  grid-template-columns: minmax(0, 1fr);
 }
-#token_transactions {
-  flex-direction: column;
+#payments_history_wrapper,
+#wallet_history_wrapper {
   padding-bottom: 4rem;
 }
 .transaction {
@@ -785,6 +836,7 @@ h3 {
     padding: 1rem 1.5rem 0 1.5rem;
   }
   #user {
+    gap: 1rem;
     padding: 1.5rem 8vmax;
     grid-template-columns: 1fr 20rem;
     align-content: flex-start;
@@ -821,6 +873,7 @@ h3 {
       background-color: rgba(var(--text-color), 0.06);
     }
   }
+  button,
   .button:not([disabled]) {
     transition: background-color 0.3s, filter 0.3s;
     &:hover {
diff --git a/index.html b/index.html
index 8cd467a..628b4b5 100644
--- a/index.html
+++ b/index.html
@@ -146,16 +146,13 @@
             </div>
         </div>
         <section id="home" class="page hide">
-            <div id="user" class="hide grid gap-1-5 user-element">
+            <div id="user" class="hide grid user-element">
                 <div class="card grid gap-1-5">
                     <div class="flex align-center space-between">
                         <h4>Quick actions </h4>
-                        <a href="#/history" class="button flex align-center">
-                            See history
-                        </a>
                     </div>
-                    <div class="flex">
-                        <button class="button primary-action" onclick="showTokenTransfer('send')">
+                    <div id="quick_actions_container">
+                        <button class="primary-action" onclick="showTokenTransfer('send')">
                             <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
                                 width="24px" fill="#000000">
                                 <path d="M0 0h24v24H0z" fill="none" />
@@ -163,7 +160,7 @@
                             </svg>
                             Send
                         </button>
-                        <button class="button primary-action" onclick="showTokenTransfer('request')">
+                        <button class="primary-action" onclick="showTokenTransfer('request')">
                             <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
                                 height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
                                 <g>
@@ -194,38 +191,59 @@
                             </svg>
                             Wallet
                         </h4>
-                        <a href="#/wallet_history" class="button">See History</a>
                     </div>
                     <div class="grid gap-0-5">
                         <h5>Balance</h5>
                         <h1 class="h1" id="rupee_balance"></h1>
                     </div>
-                    <div class="grid gap-1">
-                        <!-- <sm-input id="request_cashier_amount" type="number" name="amount" placeholder="Amount"
+                    <!-- <div class="grid gap-1">
+                         <sm-input id="request_cashier_amount" type="number" name="amount" placeholder="Amount"
                                 animate>
-                            </sm-input> -->
-                        <div class="flex">
-                            <button class="flex gap-0-5 flex-1" onclick="userUI.requestTokenFromCashier()">
-                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
-                                    height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                            </sm-input>
+                    </div> -->
+                    <div class="flex">
+                        <button class="wallet-action" onclick="userUI.requestTokenFromCashier()">
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                                width="24px" fill="#000000">
+                                <path d="M0 0h24v24H0z" fill="none" />
+                                <path
+                                    d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
+                            </svg>
+                            Top-up wallet
+                        </button>
+                        <button class="wallet-action" onclick="userUI.withdrawCashFromCashier()">
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                                height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                                <g>
                                     <rect fill="none" height="24" width="24" />
+                                </g>
+                                <g>
                                     <g>
-                                        <path
-                                            d="M19.83,7.5l-2.27-2.27c0.07-0.42,0.18-0.81,0.32-1.15C17.96,3.9,18,3.71,18,3.5C18,2.67,17.33,2,16.5,2 c-1.64,0-3.09,0.79-4,2l-5,0C4.46,4,2,6.46,2,9.5S4.5,21,4.5,21l5.5,0v-2h2v2l5.5,0l1.68-5.59L22,14.47V7.5H19.83z M13,9H8V7h5V9z M16,11c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C17,10.55,16.55,11,16,11z" />
+                                        <rect height="7" width="3" x="4" y="10" />
+                                        <rect height="7" width="3" x="10.5" y="10" />
+                                        <rect height="3" width="20" x="2" y="19" />
+                                        <rect height="7" width="3" x="17" y="10" />
+                                        <polygon points="12,1 2,6 2,8 22,8 22,6" />
                                     </g>
-                                </svg>
-                                Deposit
-                            </button>
-                            <button class="flex gap-0-5 flex-1" onclick="userUI.withdrawCashFromCashier()">
-                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-                                    width="24px" fill="#000000">
-                                    <path d="M0 0h24v24H0z" fill="none" />
+                                </g>
+                            </svg>
+                            Transfer to bank
+                        </button>
+                        <a href="#/history" class="wallet-action interact button">
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                                height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                                <path d="M0,0h24v24H0V0z" fill="none" />
+                                <g>
                                     <path
-                                        d="M19 14V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zm-9-1c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-6v11c0 1.1-.9 2-2 2H4v-2h17V7h2z" />
-                                </svg>
-                                Withdraw
-                            </button>
-                        </div>
+                                        d="M19.5,3.5L18,2l-1.5,1.5L15,2l-1.5,1.5L12,2l-1.5,1.5L9,2L7.5,3.5L6,2v14H3v3c0,1.66,1.34,3,3,3h12c1.66,0,3-1.34,3-3V2 L19.5,3.5z M19,19c0,0.55-0.45,1-1,1s-1-0.45-1-1v-3H8V5h11V19z" />
+                                    <rect height="2" width="6" x="9" y="7" />
+                                    <rect height="2" width="2" x="16" y="7" />
+                                    <rect height="2" width="6" x="9" y="10" />
+                                    <rect height="2" width="2" x="16" y="10" />
+                                </g>
+                            </svg>
+                            See History
+                        </a>
                     </div>
                 </section>
                 <div class="card">
@@ -247,38 +265,34 @@
                 </div>
             </section>
         </section>
-        <section id="history" class="page page-layout hide grid gap-1">
-            <div class="grid gap-1" style="justify-items: flex-start;">
-                <a href="#/home" class="button align-start">
+        <section id="history" class="page hide grid gap-1">
+            <div class="grid gap-1">
+                <a href="#/home" class="button icon-only justify-self-start">
                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
                         fill="#000000">
                         <path d="M0 0h24v24H0z" fill="none" />
                         <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
                     </svg>
                 </a>
-                <h4>Transactions history</h4>
+                <div class="flex align-center space-between">
+                    <h4>Transactions history</h4>
+                    <strip-select id="history_type_selector">
+                        <strip-option value="payments" selected>Payments</strip-option>
+                        <strip-option value="wallet">Wallet</strip-option>
+                    </strip-select>
+                </div>
             </div>
-            <ul id="token_transactions" class="observe-empty-state">
-            </ul>
-            <div class=" empty-state gap-1 justify-center text-center">
-                <h4>No transactions</h4>
-            </div>
-        </section>
-        <section id="wallet_history" class="page page-layout hide">
-            <div class="grid gap-1" style="justify-items: flex-start;">
-                <a href="#/home" class="button align-start">
-                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
-                        fill="#000000">
-                        <path d="M0 0h24v24H0z" fill="none" />
-                        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
-                    </svg>
-                </a>
-                <h4>Wallet history</h4>
-            </div>
-            <ul id="user-cashier-requests" class="observe-empty-state"></ul>
-            <div class=" empty-state gap-1 justify-center text-center">
-                <h4>No transactions</h4>
+            <div id="payments_history_wrapper">
+                <ul id="payments_history" class="observe-empty-state"></ul>
+                <div class=" empty-state gap-1 justify-center text-center">
+                    <h4>No transactions</h4>
+                </div>
             </div>
+            <div id="wallet_history_wrapper" class="hide">
+                <ul id="wallet_history" class="observe-empty-state"></ul>
+                <div class=" empty-state gap-1 justify-center text-center">
+                    <h4>No transactions</h4>
+                </div>
         </section>
         <section id="activity" class="page page-layout hide">
             <h4>Activity</h4>
@@ -429,12 +443,13 @@
             floDapps.setCustomPrivKeyInput(getSignedIn)
             floDapps.setAppObjectStores({ savedIds: {} })
             floDapps.launchStartUp().then(result => {
-                history.replaceState(null, null, " ")
                 console.log(`Welcome ${myFloID}`);
                 getRef('logged_in_user_id').value = myFloID;
                 floGlobals.isSubAdmin = floGlobals.subAdmins.includes(myFloID)
                 tokenAPI.getBalance(myFloID).then(balance => {
-                    getRef('rupee_balance').textContent = balance.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
+                    const formattedBalance = balance.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
+                    const [beforeDecimal, afterDecimal] = formattedBalance.split('.')
+                    getRef('rupee_balance').innerHTML = `<span><b>${beforeDecimal}</b></span>.<span>${afterDecimal}</span>`
                 })
                 if (floGlobals.isSubAdmin) {
                     cashierUI.renderRequests(Cashier.Requests);
@@ -456,7 +471,6 @@
                         showPage(window.location.hash, { firstLoad: true })
                     }).catch(error => console.error(error))
                 }
-                renderAllTokenTransactions();
             }).catch(error => console.error(error))
         }
     </script>
diff --git a/scripts/components.js b/scripts/components.js
index 13bd9a7..b0ba987 100644
--- a/scripts/components.js
+++ b/scripts/components.js
@@ -689,150 +689,150 @@ customElements.define('sm-input',
     })
 const smNotifications = document.createElement('template')
 smNotifications.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        -webkit-box-sizing: border-box;
-                box-sizing: border-box;
-    } 
-    :host{
-        display: flex;
-        --icon-height: 1.5rem;
-        --icon-width: 1.5rem;
-    }
-    .hide{
-        opacity: 0 !important;
-        pointer-events: none !important;
-    }
-    .notification-panel{
-        display: grid;
-        width: 100%;
-        gap: 0.5rem;
-        position: fixed;
-        left: 0;
-        bottom: 0;
-        z-index: 100;
-        max-height: 100%;
-        padding: 1rem;
-        overflow: hidden auto;
-        -ms-scroll-chaining: none;
-            overscroll-behavior: contain;
-        touch-action: none;
-    }
-    .notification-panel:empty{
-        display:none;
-    }
-    .notification{
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        position: relative;
-        border-radius: 0.3rem;
-        background: rgba(var(--background-color, (255,255,255)), 1);
-        overflow: hidden;
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        -ms-word-break: break-all;
-        word-break: break-all;
-        word-break: break-word;
-        -ms-hyphens: auto;
-        -webkit-hyphens: auto;
-        hyphens: auto;
-        max-width: 100%;
-        padding: 1rem;
-        align-items: center;
-        touch-action: none;
-    }
-    .icon-container:not(:empty){
-        margin-right: 0.5rem;
-        height: var(--icon-height);
-        width: var(--icon-width);
-    }
-    h4:first-letter,
-    p:first-letter{
-        text-transform: uppercase;
-    }
-    h4{
-        font-weight: 400;
-    }
-    p{
-        line-height: 1.6;
-        -webkit-box-flex: 1;
-            -ms-flex: 1;
-                flex: 1;
-        color: rgba(var(--text-color, (17,17,17)), 0.9);
-        overflow-wrap: break-word;
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        -ms-word-break: break-all;
-        word-break: break-all;
-        word-break: break-word;
-        -ms-hyphens: auto;
-        -webkit-hyphens: auto;
-        hyphens: auto;
-        max-width: 100%;
-    }
-    .notification:last-of-type{
-        margin-bottom: 0;
-    }
-    .icon {
-        height: 100%;
-        width: 100%;
-        fill: rgba(var(--text-color, (17,17,17)), 0.7);
-    }
-    .icon--success {
-        fill: var(--green);
-      }
-      .icon--failure,
-      .icon--error {
-        fill: var(--danger-color);
-      }
-    .close{
-        height: 2rem;
-        width: 2rem;
-        border: none;
-        cursor: pointer;
-        margin-left: 1rem;
-        border-radius: 50%;
-        padding: 0.3rem;
-        transition: background-color 0.3s, transform 0.3s;
-        background-color: transparent;
-    }
-    .close:active{
-        transform: scale(0.9);
-    }
-    @media screen and (min-width: 640px){
-        .notification-panel{
-            max-width: 28rem;
-            width: max-content;
-        }
-        .notification{
-            width: auto;
-            border: solid 1px rgba(var(--text-color, (17,17,17)), 0.2);
-        }
-    }
-    @media (any-hover: hover){
-        ::-webkit-scrollbar{
-            width: 0.5rem;
-        }
-        
-        ::-webkit-scrollbar-thumb{
-            background: rgba(var(--text-color, (17,17,17)), 0.3);
-            border-radius: 1rem;
-            &:hover{
-                background: rgba(var(--text-color, (17,17,17)), 0.5);
+        <style>
+            *{
+                padding: 0;
+                margin: 0;
+                -webkit-box-sizing: border-box;
+                        box-sizing: border-box;
+            } 
+            :host{
+                display: flex;
+                --icon-height: 1.5rem;
+                --icon-width: 1.5rem;
             }
-        }
-        .close:hover{
-            background-color: rgba(var(--text-color, (17,17,17)), 0.1);
-        }
-    }
-</style>
-<div class="notification-panel"></div>
-`;
-
-
+            .hide{
+                opacity: 0 !important;
+                pointer-events: none !important;
+            }
+            .notification-panel{
+                display: grid;
+                width: 100%;
+                gap: 0.5rem;
+                position: fixed;
+                left: 0;
+                top: 0;
+                z-index: 100;
+                max-height: 100%;
+                padding: 1rem;
+                overflow: hidden auto;
+                -ms-scroll-chaining: none;
+                    overscroll-behavior: contain;
+                touch-action: none;
+            }
+            .notification-panel:empty{
+                display:none;
+            }
+            .notification{
+                display: -webkit-box;
+                display: -ms-flexbox;
+                display: flex;
+                position: relative;
+                border-radius: 0.3rem;
+                background: rgba(var(--foreground-color, (255,255,255)), 1);
+                overflow: hidden;
+                overflow-wrap: break-word;
+                word-wrap: break-word;
+                -ms-word-break: break-all;
+                word-break: break-all;
+                word-break: break-word;
+                -ms-hyphens: auto;
+                -webkit-hyphens: auto;
+                hyphens: auto;
+                max-width: 100%;
+                padding: 1rem;
+                align-items: center;
+                touch-action: none;
+            }
+            .icon-container:not(:empty){
+                margin-right: 0.5rem;
+                height: var(--icon-height);
+                width: var(--icon-width);
+            }
+            h4:first-letter,
+            p:first-letter{
+                text-transform: uppercase;
+            }
+            h4{
+                font-weight: 400;
+            }
+            p{
+                line-height: 1.6;
+                -webkit-box-flex: 1;
+                    -ms-flex: 1;
+                        flex: 1;
+                color: rgba(var(--text-color, (17,17,17)), 0.9);
+                overflow-wrap: break-word;
+                overflow-wrap: break-word;
+                word-wrap: break-word;
+                -ms-word-break: break-all;
+                word-break: break-all;
+                word-break: break-word;
+                -ms-hyphens: auto;
+                -webkit-hyphens: auto;
+                hyphens: auto;
+                max-width: 100%;
+            }
+            .notification:last-of-type{
+                margin-bottom: 0;
+            }
+            .icon {
+                height: 100%;
+                width: 100%;
+                fill: rgba(var(--text-color, (17,17,17)), 0.7);
+            }
+            .icon--success {
+                fill: var(--green);
+              }
+              .icon--failure,
+              .icon--error {
+                fill: var(--danger-color);
+              }
+            .close{
+                height: 2rem;
+                width: 2rem;
+                border: none;
+                cursor: pointer;
+                margin-left: 1rem;
+                border-radius: 50%;
+                padding: 0.3rem;
+                transition: background-color 0.3s, transform 0.3s;
+                background-color: transparent;
+            }
+            .close:active{
+                transform: scale(0.9);
+            }
+            @media screen and (min-width: 640px){
+                .notification-panel{
+                    max-width: 28rem;
+                    width: max-content;
+                    top: auto;
+                    bottom: 0;
+                }
+                .notification{
+                    width: auto;
+                    border: solid 1px rgba(var(--text-color, (17,17,17)), 0.2);
+                }
+            }
+            @media (any-hover: hover){
+                ::-webkit-scrollbar{
+                    width: 0.5rem;
+                }
+                
+                ::-webkit-scrollbar-thumb{
+                    background: rgba(var(--text-color, (17,17,17)), 0.3);
+                    border-radius: 1rem;
+                    &:hover{
+                        background: rgba(var(--text-color, (17,17,17)), 0.5);
+                    }
+                }
+                .close:hover{
+                    background-color: rgba(var(--text-color, (17,17,17)), 0.1);
+                }
+            }
+        </style>
+        <div class="notification-panel"></div>
+        `;
 customElements.define('sm-notifications', class extends HTMLElement {
     constructor() {
         super();
@@ -864,6 +864,10 @@ customElements.define('sm-notifications', class extends HTMLElement {
         this.swipeTime = 0;
         this.swipeTimeThreshold = 200;
         this.currentTarget = null;
+
+        this.mediaQuery = window.matchMedia('(min-width: 640px)')
+        this.handleOrientationChange = this.handleOrientationChange.bind(this)
+        this.isLandscape = false
     }
 
     randString(length) {
@@ -881,16 +885,16 @@ customElements.define('sm-notifications', class extends HTMLElement {
         notification.classList.add('notification');
         let composition = ``;
         composition += `
-            <div class="icon-container">${icon}</div>
-            <p>${message}</p>
-            `;
+                    <div class="icon-container">${icon}</div>
+                    <p>${message}</p>
+                    `;
         if (pinned) {
             notification.classList.add('pinned');
             composition += `
-                <button class="close">
-                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
-                </button>
-            `;
+                        <button class="close">
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
+                        </button>
+                    `;
         }
         notification.innerHTML = composition;
         return notification;
@@ -898,11 +902,14 @@ customElements.define('sm-notifications', class extends HTMLElement {
 
     push(message, options = {}) {
         const notification = this.createNotification(message, options);
-        this.notificationPanel.append(notification);
+        if (this.isLandscape)
+            this.notificationPanel.append(notification);
+        else
+            this.notificationPanel.prepend(notification);
         this.notificationPanel.animate(
             [
                 {
-                    transform: `translateY(${notification.clientHeight}px)`,
+                    transform: `translateY(${this.isLandscape ? '' : '-'}${notification.clientHeight}px)`,
                 },
                 {
                     transform: `none`,
@@ -911,7 +918,7 @@ customElements.define('sm-notifications', class extends HTMLElement {
         )
         notification.animate([
             {
-                transform: `translateX(-1rem)`,
+                transform: `translateY(-1rem)`,
                 opacity: '0'
             },
             {
@@ -952,7 +959,20 @@ customElements.define('sm-notifications', class extends HTMLElement {
         this.currentTarget.style.transform = `translateX(${this.currentX}px)`;
     }
 
+    handleOrientationChange(e) {
+        this.isLandscape = e.matches
+        if (e.matches) {
+            // landscape
+
+        } else {
+            // portrait
+        }
+    }
     connectedCallback() {
+
+        this.handleOrientationChange(this.mediaQuery);
+
+        this.mediaQuery.addEventListener('change', this.handleOrientationChange);
         this.notificationPanel.addEventListener('pointerdown', e => {
             if (e.target.closest('.notification')) {
                 this.swipeThreshold = this.clientWidth / 2;
@@ -975,7 +995,8 @@ customElements.define('sm-notifications', class extends HTMLElement {
                 this.swipeDirection = 'left';
             }
             if (this.swipeTime < this.swipeTimeThreshold) {
-                this.removeNotification(this.currentTarget, this.swipeDirection);
+                if (this.swipeDistance > 50)
+                    this.removeNotification(this.currentTarget, this.swipeDirection);
             } else {
                 if (this.swipeDistance > this.swipeThreshold) {
                     this.removeNotification(this.currentTarget, this.swipeDirection);
@@ -1018,8 +1039,10 @@ customElements.define('sm-notifications', class extends HTMLElement {
             childList: true,
         });
     }
+    disconnectedCallback() {
+        mediaQueryList.removeEventListener('change', handleOrientationChange);
+    }
 });
-
 class Stack {
     constructor() {
         this.items = [];
diff --git a/scripts/fn_ui.js b/scripts/fn_ui.js
index 46c4dc0..18e4a1f 100644
--- a/scripts/fn_ui.js
+++ b/scripts/fn_ui.js
@@ -1,5 +1,7 @@
 /*jshint esversion: 8 */
 const userUI = {};
+let paymentsHistoryLoader
+let walletHistoryLoader
 
 userUI.requestTokenFromCashier = function () {
     let cashier = User.findCashier();
@@ -63,13 +65,15 @@ userUI.renderCashierRequests = function (requests, error = null) {
         return console.error(error);
     else if (typeof requests !== "object" || requests === null)
         return;
-    const frag = document.createDocumentFragment()
-    for (let r in requests) {
-        let oldCard = document.getElementById(r);
-        if (oldCard) oldCard.remove();
-        frag.append(render.walletRequestCard(requests[r]))
+    if (pagesData.lastPage === 'history' && pagesData.params.type === 'wallet') {
+        const frag = document.createDocumentFragment()
+        for (let transactionID in requests) {
+            let oldCard = getRef('wallet_history').querySelector(`#${transactionID}`);
+            if (oldCard) oldCard.remove();
+            frag.append(render.walletRequestCard(transactionID, requests[transactionID]))
+        }
+        getRef('wallet_history').prepend(frag)
     }
-    getRef('user-cashier-requests').append(frag)
 }
 
 userUI.renderMoneyRequests = function (requests, error = null) {
@@ -227,17 +231,6 @@ function completeTokenToCashRequest(request) {
     })
 }
 
-function renderAllTokenTransactions() {
-    tokenAPI.getAllTxs(myFloID).then(result => {
-        getRef('token_transactions').innerHTML = ''
-        const frag = document.createDocumentFragment();
-        for (let txid in result.transactions) {
-            frag.append(render.transactionCard(txid, tokenAPI.util.parseTxData(result.transactions[txid])));
-        }
-        getRef('token_transactions').append(frag);
-    }).catch(error => console.error(error));
-}
-
 function getFloIdName(floID) {
     return floGlobals.savedIds[floID] ? floGlobals.savedIds[floID].title : floID;
 }
@@ -252,8 +245,8 @@ const render = {
         clone.querySelector('.saved-id__title').textContent = title;
         return clone;
     },
-    transactionCard(txid, transactionDetails) {
-        const { time, sender, receiver, tokenAmount } = transactionDetails;
+    transactionCard(transactionDetails) {
+        const { txid, time, sender, receiver, tokenAmount } = transactionDetails;
         const clone = getRef('transaction_template').content.cloneNode(true).firstElementChild;
         clone.dataset.txid = txid;
         clone.querySelector('.transaction__time').textContent = getFormattedTime(time * 1000);
@@ -315,9 +308,13 @@ const render = {
                 <button class="button" onclick="userUI.declineRequest('${vectorClock}')">Decline</button>`;
 
         return clone;
-    },
+    }
 };
 
+getRef('history_type_selector').addEventListener('change', (e) => {
+    location.hash = `#/history?type=${e.target.value}`;
+})
+
 let currentUserAction;
 function showTokenTransfer(type) {
     getRef('tt_button').textContent = type;
diff --git a/scripts/std_ui.js b/scripts/std_ui.js
index 56522e7..5996a97 100644
--- a/scripts/std_ui.js
+++ b/scripts/std_ui.js
@@ -253,7 +253,8 @@ function createRipple(event, target) {
 }
 
 const pagesData = {
-    params: {}
+    params: {},
+    openedPages: new Set(),
 }
 
 async function showPage(targetPage, options = {}) {
@@ -285,15 +286,14 @@ async function showPage(targetPage, options = {}) {
         }
     }
     if (typeof myFloID === "undefined" && !(['sign_up', 'sign_in', 'loading', 'landing'].includes(pageId))) return
+    else if (typeof myFloID !== "undefined" && (['sign_up', 'sign_in', 'loading', 'landing'].includes(pageId))) {
+        history.replaceState(null, null, '#/home');
+        pageId = 'home'
+    }
     if (searchParams) {
         const urlSearchParams = new URLSearchParams('?' + searchParams);
         params = Object.fromEntries(urlSearchParams.entries());
     }
-    if (pagesData.lastPage !== pageId) {
-        pagesData.lastPage = pageId
-    }
-    if (params)
-        pagesData.params = params
     switch (pageId) {
         case 'sign_in':
             setTimeout(() => {
@@ -307,14 +307,71 @@ async function showPage(targetPage, options = {}) {
             getRef('generated_private_key').value = privKey
             targetPage = 'sign_up'
             break;
-        case 'transactions':
+        case 'history':
+            let transactionsList = []
+            if (!params.hasOwnProperty('type')) {
+                history.replaceState(null, null, '#/history?type=payments');
+                params.type = 'payments'
+            }
+            switch (params.type) {
+                case 'payments':
+                    if (paymentsHistoryLoader)
+                        paymentsHistoryLoader.clear()
+                    getRef('payments_history').innerHTML = '<sm-spinner></sm-spinner>'
+                    getRef('payments_history_wrapper').classList.remove('hide')
+                    getRef('wallet_history_wrapper').classList.add('hide')
+                    tokenAPI.getAllTxs(myFloID).then(({ transactions }) => {
+                        for (const transactionId in transactions) {
+                            transactionsList.push({
+                                ...tokenAPI.util.parseTxData(transactions[transactionId]),
+                                txid: transactionId
+                            })
+                        }
+                        if (paymentsHistoryLoader) {
+                            paymentsHistoryLoader.update(transactionsList)
+                        } else {
+                            paymentsHistoryLoader = new LazyLoader('#payments_history', transactionsList, render.transactionCard);
+                        }
+                        paymentsHistoryLoader.init()
+                    }).catch(e => {
+                        console.error(e)
+                    })
+                    break;
+                case 'wallet':
+                    if (walletHistoryLoader)
+                        walletHistoryLoader.clear()
+                    getRef('wallet_history').innerHTML = '<sm-spinner></sm-spinner>'
+                    getRef('payments_history_wrapper').classList.add('hide')
+                    getRef('wallet_history_wrapper').classList.remove('hide')
+                    const requests = User.cashierRequests;
+                    for (const transactionId in requests) {
+                        transactionsList.push(User.cashierRequests[transactionId])
+                    }
+                    if (walletHistoryLoader) {
+                        walletHistoryLoader.update(transactionsList)
+                    } else {
+                        walletHistoryLoader = new LazyLoader('#wallet_history', transactionsList, render.walletRequestCard);
+                        // to-do: set value of history type selector
+                    }
+                    walletHistoryLoader.init()
+                default:
+                    break;
+            }
             break;
         default:
-
+            break;
     }
-    document.querySelectorAll('.page').forEach(page => page.classList.add('hide'))
-    getRef(pageId).classList.remove('hide')
-    getRef(pageId).animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, fill: 'forwards', easing: 'ease' })
+
+    if (pagesData.lastPage !== pageId) {
+        document.querySelectorAll('.page').forEach(page => page.classList.add('hide'))
+        getRef(pageId).classList.remove('hide')
+        getRef(pageId).animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, fill: 'forwards', easing: 'ease' })
+        pagesData.lastPage = pageId
+    }
+    if (params)
+        pagesData.params = params
+    pagesData.openedPages.add(pageId)
+
 }
 
 // class based lazy loading
@@ -364,7 +421,6 @@ class LazyLoader {
     }
     update(elementsToRender) {
         this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || []
-        this.render()
     }
     render(options = {}) {
         let { lazyLoad = false } = options

From 9dd23f6151e2d359716616cc8471f09165df87ec Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Wed, 13 Apr 2022 20:28:23 +0530
Subject: [PATCH 4/8] UI update

---
 css/main.css          |  93 +++++++++++++++++++++++++----------
 css/main.min.css      |   2 +-
 css/main.scss         | 105 +++++++++++++++++++++++++++------------
 index.html            | 111 ++++++++++++++++++++++++++----------------
 scripts/components.js |  15 +++---
 scripts/fn_ui.js      |  68 ++++++++++++++++++++++----
 6 files changed, 278 insertions(+), 116 deletions(-)

diff --git a/css/main.css b/css/main.css
index 5638492..7aff4a6 100644
--- a/css/main.css
+++ b/css/main.css
@@ -21,6 +21,7 @@ body {
   --background-color: 241, 243, 248;
   --danger-color: rgb(255, 75, 75);
   --green: #1cad59;
+  --yellow: rgb(220, 165, 0);
   scrollbar-width: thin;
   scrollbar-gutter: stable;
   color: rgba(var(--text-color), 1);
@@ -48,6 +49,7 @@ body[data-theme=dark] {
   --background-color: 21, 22, 22;
   --danger-color: rgb(255, 106, 106);
   --green: #00e676;
+  --yellow: rgb(255, 213, 5);
 }
 body[data-theme=dark] sm-popup::part(popup) {
   background-color: rgba(var(--foreground-color), 1);
@@ -625,11 +627,12 @@ h3 {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0.8rem 1rem;
+  padding: 0.8rem;
   gap: 0.5rem;
   white-space: normal;
   font-size: 0.8rem;
   border-radius: 0.5rem;
+  font-weight: 400;
   background-color: transparent;
   text-align: center;
 }
@@ -646,22 +649,21 @@ h3 {
 
 .wallet-action {
   display: flex;
-  flex-direction: column;
   white-space: normal;
   font-size: 0.85rem;
-  padding: 0.8rem 0.5rem;
+  padding: 0.8rem 0.6rem !important;
   color: rgba(var(--text-color), 1);
   text-align: center;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   background-color: rgba(var(--text-color), 0.03);
   flex: 1;
 }
 .wallet-action:nth-of-type(2) {
-  margin: 0 0.5rem;
+  margin-left: 0.5rem;
 }
 .wallet-action .icon {
-  margin-bottom: 0.8rem;
+  margin-right: 0.5rem;
   fill: var(--accent-color);
 }
 
@@ -700,14 +702,14 @@ h3 {
 .card {
   background-color: rgba(var(--foreground-color), 1);
   border-radius: 0.5rem;
-  padding: 1.5rem;
+  padding: 1rem;
 }
 
 #history {
   height: 100%;
   align-content: flex-start;
   background-color: rgba(var(--foreground-color), 1);
-  width: min(60ch, 100%);
+  width: min(42rem, 100%);
   justify-self: center;
   margin: 0 auto;
   padding: 1.5rem;
@@ -721,16 +723,34 @@ h3 {
   padding-bottom: 4rem;
 }
 
+#payments_history {
+  display: grid;
+  gap: 2rem;
+}
+
 .transaction {
   grid-template-columns: auto 1fr auto;
   gap: 0.5rem 1rem;
-  padding: 0.8rem;
   align-items: center;
-  background-color: rgba(var(--text-color), 0.03);
   border-radius: 0.3rem;
 }
-.transaction:not(:last-of-type) {
-  margin-bottom: 0.5rem;
+.transaction.sent .icon {
+  fill: rgba(var(--text-color), 0.8);
+}
+.transaction.sent .transaction__amount {
+  color: rgba(var(--text-color), 0.8);
+}
+.transaction.sent .transaction__amount::before {
+  content: "-";
+}
+.transaction.received .icon {
+  fill: var(--green);
+}
+.transaction.received .transaction__amount {
+  color: var(--green);
+}
+.transaction.received .transaction__amount::before {
+  content: "-";
 }
 .transaction__icon {
   display: flex;
@@ -740,10 +760,7 @@ h3 {
   width: 2.5rem;
   height: 2.5rem;
   background-color: rgba(var(--text-color), 0.03);
-  border-radius: 0.5rem;
-}
-.transaction__icon .icon {
-  fill: var(--accent-color);
+  border-radius: 2rem;
 }
 .transaction__receiver {
   font-size: 0.9rem;
@@ -759,15 +776,6 @@ h3 {
   font-weight: 700;
   grid-area: 1/3/3/4;
 }
-.transaction__amount.sent::before {
-  content: "-";
-}
-.transaction__amount.received {
-  color: var(--green);
-}
-.transaction__amount.received::before {
-  content: "+";
-}
 
 .fab {
   position: absolute;
@@ -893,6 +901,35 @@ h3 {
   text-align: right;
 }
 
+.wallet-request {
+  align-items: initial;
+  flex-direction: column;
+}
+.wallet-request__details {
+  font-weight: 700;
+}
+.wallet-request__status {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  font-weight: 500;
+}
+.wallet-request__status .icon {
+  margin-right: 0.3rem;
+}
+.wallet-request__status.pending .icon {
+  fill: var(--yellow);
+}
+.wallet-request__status.completed .icon {
+  fill: var(--green);
+}
+.wallet-request__status.rejected .icon {
+  fill: var(--danger-color);
+}
+.wallet-request__note {
+  font-size: 0.8rem;
+}
+
 @media screen and (min-width: 40rem) {
   sm-popup {
     --width: 24rem;
@@ -907,10 +944,14 @@ h3 {
     padding: 1rem 1.5rem 0 1.5rem;
   }
 
+  .card {
+    padding: 1.5rem;
+  }
+
   #user {
     gap: 1rem;
     padding: 1.5rem 8vmax;
-    grid-template-columns: 1fr 20rem;
+    grid-template-columns: 1fr 22rem;
     align-content: flex-start;
     align-items: flex-start;
   }
diff --git a/css/main.min.css b/css/main.min.css
index 5780331..ad0add2 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #256eff;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s;position:relative;display:flex;flex-direction:column}body::before{content:"";position:absolute;height:max(12rem,16vmax);background-color:#256eff;width:100%;left:0;top:0;z-index:-1}body[data-theme=dark]{--accent-color: #90b8f8;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1)}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:1rem}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details{padding:1rem 0}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}h3{font-size:1.2rem;line-height:1.3}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.page{height:100%}.page-layout{display:grid;gap:1.5rem 0;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;align-content:flex-start}.page-layout>*{grid-column:2/3}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem;cursor:pointer}#landing>section{justify-content:center;justify-items:center;align-items:center;text-align:center;padding:8vw 0}#landing h1{font-size:clamp(2rem,5vw,5rem)}#sign_in,#sign_up{justify-items:center;align-content:center}#sign_in section,#sign_up section{margin-top:-8rem;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#main_header{--text-color: 220, 220, 220;padding:1rem max(4vw,1.5rem)}#main_header a{color:rgba(var(--text-color), 1)}#pages_container{flex:1;overflow-y:auto}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.clip{-webkit-clip-path:circle(0);clip-path:circle(0)}#user{gap:.5rem;padding:0 1.5rem}#quick_actions_container{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill, minmax(4rem, 1fr))}.primary-action{display:flex;flex-direction:column;align-items:center;padding:.8rem 1rem;gap:.5rem;white-space:normal;font-size:.8rem;border-radius:.5rem;background-color:transparent;text-align:center}.primary-action .icon{fill:var(--accent-color)}#rupee_balance span:first-of-type{font-size:1.5rem}#rupee_balance span:last-of-type{font-size:.8rem}.wallet-action{display:flex;flex-direction:column;white-space:normal;font-size:.85rem;padding:.8rem .5rem;color:rgba(var(--text-color), 1);text-align:center;align-items:center;justify-content:center;background-color:rgba(var(--text-color), 0.03);flex:1}.wallet-action:nth-of-type(2){margin:0 .5rem}.wallet-action .icon{margin-bottom:.8rem;fill:var(--accent-color)}#saved_ids_list{display:grid;grid-template-columns:repeat(auto-fill, minmax(10rem, 1fr));gap:1rem;margin-top:1.5rem}.saved-id{display:grid;gap:1rem;grid-template-columns:auto 1fr;align-items:center;color:inherit;padding:.5rem 0}.saved-id__initials{display:flex;align-items:center;justify-content:center;height:2.5rem;width:2.5rem;color:rgba(var(--background-color), 1);background-color:var(--accent-color);border-radius:1rem;text-transform:uppercase;font-weight:700}.saved-id__title{font-size:.9rem;color:rgba(var(--text-color), 1)}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:1.5rem}#history{height:100%;align-content:flex-start;background-color:rgba(var(--foreground-color), 1);width:min(60ch,100%);justify-self:center;margin:0 auto;padding:1.5rem;overflow-y:auto;border-radius:.5rem;grid-template-columns:minmax(0, 1fr)}#payments_history_wrapper,#wallet_history_wrapper{padding-bottom:4rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;padding:.8rem;align-items:center;background-color:rgba(var(--text-color), 0.03);border-radius:.3rem}.transaction:not(:last-of-type){margin-bottom:.5rem}.transaction__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:.5rem}.transaction__icon .icon{fill:var(--accent-color)}.transaction__receiver{font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8)}.transaction__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{font-size:1rem;font-weight:700;grid-area:1/3/3/4}.transaction__amount.sent::before{content:"-"}.transaction__amount.received{color:var(--green)}.transaction__amount.received::before{content:"+"}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}#transaction_result{display:grid;gap:.5rem;height:max(40vh,24rem);align-items:center;justify-content:center;text-align:center;align-content:center}#transaction_result.success .icon--failed{display:none}#transaction_result.failed .icon--success{display:none}#transaction_result h3{text-align:center;width:100%}#transaction_result .icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:1rem;-webkit-animation:popup 1s;animation:popup 1s}#transaction_result .icon--success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}#transaction_result .icon--failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}#transaction_result sm-copy{font-size:.8rem}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}.cashier-request,.wallet-request,.payment-request{display:flex;gap:1rem;align-items:center;padding:.8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06)}.cashier-request:not(:last-of-type),.wallet-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:1rem}.cashier-request__time,.wallet-request__time,.payment-request__time{font-size:.8rem}.payment-request{display:grid;grid-template-columns:1fr auto}.payment-request__amount{font-weight:700;text-align:right}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}#user{gap:1rem;padding:1.5rem 8vmax;grid-template-columns:1fr 20rem;align-content:flex-start;align-items:flex-start}.saved-id{padding:1rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.03);grid-template-columns:minmax(0, 1fr)}#wallet_section{grid-area:1/2/3/3}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}button,.button:not([disabled]){transition:background-color .3s,filter .3s}button:hover,.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #256eff;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s;position:relative;display:flex;flex-direction:column}body::before{content:"";position:absolute;height:max(12rem,16vmax);background-color:#256eff;width:100%;left:0;top:0;z-index:-1}body[data-theme=dark]{--accent-color: #90b8f8;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1)}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:1rem}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details{padding:1rem 0}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}h3{font-size:1.2rem;line-height:1.3}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.page{height:100%}.page-layout{display:grid;gap:1.5rem 0;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;align-content:flex-start}.page-layout>*{grid-column:2/3}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem;cursor:pointer}#landing>section{justify-content:center;justify-items:center;align-items:center;text-align:center;padding:8vw 0}#landing h1{font-size:clamp(2rem,5vw,5rem)}#sign_in,#sign_up{justify-items:center;align-content:center}#sign_in section,#sign_up section{margin-top:-8rem;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#main_header{--text-color: 220, 220, 220;padding:1rem max(4vw,1.5rem)}#main_header a{color:rgba(var(--text-color), 1)}#pages_container{flex:1;overflow-y:auto}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.clip{-webkit-clip-path:circle(0);clip-path:circle(0)}#user{gap:.5rem;padding:0 1.5rem}#quick_actions_container{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill, minmax(4rem, 1fr))}.primary-action{display:flex;flex-direction:column;align-items:center;padding:.8rem;gap:.5rem;white-space:normal;font-size:.8rem;border-radius:.5rem;font-weight:400;background-color:transparent;text-align:center}.primary-action .icon{fill:var(--accent-color)}#rupee_balance span:first-of-type{font-size:1.5rem}#rupee_balance span:last-of-type{font-size:.8rem}.wallet-action{display:flex;white-space:normal;font-size:.85rem;padding:.8rem .6rem !important;color:rgba(var(--text-color), 1);text-align:center;align-items:center;justify-content:flex-start;background-color:rgba(var(--text-color), 0.03);flex:1}.wallet-action:nth-of-type(2){margin-left:.5rem}.wallet-action .icon{margin-right:.5rem;fill:var(--accent-color)}#saved_ids_list{display:grid;grid-template-columns:repeat(auto-fill, minmax(10rem, 1fr));gap:1rem;margin-top:1.5rem}.saved-id{display:grid;gap:1rem;grid-template-columns:auto 1fr;align-items:center;color:inherit;padding:.5rem 0}.saved-id__initials{display:flex;align-items:center;justify-content:center;height:2.5rem;width:2.5rem;color:rgba(var(--background-color), 1);background-color:var(--accent-color);border-radius:1rem;text-transform:uppercase;font-weight:700}.saved-id__title{font-size:.9rem;color:rgba(var(--text-color), 1)}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:1rem}#history{height:100%;align-content:flex-start;background-color:rgba(var(--foreground-color), 1);width:min(42rem,100%);justify-self:center;margin:0 auto;padding:1.5rem;overflow-y:auto;border-radius:.5rem;grid-template-columns:minmax(0, 1fr)}#payments_history_wrapper,#wallet_history_wrapper{padding-bottom:4rem}#payments_history{display:grid;gap:2rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;align-items:center;border-radius:.3rem}.transaction.sent .icon{fill:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount{color:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount::before{content:"-"}.transaction.received .icon{fill:var(--green)}.transaction.received .transaction__amount{color:var(--green)}.transaction.received .transaction__amount::before{content:"-"}.transaction__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:2rem}.transaction__receiver{font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8)}.transaction__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{font-size:1rem;font-weight:700;grid-area:1/3/3/4}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}#transaction_result{display:grid;gap:.5rem;height:max(40vh,24rem);align-items:center;justify-content:center;text-align:center;align-content:center}#transaction_result.success .icon--failed{display:none}#transaction_result.failed .icon--success{display:none}#transaction_result h3{text-align:center;width:100%}#transaction_result .icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:1rem;-webkit-animation:popup 1s;animation:popup 1s}#transaction_result .icon--success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}#transaction_result .icon--failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}#transaction_result sm-copy{font-size:.8rem}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}.cashier-request,.wallet-request,.payment-request{display:flex;gap:1rem;align-items:center;padding:.8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06)}.cashier-request:not(:last-of-type),.wallet-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:1rem}.cashier-request__time,.wallet-request__time,.payment-request__time{font-size:.8rem}.payment-request{display:grid;grid-template-columns:1fr auto}.payment-request__amount{font-weight:700;text-align:right}.wallet-request{align-items:initial;flex-direction:column}.wallet-request__details{font-weight:700}.wallet-request__status{font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;font-weight:500}.wallet-request__status .icon{margin-right:.3rem}.wallet-request__status.pending .icon{fill:var(--yellow)}.wallet-request__status.completed .icon{fill:var(--green)}.wallet-request__status.rejected .icon{fill:var(--danger-color)}.wallet-request__note{font-size:.8rem}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}.card{padding:1.5rem}#user{gap:1rem;padding:1.5rem 8vmax;grid-template-columns:1fr 22rem;align-content:flex-start;align-items:flex-start}.saved-id{padding:1rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.03);grid-template-columns:minmax(0, 1fr)}#wallet_section{grid-area:1/2/3/3}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}button,.button:not([disabled]){transition:background-color .3s,filter .3s}button:hover,.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index d28920e..5ba74ed 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -21,6 +21,7 @@ body {
   --background-color: 241, 243, 248;
   --danger-color: rgb(255, 75, 75);
   --green: #1cad59;
+  --yellow: rgb(220, 165, 0);
   scrollbar-width: thin;
   scrollbar-gutter: stable;
   color: rgba(var(--text-color), 1);
@@ -48,6 +49,7 @@ body[data-theme="dark"] {
   --background-color: 21, 22, 22;
   --danger-color: rgb(255, 106, 106);
   --green: #00e676;
+  --yellow: rgb(255, 213, 5);
   sm-popup::part(popup) {
     background-color: rgba(var(--foreground-color), 1);
   }
@@ -579,11 +581,12 @@ h3 {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0.8rem 1rem;
+  padding: 0.8rem;
   gap: 0.5rem;
   white-space: normal;
   font-size: 0.8rem;
   border-radius: 0.5rem;
+  font-weight: 400;
   // background-color: rgba(var(--text-color), 0.06);
   background-color: transparent;
   text-align: center;
@@ -601,21 +604,20 @@ h3 {
 }
 .wallet-action {
   display: flex;
-  flex-direction: column;
   white-space: normal;
   font-size: 0.85rem;
-  padding: 0.8rem 0.5rem;
+  padding: 0.8rem 0.6rem !important;
   color: rgba(var(--text-color), 1);
   text-align: center;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   background-color: rgba(var(--text-color), 0.03);
   flex: 1;
   &:nth-of-type(2) {
-    margin: 0 0.5rem;
+    margin-left: 0.5rem;
   }
   .icon {
-    margin-bottom: 0.8rem;
+    margin-right: 0.5rem;
     fill: var(--accent-color);
   }
 }
@@ -654,13 +656,13 @@ h3 {
 .card {
   background-color: rgba(var(--foreground-color), 1);
   border-radius: 0.5rem;
-  padding: 1.5rem;
+  padding: 1rem;
 }
 #history {
   height: 100%;
   align-content: flex-start;
   background-color: rgba(var(--foreground-color), 1);
-  width: min(60ch, 100%);
+  width: min(42rem, 100%);
   justify-self: center;
   margin: 0 auto;
   padding: 1.5rem;
@@ -672,15 +674,36 @@ h3 {
 #wallet_history_wrapper {
   padding-bottom: 4rem;
 }
+#payments_history {
+  display: grid;
+  gap: 2rem;
+}
 .transaction {
   grid-template-columns: auto 1fr auto;
   gap: 0.5rem 1rem;
-  padding: 0.8rem;
   align-items: center;
-  background-color: rgba(var(--text-color), 0.03);
   border-radius: 0.3rem;
-  &:not(:last-of-type) {
-    margin-bottom: 0.5rem;
+  &.sent {
+    .icon {
+      fill: rgba(var(--text-color), 0.8);
+    }
+    .transaction__amount {
+      color: rgba(var(--text-color), 0.8);
+      &::before {
+        content: "-";
+      }
+    }
+  }
+  &.received {
+    .icon {
+      fill: var(--green);
+    }
+    .transaction__amount {
+      color: var(--green);
+      &::before {
+        content: "-";
+      }
+    }
   }
   &__icon {
     display: flex;
@@ -690,10 +713,7 @@ h3 {
     width: 2.5rem;
     height: 2.5rem;
     background-color: rgba(var(--text-color), 0.03);
-    border-radius: 0.5rem;
-    .icon {
-      fill: var(--accent-color);
-    }
+    border-radius: 2rem;
   }
   &__receiver {
     font-size: 0.9rem;
@@ -708,17 +728,6 @@ h3 {
     font-size: 1rem;
     font-weight: 700;
     grid-area: 1/3/3/4;
-    &.sent {
-      &::before {
-        content: "-";
-      }
-    }
-    &.received {
-      color: var(--green);
-      &::before {
-        content: "+";
-      }
-    }
   }
 }
 .fab {
@@ -797,9 +806,6 @@ h3 {
   }
 }
 
-#settings {
-}
-
 .cashier-request,
 .wallet-request,
 .payment-request {
@@ -824,6 +830,40 @@ h3 {
     text-align: right;
   }
 }
+.wallet-request {
+  align-items: initial;
+  flex-direction: column;
+  &__details {
+    font-weight: 700;
+  }
+  &__status {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    font-weight: 500;
+    .icon {
+      margin-right: 0.3rem;
+    }
+    &.pending {
+      .icon {
+        fill: var(--yellow);
+      }
+    }
+    &.completed {
+      .icon {
+        fill: var(--green);
+      }
+    }
+    &.rejected {
+      .icon {
+        fill: var(--danger-color);
+      }
+    }
+  }
+  &__note {
+    font-size: 0.8rem;
+  }
+}
 @media screen and (min-width: 40rem) {
   sm-popup {
     --width: 24rem;
@@ -835,10 +875,13 @@ h3 {
     grid-column: 1/-1;
     padding: 1rem 1.5rem 0 1.5rem;
   }
+  .card {
+    padding: 1.5rem;
+  }
   #user {
     gap: 1rem;
     padding: 1.5rem 8vmax;
-    grid-template-columns: 1fr 20rem;
+    grid-template-columns: 1fr 22rem;
     align-content: flex-start;
     align-items: flex-start;
   }
diff --git a/index.html b/index.html
index 628b4b5..26f6d5d 100644
--- a/index.html
+++ b/index.html
@@ -158,7 +158,7 @@
                                 <path d="M0 0h24v24H0z" fill="none" />
                                 <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
                             </svg>
-                            Send
+                            Send rupee
                         </button>
                         <button class="primary-action" onclick="showTokenTransfer('request')">
                             <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
@@ -171,7 +171,31 @@
                                         d="M20,2H4.01c-1.1,0-2,0.9-2,2L2,22l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M12,6c1.1,0,2,0.9,2,2s-0.9,2-2,2 s-2-0.9-2-2S10.9,6,12,6z M16,14H8v-0.57c0-0.81,0.48-1.53,1.22-1.85C10.07,11.21,11.01,11,12,11c0.99,0,1.93,0.21,2.78,0.58 C15.52,11.9,16,12.62,16,13.43V14z" />
                                 </g>
                             </svg>
-                            Request
+                            Request rupee
+                        </button>
+                        <button class="primary-action" onclick="">
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                                height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                                <g>
+                                    <rect fill="none" height="24" width="24" />
+                                </g>
+                                <g>
+                                    <g>
+                                        <path d="M3,11h8V3H3V11z M5,5h4v4H5V5z" />
+                                        <path d="M3,21h8v-8H3V21z M5,15h4v4H5V15z" />
+                                        <path d="M13,3v8h8V3H13z M19,9h-4V5h4V9z" />
+                                        <rect height="2" width="2" x="19" y="19" />
+                                        <rect height="2" width="2" x="13" y="13" />
+                                        <rect height="2" width="2" x="15" y="15" />
+                                        <rect height="2" width="2" x="13" y="17" />
+                                        <rect height="2" width="2" x="15" y="19" />
+                                        <rect height="2" width="2" x="17" y="17" />
+                                        <rect height="2" width="2" x="17" y="13" />
+                                        <rect height="2" width="2" x="19" y="15" />
+                                    </g>
+                                </g>
+                            </svg>
+                            Scan FLO QR
                         </button>
                     </div>
                 </div>
@@ -196,42 +220,44 @@
                         <h5>Balance</h5>
                         <h1 class="h1" id="rupee_balance"></h1>
                     </div>
-                    <!-- <div class="grid gap-1">
-                         <sm-input id="request_cashier_amount" type="number" name="amount" placeholder="Amount"
-                                animate>
-                            </sm-input>
-                    </div> -->
-                    <div class="flex">
-                        <button class="wallet-action" onclick="userUI.requestTokenFromCashier()">
-                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-                                width="24px" fill="#000000">
-                                <path d="M0 0h24v24H0z" fill="none" />
-                                <path
-                                    d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
-                            </svg>
-                            Top-up wallet
-                        </button>
-                        <button class="wallet-action" onclick="userUI.withdrawCashFromCashier()">
-                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
-                                height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
-                                <g>
-                                    <rect fill="none" height="24" width="24" />
-                                </g>
-                                <g>
+                    <div class="grid gap-1">
+                        <sm-input id="request_cashier_amount" type="number" name="amount" placeholder="Amount" animate>
+                        </sm-input>
+                    </div>
+                    <div class="grid gap-0-5">
+                        <div class="flex">
+                            <button class="wallet-action" onclick="userUI.requestTokenFromCashier()">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                                    width="24px" fill="#000000">
+                                    <path d="M0 0h24v24H0z" fill="none" />
+                                    <path
+                                        d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
+                                </svg>
+                                Top-up wallet
+                            </button>
+                            <button class="wallet-action" onclick="userUI.withdrawCashFromCashier()">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                                    height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
                                     <g>
-                                        <rect height="7" width="3" x="4" y="10" />
-                                        <rect height="7" width="3" x="10.5" y="10" />
-                                        <rect height="3" width="20" x="2" y="19" />
-                                        <rect height="7" width="3" x="17" y="10" />
-                                        <polygon points="12,1 2,6 2,8 22,8 22,6" />
+                                        <rect fill="none" height="24" width="24" />
                                     </g>
-                                </g>
-                            </svg>
-                            Transfer to bank
-                        </button>
-                        <a href="#/history" class="wallet-action interact button">
-                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
-                                height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                                    <g>
+                                        <g>
+                                            <rect height="7" width="3" x="4" y="10" />
+                                            <rect height="7" width="3" x="10.5" y="10" />
+                                            <rect height="3" width="20" x="2" y="19" />
+                                            <rect height="7" width="3" x="17" y="10" />
+                                            <polygon points="12,1 2,6 2,8 22,8 22,6" />
+                                        </g>
+                                    </g>
+                                </svg>
+                                Transfer to bank
+                            </button>
+                        </div>
+                        <a href="#/history" class="button interact wallet-action">
+                            <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg"
+                                enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"
+                                fill="#000000">
                                 <path d="M0,0h24v24H0V0z" fill="none" />
                                 <g>
                                     <path
@@ -242,7 +268,7 @@
                                     <rect height="2" width="2" x="16" y="10" />
                                 </g>
                             </svg>
-                            See History
+                            See transactions history
                         </a>
                     </div>
                 </section>
@@ -411,12 +437,13 @@
     </template>
     <template id="wallet_request_template">
         <li class="wallet-request flex-wrap">
-            <div class="grid gap-0-5 flex-1">
-                <div class="wallet-request__requestor breakable"></div>
+            <div class="flex align-center space-between">
                 <time class="wallet-request__time"></time>
+                <div class="wallet-request__status flex align-center"></div>
+            </div>
+            <div class="grid gap-0-5 flex-1">
+                <div class="wallet-request__details"></div>
             </div>
-            <div class="wallet-request__mode"></div>
-            <div class="wallet-request__status"></div>
         </li>
     </template>
     <template id="payment_request_template">
@@ -447,7 +474,7 @@
                 getRef('logged_in_user_id').value = myFloID;
                 floGlobals.isSubAdmin = floGlobals.subAdmins.includes(myFloID)
                 tokenAPI.getBalance(myFloID).then(balance => {
-                    const formattedBalance = balance.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
+                    const formattedBalance = formatAmount(balance)
                     const [beforeDecimal, afterDecimal] = formattedBalance.split('.')
                     getRef('rupee_balance').innerHTML = `<span><b>${beforeDecimal}</b></span>.<span>${afterDecimal}</span>`
                 })
diff --git a/scripts/components.js b/scripts/components.js
index b0ba987..46a2278 100644
--- a/scripts/components.js
+++ b/scripts/components.js
@@ -1930,7 +1930,6 @@ smCopy.innerHTML = `
 }
 .copy{
     display: grid;
-    width: 100%;
     gap: 0.5rem;
     padding: var(--padding);
     align-items: center;
@@ -1951,8 +1950,15 @@ smCopy.innerHTML = `
     cursor: pointer;
     border: none;
     padding: 0.4rem;
-    background-color: inherit;
+    background-color: rgba(var(--text-color, (17,17,17)), 0.06);
     border-radius: var(--button-border-radius, 0.3rem);
+    transition: background-color 0.2s;
+    font-family: inherit;
+    color: inherit;
+    font-size: 0.7rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05rem;
 }
 .copy-button:active{
     background-color: var(--button-background-color);
@@ -1966,9 +1972,6 @@ smCopy.innerHTML = `
     .copy:hover .copy-button{
         opacity: 1;
     }
-    .copy-button{
-        opacity: 0.6;
-    }
     .copy-button:hover{
         background-color: var(--button-background-color);
     }
@@ -1978,7 +1981,7 @@ smCopy.innerHTML = `
     <p class="copy-content"></p>
     <button part="button" class="copy-button" title="copy">
         <slot name="copy-icon">
-            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"/></svg>
+        COPY
         </slot>
     </button>
 </section>
diff --git a/scripts/fn_ui.js b/scripts/fn_ui.js
index 18e4a1f..514df48 100644
--- a/scripts/fn_ui.js
+++ b/scripts/fn_ui.js
@@ -235,6 +235,23 @@ function getFloIdName(floID) {
     return floGlobals.savedIds[floID] ? floGlobals.savedIds[floID].title : floID;
 }
 
+function formatAmount(amount) {
+    return amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
+}
+
+function getStatusIcon(status) {
+    switch (status) {
+        case 'PENDING':
+            return '<i class="fas fa-clock"></i>';
+        case 'COMPLETED':
+            return '<i class="fas fa-check"></i>';
+        case 'REJECTED':
+            return '<i class="fas fa-times"></i>';
+        default:
+            break;
+    }
+}
+
 const render = {
     savedId(floID, details) {
         const { title } = details.hasOwnProperty('title') ? details : { title: details };
@@ -250,15 +267,15 @@ const render = {
         const clone = getRef('transaction_template').content.cloneNode(true).firstElementChild;
         clone.dataset.txid = txid;
         clone.querySelector('.transaction__time').textContent = getFormattedTime(time * 1000);
-        clone.querySelector('.transaction__amount').textContent = tokenAmount;
+        clone.querySelector('.transaction__amount').textContent = formatAmount(tokenAmount);
         if (sender === myFloID) {
-            clone.querySelector('.transaction__amount').classList.add('sent');
+            clone.classList.add('sent');
             clone.querySelector('.transaction__receiver').textContent = `Sent to ${getFloIdName(receiver) || 'Myself'}`;
-            clone.querySelector('.transaction__icon').innerHTML = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/></svg>`;
+            clone.querySelector('.transaction__icon').innerHTML = `<svg class="icon sent" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>`;
         } else if (receiver === myFloID) {
-            clone.querySelector('.transaction__amount').classList.add('received');
+            clone.classList.add('received');
             clone.querySelector('.transaction__receiver').textContent = `Received from ${getFloIdName(sender)}`;
-            clone.querySelector('.transaction__icon').innerHTML = `<svg class="icon xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 5.41L18.59 4 7 15.59V9H5v10h10v-2H8.41z"/></svg>`;
+            clone.querySelector('.transaction__icon').innerHTML = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>`;
         } else { //This should not happen unless API returns transaction that does not involve myFloID
             row.insertCell().textContent = tx.sender;
             row.insertCell().textContent = tx.receiver;
@@ -280,14 +297,45 @@ const render = {
         return clone;
     },
     walletRequestCard(details) {
-        const { time, receiverID, message: { mode }, note, tag, vectorClock } = details;
+        const { time, receiverID, message: { mode, amount }, note, tag, vectorClock } = details;
+        console.log(details);
         const clone = getRef('wallet_request_template').content.cloneNode(true).firstElementChild;
         clone.id = vectorClock;
-        clone.querySelector('.wallet-request__requestor').textContent = receiverID;
+        clone.querySelector('.wallet-request__details').textContent = `${mode === 'cash-to-token' ? 'Deposit' : 'Withdraw'} ${formatAmount(amount)}`;
         clone.querySelector('.wallet-request__time').textContent = getFormattedTime(time);
-        clone.querySelector('.wallet-request__mode').textContent = mode === 'cash-to-token' ? 'Deposit' : 'Withdraw';
-        let status = tag ? (tag + ":" + note) : (note || "PENDING");
-        clone.querySelector('.wallet-request__status').textContent = status;
+        let status = tag ? tag : (note ? 'REJECTED' : "PENDING");
+        let icon = '';
+        switch (status) {
+            case 'COMPLETED':
+                clone.children[1].append(
+                    createElement('div', {
+                        className: 'grid',
+                        innerHTML: `
+                        <h5 style="margin-bottom: 0.3rem;">Transaction ID</h5>
+                        <sm-copy class="wallet-request__note" value="${note}"></sm-copy>
+                        `
+                    })
+                );
+                icon = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>`
+                break;
+            case 'REJECTED':
+                clone.children[1].append(
+                    createElement('div', {
+                        className: 'wallet-request__note',
+                        innerHTML: note.split(':')[1]
+                    })
+                );
+                icon = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>`
+                break;
+            case 'PENDING':
+                icon = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><g><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M16.2,16.2L11,13V7h1.5v5.2l4.5,2.7L16.2,16.2z"/></g></g></g></svg>`
+                break;
+
+            default:
+                break;
+        }
+        clone.querySelector('.wallet-request__status').innerHTML = `${icon}${status}`;
+        clone.querySelector('.wallet-request__status').classList.add(status.toLowerCase());
         return clone;
     },
     paymentRequestCard(details) {

From c701c5d3b3e62f7bc776955924d48f576d12a5c0 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Thu, 14 Apr 2022 02:02:04 +0530
Subject: [PATCH 5/8] Feature update

-- Added option to edit and delete saved IDs
---
 css/main.css          |  74 ++++++++++++++-----
 css/main.min.css      |   2 +-
 css/main.scss         |  68 ++++++++++++-----
 index.html            | 167 +++++++++++++++++++++++++++---------------
 scripts/components.js |  33 ++++++---
 scripts/fn_ui.js      |  83 +++++++++++++--------
 scripts/std_ui.js     |  26 ++++++-
 7 files changed, 316 insertions(+), 137 deletions(-)

diff --git a/css/main.css b/css/main.css
index 7aff4a6..8309471 100644
--- a/css/main.css
+++ b/css/main.css
@@ -669,34 +669,53 @@ h3 {
 
 #saved_ids_list {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  grid-template-columns: minmax(0, 1fr);
   gap: 1rem;
   margin-top: 1.5rem;
 }
 
 .saved-id {
-  display: grid;
-  gap: 1rem;
   grid-template-columns: auto 1fr;
+  gap: 0 0.8rem;
+  border-radius: 0.3rem;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
   align-items: center;
-  color: inherit;
-  padding: 0.5rem 0;
+}
+.saved-id.highlight {
+  box-shadow: 0 0 0.1rem 0.1rem var(--accent-color) inset;
+}
+.saved-id .edit-saved {
+  padding: 0.3rem;
+  position: relative;
+  justify-self: center;
+}
+.saved-id .edit-saved .icon {
+  position: absolute;
+  height: 1.2rem;
+  width: 1.2rem;
+  right: 0;
+  bottom: 0;
+  border-radius: 0.5rem;
+  padding: 0.2rem;
+  background-color: rgba(var(--background-color), 1);
 }
 .saved-id__initials {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  width: 2.5rem;
-  color: rgba(var(--background-color), 1);
-  background-color: var(--accent-color);
-  border-radius: 1rem;
+  height: 2.4rem;
+  width: 2.4rem;
+  font-size: 1.2rem;
   text-transform: uppercase;
+  color: rgba(var(--background-color), 1);
   font-weight: 700;
-}
-.saved-id__title {
-  font-size: 0.9rem;
-  color: rgba(var(--text-color), 1);
+  line-height: 1;
+  background-color: var(--accent-color);
+  justify-self: flex-start;
+  border-radius: 2rem;
 }
 
 .card {
@@ -705,7 +724,10 @@ h3 {
   padding: 1rem;
 }
 
-#history {
+#cashier,
+#contact,
+#history,
+#settings {
   height: 100%;
   align-content: flex-start;
   background-color: rgba(var(--foreground-color), 1);
@@ -718,6 +740,15 @@ h3 {
   grid-template-columns: minmax(0, 1fr);
 }
 
+#contact {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+
+#contact__transactions {
+  overflow-y: auto;
+}
+
 #payments_history_wrapper,
 #wallet_history_wrapper {
   padding-bottom: 4rem;
@@ -741,7 +772,7 @@ h3 {
   color: rgba(var(--text-color), 0.8);
 }
 .transaction.sent .transaction__amount::before {
-  content: "-";
+  content: "- ";
 }
 .transaction.received .icon {
   fill: var(--green);
@@ -750,7 +781,7 @@ h3 {
   color: var(--green);
 }
 .transaction.received .transaction__amount::before {
-  content: "-";
+  content: "+ ";
 }
 .transaction__icon {
   display: flex;
@@ -950,17 +981,24 @@ h3 {
 
   #user {
     gap: 1rem;
-    padding: 1.5rem 8vmax;
+    padding: 0 8vmax;
     grid-template-columns: 1fr 22rem;
     align-content: flex-start;
     align-items: flex-start;
   }
 
+  #saved_ids_list {
+    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+  }
+
   .saved-id {
     padding: 1rem;
     border-radius: 0.5rem;
     background-color: rgba(var(--text-color), 0.03);
     grid-template-columns: minmax(0, 1fr);
+    justify-content: center;
+    text-align: center;
+    gap: 0.5rem;
   }
 
   #wallet_section {
diff --git a/css/main.min.css b/css/main.min.css
index ad0add2..a464dd9 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #256eff;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s;position:relative;display:flex;flex-direction:column}body::before{content:"";position:absolute;height:max(12rem,16vmax);background-color:#256eff;width:100%;left:0;top:0;z-index:-1}body[data-theme=dark]{--accent-color: #90b8f8;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1)}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:1rem}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details{padding:1rem 0}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}h3{font-size:1.2rem;line-height:1.3}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.page{height:100%}.page-layout{display:grid;gap:1.5rem 0;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;align-content:flex-start}.page-layout>*{grid-column:2/3}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem;cursor:pointer}#landing>section{justify-content:center;justify-items:center;align-items:center;text-align:center;padding:8vw 0}#landing h1{font-size:clamp(2rem,5vw,5rem)}#sign_in,#sign_up{justify-items:center;align-content:center}#sign_in section,#sign_up section{margin-top:-8rem;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#main_header{--text-color: 220, 220, 220;padding:1rem max(4vw,1.5rem)}#main_header a{color:rgba(var(--text-color), 1)}#pages_container{flex:1;overflow-y:auto}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.clip{-webkit-clip-path:circle(0);clip-path:circle(0)}#user{gap:.5rem;padding:0 1.5rem}#quick_actions_container{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill, minmax(4rem, 1fr))}.primary-action{display:flex;flex-direction:column;align-items:center;padding:.8rem;gap:.5rem;white-space:normal;font-size:.8rem;border-radius:.5rem;font-weight:400;background-color:transparent;text-align:center}.primary-action .icon{fill:var(--accent-color)}#rupee_balance span:first-of-type{font-size:1.5rem}#rupee_balance span:last-of-type{font-size:.8rem}.wallet-action{display:flex;white-space:normal;font-size:.85rem;padding:.8rem .6rem !important;color:rgba(var(--text-color), 1);text-align:center;align-items:center;justify-content:flex-start;background-color:rgba(var(--text-color), 0.03);flex:1}.wallet-action:nth-of-type(2){margin-left:.5rem}.wallet-action .icon{margin-right:.5rem;fill:var(--accent-color)}#saved_ids_list{display:grid;grid-template-columns:repeat(auto-fill, minmax(10rem, 1fr));gap:1rem;margin-top:1.5rem}.saved-id{display:grid;gap:1rem;grid-template-columns:auto 1fr;align-items:center;color:inherit;padding:.5rem 0}.saved-id__initials{display:flex;align-items:center;justify-content:center;height:2.5rem;width:2.5rem;color:rgba(var(--background-color), 1);background-color:var(--accent-color);border-radius:1rem;text-transform:uppercase;font-weight:700}.saved-id__title{font-size:.9rem;color:rgba(var(--text-color), 1)}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:1rem}#history{height:100%;align-content:flex-start;background-color:rgba(var(--foreground-color), 1);width:min(42rem,100%);justify-self:center;margin:0 auto;padding:1.5rem;overflow-y:auto;border-radius:.5rem;grid-template-columns:minmax(0, 1fr)}#payments_history_wrapper,#wallet_history_wrapper{padding-bottom:4rem}#payments_history{display:grid;gap:2rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;align-items:center;border-radius:.3rem}.transaction.sent .icon{fill:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount{color:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount::before{content:"-"}.transaction.received .icon{fill:var(--green)}.transaction.received .transaction__amount{color:var(--green)}.transaction.received .transaction__amount::before{content:"-"}.transaction__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:2rem}.transaction__receiver{font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8)}.transaction__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{font-size:1rem;font-weight:700;grid-area:1/3/3/4}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}#transaction_result{display:grid;gap:.5rem;height:max(40vh,24rem);align-items:center;justify-content:center;text-align:center;align-content:center}#transaction_result.success .icon--failed{display:none}#transaction_result.failed .icon--success{display:none}#transaction_result h3{text-align:center;width:100%}#transaction_result .icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:1rem;-webkit-animation:popup 1s;animation:popup 1s}#transaction_result .icon--success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}#transaction_result .icon--failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}#transaction_result sm-copy{font-size:.8rem}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}.cashier-request,.wallet-request,.payment-request{display:flex;gap:1rem;align-items:center;padding:.8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06)}.cashier-request:not(:last-of-type),.wallet-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:1rem}.cashier-request__time,.wallet-request__time,.payment-request__time{font-size:.8rem}.payment-request{display:grid;grid-template-columns:1fr auto}.payment-request__amount{font-weight:700;text-align:right}.wallet-request{align-items:initial;flex-direction:column}.wallet-request__details{font-weight:700}.wallet-request__status{font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;font-weight:500}.wallet-request__status .icon{margin-right:.3rem}.wallet-request__status.pending .icon{fill:var(--yellow)}.wallet-request__status.completed .icon{fill:var(--green)}.wallet-request__status.rejected .icon{fill:var(--danger-color)}.wallet-request__note{font-size:.8rem}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}.card{padding:1.5rem}#user{gap:1rem;padding:1.5rem 8vmax;grid-template-columns:1fr 22rem;align-content:flex-start;align-items:flex-start}.saved-id{padding:1rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.03);grid-template-columns:minmax(0, 1fr)}#wallet_section{grid-area:1/2/3/3}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}button,.button:not([disabled]){transition:background-color .3s,filter .3s}button:hover,.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #256eff;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s;position:relative;display:flex;flex-direction:column}body::before{content:"";position:absolute;height:max(12rem,16vmax);background-color:#256eff;width:100%;left:0;top:0;z-index:-1}body[data-theme=dark]{--accent-color: #90b8f8;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1)}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:1rem}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details{padding:1rem 0}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}h3{font-size:1.2rem;line-height:1.3}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.page{height:100%}.page-layout{display:grid;gap:1.5rem 0;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;align-content:flex-start}.page-layout>*{grid-column:2/3}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem;cursor:pointer}#landing>section{justify-content:center;justify-items:center;align-items:center;text-align:center;padding:8vw 0}#landing h1{font-size:clamp(2rem,5vw,5rem)}#sign_in,#sign_up{justify-items:center;align-content:center}#sign_in section,#sign_up section{margin-top:-8rem;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#main_header{--text-color: 220, 220, 220;padding:1rem max(4vw,1.5rem)}#main_header a{color:rgba(var(--text-color), 1)}#pages_container{flex:1;overflow-y:auto}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.clip{-webkit-clip-path:circle(0);clip-path:circle(0)}#user{gap:.5rem;padding:0 1.5rem}#quick_actions_container{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill, minmax(4rem, 1fr))}.primary-action{display:flex;flex-direction:column;align-items:center;padding:.8rem;gap:.5rem;white-space:normal;font-size:.8rem;border-radius:.5rem;font-weight:400;background-color:transparent;text-align:center}.primary-action .icon{fill:var(--accent-color)}#rupee_balance span:first-of-type{font-size:1.5rem}#rupee_balance span:last-of-type{font-size:.8rem}.wallet-action{display:flex;white-space:normal;font-size:.85rem;padding:.8rem .6rem !important;color:rgba(var(--text-color), 1);text-align:center;align-items:center;justify-content:flex-start;background-color:rgba(var(--text-color), 0.03);flex:1}.wallet-action:nth-of-type(2){margin-left:.5rem}.wallet-action .icon{margin-right:.5rem;fill:var(--accent-color)}#saved_ids_list{display:grid;grid-template-columns:minmax(0, 1fr);gap:1rem;margin-top:1.5rem}.saved-id{grid-template-columns:auto 1fr;gap:0 .8rem;border-radius:.3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center}.saved-id.highlight{box-shadow:0 0 .1rem .1rem var(--accent-color) inset}.saved-id .edit-saved{padding:.3rem;position:relative;justify-self:center}.saved-id .edit-saved .icon{position:absolute;height:1.2rem;width:1.2rem;right:0;bottom:0;border-radius:.5rem;padding:.2rem;background-color:rgba(var(--background-color), 1)}.saved-id__initials{display:flex;align-items:center;justify-content:center;height:2.4rem;width:2.4rem;font-size:1.2rem;text-transform:uppercase;color:rgba(var(--background-color), 1);font-weight:700;line-height:1;background-color:var(--accent-color);justify-self:flex-start;border-radius:2rem}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:1rem}#cashier,#contact,#history,#settings{height:100%;align-content:flex-start;background-color:rgba(var(--foreground-color), 1);width:min(42rem,100%);justify-self:center;margin:0 auto;padding:1.5rem;overflow-y:auto;border-radius:.5rem;grid-template-columns:minmax(0, 1fr)}#contact{display:grid;grid-template-rows:auto 1fr auto}#contact__transactions{overflow-y:auto}#payments_history_wrapper,#wallet_history_wrapper{padding-bottom:4rem}#payments_history{display:grid;gap:2rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;align-items:center;border-radius:.3rem}.transaction.sent .icon{fill:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount{color:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount::before{content:"- "}.transaction.received .icon{fill:var(--green)}.transaction.received .transaction__amount{color:var(--green)}.transaction.received .transaction__amount::before{content:"+ "}.transaction__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:2rem}.transaction__receiver{font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8)}.transaction__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{font-size:1rem;font-weight:700;grid-area:1/3/3/4}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}#transaction_result{display:grid;gap:.5rem;height:max(40vh,24rem);align-items:center;justify-content:center;text-align:center;align-content:center}#transaction_result.success .icon--failed{display:none}#transaction_result.failed .icon--success{display:none}#transaction_result h3{text-align:center;width:100%}#transaction_result .icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:1rem;-webkit-animation:popup 1s;animation:popup 1s}#transaction_result .icon--success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}#transaction_result .icon--failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}#transaction_result sm-copy{font-size:.8rem}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}.cashier-request,.wallet-request,.payment-request{display:flex;gap:1rem;align-items:center;padding:.8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06)}.cashier-request:not(:last-of-type),.wallet-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:1rem}.cashier-request__time,.wallet-request__time,.payment-request__time{font-size:.8rem}.payment-request{display:grid;grid-template-columns:1fr auto}.payment-request__amount{font-weight:700;text-align:right}.wallet-request{align-items:initial;flex-direction:column}.wallet-request__details{font-weight:700}.wallet-request__status{font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;font-weight:500}.wallet-request__status .icon{margin-right:.3rem}.wallet-request__status.pending .icon{fill:var(--yellow)}.wallet-request__status.completed .icon{fill:var(--green)}.wallet-request__status.rejected .icon{fill:var(--danger-color)}.wallet-request__note{font-size:.8rem}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}.card{padding:1.5rem}#user{gap:1rem;padding:0 8vmax;grid-template-columns:1fr 22rem;align-content:flex-start;align-items:flex-start}#saved_ids_list{grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr))}.saved-id{padding:1rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.03);grid-template-columns:minmax(0, 1fr);justify-content:center;text-align:center;gap:.5rem}#wallet_section{grid-area:1/2/3/3}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}button,.button:not([disabled]){transition:background-color .3s,filter .3s}button:hover,.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 5ba74ed..d946c79 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -624,32 +624,48 @@ h3 {
 
 #saved_ids_list {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  grid-template-columns: minmax(0, 1fr);
   gap: 1rem;
   margin-top: 1.5rem;
 }
 .saved-id {
-  display: grid;
-  gap: 1rem;
   grid-template-columns: auto 1fr;
+  gap: 0 0.8rem;
+  border-radius: 0.3rem;
+  user-select: none;
   align-items: center;
-  color: inherit;
-  padding: 0.5rem 0;
+  &.highlight {
+    box-shadow: 0 0 0.1rem 0.1rem var(--accent-color) inset;
+  }
+  .edit-saved {
+    padding: 0.3rem;
+    position: relative;
+    justify-self: center;
+    .icon {
+      position: absolute;
+      height: 1.2rem;
+      width: 1.2rem;
+      right: 0;
+      bottom: 0;
+      border-radius: 0.5rem;
+      padding: 0.2rem;
+      background-color: rgba(var(--background-color), 1);
+    }
+  }
   &__initials {
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 2.5rem;
-    width: 2.5rem;
-    color: rgba(var(--background-color), 1);
-    background-color: var(--accent-color);
-    border-radius: 1rem;
+    height: 2.4rem;
+    width: 2.4rem;
+    font-size: 1.2rem;
     text-transform: uppercase;
+    color: rgba(var(--background-color), 1);
     font-weight: 700;
-  }
-  &__title {
-    font-size: 0.9rem;
-    color: rgba(var(--text-color), 1);
+    line-height: 1;
+    background-color: var(--accent-color);
+    justify-self: flex-start;
+    border-radius: 2rem;
   }
 }
 
@@ -658,7 +674,10 @@ h3 {
   border-radius: 0.5rem;
   padding: 1rem;
 }
-#history {
+#cashier,
+#contact,
+#history,
+#settings {
   height: 100%;
   align-content: flex-start;
   background-color: rgba(var(--foreground-color), 1);
@@ -670,6 +689,13 @@ h3 {
   border-radius: 0.5rem;
   grid-template-columns: minmax(0, 1fr);
 }
+#contact {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+#contact__transactions {
+  overflow-y: auto;
+}
 #payments_history_wrapper,
 #wallet_history_wrapper {
   padding-bottom: 4rem;
@@ -690,7 +716,7 @@ h3 {
     .transaction__amount {
       color: rgba(var(--text-color), 0.8);
       &::before {
-        content: "-";
+        content: "- ";
       }
     }
   }
@@ -701,7 +727,7 @@ h3 {
     .transaction__amount {
       color: var(--green);
       &::before {
-        content: "-";
+        content: "+ ";
       }
     }
   }
@@ -880,16 +906,22 @@ h3 {
   }
   #user {
     gap: 1rem;
-    padding: 1.5rem 8vmax;
+    padding: 0 8vmax;
     grid-template-columns: 1fr 22rem;
     align-content: flex-start;
     align-items: flex-start;
   }
+  #saved_ids_list {
+    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+  }
   .saved-id {
     padding: 1rem;
     border-radius: 0.5rem;
     background-color: rgba(var(--text-color), 0.03);
     grid-template-columns: minmax(0, 1fr);
+    justify-content: center;
+    text-align: center;
+    gap: 0.5rem;
   }
   #wallet_section {
     grid-area: 1/2/3/3;
diff --git a/index.html b/index.html
index 26f6d5d..5c412bb 100644
--- a/index.html
+++ b/index.html
@@ -147,57 +147,52 @@
         </div>
         <section id="home" class="page hide">
             <div id="user" class="hide grid user-element">
-                <div class="card grid gap-1-5">
-                    <div class="flex align-center space-between">
-                        <h4>Quick actions </h4>
-                    </div>
-                    <div id="quick_actions_container">
-                        <button class="primary-action" onclick="showTokenTransfer('send')">
-                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-                                width="24px" fill="#000000">
-                                <path d="M0 0h24v24H0z" fill="none" />
-                                <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
-                            </svg>
-                            Send rupee
-                        </button>
-                        <button class="primary-action" onclick="showTokenTransfer('request')">
-                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
-                                height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                <div id="quick_actions_container" class="card">
+                    <button class="primary-action" onclick="showTokenTransfer('send')">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                            width="24px" fill="#000000">
+                            <path d="M0 0h24v24H0z" fill="none" />
+                            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
+                        </svg>
+                        Send rupee
+                    </button>
+                    <button class="primary-action" onclick="showTokenTransfer('request')">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                            height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                            <g>
+                                <rect fill="none" height="24" width="24" />
+                            </g>
+                            <g>
+                                <path
+                                    d="M20,2H4.01c-1.1,0-2,0.9-2,2L2,22l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M12,6c1.1,0,2,0.9,2,2s-0.9,2-2,2 s-2-0.9-2-2S10.9,6,12,6z M16,14H8v-0.57c0-0.81,0.48-1.53,1.22-1.85C10.07,11.21,11.01,11,12,11c0.99,0,1.93,0.21,2.78,0.58 C15.52,11.9,16,12.62,16,13.43V14z" />
+                            </g>
+                        </svg>
+                        Request rupee
+                    </button>
+                    <button class="primary-action" onclick="">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                            height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                            <g>
+                                <rect fill="none" height="24" width="24" />
+                            </g>
+                            <g>
                                 <g>
-                                    <rect fill="none" height="24" width="24" />
+                                    <path d="M3,11h8V3H3V11z M5,5h4v4H5V5z" />
+                                    <path d="M3,21h8v-8H3V21z M5,15h4v4H5V15z" />
+                                    <path d="M13,3v8h8V3H13z M19,9h-4V5h4V9z" />
+                                    <rect height="2" width="2" x="19" y="19" />
+                                    <rect height="2" width="2" x="13" y="13" />
+                                    <rect height="2" width="2" x="15" y="15" />
+                                    <rect height="2" width="2" x="13" y="17" />
+                                    <rect height="2" width="2" x="15" y="19" />
+                                    <rect height="2" width="2" x="17" y="17" />
+                                    <rect height="2" width="2" x="17" y="13" />
+                                    <rect height="2" width="2" x="19" y="15" />
                                 </g>
-                                <g>
-                                    <path
-                                        d="M20,2H4.01c-1.1,0-2,0.9-2,2L2,22l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M12,6c1.1,0,2,0.9,2,2s-0.9,2-2,2 s-2-0.9-2-2S10.9,6,12,6z M16,14H8v-0.57c0-0.81,0.48-1.53,1.22-1.85C10.07,11.21,11.01,11,12,11c0.99,0,1.93,0.21,2.78,0.58 C15.52,11.9,16,12.62,16,13.43V14z" />
-                                </g>
-                            </svg>
-                            Request rupee
-                        </button>
-                        <button class="primary-action" onclick="">
-                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
-                                height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
-                                <g>
-                                    <rect fill="none" height="24" width="24" />
-                                </g>
-                                <g>
-                                    <g>
-                                        <path d="M3,11h8V3H3V11z M5,5h4v4H5V5z" />
-                                        <path d="M3,21h8v-8H3V21z M5,15h4v4H5V15z" />
-                                        <path d="M13,3v8h8V3H13z M19,9h-4V5h4V9z" />
-                                        <rect height="2" width="2" x="19" y="19" />
-                                        <rect height="2" width="2" x="13" y="13" />
-                                        <rect height="2" width="2" x="15" y="15" />
-                                        <rect height="2" width="2" x="13" y="17" />
-                                        <rect height="2" width="2" x="15" y="19" />
-                                        <rect height="2" width="2" x="17" y="17" />
-                                        <rect height="2" width="2" x="17" y="13" />
-                                        <rect height="2" width="2" x="19" y="15" />
-                                    </g>
-                                </g>
-                            </svg>
-                            Scan FLO QR
-                        </button>
-                    </div>
+                            </g>
+                        </svg>
+                        Scan FLO QR
+                    </button>
                 </div>
                 <section id="wallet_section" class="card grid gap-1-5">
                     <div class="flex align-center space-between">
@@ -220,10 +215,10 @@
                         <h5>Balance</h5>
                         <h1 class="h1" id="rupee_balance"></h1>
                     </div>
-                    <div class="grid gap-1">
+                    <!-- <div class="grid gap-1">
                         <sm-input id="request_cashier_amount" type="number" name="amount" placeholder="Amount" animate>
                         </sm-input>
-                    </div>
+                    </div> -->
                     <div class="grid gap-0-5">
                         <div class="flex">
                             <button class="wallet-action" onclick="userUI.requestTokenFromCashier()">
@@ -320,6 +315,23 @@
                     <h4>No transactions</h4>
                 </div>
         </section>
+        <section id="contact" class="page hide">
+            <div class="flex align-center">
+                <a href="#/home" class="button icon-only margin-right-0-5">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                        fill="#000000">
+                        <path d="M0 0h24v24H0z" fill="none" />
+                        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
+                    </svg>
+                </a>
+                <h4 id="contact__title"></h4>
+            </div>
+            <div id="contact__transactions"></div>
+            <div class="flex">
+                <button class="button flex-1">Pay</button>
+                <button class="button flex-1">Request</button>
+            </div>
+        </section>
         <section id="activity" class="page page-layout hide">
             <h4>Activity</h4>
             <ul id="user-money-requests" class="observe-empty-state"></ul>
@@ -327,7 +339,7 @@
                 <h4>No requests</h4>
             </div>
         </section>
-        <section id="settings" class="page page-layout hide">
+        <section id="settings" class="page hide">
             <h4>Settings</h4>
             <section class="grid gap-1">
                 <div class="grid">
@@ -366,9 +378,43 @@
                 autofocus>
             </sm-input>
             <sm-input id="flo_id_title_to_save" placeholder="Title" animate required></sm-input>
-            <button class="button button--primary cta" onclick="userUI.saveId()" type="submit">Save</button>
+            <button class="button button--primary cta" onclick="saveId()" type="submit">Save</button>
         </sm-form>
     </sm-popup>
+    <sm-popup id="edit_saved_popup">
+        <header slot="header" class="popup__header">
+            <div class="flex align-center">
+                <button class="popup__header__close" onclick="hidePopup()">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                        fill="#000000">
+                        <path d="M0 0h24v24H0V0z" fill="none" />
+                        <path
+                            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                    </svg>
+                </button>
+                <h3>Edit</h3>
+            </div>
+        </header>
+        <section class="grid gap-1-5">
+            <div class="grid gap-0-5">
+                <h5>FLO ID</h5>
+                <sm-copy id="edit_saved_id"></sm-copy>
+            </div>
+            <sm-form>
+                <sm-input id="newAddrLabel" placeholder="Name" autofocus animate required></sm-input>
+                <div class="flex align-center space-between">
+                    <button class="button icon-only" title="Delete this FLO ID?" onclick="deleteSaved()">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                            width="24px" fill="#000000">
+                            <path d="M0 0h24v24H0z" fill="none" />
+                            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
+                        </svg>
+                    </button>
+                    <button class="button button--primary cta" type="submit" onclick="saveChanges()">Save</button>
+                </div>
+            </sm-form>
+        </section>
+    </sm-popup>
     <sm-popup id="token_transfer_popup">
         <header slot="header" class="popup__header">
             <button class="popup__header__close justify-self-start" onclick="hidePopup()">
@@ -409,12 +455,17 @@
 
     <!-- templates -->
     <template id="saved_id_template">
-        <li>
-            <a class="saved-id interact" href="">
+        <li class="saved-id grid interact" tabindex="0">
+            <button class="interact edit-saved" title="Edit saved ID">
                 <div class="saved-id__initials"></div>
-                <span class="saved-id__title"></span>
-                <!-- <sm-copy class="saved-id__flo-id"></sm-copy> -->
-            </a>
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                    fill="#000000">
+                    <path d="M0 0h24v24H0z" fill="none" />
+                    <path
+                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
+                </svg>
+            </button>
+            <h4 class="saved-id__title"></h4>
         </li>
     </template>
     <template id="transaction_template">
diff --git a/scripts/components.js b/scripts/components.js
index 46a2278..9476c28 100644
--- a/scripts/components.js
+++ b/scripts/components.js
@@ -2368,14 +2368,19 @@ customElements.define('strip-select', class extends HTMLElement {
         this.slottedOptions = undefined;
         this._value = undefined;
         this.scrollDistance = 0;
+        this.assignedElements = [];
 
         this.scrollLeft = this.scrollLeft.bind(this);
         this.scrollRight = this.scrollRight.bind(this);
         this.fireEvent = this.fireEvent.bind(this);
+        this.setSelectedOption = this.setSelectedOption.bind(this);
     }
     get value() {
         return this._value;
     }
+    set value(val) {
+        this.setSelectedOption(val);
+    }
     scrollLeft() {
         this.stripSelect.scrollBy({
             left: -this.scrollDistance,
@@ -2389,6 +2394,19 @@ customElements.define('strip-select', class extends HTMLElement {
             behavior: 'smooth'
         });
     }
+    setSelectedOption(value) {
+        if (this._value === value) return
+        this._value = value;
+        this.assignedElements.forEach(elem => {
+            if (elem.value === value) {
+                elem.setAttribute('active', '');
+                elem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+            }
+            else
+                elem.removeAttribute('active')
+        });
+    }
+
     fireEvent() {
         this.dispatchEvent(
             new CustomEvent("change", {
@@ -2409,17 +2427,17 @@ customElements.define('strip-select', class extends HTMLElement {
         const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left');
         const navButtonRight = this.shadowRoot.querySelector('.nav-button--right');
         slot.addEventListener('slotchange', e => {
-            const assignedElements = slot.assignedElements();
-            assignedElements.forEach(elem => {
+            this.assignedElements = slot.assignedElements();
+            this.assignedElements.forEach(elem => {
                 if (elem.hasAttribute('selected')) {
                     elem.setAttribute('active', '');
                     this._value = elem.value;
                 }
             });
             if (!this.hasAttribute('multiline')) {
-                if (assignedElements.length > 0) {
-                    firstOptionObserver.observe(slot.assignedElements()[0]);
-                    lastOptionObserver.observe(slot.assignedElements()[slot.assignedElements().length - 1]);
+                if (this.assignedElements.length > 0) {
+                    firstOptionObserver.observe(this.assignedElements[0]);
+                    lastOptionObserver.observe(this.assignedElements[this.assignedElements.length - 1]);
                 }
                 else {
                     navButtonLeft.classList.add('hide');
@@ -2446,10 +2464,7 @@ customElements.define('strip-select', class extends HTMLElement {
         resObs.observe(this);
         this.stripSelect.addEventListener('option-clicked', e => {
             if (this._value !== e.target.value) {
-                this._value = e.target.value;
-                slot.assignedElements().forEach(elem => elem.removeAttribute('active'));
-                e.target.setAttribute('active', '');
-                e.target.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+                this.setSelectedOption(e.target.value);
                 this.fireEvent();
             }
         });
diff --git a/scripts/fn_ui.js b/scripts/fn_ui.js
index 514df48..32bb412 100644
--- a/scripts/fn_ui.js
+++ b/scripts/fn_ui.js
@@ -97,8 +97,7 @@ userUI.renderSavedIds = async function () {
     if (savedIds.length && await compactIDB.readData('savedIds', 'lastSyncTime') !== savedIds[0].time) {
         await compactIDB.clearData('savedIds');
         const dataToDecrypt = floCloudAPI.util.decodeMessage(savedIds[0].message)
-        const data = JSON.parse(floCrypto.decryptData(dataToDecrypt, myPrivKey));
-        console.log(data)
+        const data = JSON.parse(Crypto.AES.decrypt(dataToDecrypt, myPrivKey));
         for (let key in data) {
             floGlobals.savedIds[key] = data[key];
             compactIDB.addData('savedIds', data[key], key);
@@ -111,29 +110,12 @@ userUI.renderSavedIds = async function () {
                 floGlobals.savedIds[key] = idsToRender[key];
         }
     }
-    console.log(floGlobals.savedIds)
     for (const key in floGlobals.savedIds) {
         frag.append(render.savedId(key, floGlobals.savedIds[key]));
     }
     getRef('saved_ids_list').append(frag);
 }
 
-userUI.saveId = async function () {
-    const floID = getRef('flo_id_to_save').value.trim();
-    const title = getRef('flo_id_title_to_save').value.trim();
-    const dataToSend = floCrypto.encryptData(JSON.stringify({ ...floGlobals.savedIds, [floID]: { title } }), myPubKey)
-    floCloudAPI.sendApplicationData(dataToSend, 'savedIds', { receiverID: myFloID }).then(result => {
-        console.log(result);
-        floGlobals.savedIds[floID] = { title }
-        notify(`Saved ${floID}`, 'success');
-        getRef('saved_ids_list').append(render.savedId(floID, { title }));
-        hidePopup();
-    }).catch(error => {
-        console.error(error);
-        notify(error, 'error');
-    })
-}
-
 userUI.payRequest = function (reqID) {
     let request = User.moneyRequests[reqID];
     getConfirmation('Pay?', { message: `Do you want to pay ${request.message.amount} to ${request.senderID}?` }).then(confirmation => {
@@ -231,7 +213,7 @@ function completeTokenToCashRequest(request) {
     })
 }
 
-function getFloIdName(floID) {
+function getFloIdTitle(floID) {
     return floGlobals.savedIds[floID] ? floGlobals.savedIds[floID].title : floID;
 }
 
@@ -257,7 +239,6 @@ const render = {
         const { title } = details.hasOwnProperty('title') ? details : { title: details };
         const clone = getRef('saved_id_template').content.cloneNode(true).firstElementChild;
         clone.dataset.floId = floID;
-        clone.querySelector('a').href = `#/saved&id=${floID}`;
         clone.querySelector('.saved-id__initials').textContent = title.charAt(0);
         clone.querySelector('.saved-id__title').textContent = title;
         return clone;
@@ -270,11 +251,11 @@ const render = {
         clone.querySelector('.transaction__amount').textContent = formatAmount(tokenAmount);
         if (sender === myFloID) {
             clone.classList.add('sent');
-            clone.querySelector('.transaction__receiver').textContent = `Sent to ${getFloIdName(receiver) || 'Myself'}`;
+            clone.querySelector('.transaction__receiver').textContent = `Sent to ${getFloIdTitle(receiver) || 'Myself'}`;
             clone.querySelector('.transaction__icon').innerHTML = `<svg class="icon sent" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>`;
         } else if (receiver === myFloID) {
             clone.classList.add('received');
-            clone.querySelector('.transaction__receiver').textContent = `Received from ${getFloIdName(sender)}`;
+            clone.querySelector('.transaction__receiver').textContent = `Received from ${getFloIdTitle(sender)}`;
             clone.querySelector('.transaction__icon').innerHTML = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>`;
         } else { //This should not happen unless API returns transaction that does not involve myFloID
             row.insertCell().textContent = tx.sender;
@@ -297,8 +278,7 @@ const render = {
         return clone;
     },
     walletRequestCard(details) {
-        const { time, receiverID, message: { mode, amount }, note, tag, vectorClock } = details;
-        console.log(details);
+        const { time, message: { mode, amount }, note, tag, vectorClock } = details;
         const clone = getRef('wallet_request_template').content.cloneNode(true).firstElementChild;
         clone.id = vectorClock;
         clone.querySelector('.wallet-request__details').textContent = `${mode === 'cash-to-token' ? 'Deposit' : 'Withdraw'} ${formatAmount(amount)}`;
@@ -309,11 +289,8 @@ const render = {
             case 'COMPLETED':
                 clone.children[1].append(
                     createElement('div', {
-                        className: 'grid',
-                        innerHTML: `
-                        <h5 style="margin-bottom: 0.3rem;">Transaction ID</h5>
-                        <sm-copy class="wallet-request__note" value="${note}"></sm-copy>
-                        `
+                        className: 'flex flex-wrap align-center wallet-request__note',
+                        innerHTML: `<b>Transaction ID:</b><sm-copy value="${note}"></sm-copy>`
                     })
                 );
                 icon = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>`
@@ -375,6 +352,52 @@ function showTokenTransfer(type) {
     showPopup('token_transfer_popup');
 }
 
+saveId = async function () {
+    const floID = getRef('flo_id_to_save').value.trim();
+    const title = getRef('flo_id_title_to_save').value.trim();
+    floGlobals.savedIds[floID] = { title }
+    getRef('saved_ids_list').append(render.savedId(floID, { title }));
+    syncSavedIds().then(() => {
+        notify(`Saved ${floID}`, 'success');
+        hidePopup();
+    }).catch(error => {
+        notify(error, 'error');
+    })
+}
+function syncSavedIds() {
+    const dataToSend = Crypto.AES.encrypt(JSON.stringify(floGlobals.savedIds), myPrivKey);
+    return floCloudAPI.sendApplicationData(dataToSend, 'savedIds', { receiverID: myFloID });
+}
+delegate(getRef('saved_ids_list'), 'click', '.saved-id', e => {
+    if (e.target.closest('.edit-saved')) {
+        const target = e.target.closest('.saved-id');
+        getRef('edit_saved_id').setAttribute('value', target.dataset.floId);
+        getRef('newAddrLabel').value = getFloIdTitle(target.dataset.floId);
+        showPopup('edit_saved_popup');
+    } else {
+        const target = e.target.closest('.saved-id');
+        window.location.hash = `#/contact?floId=${target.dataset.floId}`;
+    }
+});
+function deleteSaved() {
+    getConfirmation('Do you want delete this FLO ID?', {
+        confirmText: 'Delete',
+    }).then(res => {
+        if (res) {
+            const toDelete = getRef('saved_ids_list').querySelector(`.saved-id[data-flo-id="${getRef('edit_saved_id').value}"]`);
+            if (toDelete)
+                toDelete.remove();
+            delete floGlobals.savedIds[getRef('edit_saved_id').value];
+            hidePopup();
+            syncSavedIds().then(() => {
+                notify(`Deleted saved ID`, 'success');
+            }).catch(error => {
+                notify(error, 'error');
+            });
+        }
+    });
+}
+
 function executeUserAction() {
     const floID = getRef('tt_flo_id').value.trim(),
         amount = parseFloat(getRef('tt_amount').value),
diff --git a/scripts/std_ui.js b/scripts/std_ui.js
index 5996a97..96afcc7 100644
--- a/scripts/std_ui.js
+++ b/scripts/std_ui.js
@@ -186,7 +186,7 @@ function getFormattedTime(time, format) {
                 return `${month} ${date}, ${year}`;
                 break;
             default:
-                return `${month} ${date} ${year}, ${finalHours}`;
+                return `${month} ${date}, ${year} at ${finalHours}`;
         }
     } catch (e) {
         console.error(e);
@@ -307,6 +307,9 @@ async function showPage(targetPage, options = {}) {
             getRef('generated_private_key').value = privKey
             targetPage = 'sign_up'
             break;
+        case 'contact':
+            getRef('contact__title').textContent = getFloIdTitle(params.floId)
+            break;
         case 'history':
             let transactionsList = []
             if (!params.hasOwnProperty('type')) {
@@ -351,12 +354,13 @@ async function showPage(targetPage, options = {}) {
                         walletHistoryLoader.update(transactionsList)
                     } else {
                         walletHistoryLoader = new LazyLoader('#wallet_history', transactionsList, render.walletRequestCard);
-                        // to-do: set value of history type selector
                     }
                     walletHistoryLoader.init()
+                    break;
                 default:
                     break;
             }
+            getRef('history_type_selector').value = params.type
             break;
         default:
             break;
@@ -365,7 +369,23 @@ async function showPage(targetPage, options = {}) {
     if (pagesData.lastPage !== pageId) {
         document.querySelectorAll('.page').forEach(page => page.classList.add('hide'))
         getRef(pageId).classList.remove('hide')
-        getRef(pageId).animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, fill: 'forwards', easing: 'ease' })
+        getRef('pages_container').style.overflowY = "hidden";
+        getRef(pageId).animate([
+            {
+                opacity: 0,
+                transform: 'translateY(1rem)'
+            },
+            {
+                opacity: 1,
+                transform: 'translateY(0)'
+            },
+        ],
+            {
+                duration: 300,
+                easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
+            }).onfinish = () => {
+                getRef('pages_container').style.overflowY = "";
+            }
         pagesData.lastPage = pageId
     }
     if (params)

From 04a7ea76f34f708d28ff93b92720c9221e53aa20 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Fri, 15 Apr 2022 01:32:52 +0530
Subject: [PATCH 6/8] Feature update and bug fixes

---
 css/main.css          | 234 ++++++++++++++++++++-----
 css/main.min.css      |   2 +-
 css/main.scss         | 233 ++++++++++++++++++++-----
 index.html            | 384 +++++++++++++++++++++++++-----------------
 scripts/components.js |   2 +-
 scripts/fn_ui.js      |  80 +++++----
 scripts/std_ui.js     | 251 +++++++++++++++++++++------
 7 files changed, 855 insertions(+), 331 deletions(-)

diff --git a/css/main.css b/css/main.css
index 8309471..c3a8a0a 100644
--- a/css/main.css
+++ b/css/main.css
@@ -31,16 +31,6 @@ body {
   display: flex;
   flex-direction: column;
 }
-body::before {
-  content: "";
-  position: absolute;
-  height: max(12rem, 16vmax);
-  background-color: #256eff;
-  width: 100%;
-  left: 0;
-  top: 0;
-  z-index: -1;
-}
 
 body[data-theme=dark] {
   --accent-color: #90b8f8;
@@ -532,6 +522,18 @@ h3 {
   cursor: pointer;
 }
 
+#secondary_pages {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+#secondary_pages header {
+  padding: 1.5rem;
+}
+#secondary_pages .inner-page {
+  height: 100%;
+}
+
 #landing > section {
   justify-content: center;
   justify-items: center;
@@ -573,16 +575,80 @@ h3 {
 }
 
 #main_header {
-  --text-color: 220, 220, 220;
-  padding: 1rem max(4vw, 1.5rem);
-}
-#main_header a {
-  color: rgba(var(--text-color), 1);
+  padding: 1.5rem;
 }
 
-#pages_container {
+#main_card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(var(--foreground-color), 1);
+  transition: background-color 0.3s;
+}
+
+#main_navbar {
+  display: flex;
+  background: rgba(var(--text-color), 0.03);
+}
+#main_navbar.hide-away {
+  position: absolute;
+}
+#main_navbar ul {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+#main_navbar ul li {
+  width: 100%;
+}
+
+.nav-item {
+  position: relative;
+  display: flex;
+  flex: 1;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 0.3rem;
+  color: var(--text-color);
+  font-size: 0.7rem;
+  border-radius: 0.3rem;
+}
+.nav-item .icon {
+  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.nav-item__title {
+  margin-top: 0.3rem;
+  transition: opacity 0.2s, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.nav-item--active {
+  color: var(--accent-color);
+}
+.nav-item--active .icon {
+  fill: var(--accent-color);
+  transform: translateY(50%);
+}
+.nav-item--active .nav-item__title {
+  transform: translateY(100%);
+  opacity: 0;
+}
+.nav-item__indicator {
+  position: absolute;
+  bottom: 0;
+  width: 2rem;
+  height: 0.3rem;
+  background: var(--accent-color);
+  border-radius: 1rem 1rem 0 0;
+  z-index: 1;
+}
+
+.inner-page {
+  padding: 0 1.5rem;
   flex: 1;
   overflow-y: auto;
+  align-content: start;
 }
 
 .password-field label {
@@ -614,7 +680,6 @@ h3 {
 
 #user {
   gap: 0.5rem;
-  padding: 0 1.5rem;
 }
 
 #quick_actions_container {
@@ -633,7 +698,7 @@ h3 {
   font-size: 0.8rem;
   border-radius: 0.5rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: rgba(var(--text-color), 0.03);
   text-align: center;
 }
 .primary-action .icon {
@@ -717,6 +782,10 @@ h3 {
   justify-self: flex-start;
   border-radius: 2rem;
 }
+.saved-id__title {
+  font-size: 0.9rem;
+  font-weight: 500;
+}
 
 .card {
   background-color: rgba(var(--foreground-color), 1);
@@ -724,34 +793,57 @@ h3 {
   padding: 1rem;
 }
 
-#cashier,
-#contact,
-#history,
-#settings {
-  height: 100%;
-  align-content: flex-start;
-  background-color: rgba(var(--foreground-color), 1);
-  width: min(42rem, 100%);
-  justify-self: center;
-  margin: 0 auto;
-  padding: 1.5rem;
-  overflow-y: auto;
-  border-radius: 0.5rem;
-  grid-template-columns: minmax(0, 1fr);
-}
-
 #contact {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  height: 100%;
+}
+#contact > * {
+  padding: 1rem;
 }
 
 #contact__transactions {
+  display: grid;
+  gap: 0.5rem;
   overflow-y: auto;
+  flex: 1;
+  padding: 0 max(1rem, 8vw);
+  align-items: flex-start;
+}
+
+.transaction-message {
+  background-color: rgba(var(--text-color), 0.06);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  justify-self: flex-start;
+  border-radius: 0 1rem 1rem 1rem;
+  gap: 0.5rem;
+}
+.transaction-message.received {
+  background-color: var(--accent-color);
+  color: rgba(var(--background-color), 1);
+}
+.transaction-message.received + .transaction-message.received {
+  border-radius: 1rem;
+}
+.transaction-message.sent {
+  margin-left: auto;
+  justify-self: flex-end;
+  border-radius: 1rem 1rem 0 1rem;
+  text-align: right;
+}
+.transaction-message__amount {
+  font-size: 1.2rem;
+}
+.transaction-message__time {
+  opacity: 0.8;
+  font-size: 0.8rem;
 }
 
-#payments_history_wrapper,
 #wallet_history_wrapper {
-  padding-bottom: 4rem;
+  margin-top: 1.5rem;
+  padding-bottom: 3rem;
 }
 
 #payments_history {
@@ -961,6 +1053,13 @@ h3 {
   font-size: 0.8rem;
 }
 
+@media screen and (max-width: 40rem) {
+  #main_navbar.hide-away {
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}
 @media screen and (min-width: 40rem) {
   sm-popup {
     --width: 24rem;
@@ -975,15 +1074,60 @@ h3 {
     padding: 1rem 1.5rem 0 1.5rem;
   }
 
+  body {
+    align-items: center;
+    justify-content: center;
+  }
+
+  #main_card {
+    position: relative;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 1rem 3rem rgba(0, 0, 0, 0.2);
+  }
+  #main_card:not(.nav-hidden) {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas: "nav header" "nav .";
+  }
+
+  #main_header {
+    grid-area: header;
+  }
+
+  #main_navbar {
+    grid-area: nav;
+    border-top: none;
+    flex-direction: column;
+    height: 100%;
+  }
+  #main_navbar ul {
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.3rem;
+  }
+  #main_navbar ul li:last-of-type {
+    margin-top: auto;
+  }
+
+  .nav-item {
+    aspect-ratio: 1/1;
+  }
+  .nav-item__indicator {
+    width: 0.25rem;
+    height: 50%;
+    left: 0;
+    border-radius: 0 1rem 1rem 0;
+    bottom: auto;
+  }
+
   .card {
     padding: 1.5rem;
   }
 
   #user {
     gap: 1rem;
-    padding: 0 8vmax;
-    grid-template-columns: 1fr 22rem;
-    align-content: flex-start;
     align-items: flex-start;
   }
 
@@ -1000,9 +1144,11 @@ h3 {
     text-align: center;
     gap: 0.5rem;
   }
-
-  #wallet_section {
-    grid-area: 1/2/3/3;
+}
+@media screen and (min-width: 56rem) {
+  #main_card {
+    height: 80vh;
+    width: 56rem;
   }
 }
 @media (any-hover: hover) {
diff --git a/css/main.min.css b/css/main.min.css
index a464dd9..c2899dc 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #256eff;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s;position:relative;display:flex;flex-direction:column}body::before{content:"";position:absolute;height:max(12rem,16vmax);background-color:#256eff;width:100%;left:0;top:0;z-index:-1}body[data-theme=dark]{--accent-color: #90b8f8;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1)}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:1rem}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details{padding:1rem 0}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}h3{font-size:1.2rem;line-height:1.3}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.page{height:100%}.page-layout{display:grid;gap:1.5rem 0;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;align-content:flex-start}.page-layout>*{grid-column:2/3}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem;cursor:pointer}#landing>section{justify-content:center;justify-items:center;align-items:center;text-align:center;padding:8vw 0}#landing h1{font-size:clamp(2rem,5vw,5rem)}#sign_in,#sign_up{justify-items:center;align-content:center}#sign_in section,#sign_up section{margin-top:-8rem;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#main_header{--text-color: 220, 220, 220;padding:1rem max(4vw,1.5rem)}#main_header a{color:rgba(var(--text-color), 1)}#pages_container{flex:1;overflow-y:auto}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.clip{-webkit-clip-path:circle(0);clip-path:circle(0)}#user{gap:.5rem;padding:0 1.5rem}#quick_actions_container{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill, minmax(4rem, 1fr))}.primary-action{display:flex;flex-direction:column;align-items:center;padding:.8rem;gap:.5rem;white-space:normal;font-size:.8rem;border-radius:.5rem;font-weight:400;background-color:transparent;text-align:center}.primary-action .icon{fill:var(--accent-color)}#rupee_balance span:first-of-type{font-size:1.5rem}#rupee_balance span:last-of-type{font-size:.8rem}.wallet-action{display:flex;white-space:normal;font-size:.85rem;padding:.8rem .6rem !important;color:rgba(var(--text-color), 1);text-align:center;align-items:center;justify-content:flex-start;background-color:rgba(var(--text-color), 0.03);flex:1}.wallet-action:nth-of-type(2){margin-left:.5rem}.wallet-action .icon{margin-right:.5rem;fill:var(--accent-color)}#saved_ids_list{display:grid;grid-template-columns:minmax(0, 1fr);gap:1rem;margin-top:1.5rem}.saved-id{grid-template-columns:auto 1fr;gap:0 .8rem;border-radius:.3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center}.saved-id.highlight{box-shadow:0 0 .1rem .1rem var(--accent-color) inset}.saved-id .edit-saved{padding:.3rem;position:relative;justify-self:center}.saved-id .edit-saved .icon{position:absolute;height:1.2rem;width:1.2rem;right:0;bottom:0;border-radius:.5rem;padding:.2rem;background-color:rgba(var(--background-color), 1)}.saved-id__initials{display:flex;align-items:center;justify-content:center;height:2.4rem;width:2.4rem;font-size:1.2rem;text-transform:uppercase;color:rgba(var(--background-color), 1);font-weight:700;line-height:1;background-color:var(--accent-color);justify-self:flex-start;border-radius:2rem}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:1rem}#cashier,#contact,#history,#settings{height:100%;align-content:flex-start;background-color:rgba(var(--foreground-color), 1);width:min(42rem,100%);justify-self:center;margin:0 auto;padding:1.5rem;overflow-y:auto;border-radius:.5rem;grid-template-columns:minmax(0, 1fr)}#contact{display:grid;grid-template-rows:auto 1fr auto}#contact__transactions{overflow-y:auto}#payments_history_wrapper,#wallet_history_wrapper{padding-bottom:4rem}#payments_history{display:grid;gap:2rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;align-items:center;border-radius:.3rem}.transaction.sent .icon{fill:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount{color:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount::before{content:"- "}.transaction.received .icon{fill:var(--green)}.transaction.received .transaction__amount{color:var(--green)}.transaction.received .transaction__amount::before{content:"+ "}.transaction__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:2rem}.transaction__receiver{font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8)}.transaction__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{font-size:1rem;font-weight:700;grid-area:1/3/3/4}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}#transaction_result{display:grid;gap:.5rem;height:max(40vh,24rem);align-items:center;justify-content:center;text-align:center;align-content:center}#transaction_result.success .icon--failed{display:none}#transaction_result.failed .icon--success{display:none}#transaction_result h3{text-align:center;width:100%}#transaction_result .icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:1rem;-webkit-animation:popup 1s;animation:popup 1s}#transaction_result .icon--success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}#transaction_result .icon--failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}#transaction_result sm-copy{font-size:.8rem}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}.cashier-request,.wallet-request,.payment-request{display:flex;gap:1rem;align-items:center;padding:.8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06)}.cashier-request:not(:last-of-type),.wallet-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:1rem}.cashier-request__time,.wallet-request__time,.payment-request__time{font-size:.8rem}.payment-request{display:grid;grid-template-columns:1fr auto}.payment-request__amount{font-weight:700;text-align:right}.wallet-request{align-items:initial;flex-direction:column}.wallet-request__details{font-weight:700}.wallet-request__status{font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;font-weight:500}.wallet-request__status .icon{margin-right:.3rem}.wallet-request__status.pending .icon{fill:var(--yellow)}.wallet-request__status.completed .icon{fill:var(--green)}.wallet-request__status.rejected .icon{fill:var(--danger-color)}.wallet-request__note{font-size:.8rem}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}.card{padding:1.5rem}#user{gap:1rem;padding:0 8vmax;grid-template-columns:1fr 22rem;align-content:flex-start;align-items:flex-start}#saved_ids_list{grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr))}.saved-id{padding:1rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.03);grid-template-columns:minmax(0, 1fr);justify-content:center;text-align:center;gap:.5rem}#wallet_section{grid-area:1/2/3/3}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}button,.button:not([disabled]){transition:background-color .3s,filter .3s}button:hover,.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #256eff;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s;position:relative;display:flex;flex-direction:column}body[data-theme=dark]{--accent-color: #90b8f8;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1)}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:1rem}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details{padding:1rem 0}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}h3{font-size:1.2rem;line-height:1.3}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.page{height:100%}.page-layout{display:grid;gap:1.5rem 0;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;align-content:flex-start}.page-layout>*{grid-column:2/3}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem;cursor:pointer}#secondary_pages{display:flex;flex-direction:column;width:100%}#secondary_pages header{padding:1.5rem}#secondary_pages .inner-page{height:100%}#landing>section{justify-content:center;justify-items:center;align-items:center;text-align:center;padding:8vw 0}#landing h1{font-size:clamp(2rem,5vw,5rem)}#sign_in,#sign_up{justify-items:center;align-content:center}#sign_in section,#sign_up section{margin-top:-8rem;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#main_header{padding:1.5rem}#main_card{display:flex;flex-direction:column;height:100%;width:100%;background-color:rgba(var(--foreground-color), 1);transition:background-color .3s}#main_navbar{display:flex;background:rgba(var(--text-color), 0.03)}#main_navbar.hide-away{position:absolute}#main_navbar ul{display:flex;height:100%;width:100%}#main_navbar ul li{width:100%}.nav-item{position:relative;display:flex;flex:1;width:100%;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .3rem;color:var(--text-color);font-size:.7rem;border-radius:.3rem}.nav-item .icon{transition:transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item__title{margin-top:.3rem;transition:opacity .2s,transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item--active{color:var(--accent-color)}.nav-item--active .icon{fill:var(--accent-color);transform:translateY(50%)}.nav-item--active .nav-item__title{transform:translateY(100%);opacity:0}.nav-item__indicator{position:absolute;bottom:0;width:2rem;height:.3rem;background:var(--accent-color);border-radius:1rem 1rem 0 0;z-index:1}.inner-page{padding:0 1.5rem;flex:1;overflow-y:auto;align-content:start}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.clip{-webkit-clip-path:circle(0);clip-path:circle(0)}#user{gap:.5rem}#quick_actions_container{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill, minmax(4rem, 1fr))}.primary-action{display:flex;flex-direction:column;align-items:center;padding:.8rem;gap:.5rem;white-space:normal;font-size:.8rem;border-radius:.5rem;font-weight:400;background-color:rgba(var(--text-color), 0.03);text-align:center}.primary-action .icon{fill:var(--accent-color)}#rupee_balance span:first-of-type{font-size:1.5rem}#rupee_balance span:last-of-type{font-size:.8rem}.wallet-action{display:flex;white-space:normal;font-size:.85rem;padding:.8rem .6rem !important;color:rgba(var(--text-color), 1);text-align:center;align-items:center;justify-content:flex-start;background-color:rgba(var(--text-color), 0.03);flex:1}.wallet-action:nth-of-type(2){margin-left:.5rem}.wallet-action .icon{margin-right:.5rem;fill:var(--accent-color)}#saved_ids_list{display:grid;grid-template-columns:minmax(0, 1fr);gap:1rem;margin-top:1.5rem}.saved-id{grid-template-columns:auto 1fr;gap:0 .8rem;border-radius:.3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center}.saved-id.highlight{box-shadow:0 0 .1rem .1rem var(--accent-color) inset}.saved-id .edit-saved{padding:.3rem;position:relative;justify-self:center}.saved-id .edit-saved .icon{position:absolute;height:1.2rem;width:1.2rem;right:0;bottom:0;border-radius:.5rem;padding:.2rem;background-color:rgba(var(--background-color), 1)}.saved-id__initials{display:flex;align-items:center;justify-content:center;height:2.4rem;width:2.4rem;font-size:1.2rem;text-transform:uppercase;color:rgba(var(--background-color), 1);font-weight:700;line-height:1;background-color:var(--accent-color);justify-self:flex-start;border-radius:2rem}.saved-id__title{font-size:.9rem;font-weight:500}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:1rem}#contact{display:flex;flex-direction:column;padding:0;height:100%}#contact>*{padding:1rem}#contact__transactions{display:grid;gap:.5rem;overflow-y:auto;flex:1;padding:0 max(1rem,8vw);align-items:flex-start}.transaction-message{background-color:rgba(var(--text-color), 0.06);padding:1rem;border-radius:.5rem;justify-self:flex-start;border-radius:0 1rem 1rem 1rem;gap:.5rem}.transaction-message.received{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}.transaction-message.received+.transaction-message.received{border-radius:1rem}.transaction-message.sent{margin-left:auto;justify-self:flex-end;border-radius:1rem 1rem 0 1rem;text-align:right}.transaction-message__amount{font-size:1.2rem}.transaction-message__time{opacity:.8;font-size:.8rem}#wallet_history_wrapper{margin-top:1.5rem;padding-bottom:3rem}#payments_history{display:grid;gap:2rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;align-items:center;border-radius:.3rem}.transaction.sent .icon{fill:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount{color:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount::before{content:"- "}.transaction.received .icon{fill:var(--green)}.transaction.received .transaction__amount{color:var(--green)}.transaction.received .transaction__amount::before{content:"+ "}.transaction__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:2rem}.transaction__receiver{font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8)}.transaction__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{font-size:1rem;font-weight:700;grid-area:1/3/3/4}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}#transaction_result{display:grid;gap:.5rem;height:max(40vh,24rem);align-items:center;justify-content:center;text-align:center;align-content:center}#transaction_result.success .icon--failed{display:none}#transaction_result.failed .icon--success{display:none}#transaction_result h3{text-align:center;width:100%}#transaction_result .icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:1rem;-webkit-animation:popup 1s;animation:popup 1s}#transaction_result .icon--success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}#transaction_result .icon--failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}#transaction_result sm-copy{font-size:.8rem}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}.cashier-request,.wallet-request,.payment-request{display:flex;gap:1rem;align-items:center;padding:.8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06)}.cashier-request:not(:last-of-type),.wallet-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:1rem}.cashier-request__time,.wallet-request__time,.payment-request__time{font-size:.8rem}.payment-request{display:grid;grid-template-columns:1fr auto}.payment-request__amount{font-weight:700;text-align:right}.wallet-request{align-items:initial;flex-direction:column}.wallet-request__details{font-weight:700}.wallet-request__status{font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;font-weight:500}.wallet-request__status .icon{margin-right:.3rem}.wallet-request__status.pending .icon{fill:var(--yellow)}.wallet-request__status.completed .icon{fill:var(--green)}.wallet-request__status.rejected .icon{fill:var(--danger-color)}.wallet-request__note{font-size:.8rem}@media screen and (max-width: 40rem){#main_navbar.hide-away{bottom:0;left:0;right:0}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}body{align-items:center;justify-content:center}#main_card{position:relative;border-radius:.5rem;overflow:hidden;box-shadow:0 .1rem .2rem rgba(0,0,0,.05),0 1rem 3rem rgba(0,0,0,.2)}#main_card:not(.nav-hidden){display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"nav header" "nav ."}#main_header{grid-area:header}#main_navbar{grid-area:nav;border-top:none;flex-direction:column;height:100%}#main_navbar ul{flex-direction:column;gap:.5rem;padding:.3rem}#main_navbar ul li:last-of-type{margin-top:auto}.nav-item{aspect-ratio:1/1}.nav-item__indicator{width:.25rem;height:50%;left:0;border-radius:0 1rem 1rem 0;bottom:auto}.card{padding:1.5rem}#user{gap:1rem;align-items:flex-start}#saved_ids_list{grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr))}.saved-id{padding:1rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.03);grid-template-columns:minmax(0, 1fr);justify-content:center;text-align:center;gap:.5rem}}@media screen and (min-width: 56rem){#main_card{height:80vh;width:56rem}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}button,.button:not([disabled]){transition:background-color .3s,filter .3s}button:hover,.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index d946c79..22bba46 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -30,16 +30,6 @@ body {
   position: relative;
   display: flex;
   flex-direction: column;
-  &::before {
-    content: "";
-    position: absolute;
-    height: max(12rem, 16vmax);
-    background-color: #256eff;
-    width: 100%;
-    left: 0;
-    top: 0;
-    z-index: -1;
-  }
 }
 
 body[data-theme="dark"] {
@@ -491,6 +481,18 @@ h3 {
   margin-left: -0.5rem;
   cursor: pointer;
 }
+
+#secondary_pages {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  header {
+    padding: 1.5rem;
+  }
+  .inner-page {
+    height: 100%;
+  }
+}
 #landing {
   & > section {
     justify-content: center;
@@ -532,15 +534,78 @@ h3 {
   }
 }
 #main_header {
-  --text-color: 220, 220, 220;
-  padding: 1rem max(4vw, 1.5rem);
-  a {
-    color: rgba(var(--text-color), 1);
+  padding: 1.5rem;
+}
+#main_card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(var(--foreground-color), 1);
+  transition: background-color 0.3s;
+}
+
+#main_navbar {
+  display: flex;
+  background: rgba(var(--text-color), 0.03);
+  &.hide-away {
+    position: absolute;
+  }
+  ul {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    li {
+      width: 100%;
+    }
   }
 }
-#pages_container {
+.nav-item {
+  position: relative;
+  display: flex;
+  flex: 1;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 0.3rem;
+  color: var(--text-color);
+  font-size: 0.7rem;
+  border-radius: 0.3rem;
+  .icon {
+    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+  &__title {
+    margin-top: 0.3rem;
+    transition: opacity 0.2s,
+      transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+  &--active {
+    color: var(--accent-color);
+    .icon {
+      fill: var(--accent-color);
+      transform: translateY(50%);
+    }
+    .nav-item__title {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+  }
+  &__indicator {
+    position: absolute;
+    bottom: 0;
+    width: 2rem;
+    height: 0.3rem;
+    background: var(--accent-color);
+    border-radius: 1rem 1rem 0 0;
+    z-index: 1;
+  }
+}
+.inner-page {
+  padding: 0 1.5rem;
   flex: 1;
   overflow-y: auto;
+  align-content: start;
 }
 
 .password-field {
@@ -570,7 +635,6 @@ h3 {
 }
 #user {
   gap: 0.5rem;
-  padding: 0 1.5rem;
 }
 #quick_actions_container {
   display: grid;
@@ -587,8 +651,7 @@ h3 {
   font-size: 0.8rem;
   border-radius: 0.5rem;
   font-weight: 400;
-  // background-color: rgba(var(--text-color), 0.06);
-  background-color: transparent;
+  background-color: rgba(var(--text-color), 0.03);
   text-align: center;
   .icon {
     fill: var(--accent-color);
@@ -667,6 +730,10 @@ h3 {
     justify-self: flex-start;
     border-radius: 2rem;
   }
+  &__title {
+    font-size: 0.9rem;
+    font-weight: 500;
+  }
 }
 
 .card {
@@ -674,31 +741,56 @@ h3 {
   border-radius: 0.5rem;
   padding: 1rem;
 }
-#cashier,
-#contact,
-#history,
-#settings {
-  height: 100%;
-  align-content: flex-start;
-  background-color: rgba(var(--foreground-color), 1);
-  width: min(42rem, 100%);
-  justify-self: center;
-  margin: 0 auto;
-  padding: 1.5rem;
-  overflow-y: auto;
-  border-radius: 0.5rem;
-  grid-template-columns: minmax(0, 1fr);
-}
 #contact {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  height: 100%;
+  & > * {
+    padding: 1rem;
+  }
 }
 #contact__transactions {
+  display: grid;
+  gap: 0.5rem;
   overflow-y: auto;
+  flex: 1;
+  padding: 0 max(1rem, 8vw);
+  align-items: flex-start;
 }
-#payments_history_wrapper,
+.transaction-message {
+  background-color: rgba(var(--text-color), 0.06);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  justify-self: flex-start;
+  border-radius: 0 1rem 1rem 1rem;
+  gap: 0.5rem;
+  &.received {
+    background-color: var(--accent-color);
+    color: rgba(var(--background-color), 1);
+    & + & {
+      border-radius: 1rem;
+    }
+  }
+  &.sent {
+    margin-left: auto;
+    justify-self: flex-end;
+    border-radius: 1rem 1rem 0 1rem;
+    text-align: right;
+  }
+
+  &__amount {
+    font-size: 1.2rem;
+  }
+  &__time {
+    opacity: 0.8;
+    font-size: 0.8rem;
+  }
+}
+
 #wallet_history_wrapper {
-  padding-bottom: 4rem;
+  margin-top: 1.5rem;
+  padding-bottom: 3rem;
 }
 #payments_history {
   display: grid;
@@ -890,6 +982,15 @@ h3 {
     font-size: 0.8rem;
   }
 }
+@media screen and (max-width: 40rem) {
+  #main_navbar {
+    &.hide-away {
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+  }
+}
 @media screen and (min-width: 40rem) {
   sm-popup {
     --width: 24rem;
@@ -901,14 +1002,58 @@ h3 {
     grid-column: 1/-1;
     padding: 1rem 1.5rem 0 1.5rem;
   }
+  body {
+    align-items: center;
+    justify-content: center;
+  }
+
+  #main_card {
+    &:not(.nav-hidden) {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      grid-template-rows: auto 1fr;
+      grid-template-areas: "nav header" "nav .";
+    }
+    position: relative;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05),
+      0 1rem 3rem rgba(0, 0, 0, 0.2);
+  }
+  #main_header {
+    grid-area: header;
+  }
+
+  #main_navbar {
+    grid-area: nav;
+    border-top: none;
+    flex-direction: column;
+    height: 100%;
+    ul {
+      flex-direction: column;
+      gap: 0.5rem;
+      padding: 0.3rem;
+
+      li:last-of-type {
+        margin-top: auto;
+      }
+    }
+  }
+  .nav-item {
+    aspect-ratio: 1/1;
+    &__indicator {
+      width: 0.25rem;
+      height: 50%;
+      left: 0;
+      border-radius: 0 1rem 1rem 0;
+      bottom: auto;
+    }
+  }
   .card {
     padding: 1.5rem;
   }
   #user {
     gap: 1rem;
-    padding: 0 8vmax;
-    grid-template-columns: 1fr 22rem;
-    align-content: flex-start;
     align-items: flex-start;
   }
   #saved_ids_list {
@@ -923,11 +1068,13 @@ h3 {
     text-align: center;
     gap: 0.5rem;
   }
-  #wallet_section {
-    grid-area: 1/2/3/3;
+}
+@media screen and (min-width: 56rem) {
+  #main_card {
+    height: 80vh;
+    width: 56rem;
   }
 }
-
 @media (any-hover: hover) {
   ::-webkit-scrollbar {
     width: 0.5rem;
diff --git a/index.html b/index.html
index 5c412bb..d0ef436 100644
--- a/index.html
+++ b/index.html
@@ -55,47 +55,39 @@
             <sm-button variant="no-outline" class="submit-btn">OK</sm-button>
         </div>
     </sm-popup>
-    <header id="main_header" class="flex align-center gap-1">
-        <a href="#/home" class="flex align-center flex-1">
-            <svg class="icon" style="margin-right:0.3rem" viewBox="0 0 96 108"
-                style="enable-background:new 0 0 90.5 106.3;" xml:space="preserve">
-                <path d="M90.2,102.5c-2.4-8.2-9.9-14.5-27.4-23.1c-7.1-3.5-11.8-6.2-14-8.3c-1.7-1.6-3.5-4-4.2-5.5c-0.7-1.7-0.7-5.5,0-7.5
-                            c1.3-3.6,2.6-5.2,12.9-15.1c6.2-5.9,9.3-10.3,11.1-15.5c0.7-2.1,0.8-7.6,0.2-9.4C66.5,12,61.7,6.7,53.7,1.6c-3-1.9-4.3-2.1-4.3-0.8
-                            c0,0.3-0.5,1.4-1,2.4l-1,1.8l-2.8-1.9c-1.5-1.1-3.4-2.2-4.1-2.6c-1.3-0.7-2.4-0.6-2.4,0.2c0,0.3-1.4,3.4-2,4.4
-                            c0,0.1-0.4-0.1-0.9-0.4c-6.1-4.4-8.7-5.5-8.7-3.9c0,0.7-1.8,4.2-4,7.9C16,19.5,9.4,24.9,2.6,24.9c-3,0-2.9-0.1-2,3.4
-                            c0.7,2.8,1.1,3.1,3.6,2.3c2.3-0.7,3.9-1.5,5.8-2.9c0.8-0.6,1.5-0.9,1.6-0.9c0.1,0.1,0.5,1,0.7,2.1s0.7,2,0.9,2.1
-                            c0.8,0.3,5.1-1.3,7.5-2.9l2.3-1.5l0.5,1.8c0.6,2.4,1,2.7,3.3,2.1c3.9-1,7.7-3.7,11.5-8.2l2-2.4l-0.2,2.1c-0.6,5.4-4.3,11.4-11.3,18
-                            c-1.8,1.7-4.7,4.5-6.5,6.2c-10.7,10.2-10,18.6,2,26.5c2.7,1.8,10.3,5.8,15.3,8c0.9,0.4,3.3,1.7,5.3,2.9c11,6.5,16.4,13.1,16.4,19.7
-                            c0,1.3,0.1,2.4,0.2,2.6l0,0c0.3,0.3,0.1,0.3,3-0.5c1.4-0.4,2.6-0.9,2.8-1.1c0.4-0.6-0.6-3.7-1.8-6.1c-1.3-2.5-5.6-7-8.9-9.4
-                            c-3.8-2.8-9.3-5.9-17-9.7c-8.5-4.2-11.8-6.2-14.7-9.1c-2.6-2.6-3.9-5.3-3.9-8.2c0-4.6,2.3-8.6,8.3-14.1c9.4-8.7,13-13,15.5-18.8
-                            c1.3-3,1.4-3.4,1.4-6.7c0-3.1-0.1-3.8-1.1-6l-1.1-2.4l1-1.6c0.5-0.9,1.2-2.1,1.5-2.6l0.5-1l1.5,2.1c1.8,2.6,3.2,6.8,3.2,9.3
-                            c0,1.7-0.6,4.7-1.4,6.4c-0.2,0.4-0.4,1-0.5,1.3c-0.1,0.3-1.1,2-2.2,3.7c-2,3-5.2,6.4-13.4,14.2c-5.7,5.4-7.6,8.6-7.8,13.1
-                            c-0.2,3.7,0.7,5.9,3.7,9.2c3.2,3.4,6.9,5.8,17.4,11c12.1,6,17.3,9.6,21.3,14.5c2.5,3.2,3.7,5.8,3.9,9.3c0.1,1.6,0.3,3,0.5,3
-                            c0.1,0.1,0.8,0,1.4-0.2s1.9-0.5,2.7-0.7l1.5-0.4l-0.2-1.5c-0.7-5.1-5.4-10.8-13.1-16c-4.4-2.9-5.8-3.7-17.3-9.4
-                            c-5.7-2.8-9.2-5.1-11.8-7.6c-4.3-4.2-5.1-8.8-2.7-13.9c1.4-2.8,2.7-4.4,12.5-13.8c8-7.7,11.4-13.7,11.4-20.1c0-5.1-2.3-9.9-6.9-14.3
-                            c-1.1-1-2-2-2.1-2.2c-0.2-0.4,1.5-3.9,1.9-3.9c1.2,0,7.8,6.3,9.7,9.2c2,3.3,2.5,5,2.5,8.9c0,3.9-0.6,5.9-2.9,9.8
-                            c-2.4,4.1-4.2,6-14.2,15.5c-3.4,3.2-5.7,6.1-6.9,8.7c-0.9,2-1.1,2.7-1.1,5.1c0,2.3,0.2,3.2,1,4.9c1.9,4,7.4,8.5,15.4,12.4
-                            c12.5,6.1,15.1,7.6,19.4,10.7c7.2,5.3,10.6,10.5,10.6,16c0,1.3,0.1,2.4,0.3,2.5c0.4,0.3,4.8-0.8,5.5-1.3
-                            C90.7,104.4,90.7,104.3,90.2,102.5z M20.3,23.3L20.3,23.3c-2,1-3.3,1.4-4.8,1.5L13.3,25l2.3-2.8c3.7-4.5,6.4-8.9,10-16
-                            c0.9-1.8,1.8-3.5,2-3.6c0.4-0.4,2.6,1.1,5.1,3.4l2.1,1.9l-1.9,2.8C28.2,17.5,24.5,21.2,20.3,23.3z M39.3,17.4
-                            c-1.2,1.7-6.5,5.7-8.6,6.5v0c-1.1,0.4-2.8,0.8-3.9,0.9L24.9,25l2.1-2.6c2.5-3.1,5.1-7,7-10.4c0.7-1.4,1.4-2.5,1.5-2.6
-                            c0.3-0.4,1.7,1.4,3,4.1l1.5,3L39.3,17.4z M44.6,10c-0.7,1.2-1.4,2.1-1.5,2.1c-0.1,0-1.5-1.4-3-3l-2.8-3l0.6-1.5
-                            c1.1-2.6,1.3-2.7,3.4-1c1.9,1.5,4.5,3.8,4.5,4.1C45.8,7.8,45.3,8.9,44.6,10z" />
-            </svg>
-            <h4>RanchiMall Pay</h4>
-        </a>
-        <theme-toggle></theme-toggle>
-        <a href="#/settings" class="icon-only">
-            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
-                fill="#000000">
-                <path d="M0 0h24v24H0V0z" fill="none" />
-                <path
-                    d="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
-            </svg>
-        </a>
-    </header>
-    <section id="pages_container">
-        <article id="landing" class="page page-layout hide">
+    <div id="secondary_pages" class="page hide">
+        <header class="flex align-center gap-1">
+            <a href="#/home" class="flex align-center flex-1">
+                <svg class="icon" style="margin-right:0.3rem" viewBox="0 0 96 108"
+                    style="enable-background:new 0 0 90.5 106.3;" xml:space="preserve">
+                    <path d="M90.2,102.5c-2.4-8.2-9.9-14.5-27.4-23.1c-7.1-3.5-11.8-6.2-14-8.3c-1.7-1.6-3.5-4-4.2-5.5c-0.7-1.7-0.7-5.5,0-7.5
+                                c1.3-3.6,2.6-5.2,12.9-15.1c6.2-5.9,9.3-10.3,11.1-15.5c0.7-2.1,0.8-7.6,0.2-9.4C66.5,12,61.7,6.7,53.7,1.6c-3-1.9-4.3-2.1-4.3-0.8
+                                c0,0.3-0.5,1.4-1,2.4l-1,1.8l-2.8-1.9c-1.5-1.1-3.4-2.2-4.1-2.6c-1.3-0.7-2.4-0.6-2.4,0.2c0,0.3-1.4,3.4-2,4.4
+                                c0,0.1-0.4-0.1-0.9-0.4c-6.1-4.4-8.7-5.5-8.7-3.9c0,0.7-1.8,4.2-4,7.9C16,19.5,9.4,24.9,2.6,24.9c-3,0-2.9-0.1-2,3.4
+                                c0.7,2.8,1.1,3.1,3.6,2.3c2.3-0.7,3.9-1.5,5.8-2.9c0.8-0.6,1.5-0.9,1.6-0.9c0.1,0.1,0.5,1,0.7,2.1s0.7,2,0.9,2.1
+                                c0.8,0.3,5.1-1.3,7.5-2.9l2.3-1.5l0.5,1.8c0.6,2.4,1,2.7,3.3,2.1c3.9-1,7.7-3.7,11.5-8.2l2-2.4l-0.2,2.1c-0.6,5.4-4.3,11.4-11.3,18
+                                c-1.8,1.7-4.7,4.5-6.5,6.2c-10.7,10.2-10,18.6,2,26.5c2.7,1.8,10.3,5.8,15.3,8c0.9,0.4,3.3,1.7,5.3,2.9c11,6.5,16.4,13.1,16.4,19.7
+                                c0,1.3,0.1,2.4,0.2,2.6l0,0c0.3,0.3,0.1,0.3,3-0.5c1.4-0.4,2.6-0.9,2.8-1.1c0.4-0.6-0.6-3.7-1.8-6.1c-1.3-2.5-5.6-7-8.9-9.4
+                                c-3.8-2.8-9.3-5.9-17-9.7c-8.5-4.2-11.8-6.2-14.7-9.1c-2.6-2.6-3.9-5.3-3.9-8.2c0-4.6,2.3-8.6,8.3-14.1c9.4-8.7,13-13,15.5-18.8
+                                c1.3-3,1.4-3.4,1.4-6.7c0-3.1-0.1-3.8-1.1-6l-1.1-2.4l1-1.6c0.5-0.9,1.2-2.1,1.5-2.6l0.5-1l1.5,2.1c1.8,2.6,3.2,6.8,3.2,9.3
+                                c0,1.7-0.6,4.7-1.4,6.4c-0.2,0.4-0.4,1-0.5,1.3c-0.1,0.3-1.1,2-2.2,3.7c-2,3-5.2,6.4-13.4,14.2c-5.7,5.4-7.6,8.6-7.8,13.1
+                                c-0.2,3.7,0.7,5.9,3.7,9.2c3.2,3.4,6.9,5.8,17.4,11c12.1,6,17.3,9.6,21.3,14.5c2.5,3.2,3.7,5.8,3.9,9.3c0.1,1.6,0.3,3,0.5,3
+                                c0.1,0.1,0.8,0,1.4-0.2s1.9-0.5,2.7-0.7l1.5-0.4l-0.2-1.5c-0.7-5.1-5.4-10.8-13.1-16c-4.4-2.9-5.8-3.7-17.3-9.4
+                                c-5.7-2.8-9.2-5.1-11.8-7.6c-4.3-4.2-5.1-8.8-2.7-13.9c1.4-2.8,2.7-4.4,12.5-13.8c8-7.7,11.4-13.7,11.4-20.1c0-5.1-2.3-9.9-6.9-14.3
+                                c-1.1-1-2-2-2.1-2.2c-0.2-0.4,1.5-3.9,1.9-3.9c1.2,0,7.8,6.3,9.7,9.2c2,3.3,2.5,5,2.5,8.9c0,3.9-0.6,5.9-2.9,9.8
+                                c-2.4,4.1-4.2,6-14.2,15.5c-3.4,3.2-5.7,6.1-6.9,8.7c-0.9,2-1.1,2.7-1.1,5.1c0,2.3,0.2,3.2,1,4.9c1.9,4,7.4,8.5,15.4,12.4
+                                c12.5,6.1,15.1,7.6,19.4,10.7c7.2,5.3,10.6,10.5,10.6,16c0,1.3,0.1,2.4,0.3,2.5c0.4,0.3,4.8-0.8,5.5-1.3
+                                C90.7,104.4,90.7,104.3,90.2,102.5z M20.3,23.3L20.3,23.3c-2,1-3.3,1.4-4.8,1.5L13.3,25l2.3-2.8c3.7-4.5,6.4-8.9,10-16
+                                c0.9-1.8,1.8-3.5,2-3.6c0.4-0.4,2.6,1.1,5.1,3.4l2.1,1.9l-1.9,2.8C28.2,17.5,24.5,21.2,20.3,23.3z M39.3,17.4
+                                c-1.2,1.7-6.5,5.7-8.6,6.5v0c-1.1,0.4-2.8,0.8-3.9,0.9L24.9,25l2.1-2.6c2.5-3.1,5.1-7,7-10.4c0.7-1.4,1.4-2.5,1.5-2.6
+                                c0.3-0.4,1.7,1.4,3,4.1l1.5,3L39.3,17.4z M44.6,10c-0.7,1.2-1.4,2.1-1.5,2.1c-0.1,0-1.5-1.4-3-3l-2.8-3l0.6-1.5
+                                c1.1-2.6,1.3-2.7,3.4-1c1.9,1.5,4.5,3.8,4.5,4.1C45.8,7.8,45.3,8.9,44.6,10z" />
+                </svg>
+                <h4>RanchiMall Pay</h4>
+            </a>
+            <theme-toggle></theme-toggle>
+        </header>
+        <article id="landing" class="inner-page page-layout hide">
             <section class="grid justify-center gap-1">
                 <h1 class="h1">Send.request</h1>
                 <div class="flex gap-0-5">
@@ -104,7 +96,7 @@
                 </div>
             </section>
         </article>
-        <article id="sign_in" class="page page-layout hide">
+        <article id="sign_in" class="inner-page page-layout hide">
             <section>
                 <h1 class="h2">Sign In</h1>
                 <p>Welcome back, glad to see you again</p>
@@ -118,7 +110,7 @@
                 </p>
             </section>
         </article>
-        <article id="sign_up" class="page page-layout hide">
+        <article id="sign_up" class="inner-page page-layout hide">
             <section class="grid">
                 <h1 class="h2">FLO credentials</h1>
                 <p>Get your FLO credentials to use RanchiMall Pay and all RanchiMall FLO apps. </p>
@@ -139,15 +131,48 @@
                 </strong>
             </section>
         </article>
-        <div id="loading" class="page flex align-center justify-center">
+        <div id="loading" class="inner-page flex align-center justify-center">
             <div class="grid gap-1 text-center">
                 <sm-spinner></sm-spinner>
                 <h4>Loading RanchiMall Pay</h4>
             </div>
         </div>
-        <section id="home" class="page hide">
+    </div>
+    <div id="main_card" class="page hide">
+        <header id="main_header" class="flex align-center space-between">
+            <a href="#/home" class="flex align-center flex-1">
+                <svg class="icon" style="margin-right:0.3rem" viewBox="0 0 96 108"
+                    style="enable-background:new 0 0 90.5 106.3;" xml:space="preserve">
+                    <path d="M90.2,102.5c-2.4-8.2-9.9-14.5-27.4-23.1c-7.1-3.5-11.8-6.2-14-8.3c-1.7-1.6-3.5-4-4.2-5.5c-0.7-1.7-0.7-5.5,0-7.5
+                                c1.3-3.6,2.6-5.2,12.9-15.1c6.2-5.9,9.3-10.3,11.1-15.5c0.7-2.1,0.8-7.6,0.2-9.4C66.5,12,61.7,6.7,53.7,1.6c-3-1.9-4.3-2.1-4.3-0.8
+                                c0,0.3-0.5,1.4-1,2.4l-1,1.8l-2.8-1.9c-1.5-1.1-3.4-2.2-4.1-2.6c-1.3-0.7-2.4-0.6-2.4,0.2c0,0.3-1.4,3.4-2,4.4
+                                c0,0.1-0.4-0.1-0.9-0.4c-6.1-4.4-8.7-5.5-8.7-3.9c0,0.7-1.8,4.2-4,7.9C16,19.5,9.4,24.9,2.6,24.9c-3,0-2.9-0.1-2,3.4
+                                c0.7,2.8,1.1,3.1,3.6,2.3c2.3-0.7,3.9-1.5,5.8-2.9c0.8-0.6,1.5-0.9,1.6-0.9c0.1,0.1,0.5,1,0.7,2.1s0.7,2,0.9,2.1
+                                c0.8,0.3,5.1-1.3,7.5-2.9l2.3-1.5l0.5,1.8c0.6,2.4,1,2.7,3.3,2.1c3.9-1,7.7-3.7,11.5-8.2l2-2.4l-0.2,2.1c-0.6,5.4-4.3,11.4-11.3,18
+                                c-1.8,1.7-4.7,4.5-6.5,6.2c-10.7,10.2-10,18.6,2,26.5c2.7,1.8,10.3,5.8,15.3,8c0.9,0.4,3.3,1.7,5.3,2.9c11,6.5,16.4,13.1,16.4,19.7
+                                c0,1.3,0.1,2.4,0.2,2.6l0,0c0.3,0.3,0.1,0.3,3-0.5c1.4-0.4,2.6-0.9,2.8-1.1c0.4-0.6-0.6-3.7-1.8-6.1c-1.3-2.5-5.6-7-8.9-9.4
+                                c-3.8-2.8-9.3-5.9-17-9.7c-8.5-4.2-11.8-6.2-14.7-9.1c-2.6-2.6-3.9-5.3-3.9-8.2c0-4.6,2.3-8.6,8.3-14.1c9.4-8.7,13-13,15.5-18.8
+                                c1.3-3,1.4-3.4,1.4-6.7c0-3.1-0.1-3.8-1.1-6l-1.1-2.4l1-1.6c0.5-0.9,1.2-2.1,1.5-2.6l0.5-1l1.5,2.1c1.8,2.6,3.2,6.8,3.2,9.3
+                                c0,1.7-0.6,4.7-1.4,6.4c-0.2,0.4-0.4,1-0.5,1.3c-0.1,0.3-1.1,2-2.2,3.7c-2,3-5.2,6.4-13.4,14.2c-5.7,5.4-7.6,8.6-7.8,13.1
+                                c-0.2,3.7,0.7,5.9,3.7,9.2c3.2,3.4,6.9,5.8,17.4,11c12.1,6,17.3,9.6,21.3,14.5c2.5,3.2,3.7,5.8,3.9,9.3c0.1,1.6,0.3,3,0.5,3
+                                c0.1,0.1,0.8,0,1.4-0.2s1.9-0.5,2.7-0.7l1.5-0.4l-0.2-1.5c-0.7-5.1-5.4-10.8-13.1-16c-4.4-2.9-5.8-3.7-17.3-9.4
+                                c-5.7-2.8-9.2-5.1-11.8-7.6c-4.3-4.2-5.1-8.8-2.7-13.9c1.4-2.8,2.7-4.4,12.5-13.8c8-7.7,11.4-13.7,11.4-20.1c0-5.1-2.3-9.9-6.9-14.3
+                                c-1.1-1-2-2-2.1-2.2c-0.2-0.4,1.5-3.9,1.9-3.9c1.2,0,7.8,6.3,9.7,9.2c2,3.3,2.5,5,2.5,8.9c0,3.9-0.6,5.9-2.9,9.8
+                                c-2.4,4.1-4.2,6-14.2,15.5c-3.4,3.2-5.7,6.1-6.9,8.7c-0.9,2-1.1,2.7-1.1,5.1c0,2.3,0.2,3.2,1,4.9c1.9,4,7.4,8.5,15.4,12.4
+                                c12.5,6.1,15.1,7.6,19.4,10.7c7.2,5.3,10.6,10.5,10.6,16c0,1.3,0.1,2.4,0.3,2.5c0.4,0.3,4.8-0.8,5.5-1.3
+                                C90.7,104.4,90.7,104.3,90.2,102.5z M20.3,23.3L20.3,23.3c-2,1-3.3,1.4-4.8,1.5L13.3,25l2.3-2.8c3.7-4.5,6.4-8.9,10-16
+                                c0.9-1.8,1.8-3.5,2-3.6c0.4-0.4,2.6,1.1,5.1,3.4l2.1,1.9l-1.9,2.8C28.2,17.5,24.5,21.2,20.3,23.3z M39.3,17.4
+                                c-1.2,1.7-6.5,5.7-8.6,6.5v0c-1.1,0.4-2.8,0.8-3.9,0.9L24.9,25l2.1-2.6c2.5-3.1,5.1-7,7-10.4c0.7-1.4,1.4-2.5,1.5-2.6
+                                c0.3-0.4,1.7,1.4,3,4.1l1.5,3L39.3,17.4z M44.6,10c-0.7,1.2-1.4,2.1-1.5,2.1c-0.1,0-1.5-1.4-3-3l-2.8-3l0.6-1.5
+                                c1.1-2.6,1.3-2.7,3.4-1c1.9,1.5,4.5,3.8,4.5,4.1C45.8,7.8,45.3,8.9,44.6,10z" />
+                </svg>
+                <h4>RanchiMall Pay</h4>
+            </a>
+            <theme-toggle></theme-toggle>
+        </header>
+        <section id="home" class="inner-page hide">
             <div id="user" class="hide grid user-element">
-                <div id="quick_actions_container" class="card">
+                <div id="quick_actions_container">
                     <button class="primary-action" onclick="showTokenTransfer('send')">
                         <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
                             width="24px" fill="#000000">
@@ -194,80 +219,7 @@
                         Scan FLO QR
                     </button>
                 </div>
-                <section id="wallet_section" class="card grid gap-1-5">
-                    <div class="flex align-center space-between">
-                        <h4 class="flex align-center">
-                            <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg"
-                                enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"
-                                fill="#000000">
-                                <g>
-                                    <rect fill="none" height="24" width="24" />
-                                </g>
-                                <g>
-                                    <path
-                                        d="M18,4H6C3.79,4,2,5.79,2,8v8c0,2.21,1.79,4,4,4h12c2.21,0,4-1.79,4-4V8C22,5.79,20.21,4,18,4z M16.14,13.77 c-0.24,0.2-0.57,0.28-0.88,0.2L4.15,11.25C4.45,10.52,5.16,10,6,10h12c0.67,0,1.26,0.34,1.63,0.84L16.14,13.77z M6,6h12 c1.1,0,2,0.9,2,2v0.55C19.41,8.21,18.73,8,18,8H6C5.27,8,4.59,8.21,4,8.55V8C4,6.9,4.9,6,6,6z" />
-                                </g>
-                            </svg>
-                            Wallet
-                        </h4>
-                    </div>
-                    <div class="grid gap-0-5">
-                        <h5>Balance</h5>
-                        <h1 class="h1" id="rupee_balance"></h1>
-                    </div>
-                    <!-- <div class="grid gap-1">
-                        <sm-input id="request_cashier_amount" type="number" name="amount" placeholder="Amount" animate>
-                        </sm-input>
-                    </div> -->
-                    <div class="grid gap-0-5">
-                        <div class="flex">
-                            <button class="wallet-action" onclick="userUI.requestTokenFromCashier()">
-                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-                                    width="24px" fill="#000000">
-                                    <path d="M0 0h24v24H0z" fill="none" />
-                                    <path
-                                        d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
-                                </svg>
-                                Top-up wallet
-                            </button>
-                            <button class="wallet-action" onclick="userUI.withdrawCashFromCashier()">
-                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
-                                    height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
-                                    <g>
-                                        <rect fill="none" height="24" width="24" />
-                                    </g>
-                                    <g>
-                                        <g>
-                                            <rect height="7" width="3" x="4" y="10" />
-                                            <rect height="7" width="3" x="10.5" y="10" />
-                                            <rect height="3" width="20" x="2" y="19" />
-                                            <rect height="7" width="3" x="17" y="10" />
-                                            <polygon points="12,1 2,6 2,8 22,8 22,6" />
-                                        </g>
-                                    </g>
-                                </svg>
-                                Transfer to bank
-                            </button>
-                        </div>
-                        <a href="#/history" class="button interact wallet-action">
-                            <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg"
-                                enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"
-                                fill="#000000">
-                                <path d="M0,0h24v24H0V0z" fill="none" />
-                                <g>
-                                    <path
-                                        d="M19.5,3.5L18,2l-1.5,1.5L15,2l-1.5,1.5L12,2l-1.5,1.5L9,2L7.5,3.5L6,2v14H3v3c0,1.66,1.34,3,3,3h12c1.66,0,3-1.34,3-3V2 L19.5,3.5z M19,19c0,0.55-0.45,1-1,1s-1-0.45-1-1v-3H8V5h11V19z" />
-                                    <rect height="2" width="6" x="9" y="7" />
-                                    <rect height="2" width="2" x="16" y="7" />
-                                    <rect height="2" width="6" x="9" y="10" />
-                                    <rect height="2" width="2" x="16" y="10" />
-                                </g>
-                            </svg>
-                            See transactions history
-                        </a>
-                    </div>
-                </section>
-                <div class="card">
+                <div class="">
                     <div class="flex align-center space-between">
                         <h4>Saved IDs</h4>
                         <button class="button" onclick="showPopup('save_id_popup')">Save FLO ID</button>
@@ -286,36 +238,14 @@
                 </div>
             </section>
         </section>
-        <section id="history" class="page hide grid gap-1">
-            <div class="grid gap-1">
-                <a href="#/home" class="button icon-only justify-self-start">
-                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
-                        fill="#000000">
-                        <path d="M0 0h24v24H0z" fill="none" />
-                        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
-                    </svg>
-                </a>
-                <div class="flex align-center space-between">
-                    <h4>Transactions history</h4>
-                    <strip-select id="history_type_selector">
-                        <strip-option value="payments" selected>Payments</strip-option>
-                        <strip-option value="wallet">Wallet</strip-option>
-                    </strip-select>
-                </div>
+        <section id="history" class="inner-page hide grid gap-1">
+            <h4>Payments history</h4>
+            <ul id="payments_history" class="observe-empty-state"></ul>
+            <div class=" empty-state gap-1 justify-center text-center">
+                <h4>No transactions</h4>
             </div>
-            <div id="payments_history_wrapper">
-                <ul id="payments_history" class="observe-empty-state"></ul>
-                <div class=" empty-state gap-1 justify-center text-center">
-                    <h4>No transactions</h4>
-                </div>
-            </div>
-            <div id="wallet_history_wrapper" class="hide">
-                <ul id="wallet_history" class="observe-empty-state"></ul>
-                <div class=" empty-state gap-1 justify-center text-center">
-                    <h4>No transactions</h4>
-                </div>
         </section>
-        <section id="contact" class="page hide">
+        <section id="contact" class="inner-page hide">
             <div class="flex align-center">
                 <a href="#/home" class="button icon-only margin-right-0-5">
                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
@@ -326,20 +256,77 @@
                 </a>
                 <h4 id="contact__title"></h4>
             </div>
-            <div id="contact__transactions"></div>
+            <ul id="contact__transactions"></ul>
             <div class="flex">
                 <button class="button flex-1">Pay</button>
                 <button class="button flex-1">Request</button>
             </div>
         </section>
-        <section id="activity" class="page page-layout hide">
-            <h4>Activity</h4>
+        <section id="requests" class="inner-page hide">
+            <h4>Payment requests</h4>
             <ul id="user-money-requests" class="observe-empty-state"></ul>
             <div class=" empty-state gap-1 justify-center text-center">
                 <h4>No requests</h4>
             </div>
         </section>
-        <section id="settings" class="page hide">
+        <section id="wallet" class="inner-page hide">
+            <div class="flex align-center space-between">
+                <h4 class="flex align-center">
+                    <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg"
+                        enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                        <g>
+                            <rect fill="none" height="24" width="24" />
+                        </g>
+                        <g>
+                            <path
+                                d="M18,4H6C3.79,4,2,5.79,2,8v8c0,2.21,1.79,4,4,4h12c2.21,0,4-1.79,4-4V8C22,5.79,20.21,4,18,4z M16.14,13.77 c-0.24,0.2-0.57,0.28-0.88,0.2L4.15,11.25C4.45,10.52,5.16,10,6,10h12c0.67,0,1.26,0.34,1.63,0.84L16.14,13.77z M6,6h12 c1.1,0,2,0.9,2,2v0.55C19.41,8.21,18.73,8,18,8H6C5.27,8,4.59,8.21,4,8.55V8C4,6.9,4.9,6,6,6z" />
+                        </g>
+                    </svg>
+                    Wallet
+                </h4>
+            </div>
+            <div class="grid gap-0-5">
+                <h5>Balance</h5>
+                <h1 class="h1" id="rupee_balance"></h1>
+            </div>
+            <div class="flex">
+                <button class="wallet-action" onclick="walletAction('deposit')">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                        fill="#000000">
+                        <path d="M0 0h24v24H0z" fill="none" />
+                        <path
+                            d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
+                    </svg>
+                    Top-up wallet
+                </button>
+                <button class="wallet-action" onclick="walletAction('deposit')">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
+                        viewBox="0 0 24 24" width="24px" fill="#000000">
+                        <g>
+                            <rect fill="none" height="24" width="24" />
+                        </g>
+                        <g>
+                            <g>
+                                <rect height="7" width="3" x="4" y="10" />
+                                <rect height="7" width="3" x="10.5" y="10" />
+                                <rect height="3" width="20" x="2" y="19" />
+                                <rect height="7" width="3" x="17" y="10" />
+                                <polygon points="12,1 2,6 2,8 22,8 22,6" />
+                            </g>
+                        </g>
+                    </svg>
+                    Transfer to bank
+                </button>
+            </div>
+            <div id="wallet_history_wrapper" class="grid gap-0-5">
+                <h4>Wallet history</h4>
+                <ul id="wallet_history" class="observe-empty-state"></ul>
+                <div class=" empty-state gap-1 justify-center text-center">
+                    <h4>No transactions</h4>
+                </div>
+            </div>
+        </section>
+        <section id="settings" class="inner-page hide">
             <h4>Settings</h4>
             <section class="grid gap-1">
                 <div class="grid">
@@ -359,7 +346,73 @@
                 </sm-form>
             </section>
         </section>
-    </section>
+        <nav id="main_navbar">
+            <ul>
+                <li>
+                    <a href="#/home" class="nav-item interact">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                            width="24px" fill="#000000">
+                            <path d="M0 0h24v24H0z" fill="none" />
+                            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+                        </svg>
+                        <span class="nav-item__title">Home</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#/history" class="nav-item interact" title='View payment requests'>
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                            height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                            <path d="M0,0h24v24H0V0z" fill="none" />
+                            <g>
+                                <path
+                                    d="M19.5,3.5L18,2l-1.5,1.5L15,2l-1.5,1.5L12,2l-1.5,1.5L9,2L7.5,3.5L6,2v14H3v3c0,1.66,1.34,3,3,3h12c1.66,0,3-1.34,3-3V2 L19.5,3.5z M19,19c0,0.55-0.45,1-1,1s-1-0.45-1-1v-3H8V5h11V19z" />
+                                <rect height="2" width="6" x="9" y="7" />
+                                <rect height="2" width="2" x="16" y="7" />
+                                <rect height="2" width="6" x="9" y="10" />
+                                <rect height="2" width="2" x="16" y="10" />
+                            </g>
+                        </svg>
+                        <span class="nav-item__title">History</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#/requests" class="nav-item interact" title='View payment requests'>
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                            width="24px" fill="#000000">
+                            <path d="M0 0h24v24H0z" fill="none" />
+                            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
+                        </svg>
+                        <span class="nav-item__title">Requests</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#/wallet" class="nav-item interact" title='View payment requests'>
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                            width="24px" fill="#000000">
+                            <path d="M0 0h24v24H0z" fill="none" />
+                            <path
+                                d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
+                        </svg>
+                        <span class="nav-item__title">Wallet</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#/settings" class="nav-item interact">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                            height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                            <g>
+                                <path d="M0,0h24v24H0V0z" fill="none" />
+                                <path
+                                    d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />
+                            </g>
+                        </svg>
+                        <span class="nav-item__title">Settings</span>
+                        </button>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+    </div>
     <!-- Popups -->
     <sm-popup id="save_id_popup">
         <header slot="header" class="popup__header">
@@ -452,6 +505,24 @@
             </sm-form>
         </section>
     </sm-popup>
+    <sm-popup id="wallet_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close justify-self-start" onclick="hidePopup()">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                    fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                </svg>
+            </button>
+            <h4 id="wallet_popup__title"></h4>
+        </header>
+        <sm-form>
+            <sm-input id="request_cashier_amount" type="number" name="amount" placeholder="Amount" animate>
+            </sm-input>
+            <button id="wallet_popup__cta" class="button button--primary cta" type="submit">Save</button>
+        </sm-form>
+    </sm-popup>
 
     <!-- templates -->
     <template id="saved_id_template">
@@ -510,6 +581,12 @@
             </div>
         </li>
     </template>
+    <template id="transaction_message_template">
+        <li class="transaction-message grid">
+            <h3 class="transaction-message__amount"></h3>
+            <time class="transaction-message__time"></time>
+        </li>
+    </template>
     <script src="scripts/components.js"></script>
     <script src="scripts/std_ui.js"></script>
     <script src="scripts/std_op.js"></script>
@@ -517,6 +594,7 @@
     <script src="scripts/fn_ui.js"></script>
     <script id="onLoadStartUp">
         function onLoadStartUp() {
+            showPage('loading')
             console.log("Starting the app! Please Wait!")
             floDapps.setCustomPrivKeyInput(getSignedIn)
             floDapps.setAppObjectStores({ savedIds: {} })
diff --git a/scripts/components.js b/scripts/components.js
index 9476c28..122b6f3 100644
--- a/scripts/components.js
+++ b/scripts/components.js
@@ -940,7 +940,7 @@ customElements.define('sm-notifications', class extends HTMLElement {
                 opacity: '1'
             },
             {
-                transform: `translateX(calc(${sign}${this.currentX}px ${sign} 1rem))`,
+                transform: `translateX(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`,
                 opacity: '0'
             }
         ], this.animationOptions).onfinish = () => {
diff --git a/scripts/fn_ui.js b/scripts/fn_ui.js
index 32bb412..e4f2a15 100644
--- a/scripts/fn_ui.js
+++ b/scripts/fn_ui.js
@@ -1,39 +1,46 @@
 /*jshint esversion: 8 */
+/**
+  * @yaireo/relative-time - javascript function to transform timestamp or date to local relative-time
+  *
+  * @version v1.0.0
+  * @homepage https://github.com/yairEO/relative-time
+  */
+
+!function (e, t) { var o = o || {}; "function" == typeof o && o.amd ? o([], t) : "object" == typeof exports && "object" == typeof module ? module.exports = t() : "object" == typeof exports ? exports.RelativeTime = t() : e.RelativeTime = t() }(this, (function () { const e = { year: 31536e6, month: 2628e6, day: 864e5, hour: 36e5, minute: 6e4, second: 1e3 }, t = "en", o = { numeric: "auto" }; function n(e) { e = { locale: (e = e || {}).locale || t, options: { ...o, ...e.options } }, this.rtf = new Intl.RelativeTimeFormat(e.locale, e.options) } return n.prototype = { from(t, o) { const n = t - (o || new Date); for (let t in e) if (Math.abs(n) > e[t] || "second" == t) return this.rtf.format(Math.round(n / e[t]), t) } }, n }));
+
+const relativeTime = new RelativeTime({ style: 'narrow' });
 const userUI = {};
-let paymentsHistoryLoader
-let walletHistoryLoader
 
-userUI.requestTokenFromCashier = function () {
-    let cashier = User.findCashier();
-    if (!cashier)
-        return notify("No cashier online", 'error');
+getRef('wallet_popup__cta').addEventListener('click', function () {
     let amount = parseFloat(getRef('request_cashier_amount').value.trim());
-    //get UPI txid from user
-    let upiTxID = prompt(`Send Rs. ${amount} to ${cashierUPI[cashier]} and enter UPI txid`);
-    if (!upiTxID)
-        return alert("Cancelled");
-    User.cashToToken(cashier, amount, upiTxID).then(result => {
-        console.log(result);
-        alert("Requested cashier. please wait!");
-    }).catch(error => console.error(error))
-}
-
-userUI.withdrawCashFromCashier = function () {
-    let cashier = User.findCashier();
-    if (!cashier)
-        return notify("No cashier online", 'error');
-    let amount = parseFloat(getRef('request_cashier_amount').value.trim());
-    //get confirmation from user
-    let upiID = prompt(`${amount} ${floGlobals.currency}# will be sent to ${cashier}. Enter UPI ID`);
-    if (!upiID)
-        return alert("Cancelled");
-    User.sendToken(cashier, amount, 'for token-to-cash').then(txid => {
-        console.warn(`Withdraw ${amount} from cashier ${cashier}`, txid);
-        User.tokenToCash(cashier, amount, txid, upiID).then(result => {
+    if (walletAction === 'deposit') {
+        //get UPI txid from user
+        let upiTxID = prompt(`Send Rs. ${amount} to ${cashierUPI[cashier]} and enter UPI txid`);
+        if (!upiTxID)
+            return alert("Cancelled");
+        User.cashToToken(cashier, amount, upiTxID).then(result => {
             console.log(result);
             alert("Requested cashier. please wait!");
         }).catch(error => console.error(error))
-    }).catch(error => console.error(error))
+    } else {
+        //get confirmation from user
+        let upiID = prompt(`${amount} ${floGlobals.currency}# will be sent to ${cashier}. Enter UPI ID`);
+        if (!upiID)
+            return alert("Cancelled");
+        User.sendToken(cashier, amount, 'for token-to-cash').then(txid => {
+            console.warn(`Withdraw ${amount} from cashier ${cashier}`, txid);
+            User.tokenToCash(cashier, amount, txid, upiID).then(result => {
+                console.log(result);
+                alert("Requested cashier. please wait!");
+            }).catch(error => console.error(error))
+        }).catch(error => console.error(error))
+    }
+})
+function walletAction(type) {
+    let cashier = User.findCashier();
+    if (!cashier)
+        return notify("No cashier online. Please try again in a while.", 'error');
+    showPopup('wallet_popup')
 }
 
 userUI.sendMoneyToUser = function (floID, amount, remark) {
@@ -333,13 +340,18 @@ const render = {
                 <button class="button" onclick="userUI.declineRequest('${vectorClock}')">Decline</button>`;
 
         return clone;
+    },
+    transactionMessage(details) {
+        const { tokenAmount, time, sender, receiver } = tokenAPI.util.parseTxData(details)
+        let messageType = sender === receiver ? 'self' : sender === myFloID ? 'sent' : 'received';
+        const clone = getRef('transaction_message_template').content.cloneNode(true).firstElementChild;
+        clone.classList.add(messageType);
+        clone.querySelector('.transaction-message__amount').textContent = formatAmount(tokenAmount);
+        clone.querySelector('.transaction-message__time').textContent = getFormattedTime(time * 1000);
+        return clone;
     }
 };
 
-getRef('history_type_selector').addEventListener('change', (e) => {
-    location.hash = `#/history?type=${e.target.value}`;
-})
-
 let currentUserAction;
 function showTokenTransfer(type) {
     getRef('tt_button').textContent = type;
@@ -352,7 +364,7 @@ function showTokenTransfer(type) {
     showPopup('token_transfer_popup');
 }
 
-saveId = async function () {
+async function saveId() {
     const floID = getRef('flo_id_to_save').value.trim();
     const title = getRef('flo_id_title_to_save').value.trim();
     floGlobals.savedIds[floID] = { title }
diff --git a/scripts/std_ui.js b/scripts/std_ui.js
index 96afcc7..926ba1c 100644
--- a/scripts/std_ui.js
+++ b/scripts/std_ui.js
@@ -2,6 +2,9 @@
 // Global variables
 const domRefs = {};
 const currentYear = new Date().getFullYear();
+let paymentsHistoryLoader = null;
+let walletHistoryLoader = null;
+let contactHistoryLoader = null;
 
 //Checks for internet connection status
 if (!navigator.onLine)
@@ -309,67 +312,169 @@ async function showPage(targetPage, options = {}) {
             break;
         case 'contact':
             getRef('contact__title').textContent = getFloIdTitle(params.floId)
+            Promise.all([
+                tokenAPI.fetch_api(`api/v1.0/getTokenTransactions?token=rupee&senderFloAddress=${myFloID}&destFloAddress=${params.floId}`),
+                tokenAPI.fetch_api(`api/v1.0/getTokenTransactions?token=rupee&senderFloAddress=${params.floId}&destFloAddress=${myFloID}`)])
+                .then(([sentTransactions, receivedTransactions]) => {
+                    const allTransactions = Object.values({ ...sentTransactions.transactions, ...receivedTransactions.transactions }).sort((a, b) => b.transactionDetails.time - a.transactionDetails.time)
+                    if (contactHistoryLoader) {
+                        contactHistoryLoader.update(allTransactions)
+                    } else {
+                        contactHistoryLoader = new LazyLoader('#contact__transactions', allTransactions, render.transactionMessage, { bottomFirst: true });
+                    }
+                    contactHistoryLoader.init()
+                }).catch(err => {
+                    console.error(err)
+                })
             break;
         case 'history':
-            let transactionsList = []
-            if (!params.hasOwnProperty('type')) {
-                history.replaceState(null, null, '#/history?type=payments');
-                params.type = 'payments'
-            }
-            switch (params.type) {
-                case 'payments':
-                    if (paymentsHistoryLoader)
-                        paymentsHistoryLoader.clear()
-                    getRef('payments_history').innerHTML = '<sm-spinner></sm-spinner>'
-                    getRef('payments_history_wrapper').classList.remove('hide')
-                    getRef('wallet_history_wrapper').classList.add('hide')
-                    tokenAPI.getAllTxs(myFloID).then(({ transactions }) => {
-                        for (const transactionId in transactions) {
-                            transactionsList.push({
-                                ...tokenAPI.util.parseTxData(transactions[transactionId]),
-                                txid: transactionId
-                            })
-                        }
-                        if (paymentsHistoryLoader) {
-                            paymentsHistoryLoader.update(transactionsList)
-                        } else {
-                            paymentsHistoryLoader = new LazyLoader('#payments_history', transactionsList, render.transactionCard);
-                        }
-                        paymentsHistoryLoader.init()
-                    }).catch(e => {
-                        console.error(e)
+            const paymentTransactions = []
+            if (paymentsHistoryLoader)
+                paymentsHistoryLoader.clear()
+            getRef('payments_history').innerHTML = '<sm-spinner></sm-spinner>'
+            tokenAPI.getAllTxs(myFloID).then(({ transactions }) => {
+                for (const transactionId in transactions) {
+                    paymentTransactions.push({
+                        ...tokenAPI.util.parseTxData(transactions[transactionId]),
+                        txid: transactionId
                     })
-                    break;
-                case 'wallet':
-                    if (walletHistoryLoader)
-                        walletHistoryLoader.clear()
-                    getRef('wallet_history').innerHTML = '<sm-spinner></sm-spinner>'
-                    getRef('payments_history_wrapper').classList.add('hide')
-                    getRef('wallet_history_wrapper').classList.remove('hide')
-                    const requests = User.cashierRequests;
-                    for (const transactionId in requests) {
-                        transactionsList.push(User.cashierRequests[transactionId])
-                    }
-                    if (walletHistoryLoader) {
-                        walletHistoryLoader.update(transactionsList)
-                    } else {
-                        walletHistoryLoader = new LazyLoader('#wallet_history', transactionsList, render.walletRequestCard);
-                    }
-                    walletHistoryLoader.init()
-                    break;
-                default:
-                    break;
+                }
+                if (paymentsHistoryLoader) {
+                    paymentsHistoryLoader.update(paymentTransactions)
+                } else {
+                    paymentsHistoryLoader = new LazyLoader('#payments_history', paymentTransactions, render.transactionCard);
+                }
+                paymentsHistoryLoader.init()
+            }).catch(e => {
+                console.error(e)
+            })
+            break;
+        case 'wallet':
+            const walletTransactions = []
+            if (walletHistoryLoader)
+                walletHistoryLoader.clear()
+            getRef('wallet_history').innerHTML = '<sm-spinner></sm-spinner>'
+            const requests = User.cashierRequests;
+            for (const transactionId in requests) {
+                walletTransactions.push(User.cashierRequests[transactionId])
             }
-            getRef('history_type_selector').value = params.type
+            if (walletHistoryLoader) {
+                walletHistoryLoader.update(walletTransactions)
+            } else {
+                walletHistoryLoader = new LazyLoader('#wallet_history', walletTransactions, render.walletRequestCard);
+            }
+            walletHistoryLoader.init()
             break;
         default:
             break;
     }
+    if (pageId !== 'history') {
+        if (paymentsHistoryLoader)
+            paymentsHistoryLoader.clear()
+    }
+    if (pageId !== 'contact') {
+        if (contactHistoryLoader)
+            contactHistoryLoader.clear()
+    }
+    if (pageId !== 'wallet') {
+        if (walletHistoryLoader)
+            walletHistoryLoader.clear()
+    }
 
     if (pagesData.lastPage !== pageId) {
+        const animOptions = {
+            duration: 100,
+            fill: 'forwards',
+            easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
+        }
+        let previousActiveElement = getRef('main_navbar').querySelector('.nav-item--active')
+        const currentActiveElement = document.querySelector(`.nav-item[href="#/${pageId}"]`)
+        if (currentActiveElement) {
+            if (getRef('main_navbar').classList.contains('hide')) {
+                getRef('main_card').classList.remove('nav-hidden')
+                getRef('main_navbar').classList.remove('hide-away')
+                getRef('main_navbar').classList.remove('hide')
+                getRef('main_navbar').animate([
+                    {
+                        transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
+                        opacity: 0,
+                    },
+                    {
+                        transform: `none`,
+                        opacity: 1,
+                    },
+                ], { ...animOptions, easing: 'ease-in' })
+            }
+            getRef('main_header').classList.remove('hide')
+            const previousActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(previousActiveElement)
+            const currentActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(currentActiveElement)
+            const isOnTop = previousActiveElementIndex < currentActiveElementIndex
+            const currentIndicator = createElement('div', { className: 'nav-item__indicator' });
+            let previousIndicator = getRef('main_navbar').querySelector('.nav-item__indicator')
+            if (!previousIndicator) {
+                previousIndicator = currentIndicator.cloneNode(true)
+                previousActiveElement = currentActiveElement
+                previousActiveElement.append(previousIndicator)
+            } else if (currentActiveElementIndex !== previousActiveElementIndex) {
+                const indicatorDimensions = previousIndicator.getBoundingClientRect()
+                const currentActiveElementDimensions = currentActiveElement.getBoundingClientRect()
+                let moveBy
+                if (isMobileView) {
+                    moveBy = ((currentActiveElementDimensions.width - indicatorDimensions.width) / 2) + indicatorDimensions.width
+                } else {
+                    moveBy = ((currentActiveElementDimensions.height - indicatorDimensions.height) / 2) + indicatorDimensions.height
+                }
+                indicatorObserver.observe(previousIndicator)
+                previousIndicator.animate([
+                    {
+                        transform: 'none',
+                        opacity: 1,
+                    },
+                    {
+                        transform: `translate${isMobileView ? 'X' : 'Y'}(${isOnTop ? `${moveBy}px` : `-${moveBy}px`})`,
+                        opacity: 0,
+                    },
+                ], { ...animOptions, easing: 'ease-in' }).onfinish = () => {
+                    previousIndicator.remove()
+                }
+                tempData = {
+                    currentActiveElement,
+                    currentIndicator,
+                    isOnTop,
+                    animOptions,
+                    moveBy
+                }
+            }
+            previousActiveElement.classList.remove('nav-item--active');
+            currentActiveElement.classList.add('nav-item--active')
+        } else {
+            if (!getRef('main_navbar').classList.contains('hide')) {
+                getRef('main_card').classList.add('nav-hidden')
+                getRef('main_navbar').classList.add('hide-away')
+                getRef('main_navbar').animate([
+                    {
+                        transform: `none`,
+                        opacity: 1,
+                    },
+                    {
+                        transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
+                        opacity: 0,
+                    },
+                ], {
+                    duration: 200,
+                    fill: 'forwards',
+                    easing: 'ease'
+                }).onfinish = () => {
+                    getRef('main_navbar').classList.add('hide')
+                }
+                getRef('main_header').classList.add('hide')
+            }
+        }
         document.querySelectorAll('.page').forEach(page => page.classList.add('hide'))
+        getRef(pageId).closest('.page').classList.remove('hide')
+        document.querySelectorAll('.inner-page').forEach(page => page.classList.add('hide'))
         getRef(pageId).classList.remove('hide')
-        getRef('pages_container').style.overflowY = "hidden";
+        getRef('main_card').style.overflowY = "hidden";
         getRef(pageId).animate([
             {
                 opacity: 0,
@@ -384,7 +489,7 @@ async function showPage(targetPage, options = {}) {
                 duration: 300,
                 easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
             }).onfinish = () => {
-                getRef('pages_container').style.overflowY = "";
+                getRef('main_card').style.overflowY = "";
             }
         pagesData.lastPage = pageId
     }
@@ -393,11 +498,31 @@ async function showPage(targetPage, options = {}) {
     pagesData.openedPages.add(pageId)
 
 }
+const indicatorObserver = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+        if (!entry.isIntersecting) {
+            const { currentActiveElement, currentIndicator, isOnTop, animOptions, moveBy } = tempData
+            currentActiveElement.append(currentIndicator)
+            currentIndicator.animate([
+                {
+                    transform: `translate${isMobileView ? 'X' : 'Y'}(${isOnTop ? `-${moveBy}px` : `${moveBy}px`})`,
+                    opacity: 0,
+                },
+                {
+                    transform: 'none',
+                    opacity: 1
+                },
+            ], { ...animOptions, easing: 'ease-out' })
+        }
+    })
+}, {
+    threshold: 1
+})
 
 // class based lazy loading
 class LazyLoader {
     constructor(container, elementsToRender, renderFn, options = {}) {
-        const { batchSize = 10, freshRender } = options
+        const { batchSize = 10, freshRender, bottomFirst = false } = options
 
         this.elementsToRender = elementsToRender
         this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || []
@@ -406,6 +531,7 @@ class LazyLoader {
 
         this.batchSize = batchSize
         this.freshRender = freshRender
+        this.bottomFirst = bottomFirst
 
         this.lazyContainer = document.querySelector(container)
 
@@ -429,7 +555,11 @@ class LazyLoader {
             mutationList.forEach(mutation => {
                 if (mutation.type === 'childList') {
                     if (mutation.addedNodes.length) {
-                        this.intersectionObserver.observe(this.lazyContainer.lastElementChild)
+                        if (this.bottomFirst)
+                            this.intersectionObserver.observe(this.lazyContainer.firstElementChild)
+                        else
+                            this.intersectionObserver.observe(this.lazyContainer.lastElementChild)
+
                     }
                 }
             })
@@ -454,10 +584,21 @@ class LazyLoader {
             this.updateStartIndex = 0
             this.updateEndIndex = this.arrayOfElements.length > this.batchSize ? this.batchSize : this.arrayOfElements.length
         }
-        for (let index = this.updateStartIndex; index < this.updateEndIndex; index++) {
-            frag.append(this.renderFn(this.arrayOfElements[index]))
+        if (this.bottomFirst) {
+            for (let index = this.updateStartIndex; index < this.updateEndIndex; index++) {
+                frag.prepend(this.renderFn(this.arrayOfElements[index]))
+            }
+            this.lazyContainer.prepend(frag)
+        } else {
+            for (let index = this.updateStartIndex; index < this.updateEndIndex; index++) {
+                frag.append(this.renderFn(this.arrayOfElements[index]))
+            }
+            this.lazyContainer.append(frag)
         }
-        this.lazyContainer.append(frag)
+        if (!lazyLoad && this.bottomFirst)
+            this.lazyContainer.scrollTo({
+                top: this.lazyContainer.scrollHeight,
+            })
         // Callback to be called if elements are updated or rendered for first time
         if (!lazyLoad && this.freshRender)
             this.freshRender()

From 040771d460bd06d0b2a0b13a7003d95c3b2e3eec Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Fri, 15 Apr 2022 16:00:12 +0530
Subject: [PATCH 7/8] UI update

---
 css/main.css     |  37 +++++----
 css/main.min.css |   2 +-
 css/main.scss    |  34 ++++----
 index.html       | 198 ++++++++++++++++++++++++++++++++---------------
 4 files changed, 171 insertions(+), 100 deletions(-)

diff --git a/css/main.css b/css/main.css
index c3a8a0a..de46e3b 100644
--- a/css/main.css
+++ b/css/main.css
@@ -678,8 +678,15 @@ h3 {
           clip-path: circle(0);
 }
 
+#home {
+  padding: 0;
+}
+
 #user {
+  position: relative;
   gap: 0.5rem;
+  height: 100%;
+  padding: 0 1.5rem;
 }
 
 #quick_actions_container {
@@ -713,14 +720,6 @@ h3 {
 }
 
 .wallet-action {
-  display: flex;
-  white-space: normal;
-  font-size: 0.85rem;
-  padding: 0.8rem 0.6rem !important;
-  color: rgba(var(--text-color), 1);
-  text-align: center;
-  align-items: center;
-  justify-content: flex-start;
   background-color: rgba(var(--text-color), 0.03);
   flex: 1;
 }
@@ -849,6 +848,7 @@ h3 {
 #payments_history {
   display: grid;
   gap: 2rem;
+  padding-bottom: 4rem;
 }
 
 .transaction {
@@ -914,6 +914,15 @@ h3 {
   background-color: rgba(var(--foreground-color), 1);
 }
 
+#add_address_button {
+  border-radius: 0.5rem;
+  color: rgba(var(--background-color), 1);
+  background-color: var(--accent-color);
+}
+#add_address_button .icon {
+  fill: rgba(var(--background-color), 1);
+}
+
 #transaction_result {
   display: grid;
   gap: 0.5rem;
@@ -1132,17 +1141,7 @@ h3 {
   }
 
   #saved_ids_list {
-    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
-  }
-
-  .saved-id {
-    padding: 1rem;
-    border-radius: 0.5rem;
-    background-color: rgba(var(--text-color), 0.03);
-    grid-template-columns: minmax(0, 1fr);
-    justify-content: center;
-    text-align: center;
-    gap: 0.5rem;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
   }
 }
 @media screen and (min-width: 56rem) {
diff --git a/css/main.min.css b/css/main.min.css
index c2899dc..8371e1c 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #256eff;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s;position:relative;display:flex;flex-direction:column}body[data-theme=dark]{--accent-color: #90b8f8;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1)}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:1rem}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details{padding:1rem 0}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}h3{font-size:1.2rem;line-height:1.3}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.page{height:100%}.page-layout{display:grid;gap:1.5rem 0;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;align-content:flex-start}.page-layout>*{grid-column:2/3}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem;cursor:pointer}#secondary_pages{display:flex;flex-direction:column;width:100%}#secondary_pages header{padding:1.5rem}#secondary_pages .inner-page{height:100%}#landing>section{justify-content:center;justify-items:center;align-items:center;text-align:center;padding:8vw 0}#landing h1{font-size:clamp(2rem,5vw,5rem)}#sign_in,#sign_up{justify-items:center;align-content:center}#sign_in section,#sign_up section{margin-top:-8rem;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#main_header{padding:1.5rem}#main_card{display:flex;flex-direction:column;height:100%;width:100%;background-color:rgba(var(--foreground-color), 1);transition:background-color .3s}#main_navbar{display:flex;background:rgba(var(--text-color), 0.03)}#main_navbar.hide-away{position:absolute}#main_navbar ul{display:flex;height:100%;width:100%}#main_navbar ul li{width:100%}.nav-item{position:relative;display:flex;flex:1;width:100%;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .3rem;color:var(--text-color);font-size:.7rem;border-radius:.3rem}.nav-item .icon{transition:transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item__title{margin-top:.3rem;transition:opacity .2s,transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item--active{color:var(--accent-color)}.nav-item--active .icon{fill:var(--accent-color);transform:translateY(50%)}.nav-item--active .nav-item__title{transform:translateY(100%);opacity:0}.nav-item__indicator{position:absolute;bottom:0;width:2rem;height:.3rem;background:var(--accent-color);border-radius:1rem 1rem 0 0;z-index:1}.inner-page{padding:0 1.5rem;flex:1;overflow-y:auto;align-content:start}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.clip{-webkit-clip-path:circle(0);clip-path:circle(0)}#user{gap:.5rem}#quick_actions_container{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill, minmax(4rem, 1fr))}.primary-action{display:flex;flex-direction:column;align-items:center;padding:.8rem;gap:.5rem;white-space:normal;font-size:.8rem;border-radius:.5rem;font-weight:400;background-color:rgba(var(--text-color), 0.03);text-align:center}.primary-action .icon{fill:var(--accent-color)}#rupee_balance span:first-of-type{font-size:1.5rem}#rupee_balance span:last-of-type{font-size:.8rem}.wallet-action{display:flex;white-space:normal;font-size:.85rem;padding:.8rem .6rem !important;color:rgba(var(--text-color), 1);text-align:center;align-items:center;justify-content:flex-start;background-color:rgba(var(--text-color), 0.03);flex:1}.wallet-action:nth-of-type(2){margin-left:.5rem}.wallet-action .icon{margin-right:.5rem;fill:var(--accent-color)}#saved_ids_list{display:grid;grid-template-columns:minmax(0, 1fr);gap:1rem;margin-top:1.5rem}.saved-id{grid-template-columns:auto 1fr;gap:0 .8rem;border-radius:.3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center}.saved-id.highlight{box-shadow:0 0 .1rem .1rem var(--accent-color) inset}.saved-id .edit-saved{padding:.3rem;position:relative;justify-self:center}.saved-id .edit-saved .icon{position:absolute;height:1.2rem;width:1.2rem;right:0;bottom:0;border-radius:.5rem;padding:.2rem;background-color:rgba(var(--background-color), 1)}.saved-id__initials{display:flex;align-items:center;justify-content:center;height:2.4rem;width:2.4rem;font-size:1.2rem;text-transform:uppercase;color:rgba(var(--background-color), 1);font-weight:700;line-height:1;background-color:var(--accent-color);justify-self:flex-start;border-radius:2rem}.saved-id__title{font-size:.9rem;font-weight:500}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:1rem}#contact{display:flex;flex-direction:column;padding:0;height:100%}#contact>*{padding:1rem}#contact__transactions{display:grid;gap:.5rem;overflow-y:auto;flex:1;padding:0 max(1rem,8vw);align-items:flex-start}.transaction-message{background-color:rgba(var(--text-color), 0.06);padding:1rem;border-radius:.5rem;justify-self:flex-start;border-radius:0 1rem 1rem 1rem;gap:.5rem}.transaction-message.received{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}.transaction-message.received+.transaction-message.received{border-radius:1rem}.transaction-message.sent{margin-left:auto;justify-self:flex-end;border-radius:1rem 1rem 0 1rem;text-align:right}.transaction-message__amount{font-size:1.2rem}.transaction-message__time{opacity:.8;font-size:.8rem}#wallet_history_wrapper{margin-top:1.5rem;padding-bottom:3rem}#payments_history{display:grid;gap:2rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;align-items:center;border-radius:.3rem}.transaction.sent .icon{fill:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount{color:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount::before{content:"- "}.transaction.received .icon{fill:var(--green)}.transaction.received .transaction__amount{color:var(--green)}.transaction.received .transaction__amount::before{content:"+ "}.transaction__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:2rem}.transaction__receiver{font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8)}.transaction__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{font-size:1rem;font-weight:700;grid-area:1/3/3/4}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}#transaction_result{display:grid;gap:.5rem;height:max(40vh,24rem);align-items:center;justify-content:center;text-align:center;align-content:center}#transaction_result.success .icon--failed{display:none}#transaction_result.failed .icon--success{display:none}#transaction_result h3{text-align:center;width:100%}#transaction_result .icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:1rem;-webkit-animation:popup 1s;animation:popup 1s}#transaction_result .icon--success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}#transaction_result .icon--failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}#transaction_result sm-copy{font-size:.8rem}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}.cashier-request,.wallet-request,.payment-request{display:flex;gap:1rem;align-items:center;padding:.8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06)}.cashier-request:not(:last-of-type),.wallet-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:1rem}.cashier-request__time,.wallet-request__time,.payment-request__time{font-size:.8rem}.payment-request{display:grid;grid-template-columns:1fr auto}.payment-request__amount{font-weight:700;text-align:right}.wallet-request{align-items:initial;flex-direction:column}.wallet-request__details{font-weight:700}.wallet-request__status{font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;font-weight:500}.wallet-request__status .icon{margin-right:.3rem}.wallet-request__status.pending .icon{fill:var(--yellow)}.wallet-request__status.completed .icon{fill:var(--green)}.wallet-request__status.rejected .icon{fill:var(--danger-color)}.wallet-request__note{font-size:.8rem}@media screen and (max-width: 40rem){#main_navbar.hide-away{bottom:0;left:0;right:0}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}body{align-items:center;justify-content:center}#main_card{position:relative;border-radius:.5rem;overflow:hidden;box-shadow:0 .1rem .2rem rgba(0,0,0,.05),0 1rem 3rem rgba(0,0,0,.2)}#main_card:not(.nav-hidden){display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"nav header" "nav ."}#main_header{grid-area:header}#main_navbar{grid-area:nav;border-top:none;flex-direction:column;height:100%}#main_navbar ul{flex-direction:column;gap:.5rem;padding:.3rem}#main_navbar ul li:last-of-type{margin-top:auto}.nav-item{aspect-ratio:1/1}.nav-item__indicator{width:.25rem;height:50%;left:0;border-radius:0 1rem 1rem 0;bottom:auto}.card{padding:1.5rem}#user{gap:1rem;align-items:flex-start}#saved_ids_list{grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr))}.saved-id{padding:1rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.03);grid-template-columns:minmax(0, 1fr);justify-content:center;text-align:center;gap:.5rem}}@media screen and (min-width: 56rem){#main_card{height:80vh;width:56rem}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}button,.button:not([disabled]){transition:background-color .3s,filter .3s}button:hover,.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #256eff;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s;position:relative;display:flex;flex-direction:column}body[data-theme=dark]{--accent-color: #90b8f8;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1)}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:1rem}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details{padding:1rem 0}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}h3{font-size:1.2rem;line-height:1.3}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.page{height:100%}.page-layout{display:grid;gap:1.5rem 0;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;align-content:flex-start}.page-layout>*{grid-column:2/3}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem;cursor:pointer}#secondary_pages{display:flex;flex-direction:column;width:100%}#secondary_pages header{padding:1.5rem}#secondary_pages .inner-page{height:100%}#landing>section{justify-content:center;justify-items:center;align-items:center;text-align:center;padding:8vw 0}#landing h1{font-size:clamp(2rem,5vw,5rem)}#sign_in,#sign_up{justify-items:center;align-content:center}#sign_in section,#sign_up section{margin-top:-8rem;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#main_header{padding:1.5rem}#main_card{display:flex;flex-direction:column;height:100%;width:100%;background-color:rgba(var(--foreground-color), 1);transition:background-color .3s}#main_navbar{display:flex;background:rgba(var(--text-color), 0.03)}#main_navbar.hide-away{position:absolute}#main_navbar ul{display:flex;height:100%;width:100%}#main_navbar ul li{width:100%}.nav-item{position:relative;display:flex;flex:1;width:100%;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .3rem;color:var(--text-color);font-size:.7rem;border-radius:.3rem}.nav-item .icon{transition:transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item__title{margin-top:.3rem;transition:opacity .2s,transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item--active{color:var(--accent-color)}.nav-item--active .icon{fill:var(--accent-color);transform:translateY(50%)}.nav-item--active .nav-item__title{transform:translateY(100%);opacity:0}.nav-item__indicator{position:absolute;bottom:0;width:2rem;height:.3rem;background:var(--accent-color);border-radius:1rem 1rem 0 0;z-index:1}.inner-page{padding:0 1.5rem;flex:1;overflow-y:auto;align-content:start}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.clip{-webkit-clip-path:circle(0);clip-path:circle(0)}#home{padding:0}#user{position:relative;gap:.5rem;height:100%;padding:0 1.5rem}#quick_actions_container{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill, minmax(4rem, 1fr))}.primary-action{display:flex;flex-direction:column;align-items:center;padding:.8rem;gap:.5rem;white-space:normal;font-size:.8rem;border-radius:.5rem;font-weight:400;background-color:rgba(var(--text-color), 0.03);text-align:center}.primary-action .icon{fill:var(--accent-color)}#rupee_balance span:first-of-type{font-size:1.5rem}#rupee_balance span:last-of-type{font-size:.8rem}.wallet-action{background-color:rgba(var(--text-color), 0.03);flex:1}.wallet-action:nth-of-type(2){margin-left:.5rem}.wallet-action .icon{margin-right:.5rem;fill:var(--accent-color)}#saved_ids_list{display:grid;grid-template-columns:minmax(0, 1fr);gap:1rem;margin-top:1.5rem}.saved-id{grid-template-columns:auto 1fr;gap:0 .8rem;border-radius:.3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center}.saved-id.highlight{box-shadow:0 0 .1rem .1rem var(--accent-color) inset}.saved-id .edit-saved{padding:.3rem;position:relative;justify-self:center}.saved-id .edit-saved .icon{position:absolute;height:1.2rem;width:1.2rem;right:0;bottom:0;border-radius:.5rem;padding:.2rem;background-color:rgba(var(--background-color), 1)}.saved-id__initials{display:flex;align-items:center;justify-content:center;height:2.4rem;width:2.4rem;font-size:1.2rem;text-transform:uppercase;color:rgba(var(--background-color), 1);font-weight:700;line-height:1;background-color:var(--accent-color);justify-self:flex-start;border-radius:2rem}.saved-id__title{font-size:.9rem;font-weight:500}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:1rem}#contact{display:flex;flex-direction:column;padding:0;height:100%}#contact>*{padding:1rem}#contact__transactions{display:grid;gap:.5rem;overflow-y:auto;flex:1;padding:0 max(1rem,8vw);align-items:flex-start}.transaction-message{background-color:rgba(var(--text-color), 0.06);padding:1rem;border-radius:.5rem;justify-self:flex-start;border-radius:0 1rem 1rem 1rem;gap:.5rem}.transaction-message.received{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}.transaction-message.received+.transaction-message.received{border-radius:1rem}.transaction-message.sent{margin-left:auto;justify-self:flex-end;border-radius:1rem 1rem 0 1rem;text-align:right}.transaction-message__amount{font-size:1.2rem}.transaction-message__time{opacity:.8;font-size:.8rem}#wallet_history_wrapper{margin-top:1.5rem;padding-bottom:3rem}#payments_history{display:grid;gap:2rem;padding-bottom:4rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;align-items:center;border-radius:.3rem}.transaction.sent .icon{fill:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount{color:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount::before{content:"- "}.transaction.received .icon{fill:var(--green)}.transaction.received .transaction__amount{color:var(--green)}.transaction.received .transaction__amount::before{content:"+ "}.transaction__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:2rem}.transaction__receiver{font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8)}.transaction__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{font-size:1rem;font-weight:700;grid-area:1/3/3/4}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}#add_address_button{border-radius:.5rem;color:rgba(var(--background-color), 1);background-color:var(--accent-color)}#add_address_button .icon{fill:rgba(var(--background-color), 1)}#transaction_result{display:grid;gap:.5rem;height:max(40vh,24rem);align-items:center;justify-content:center;text-align:center;align-content:center}#transaction_result.success .icon--failed{display:none}#transaction_result.failed .icon--success{display:none}#transaction_result h3{text-align:center;width:100%}#transaction_result .icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:1rem;-webkit-animation:popup 1s;animation:popup 1s}#transaction_result .icon--success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}#transaction_result .icon--failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}#transaction_result sm-copy{font-size:.8rem}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}.cashier-request,.wallet-request,.payment-request{display:flex;gap:1rem;align-items:center;padding:.8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06)}.cashier-request:not(:last-of-type),.wallet-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:1rem}.cashier-request__time,.wallet-request__time,.payment-request__time{font-size:.8rem}.payment-request{display:grid;grid-template-columns:1fr auto}.payment-request__amount{font-weight:700;text-align:right}.wallet-request{align-items:initial;flex-direction:column}.wallet-request__details{font-weight:700}.wallet-request__status{font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;font-weight:500}.wallet-request__status .icon{margin-right:.3rem}.wallet-request__status.pending .icon{fill:var(--yellow)}.wallet-request__status.completed .icon{fill:var(--green)}.wallet-request__status.rejected .icon{fill:var(--danger-color)}.wallet-request__note{font-size:.8rem}@media screen and (max-width: 40rem){#main_navbar.hide-away{bottom:0;left:0;right:0}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}body{align-items:center;justify-content:center}#main_card{position:relative;border-radius:.5rem;overflow:hidden;box-shadow:0 .1rem .2rem rgba(0,0,0,.05),0 1rem 3rem rgba(0,0,0,.2)}#main_card:not(.nav-hidden){display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"nav header" "nav ."}#main_header{grid-area:header}#main_navbar{grid-area:nav;border-top:none;flex-direction:column;height:100%}#main_navbar ul{flex-direction:column;gap:.5rem;padding:.3rem}#main_navbar ul li:last-of-type{margin-top:auto}.nav-item{aspect-ratio:1/1}.nav-item__indicator{width:.25rem;height:50%;left:0;border-radius:0 1rem 1rem 0;bottom:auto}.card{padding:1.5rem}#user{gap:1rem;align-items:flex-start}#saved_ids_list{grid-template-columns:repeat(auto-fill, minmax(10rem, 1fr))}}@media screen and (min-width: 56rem){#main_card{height:80vh;width:56rem}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}button,.button:not([disabled]){transition:background-color .3s,filter .3s}button:hover,.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 22bba46..7136d2b 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -633,8 +633,14 @@ h3 {
 .clip {
   clip-path: circle(0);
 }
+#home {
+  padding: 0;
+}
 #user {
+  position: relative;
   gap: 0.5rem;
+  height: 100%;
+  padding: 0 1.5rem;
 }
 #quick_actions_container {
   display: grid;
@@ -666,14 +672,6 @@ h3 {
   }
 }
 .wallet-action {
-  display: flex;
-  white-space: normal;
-  font-size: 0.85rem;
-  padding: 0.8rem 0.6rem !important;
-  color: rgba(var(--text-color), 1);
-  text-align: center;
-  align-items: center;
-  justify-content: flex-start;
   background-color: rgba(var(--text-color), 0.03);
   flex: 1;
   &:nth-of-type(2) {
@@ -795,6 +793,7 @@ h3 {
 #payments_history {
   display: grid;
   gap: 2rem;
+  padding-bottom: 4rem;
 }
 .transaction {
   grid-template-columns: auto 1fr auto;
@@ -860,6 +859,14 @@ h3 {
   border-radius: 3rem;
   background-color: rgba(var(--foreground-color), 1);
 }
+#add_address_button {
+  border-radius: 0.5rem;
+  color: rgba(var(--background-color), 1);
+  background-color: var(--accent-color);
+  .icon {
+    fill: rgba(var(--background-color), 1);
+  }
+}
 
 #transaction_result {
   display: grid;
@@ -1057,16 +1064,7 @@ h3 {
     align-items: flex-start;
   }
   #saved_ids_list {
-    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
-  }
-  .saved-id {
-    padding: 1rem;
-    border-radius: 0.5rem;
-    background-color: rgba(var(--text-color), 0.03);
-    grid-template-columns: minmax(0, 1fr);
-    justify-content: center;
-    text-align: center;
-    gap: 0.5rem;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
   }
 }
 @media screen and (min-width: 56rem) {
diff --git a/index.html b/index.html
index d0ef436..27346b3 100644
--- a/index.html
+++ b/index.html
@@ -57,7 +57,7 @@
     </sm-popup>
     <div id="secondary_pages" class="page hide">
         <header class="flex align-center gap-1">
-            <a href="#/home" class="flex align-center flex-1">
+            <div class="flex align-center flex-1">
                 <svg class="icon" style="margin-right:0.3rem" viewBox="0 0 96 108"
                     style="enable-background:new 0 0 90.5 106.3;" xml:space="preserve">
                     <path d="M90.2,102.5c-2.4-8.2-9.9-14.5-27.4-23.1c-7.1-3.5-11.8-6.2-14-8.3c-1.7-1.6-3.5-4-4.2-5.5c-0.7-1.7-0.7-5.5,0-7.5
@@ -84,7 +84,7 @@
                                 c1.1-2.6,1.3-2.7,3.4-1c1.9,1.5,4.5,3.8,4.5,4.1C45.8,7.8,45.3,8.9,44.6,10z" />
                 </svg>
                 <h4>RanchiMall Pay</h4>
-            </a>
+            </div>
             <theme-toggle></theme-toggle>
         </header>
         <article id="landing" class="inner-page page-layout hide">
@@ -140,7 +140,7 @@
     </div>
     <div id="main_card" class="page hide">
         <header id="main_header" class="flex align-center space-between">
-            <a href="#/home" class="flex align-center flex-1">
+            <div class="flex align-center flex-1">
                 <svg class="icon" style="margin-right:0.3rem" viewBox="0 0 96 108"
                     style="enable-background:new 0 0 90.5 106.3;" xml:space="preserve">
                     <path d="M90.2,102.5c-2.4-8.2-9.9-14.5-27.4-23.1c-7.1-3.5-11.8-6.2-14-8.3c-1.7-1.6-3.5-4-4.2-5.5c-0.7-1.7-0.7-5.5,0-7.5
@@ -167,68 +167,137 @@
                                 c1.1-2.6,1.3-2.7,3.4-1c1.9,1.5,4.5,3.8,4.5,4.1C45.8,7.8,45.3,8.9,44.6,10z" />
                 </svg>
                 <h4>RanchiMall Pay</h4>
-            </a>
+            </div>
             <theme-toggle></theme-toggle>
         </header>
         <section id="home" class="inner-page hide">
             <div id="user" class="hide grid user-element">
-                <div id="quick_actions_container">
-                    <button class="primary-action" onclick="showTokenTransfer('send')">
-                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-                            width="24px" fill="#000000">
-                            <path d="M0 0h24v24H0z" fill="none" />
-                            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
-                        </svg>
-                        Send rupee
-                    </button>
-                    <button class="primary-action" onclick="showTokenTransfer('request')">
-                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
-                            height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
-                            <g>
-                                <rect fill="none" height="24" width="24" />
-                            </g>
-                            <g>
-                                <path
-                                    d="M20,2H4.01c-1.1,0-2,0.9-2,2L2,22l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M12,6c1.1,0,2,0.9,2,2s-0.9,2-2,2 s-2-0.9-2-2S10.9,6,12,6z M16,14H8v-0.57c0-0.81,0.48-1.53,1.22-1.85C10.07,11.21,11.01,11,12,11c0.99,0,1.93,0.21,2.78,0.58 C15.52,11.9,16,12.62,16,13.43V14z" />
-                            </g>
-                        </svg>
-                        Request rupee
-                    </button>
-                    <button class="primary-action" onclick="">
-                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
-                            height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
-                            <g>
-                                <rect fill="none" height="24" width="24" />
-                            </g>
-                            <g>
+                <div class="flex direction-column gap-2 h-100">
+                    <div id="quick_actions_container">
+                        <button class="primary-action" onclick="showTokenTransfer('send')">
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                                width="24px" fill="#000000">
+                                <path d="M0 0h24v24H0z" fill="none" />
+                                <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
+                            </svg>
+                            Send rupee
+                        </button>
+                        <button class="primary-action" onclick="showTokenTransfer('request')">
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                                height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
                                 <g>
-                                    <path d="M3,11h8V3H3V11z M5,5h4v4H5V5z" />
-                                    <path d="M3,21h8v-8H3V21z M5,15h4v4H5V15z" />
-                                    <path d="M13,3v8h8V3H13z M19,9h-4V5h4V9z" />
-                                    <rect height="2" width="2" x="19" y="19" />
-                                    <rect height="2" width="2" x="13" y="13" />
-                                    <rect height="2" width="2" x="15" y="15" />
-                                    <rect height="2" width="2" x="13" y="17" />
-                                    <rect height="2" width="2" x="15" y="19" />
-                                    <rect height="2" width="2" x="17" y="17" />
-                                    <rect height="2" width="2" x="17" y="13" />
-                                    <rect height="2" width="2" x="19" y="15" />
+                                    <rect fill="none" height="24" width="24" />
                                 </g>
-                            </g>
-                        </svg>
-                        Scan FLO QR
-                    </button>
-                </div>
-                <div class="">
-                    <div class="flex align-center space-between">
-                        <h4>Saved IDs</h4>
-                        <button class="button" onclick="showPopup('save_id_popup')">Save FLO ID</button>
-                    </div>
-                    <ul id="saved_ids_list" class="observe-empty-state"></ul>
-                    <div class="empty-state">
-                        <h4>No saved FLO IDs</h4>
+                                <g>
+                                    <path
+                                        d="M20,2H4.01c-1.1,0-2,0.9-2,2L2,22l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M12,6c1.1,0,2,0.9,2,2s-0.9,2-2,2 s-2-0.9-2-2S10.9,6,12,6z M16,14H8v-0.57c0-0.81,0.48-1.53,1.22-1.85C10.07,11.21,11.01,11,12,11c0.99,0,1.93,0.21,2.78,0.58 C15.52,11.9,16,12.62,16,13.43V14z" />
+                                </g>
+                            </svg>
+                            Request rupee
+                        </button>
+                        <button class="primary-action" onclick="">
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                                height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                                <g>
+                                    <rect fill="none" height="24" width="24" />
+                                </g>
+                                <g>
+                                    <g>
+                                        <path d="M3,11h8V3H3V11z M5,5h4v4H5V5z" />
+                                        <path d="M3,21h8v-8H3V21z M5,15h4v4H5V15z" />
+                                        <path d="M13,3v8h8V3H13z M19,9h-4V5h4V9z" />
+                                        <rect height="2" width="2" x="19" y="19" />
+                                        <rect height="2" width="2" x="13" y="13" />
+                                        <rect height="2" width="2" x="15" y="15" />
+                                        <rect height="2" width="2" x="13" y="17" />
+                                        <rect height="2" width="2" x="15" y="19" />
+                                        <rect height="2" width="2" x="17" y="17" />
+                                        <rect height="2" width="2" x="17" y="13" />
+                                        <rect height="2" width="2" x="19" y="15" />
+                                    </g>
+                                </g>
+                            </svg>
+                            Scan FLO QR
+                        </button>
                     </div>
+                    <section class="flex direction-column h-100">
+                        <div class="grid align-center gap-0-5">
+                            <div class="flex align-center">
+                                <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px"
+                                    viewBox="0 0 24 24" width="24px" fill="#000000">
+                                    <path d="M0 0h24v24H0z" fill="none" />
+                                    <path
+                                        d="M21 5v14h2V5h-2zm-4 14h2V5h-2v14zM14 5H2c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zM8 7.75c1.24 0 2.25 1.01 2.25 2.25S9.24 12.25 8 12.25 5.75 11.24 5.75 10 6.76 7.75 8 7.75zM12.5 17h-9v-.75c0-1.5 3-2.25 4.5-2.25s4.5.75 4.5 2.25V17z" />
+                                </svg>
+                                <h4>Saved FLO IDs</h4>
+                            </div>
+                            <p class="flex align-center">
+                                <svg class="icon margin-right-0-5" style="fill: #ffc107;"
+                                    xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                                    fill="#000000">
+                                    <path d="M0 0h24v24H0z" fill="none" />
+                                    <path
+                                        d="M9 21c0 .5.4 1 1 1h4c.6 0 1-.5 1-1v-1H9v1zm3-19C8.1 2 5 5.1 5 9c0 2.4 1.2 4.5 3 5.7V17c0 .5.4 1 1 1h6c.6 0 1-.5 1-1v-2.3c1.8-1.3 3-3.4 3-5.7 0-3.9-3.1-7-7-7z" />
+                                </svg>
+                                <span id="saved_ids_tip">Click 'Add FLO ID' to add a new FLO ID.</span>
+                            </p>
+                        </div>
+                        <ul id="saved_ids_list" class="observe-empty-state grid"></ul>
+                        <div class="empty-state justify-center text-center align-center h-100"
+                            style="align-content: center;">
+                            <svg class="justify-self-center" style="height: 12rem;"
+                                id="bb7dac0d-c86d-4eae-9345-05ead570be6d" data-name="Layer 1"
+                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+                                <defs>
+                                    <style>
+                                        .e4b4c873-5e79-4c66-a530-269f7775150b {
+                                            fill: rgba(var(--text-color), 0.03);
+                                        }
+
+                                        .f8c35eef-c260-42fc-be6f-7c8afb0beeeb {
+                                            fill: rgba(var(--text-color), 0.2);
+                                        }
+
+                                        .ee8c2e6d-b8f3-4b81-80ab-31d470d121b9 {
+                                            fill: rgba(var(--text-color), 0.1);
+                                        }
+                                    </style>
+                                </defs>
+                                <rect class="e4b4c873-5e79-4c66-a530-269f7775150b" x="34.76" y="40.75" width="177.53"
+                                    height="41.42" rx="4" />
+                                <circle class="f8c35eef-c260-42fc-be6f-7c8afb0beeeb" cx="57.21" cy="61.46" r="9.29" />
+                                <rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="75.4" y="51.37" width="40.44"
+                                    height="9.03" rx="1.92" />
+                                <rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="75.4" y="62.79" width="80.09"
+                                    height="9.03" rx="1.92" />
+                                <rect class="e4b4c873-5e79-4c66-a530-269f7775150b" x="10" y="99.29" width="177.53"
+                                    height="41.42" rx="4" />
+                                <circle class="f8c35eef-c260-42fc-be6f-7c8afb0beeeb" cx="32.45" cy="120" r="9.29" />
+                                <rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="50.64" y="109.91" width="40.44"
+                                    height="9.03" rx="1.92" />
+                                <rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="50.64" y="121.33" width="80.09"
+                                    height="9.03" rx="1.92" />
+                                <rect class="e4b4c873-5e79-4c66-a530-269f7775150b" x="52.47" y="157.83" width="177.53"
+                                    height="41.42" rx="4" />
+                                <circle class="f8c35eef-c260-42fc-be6f-7c8afb0beeeb" cx="74.93" cy="178.54" r="9.29" />
+                                <rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="93.12" y="168.46" width="40.44"
+                                    height="9.03" rx="1.92" />
+                                <rect class="ee8c2e6d-b8f3-4b81-80ab-31d470d121b9" x="93.12" y="179.87" width="80.09"
+                                    height="9.03" rx="1.92" />
+                            </svg>
+                            <h4>No Saved FLO ID</h4>
+                        </div>
+                    </section>
                 </div>
+                <button id="add_address_button" class="button interact fab" onclick="showPopup('add_address_popup')">
+                    <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px"
+                        viewBox="0 0 24 24" width="24px" fill="#000000">
+                        <path d="M0 0h24v24H0V0z" fill="none" />
+                        <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" />
+                    </svg>
+                    Add FLO ID
+                </button>
             </div>
             <section id="cashier" class=" grid gap-1 hide admin-element">
                 <h4>Requests</h4>
@@ -377,10 +446,15 @@
                 </li>
                 <li>
                     <a href="#/requests" class="nav-item interact" title='View payment requests'>
-                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-                            width="24px" fill="#000000">
-                            <path d="M0 0h24v24H0z" fill="none" />
-                            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                            height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                            <g>
+                                <rect fill="none" height="24" width="24" />
+                            </g>
+                            <g>
+                                <path
+                                    d="M20,2H4.01c-1.1,0-2,0.9-2,2L2,22l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M12,6c1.1,0,2,0.9,2,2s-0.9,2-2,2 s-2-0.9-2-2S10.9,6,12,6z M16,14H8v-0.57c0-0.81,0.48-1.53,1.22-1.85C10.07,11.21,11.01,11,12,11c0.99,0,1.93,0.21,2.78,0.58 C15.52,11.9,16,12.62,16,13.43V14z" />
+                            </g>
                         </svg>
                         <span class="nav-item__title">Requests</span>
                     </a>
@@ -414,7 +488,7 @@
         </nav>
     </div>
     <!-- Popups -->
-    <sm-popup id="save_id_popup">
+    <sm-popup id="add_address_popup">
         <header slot="header" class="popup__header">
             <button class="popup__header__close justify-self-start" onclick="hidePopup()">
                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"

From 37d2554e361aa42605459815b0c1e9e01634e1f2 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Fri, 15 Apr 2022 16:33:27 +0530
Subject: [PATCH 8/8] minor bug fix

---
 scripts/fn_ui.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scripts/fn_ui.js b/scripts/fn_ui.js
index e4f2a15..2d503f5 100644
--- a/scripts/fn_ui.js
+++ b/scripts/fn_ui.js
@@ -12,6 +12,7 @@ const relativeTime = new RelativeTime({ style: 'narrow' });
 const userUI = {};
 
 getRef('wallet_popup__cta').addEventListener('click', function () {
+    let cashier = User.findCashier();
     let amount = parseFloat(getRef('request_cashier_amount').value.trim());
     if (walletAction === 'deposit') {
         //get UPI txid from user