From 9c0565ecac617fa96fd8d75b47fb18bff649575f Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Thu, 24 Oct 2019 00:30:21 +0530
Subject: [PATCH] Update FLO_webWallet_mainnet.html

---
 FLO_webWallet_mainnet.html | 722 ++++++++++++++++++++-----------------
 1 file changed, 398 insertions(+), 324 deletions(-)

diff --git a/FLO_webWallet_mainnet.html b/FLO_webWallet_mainnet.html
index 0794d41..1ae9f2e 100644
--- a/FLO_webWallet_mainnet.html
+++ b/FLO_webWallet_mainnet.html
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 <meta charset="UTF-8">
 <style>
-@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Robotolay=swap");
 :root {
   --sidenav-color: #f0f0f0;
   --accent-color: #D40E1E;
@@ -20,6 +20,20 @@
           box-sizing: border-box;
 }
 
+::-moz-selection {
+  color: #fff;
+  background: var(--accent-color);
+}
+
+::selection {
+  color: #fff;
+  background: var(--accent-color);
+}
+
+svg {
+  overflow: visible;
+}
+
 body {
   font-family: 'Roboto', sans-serif;
   background-color: var(--body-color);
@@ -52,8 +66,8 @@ button {
       -ms-user-select: none;
           user-select: none;
   cursor: pointer;
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
+  -webkit-transition: color 0.2s ease, background-color 0.2s ease, border 0.2s ease;
+  transition: color 0.2s ease, background-color 0.2s ease, border 0.2s ease;
   font-size: 0.8em;
 }
 
@@ -86,13 +100,14 @@ input[disabled]:hover {
 button:disabled,
 button[disabled] {
   cursor: not-allowed;
-  opacity: 0.4;
+  opacity: 0.6;
 }
 
 button:disabled:hover,
 button[disabled]:hover {
   background: transparent;
   color: var(--accent-color) !important;
+  border: 1px solid var(--sec-color);
 }
 
 button:focus, input:focus, textarea:focus {
@@ -104,7 +119,7 @@ button:focus, input:focus, textarea:focus {
   -webkit-tap-highlight-color: transparent;
 }
 
-.input {
+.input, .text-area {
   width: 100%;
   margin: 1em 0;
   -ms-flex-item-align: start;
@@ -115,14 +130,16 @@ button:focus, input:focus, textarea:focus {
   position: relative;
 }
 
-.input label {
+.input label, .text-area label {
   position: absolute;
   pointer-events: none;
   opacity: 0.6;
   padding: 1em 0;
   margin-left: 0.8em;
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
+  -webkit-transition: color 0.2s ease, padding 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
+  transition: color 0.2s ease, padding 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
+  transition: transform 0.2s ease, color 0.2s ease, padding 0.2s ease, opacity 0.2s ease;
+  transition: transform 0.2s ease, color 0.2s ease, padding 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
   background: transparent;
   z-index: 1;
   -webkit-user-select: none;
@@ -130,131 +147,48 @@ button:focus, input:focus, textarea:focus {
       -ms-user-select: none;
           user-select: none;
   color: var(--bw);
+  -webkit-transform-origin: left;
+          transform-origin: left;
+  will-change: transform;
 }
 
-.input input {
-  width: 100%;
-  font-size: 1em;
-  display: flexbox;
-  background-color: transparent;
-  padding: 1em;
-  border-radius: 0;
-  margin: 0;
-  border: none;
-  color: var(--bw);
-}
-
-.input div {
-  position: absolute;
-  display: flexbox;
-  opacity: 0.6;
-  height: 100%;
-  pointer-events: none;
-  width: 100%;
-  bottom: 0;
-  border-radius: 0.25em;
-  border: 1px solid var(--sec-color);
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
-}
-
-.input .label-active {
-  -webkit-transform: translateY(-0.6em) !important;
-          transform: translateY(-0.6em) !important;
-  font-size: 0.8em;
-  padding: 0 0.4em;
+.input .label-active, .text-area .label-active {
+  -webkit-transform: translateY(-0.6em) scale(0.8);
+          transform: translateY(-0.6em) scale(0.8);
   opacity: 1 !important;
   background: var(--body-color);
+  padding: 0 0.4em;
 }
 
-.input input:focus ~ div {
-  opacity: 1 !important;
-  border: var(--accent-color) 2px solid;
+.input input:focus {
+  border: var(--accent-color) 1px solid;
 }
 
 .input input:focus ~ label {
   color: var(--accent-color);
 }
 
-.input:hover div {
-  opacity: 1;
-}
-
-.text-area {
-  width: 100%;
-  margin: 1em 0;
-  -ms-flex-item-align: start;
-      align-self: flex-start;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-}
-
-.text-area label {
-  position: absolute;
-  padding: 1em 0;
-  margin-left: 0.8em;
-  pointer-events: none;
-  opacity: 0.6;
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
-  background: transparent;
-  z-index: 1;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-
-.text-area textarea {
-  width: 100%;
-  font-size: 1em;
-  display: flexbox;
-  background-color: transparent;
-  padding: 1em;
-  border-radius: 0;
-  margin: 0;
-  border: none;
-  color: var(--bw);
-  font-family: 'Roboto', sans-serif;
-}
-
-.text-area div {
-  position: absolute;
-  display: flexbox;
-  opacity: 0.6;
-  height: 100%;
-  pointer-events: none;
-  width: 100%;
-  bottom: 0;
-  margin: 0;
-  border-radius: 0.25em;
-  border: 1px solid var(--sec-color);
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
-}
-
-.text-area .label-active {
-  -webkit-transform: translateY(-0.6em) !important;
-          transform: translateY(-0.6em) !important;
-  font-size: 0.8em;
-  padding: 0 0.4em;
-  opacity: 1 !important;
-  background: var(--body-color);
-}
-
-.text-area textarea:focus ~ div {
-  opacity: 1 !important;
-  border: var(--accent-color) 2px solid;
+.text-area textarea:focus {
+  border: var(--accent-color) 1px solid;
 }
 
 .text-area textarea:focus ~ label {
   color: var(--accent-color);
 }
 
-.text-area:hover div {
-  opacity: 1;
+textarea, input {
+  width: 100%;
+  font-size: 1em;
+  display: flexbox;
+  background-color: transparent;
+  padding: 1em;
+  border-radius: 0.25em;
+  margin: 0;
+  border: 1px solid var(--sec-color);
+  color: var(--bw);
+  font-family: 'Roboto', sans-serif;
+  -webkit-transition: border 0.2s ease;
+  transition: border 0.2s ease;
 }
 
 #overlay {
@@ -273,39 +207,47 @@ button:focus, input:focus, textarea:focus {
 }
 
 #overlay #popup {
-  -webkit-transform: translateY(64px);
-          transform: translateY(64px);
-  overflow: hidden;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: 80vw;
-  padding: 1em 1.5em;
+  padding: 1em 2em;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   background: var(--body-color);
   -webkit-box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
           box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
   border-radius: 0.25em;
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
+  -webkit-transition: -webkit-transform 0.2s ease;
+  transition: -webkit-transform 0.2s ease;
+  transition: transform 0.2s ease;
+  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
 }
 
 #overlay #popup .input {
   width: 100% !important;
-  margin: 2em 0.5em !important;
+  margin: 1em 0 !important;
 }
 
 #overlay #popup button {
   border: none;
   width: auto;
-  margin: 0 0.5em;
+  margin: 0.5em 0 !important;
 }
 
-#overlay #popup h4 {
-  padding: 1em;
-  margin: 0;
+#overlay #popup button:first-of-type {
+  margin-left: auto !important;
+}
+
+#overlay #popup button:last-of-type {
+  margin-left: 0.5em !important;
+  width: 4em !important;
+}
+
+#overlay #popup h4, #overlay #popup h5 {
+  margin: 1em 0;
   opacity: 0.8;
+  width: 100%;
 }
 
 .spacer {
@@ -316,7 +258,7 @@ button:focus, input:focus, textarea:focus {
   margin-left: auto;
 }
 
-#main-card header {
+#main-card #header {
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -329,27 +271,25 @@ button:focus, input:focus, textarea:focus {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  height: 64px;
+  height: 48px;
   z-index: 3;
   top: 0;
   right: 0;
   left: 0;
+  -webkit-box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.1);
+          box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.1);
 }
 
-#main-card header #rLogo {
-  display: flexbox;
-  fill: var(--bw);
-  height: 32px;
-  margin-left: 1em;
-  opacity: 0.2;
+#main-card #header span {
+  margin-right: 1em;
+  font-weight: bold;
 }
 
-#main-card header span {
-  opacity: 0.2;
-}
-
-#main-card header .flo-logo {
-  fill: var(--bw);
+#main-card #header svg {
+  fill: var(--accent-color);
+  height: 2em;
+  width: 2em;
+  margin: 1em 0.5em 1em 1em;
 }
 
 #main-card .right {
@@ -357,7 +297,7 @@ button:focus, input:focus, textarea:focus {
   display: grid;
   left: 0;
   position: absolute;
-  top: 0;
+  top: 48px;
   right: 0;
   bottom: 54px;
 }
@@ -371,7 +311,6 @@ button:focus, input:focus, textarea:focus {
   width: 100%;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
-  overflow: hidden;
   -webkit-transition: width 0.2s ease;
   transition: width 0.2s ease;
 }
@@ -381,15 +320,59 @@ button:focus, input:focus, textarea:focus {
       align-self: flex-start;
 }
 
+#sendData .sdleft .input {
+  -webkit-transition: border 0.2s ease;
+  transition: border 0.2s ease;
+  border: 1px solid var(--sec-color);
+  margin: 1em 0 !important;
+  border-radius: 0.25em;
+  width: 100% !important;
+}
+
+#sendData .sdleft .input input {
+  height: auto;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  border: none;
+  padding: 1em 0 1em 1em;
+}
+
+#sendData .sdleft .input button {
+  margin: 0.5em 0.5em 0.5em 0 !important;
+  height: auto;
+  border: none;
+  width: 9em;
+}
+
+#sendData .sdleft .input button:hover {
+  background: transparent;
+  color: var(--accent-color) !important;
+}
+
+#sendData .sdleft .input:focus-within {
+  border: 1px solid var(--accent-color);
+}
+
+#sendData #sdright {
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  pointer-events: none;
+}
+
 #sendData #dispBal {
-  height: 4em;
-  background: var(--back-color);
+  width: 100%;
+  border: 1px solid var(--sec-color);
+  padding: 1em 2em;
   -ms-flex-item-align: start;
       align-self: flex-start;
   word-break: break-all;
-  text-align: center;
   border-radius: 0.25em;
-  width: 100%;
+  margin: auto;
 }
 
 #sendData #dispBal #dispBalInt {
@@ -407,8 +390,8 @@ button:focus, input:focus, textarea:focus {
 }
 
 #bottom-nav {
-  position: fixed;
   overflow: hidden;
+  position: fixed;
   height: 54px;
   -ms-flex-line-pack: center;
       align-content: center;
@@ -431,8 +414,10 @@ button:focus, input:focus, textarea:focus {
   height: 4px;
   background: var(--accent-color);
   border-radius: 0 0 4px 4px;
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
+  -webkit-transition: -webkit-transform 0.2s ease;
+  transition: -webkit-transform 0.2s ease;
+  transition: transform 0.2s ease;
+  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
 }
 
 #bottom-nav .icons {
@@ -456,7 +441,6 @@ button:focus, input:focus, textarea:focus {
 #bottom-nav .icons svg {
   fill: var(--bw);
   height: 1.1em;
-  overflow: visible;
   margin: 0 0 4px 0;
   stroke: none;
 }
@@ -505,8 +489,8 @@ button:focus, input:focus, textarea:focus {
   right: 0;
   background: rgba(0, 0, 0, 0.2);
   z-index: 3;
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
+  -webkit-transition: opacity 0.2s ease;
+  transition: opacity 0.2s ease;
 }
 
 .show {
@@ -573,6 +557,7 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 #dispMsg #title-bar {
+  bottom: 0;
   position: absolute;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -582,7 +567,8 @@ input[type=number]::-webkit-outer-spin-button {
   -ms-flex-line-pack: center;
       align-content: center;
   background: var(--body-color);
-  border-bottom: 1px solid var(--sec-color);
+  border-top: 1px solid var(--sec-color);
+  border-bottom: none;
 }
 
 #dispMsg #title-bar svg {
@@ -595,7 +581,6 @@ input[type=number]::-webkit-outer-spin-button {
   cursor: pointer;
   -ms-flex-item-align: center;
       align-self: center;
-  overflow: visible;
 }
 
 #dispMsg #title-bar span {
@@ -623,11 +608,10 @@ input[type=number]::-webkit-outer-spin-button {
 #dispMsg trans-container {
   position: absolute;
   overflow-y: auto;
-  right: 0;
-  left: 0;
+  width: 100%;
   padding: 0.5em 0;
-  top: 65px;
-  bottom: 0;
+  top: 0;
+  bottom: 65px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -643,10 +627,10 @@ input[type=number]::-webkit-outer-spin-button {
   display: -ms-flexbox;
   display: flex;
   position: relative;
-  width: 100%;
+  width: calc(100% - 1em);
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
-  margin: 0.25em 0;
+  margin: 0.25em 0.5em;
   border-radius: 0.25em;
   background: var(--body-color);
 }
@@ -743,8 +727,8 @@ loading svg .st1 {
   background: var(--accent-color);
   -webkit-box-shadow: 0.1em 0.2em 0.3em rgba(0, 0, 0, 0.4);
           box-shadow: 0.1em 0.2em 0.3em rgba(0, 0, 0, 0.4);
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
+  -webkit-transition: right 0.2s ease, bottom 0.2s ease;
+  transition: right 0.2s ease, bottom 0.2s ease;
   z-index: 2;
 }
 
@@ -755,28 +739,24 @@ loading svg .st1 {
   fill: #fff;
   height: 1em;
   width: 1em;
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
 }
 
-#edit-container {
+#edit-container, #add-container {
   display: -ms-grid;
   display: grid;
   place-items: center;
   position: fixed;
-  height: 100%;
-  width: 100%;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 4;
   background: rgba(0, 0, 0, 0.2);
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
+  -webkit-transition: opacity 0.2s ease;
+  transition: opacity 0.2s ease;
 }
 
-#edit-container #edit {
+#add, #edit {
   position: relative;
   width: 80vw;
   display: -webkit-box;
@@ -784,28 +764,35 @@ loading svg .st1 {
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
-  -ms-flex-line-pack: center;
-      align-content: center;
-  -webkit-transform: translateY(2em);
-          transform: translateY(2em);
-  padding: 1em 1.5em;
+  padding: 1em 2em;
   background: var(--body-color);
   border-radius: 0.25em;
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
+  -webkit-transition: -webkit-transform 0.2s ease;
+  transition: -webkit-transform 0.2s ease;
+  transition: transform 0.2s ease;
+  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
   -webkit-box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
           box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
 }
 
-#edit-container #edit .input {
-  margin: 1em 0.5em;
-  width: 100% !important;
-}
-
-#edit-container #edit button {
+#add button, #edit button {
   border: none;
   width: auto;
-  margin: 0.5em 1em !important;
+  margin: 0.5em 0 !important;
+}
+
+#add button:last-of-type, #edit button:last-of-type {
+  margin-left: 1em !important;
+}
+
+#add h4, #edit h4 {
+  margin: 1em 0;
+  opacity: 0.8;
+}
+
+#add .input, #edit .input {
+  margin: 1em 0 !important;
+  width: 100% !important;
 }
 
 #edit-container #edit button:nth-of-type(2) {
@@ -813,9 +800,9 @@ loading svg .st1 {
 }
 
 #edit-container #edit div:first-of-type {
-  padding: 1em;
   word-break: break-all;
   opacity: 0.6;
+  margin: 1em 0;
 }
 
 #edit-container #edit h3, #edit-container #edit h4, #edit-container #edit h5 {
@@ -823,71 +810,10 @@ loading svg .st1 {
   width: 100%;
 }
 
-#edit-container #edit h4 {
-  padding: 1em;
-  margin: 0;
-  opacity: 0.8;
-}
-
-#add-container {
-  display: -ms-grid;
-  display: grid;
-  place-items: center;
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 4;
-  background: rgba(0, 0, 0, 0.2);
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
-}
-
-#add-container #add {
-  position: relative;
-  width: 80vw;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -ms-flex-line-pack: center;
-      align-content: center;
-  -webkit-transform: translateY(2em);
-          transform: translateY(2em);
-  padding: 1em 1.5em;
-  background: var(--body-color);
-  border-radius: 0.25em;
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
-  -webkit-box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
-          box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
-}
-
-#add-container #add .input {
-  margin: 1em 0.5em;
-  width: 100% !important;
-}
-
-#add-container #add button {
-  border: none;
-  width: auto;
-  margin: 0.5em 1em !important;
-}
-
 #add-container #add button:first-of-type {
   margin-left: auto !important;
 }
 
-#add-container #add h4 {
-  padding: 1em;
-  margin: 0;
-  opacity: 0.8;
-}
-
 #monitor-list {
   position: relative;
   display: -webkit-box;
@@ -927,7 +853,6 @@ loading svg .st1 {
 }
 
 #monitor-list monitor div:nth-of-type(2) {
-  padding-right: 4em;
   font-size: 0.8em;
   padding-top: 0;
   opacity: 0.8;
@@ -956,9 +881,8 @@ loading svg .st1 {
   width: 2em;
   padding: 0.5em;
   margin: 0.5em;
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
-  overflow: visible;
+  -webkit-transition: opacity 0.2s ease;
+  transition: opacity 0.2s ease;
   z-index: 2;
   border-radius: 2em;
 }
@@ -982,10 +906,15 @@ loading svg .st1 {
 #settings-page h3, #settings-page h4 {
   display: flexbox;
   width: 100%;
+  -ms-flex-item-align: center;
+      align-self: center;
 }
 
 #settings-page h5 {
   margin: 0;
+  -ms-flex-item-align: center;
+      -ms-grid-row-align: center;
+      align-self: center;
 }
 
 #settings-page div {
@@ -1008,6 +937,40 @@ loading svg .st1 {
   font-size: 0.8em;
 }
 
+#settings-page .border-card-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+
+#settings-page .border-card-container .border-card {
+  color: var(--bw);
+  text-decoration: none;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  display: flexbox;
+  border: 1px solid var(--sec-color);
+  border-radius: 0.25em;
+  padding: 1em;
+  width: 8em;
+  text-align: center;
+  margin: 0.5em 1em 0.5em 0;
+}
+
+#settings-page .border-card-container .border-card svg {
+  fill: var(--accent-color);
+  display: flexbox;
+  height: 2em;
+  -ms-flex-item-align: center;
+      align-self: center;
+  margin: 0.5em;
+}
+
 .slide-up {
   opacity: 1;
   -webkit-transform: none !important;
@@ -1043,7 +1006,7 @@ loading svg .st1 {
   right: 0;
   bottom: 0;
   width: 3em;
-  background-color: #ccc;
+  background-color: var(--sec-color);
   -webkit-transition: .4s;
   transition: .4s;
 }
@@ -1233,9 +1196,19 @@ input:checked + .slider:before {
     bottom: 0;
     width: 100%;
   }
+  #dispMsg trans-container {
+    top: 65px;
+    bottom: 0;
+  }
   #dispMsg trans-container transaction-card div:nth-of-type(2) {
     font-size: 1.1em !important;
   }
+  #dispMsg #title-bar {
+    top: 0;
+    bottom: auto;
+    border-bottom: 1px solid var(--sec-color);
+    border-top: none;
+  }
   #settings-page h4 {
     text-align: left;
   }
@@ -1257,10 +1230,11 @@ input:checked + .slider:before {
     margin: 1em;
   }
   #monitor-list monitor div:first-of-type {
-    height: 4em;
+    padding: 1.5em 2em 1.5em 0.8em;
   }
   #monitor-list monitor div:nth-of-type(2) {
     word-break: break-all;
+    padding: 1em 4em 1em 1em;
   }
   #monitor-list monitor svg {
     top: auto;
@@ -1274,6 +1248,8 @@ input:checked + .slider:before {
     opacity: 0.6;
   }
   #add, #edit {
+    -webkit-transform: translateY(2em);
+            transform: translateY(2em);
     width: 400px !important;
   }
   ::-webkit-scrollbar {
@@ -1319,8 +1295,8 @@ input:checked + .slider:before {
     -webkit-box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
             box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16);
     background: var(--body-color);
-    -webkit-transition: all 0.2s ease;
-    transition: all 0.2s ease;
+    -webkit-transition: width 0.2s ease, height 0.2s ease;
+    transition: width 0.2s ease, height 0.2s ease;
   }
   #main-card #bottom-nav {
     display: -ms-grid;
@@ -1340,8 +1316,8 @@ input:checked + .slider:before {
     text-align: left !important;
     height: 100%;
     background: var(--sidenav-color);
-    -webkit-transition: all 0.2s ease;
-    transition: all 0.2s ease;
+    -webkit-transition: width 0.2s ease;
+    transition: width 0.2s ease;
   }
   #main-card #bottom-nav #indicator {
     left: 0;
@@ -1371,8 +1347,8 @@ input:checked + .slider:before {
     -ms-flex-wrap: nowrap;
         flex-wrap: nowrap;
     white-space: nowrap;
-    -webkit-transition: all 0.2s ease;
-    transition: all 0.2s ease;
+    -webkit-transition: opacity 0.2s ease;
+    transition: opacity 0.2s ease;
   }
   #main-card #bottom-nav .icons h6 {
     display: none;
@@ -1396,18 +1372,27 @@ input:checked + .slider:before {
     opacity: 1;
   }
   #main-card .right {
+    top: 64px;
     left: 64px;
     right: 0;
     bottom: 0;
   }
-  header {
+  #header {
     opacity: 1 !important;
     pointer-events: all !important;
     z-index: 2;
     width: calc(100% - 64px);
     left: 64px !important;
+    height: 64px !important;
+    -webkit-box-shadow: none !important;
+            box-shadow: none !important;
+  }
+  #header svg {
+    margin: 1em 0.5em 1em auto !important;
   }
   #popup {
+    -webkit-transform: translateY(64px);
+            transform: translateY(64px);
     width: 360px !important;
     position: relative !important;
     bottom: auto !important;
@@ -1415,18 +1400,19 @@ input:checked + .slider:before {
   .input, button {
     width: auto !important;
   }
-  #sendData .input, #sendData button {
-    width: 100% !important;
-  }
   #sendData .sdleft {
     width: 40%;
   }
-  #sendData .sdright {
+  #sendData #sdright {
+    opacity: 0.6;
     width: 60%;
     display: flexbox;
     -ms-flex-item-align: start;
         align-self: flex-start;
   }
+  #sendData #sdright .input, #sendData #sdright button {
+    width: 100% !important;
+  }
 }
 
 @media screen and (min-width: 1280px) {
@@ -1479,15 +1465,7 @@ input:checked + .slider:before {
     height: 48px;
   }
   trans-container {
-    top: 48px !important;
-  }
-  .label-active {
-    -webkit-transform: translateY(-0.6em) !important;
-            transform: translateY(-0.6em) !important;
-    font-size: 0.7em !important;
-    padding: 0 0.4em;
-    opacity: 1 !important;
-    background: var(--body-color);
+    bottom: 48px !important;
   }
   #header {
     height: 4em;
@@ -1496,7 +1474,8 @@ input:checked + .slider:before {
     bottom: 48px;
   }
 }
-/*# sourceMappingURL=main.css.map */</style>
+/*# sourceMappingURL=main.css.map */
+</style>
 </head>
 <body onload="onLoadStartUp()"> 
     <script>
@@ -1524,7 +1503,37 @@ input:checked + .slider:before {
                 </svg>
               </loading>
     <div id="overlay2"></div>   
-
+    <header id="header">
+        <svg viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
+        <style type="text/css">
+            .st0{fill:url(#SVGID_1_);}
+            .st1{fill:url(#SVGID_2_);}
+            .st2{fill:url(#SVGID_3_);}
+            .st3{fill:url(#SVGID_4_);}
+            .st4{fill:url(#SVGID_5_);}
+            .st5{fill:url(#SVGID_6_);}
+        </style>
+        <g>
+            <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="2.7149" y1="5.1593" x2="15.2672" y2="15.3855">
+                <stop  offset="0" style="stop-color:#D40E1E"/>
+                <stop  offset="1" style="stop-color:#9E0B38"/>
+            </linearGradient>
+            <path class="st0" d="M18,4v12c0,1.1-0.9,2-2,2H1c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h15C17.1,2,18,2.9,18,4z M16,10
+                c0-1.4-1.1-2.5-2.5-2.5S11,8.6,11,10s1.1,2.5,2.5,2.5S16,11.4,16,10z"/>
+            <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="6.5546" y1="2.6697" x2="13.0149" y2="0.4457">
+                <stop  offset="0" style="stop-color:#9E0B38"/>
+                <stop  offset="0.9603" style="stop-color:#D40E1E"/>
+            </linearGradient>
+            <path class="st1" d="M16,2H1l13-2C15.1,0,16,0.9,16,2z"/>
+            <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="12.6314" y1="8.8842" x2="14.4752" y2="11.2528">
+                <stop  offset="0" style="stop-color:#D40E1E"/>
+                <stop  offset="1" style="stop-color:#9E0B38"/>
+            </linearGradient>
+            <circle class="st2" cx="13.5" cy="10" r="1.5"/>
+        </g>
+        </svg>
+        <span>FLO web wallet</span>
+    </header>
         <div id="bottom-nav">
           <div id="indicator"></div>
             <div class="icons" id="menu">
@@ -1594,12 +1603,10 @@ input:checked + .slider:before {
                                 <div class="input">
                                     <input  type="text" oninput="checkAddress(this)" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="floAddr" autocomplete="new-password"/>
                                         <label>FLO Address</label>
-                                    <div></div>
                                 </div>
                                 <div class="input">
                                     <input  type="text" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="addrLabel"  autocomplete="new-password"/>
                                         <label>Label</label>
-                                    <div></div>
                                 </div>
                                 <button onclick="closeAdd()">Cancel</button>
                                 <button id="addAddressToMonitor" onclick="addAddressToMonitoringList()" disabled>Add</button>
@@ -1607,14 +1614,13 @@ input:checked + .slider:before {
                         </div>
                         <div id="edit-container" class="hide">
                             <div id="edit">
-                                <h4 style="padding: 1em;margin: 0;opacity: 0.8;">Edit display card</h4>
+                                <h4>Edit display card</h4>
                                 <div>
                                     Flo address
                                 </div>
                                 <div class="input">
                                     <input autocomplete="new-password"  type="text" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="newAddrLabel"/>
                                         <label>Label</label>
-                                    <div></div>
                                 </div>
                                 <button onclick="removedata()" id="removeAddr">Remove</button>
                                 <button onclick="closeEdit()">Cancel</button>
@@ -1650,33 +1656,30 @@ input:checked + .slider:before {
 
                     <div id="sendData" class="page hide">
                         <div class="sdleft">
-                            <h3>To send FLO data check sender's balance first</h3>
+                            <h3>To send FLO data, make sure you have enough balance.</h3>
                                 <div id="dispBal">
-                                        <span id="dispBalInt"></span>
-                                        <span id="dispBalFloat"></span>
+                                    <h5>FLO balance</h5>
+                                    <span id="dispBalInt">0</span>
+                                    <span id="dispBalFloat"></span>
                                 </div>
                                 <div class="input">
-                                        <input autocomplete="new-password"  type="text" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="getBal_addr"/>
-                                        <label>Sender's address</label>
-                                    <div></div>
+                                        <input autocomplete="new-password" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" type="text" id="getBal_addr" oninput="checkBalAddress(this)"/>
+                                        <label>FLO address</label>
+                                        <button id="getBal_btn" onclick="getBal()" disabled>Check balance</button>
                                 </div>
-                                <button id="getBal_btn" onclick="getBal()">Get Sender Balance</button>
                         </div>
-                        <div class="sdright innerPage">
+                        <div id="sdright">
                                 <div class="input">
                                         <input autocomplete="new-password"  type="text" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="receiver"/>
-                                        <label>Receiver's Address</label>
-                                    <div></div>
+                                        <label>Receiver's address</label>
                                 </div>
                                 <div class="input">
                                         <input autocomplete="new-password"  type="number" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="amount"/>
                                         <label>Amount</label>
-                                    <div></div>
                                 </div>
                                 <div class="text-area">
                                     <textarea data-gramm_editor="false" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" rows="8" id="flotextdata"></textarea>
-                                    <label>FLO Data</label>
-                                    <div></div>
+                                    <label>FLO data</label>
                                 </div>
                                 <button id="sendBtn" onclick="sendMessage()">Send</button>
                         </div>
@@ -1689,7 +1692,7 @@ input:checked + .slider:before {
                     </div>   
                     <div id="settings-page" class="page hide">
                         <section>
-                          <h4>Dark mode settings</h4>
+                          <h4>Dark mode</h4>
                           <div>
                             <span class="row">
                               Automatic<br>
@@ -1717,20 +1720,80 @@ input:checked + .slider:before {
                         </section>
                         <section>
                             <h4>About</h4>
-                            <h5>Version 2.5</h5><br><h5>Powered by FLO</h5>
+                            <h5>Version 2.5</h5>
+                            <div class="border-card-container">
+                                    <a class="border-card" href="https://ranchimall.net/" target="_blank" rel="noopener noreferrer">
+                                        <svg 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>
+                                        <h5>A RanchiMall product</h5>
+                                    </a>
+                                    <a class="border-card" href="https://flo.cash/" target="_blank" rel="noopener noreferrer">
+                                            <h5>Powered by</h5>
+                                            <svg viewBox="0 0 108 48" style="enable-background:new 0 0 107.65 47.07;"
+                                            xml:space="preserve">
+                                            <g>
+                                            <path class="flo-logo" d="M34.2,32.4c0,0,3.75-0.18,7.41-3.86c2.96-2.98,3.65-6.66,3.99-8.52c-11.04-0.63-12.36,0.99-13.71,1.68
+                                            c-1.19,0.61-5.33,4.55-5.33,4.55s3.06-3.13,3.2-9.94c0.09-4.54-1.02-7.39-2.72-10.64C25.29,2.33,22.79,0,22.79,0l0.01,4.97
+                                            c0,0,4.35,2.84,4.35,11.84c0,6.52-4.35,11.02-4.35,11.02s-4.35-4.5-4.35-11.02c0-9.01,4.35-11.84,4.35-11.84L22.79,0
+                                            c0,0-2.48,2.33-4.23,5.67c-1.7,3.25-2.81,6.1-2.72,10.64c0.13,6.81,3.2,9.94,3.2,9.94s-4.14-3.95-5.33-4.55
+                                            c-1.35-0.69-2.67-2.31-13.71-1.68c0.34,1.86,1.03,5.54,3.99,8.52c3.66,3.68,7.41,3.86,7.41,3.86s-5.05-2.03-7.15-9.45
+                                            c0,0,5.76-0.7,9.63,1.87c2.52,1.67,4.86,4.26,6.79,6.01c0,0-2.58-0.04-6.81,1.88c-2.54,1.15-3.92,2.84-4.44,4.38
+                                            c-0.36,1.06-0.2,2.27-0.2,2.27s3.31,0.31,5.94,0c1.99-0.23,3.42-2.16,3.42-2.16s-2,0.78-3.95,0.78c-2.06,0-2.67-0.66-2.67-0.66
+                                            c0.98-3.64,8.68-5.19,8.68-5.19s-1.34,2.6-1.42,6.5c-0.1,4.79,3.57,8.52,3.57,8.45c0,0.07,3.67-3.66,3.57-8.45
+                                            c-0.08-3.9-1.42-6.5-1.42-6.5s7.71,1.55,8.68,5.19c0,0-0.61,0.66-2.67,0.66c-1.95,0-3.95-0.78-3.95-0.78s1.43,1.93,3.42,2.16
+                                            c2.63,0.31,5.94,0,5.94,0s0.16-1.21-0.2-2.27c-0.52-1.54-1.9-3.23-4.44-4.38c-4.23-1.92-6.81-1.88-6.81-1.88
+                                            c1.93-1.76,4.27-4.34,6.79-6.01c3.87-2.57,9.63-1.87,9.63-1.87C39.26,30.38,34.2,32.4,34.2,32.4z M22.8,43.06
+                                            c-0.95-1.37-1.47-2.13-1.47-4.26c0-2.4,1.12-4.61,1.47-5.14c0.35,0.52,1.47,2.74,1.47,5.14C24.27,40.92,23.75,41.69,22.8,43.06z"/>
+                                            <g>
+                                            <polygon class="flo-logo" points="73.53,36.36 73.53,20.01 70.53,20.01 70.53,36.36 70.53,39.35 84,39.35 84,36.36 		"/>
+                                            <g>
+                                                <rect x="52.75" y="20.01" class="flo-logo" width="13.47" height="2.93"/>
+                                                <polygon class="flo-logo" points="63.74,28.36 55.74,28.36 52.75,28.36 52.75,31.35 52.75,39.35 55.74,39.35 55.74,31.35 63.74,31.35 
+                                                                "/>
+                                            </g>
+                                            <path class="flo-logo" d="M97.99,20.01c-5.34,0-9.67,4.33-9.67,9.67s4.33,9.67,9.67,9.67s9.67-4.33,9.67-9.67S103.33,20.01,97.99,20.01
+                                                z M97.99,35.85c-3.41,0-6.17-2.76-6.17-6.17c0-3.41,2.76-6.17,6.17-6.17c3.41,0,6.17,2.76,6.17,6.17
+                                                C104.15,33.09,101.39,35.85,97.99,35.85z"/>
+                                            </g>
+                                            </g>
+                                            </svg>
+                                        </a>
+                            </div>
                         </section>
                       </div> 
                     </div>
     </div>
     <div id="overlay">
         <div id="popup">
-            <h4>Recover FLO address</h4>
+            <h4>Recover FLO address</h4><br/>
+            <p><h5>Please enter your private key.</h5></p>
             <div class="input">
                 <input autocomplete="new-password"  type="text" onfocus="animateInput(this.parentNode)" onblur="revertBack(this.parentNode)" id="pop"/>
                 <label>Private key</label>
                 <div></div>
             </div> 
-            <div class="spacer"></div>
             <button onclick="fadeout()">Cancel</button>
             <button id="ok" onclick="RecoverAddr()">Ok</button>
         </div>
@@ -1740,6 +1803,7 @@ input:checked + .slider:before {
         let bottomNav = document.getElementById('bottom-nav'),
             floAddr = document.getElementById('floAddr'),
             addrLabel = document.getElementById('addrLabel'),
+            newAddrLabel = document.getElementById('newAddrLabel'),
             recentPage = 'getDataBtn',
             mode,
             activeAddress;
@@ -1799,6 +1863,8 @@ input:checked + .slider:before {
             }
             else{
                 localStorage.setItem('dark', 'no');
+                daylight();
+                clearInterval(mode);
             }
         }   
         function theme(){
@@ -1830,7 +1896,7 @@ input:checked + .slider:before {
 
         document.getElementById('getBal_addr').addEventListener('keypress',function(event){
             if(event.keyCode==13)
-                getBal();
+                document.getElementById('getBal_btn').click();
             }); 
 
         addrLabel.addEventListener('keypress',function(event){
@@ -1841,6 +1907,10 @@ input:checked + .slider:before {
             if(event.keyCode==13)
                 document.getElementById('addAddressToMonitor').click();
         });
+        newAddrLabel.addEventListener('keypress' ,(event) => {
+                if(event.keyCode == 13)
+                    editdata();
+        });
         function closeSidePanel(){
             if(window.innerWidth > 768)
             {
@@ -1914,13 +1984,10 @@ input:checked + .slider:before {
                 floWebWallet.syncTransactions(floAddr.value);
                 closeAdd();
             }).catch((error) => {
-                alert('you are already monitoring this address');
-                console.log(error);
+                alert(error);
             })
         }
 
-        //  new code
-
         document.getElementById(recentPage).click();
 
         function showPage(element, page){
@@ -1928,6 +1995,7 @@ input:checked + .slider:before {
               allTabs = document.querySelectorAll('.tabs'),
               allInnerPages = document.querySelectorAll('.innerPage');
           bottomNav.classList.remove('hide');
+          document.getElementById('header').classList.remove('hide');
           allPages.forEach(function(pages){
             pages.classList.add('hide');
           });
@@ -2010,6 +2078,7 @@ input:checked + .slider:before {
             Ipage.classList.add('hide');
           });
           bottomNav.classList.add('hide');
+          document.getElementById('header').classList.add('hide');
           let x = document.getElementById(page);
           x.classList.remove('hide');
           x.classList.add('fade');
@@ -2021,23 +2090,21 @@ input:checked + .slider:before {
             });
         }
 
+        function checkBalAddress(thisInput){
+            let x = document.getElementById('getBal_btn');
+            if (floCrypto.validateAddr(thisInput.value))
+                x.disabled = false;
+            else{
+                x.disabled = true;
+            }
+        }
+
         function getBal(){
             let x= document.getElementById("getBal_addr");
-            if (x.value.length < 1 || !floCrypto.validateAddr(x.value)) {
-                x.classList.add('jitter');
-                x.addEventListener('animationEnd', function(){
-                    x.classList.remove('jitter'); 
-                });
-                x.addEventListener('webkitAnimationEnd', function(){
-                    x.classList.remove('jitter'); 
-                });
-                return;
-            }
             floBlockchainAPI.getBalance(x.value).then((retrievedBal) => {
                 let parts = retrievedBal.split("."),
                     floatPart = parts.pop(),
                     intPart = parts.pop();
-                console.log(floatPart, intPart);
                 if(intPart === undefined){
                     document.getElementById('dispBalInt').textContent= '0';
                 }
@@ -2045,6 +2112,7 @@ input:checked + .slider:before {
                     document.getElementById('dispBalInt').textContent= intPart;
                     document.getElementById('dispBalFloat').innerHTML= `.${floatPart} FLOs`;
                 }
+                document.getElementById('sdright').setAttribute('style', 'pointer-events: all; opacity: 1');
             }).catch((error) => {
                 console.log(error);
             })
@@ -2109,8 +2177,9 @@ input:checked + .slider:before {
                 }
                 else{
                     receivedData.forEach(tx => {
-                    let date = new Date(tx.time*1000).toLocaleDateString();
-                    let time = new Date(tx.time*1000).toLocaleTimeString();
+                    let date = new Date(tx.time*1000).toLocaleDateString(),
+                        time = new Date(tx.time*1000).toLocaleTimeString(),
+                        i;
                     var tCard = document.createElement('transaction-card');
                     if(tx.sender === address){
                         tCard.innerHTML=`<div><svg width="12.607" height="12.607" viewBox="0 0 12.607 12.607"><path id="Union_1" data-name="Union 1" d="M11.818-3704H2a1,1,0,0,1-1-1,1,1,0,0,1,1-1H9.586l-8.879-8.879a1,1,0,0,1,0-1.414,1,1,0,0,1,1.414,0L11-3707.414V-3715a1,1,0,0,1,1-1,1,1,0,0,1,1,1v9.818a1,1,0,0,1-.272.909.994.994,0,0,1-.707.293A1.013,1.013,0,0,1,11.818-3704Z" transform="translate(3716.586 13.021) rotate(-90)"/></svg>${tx.receiver}</div><div> ${tx.floData}</div><div>  ${time} ${date}</div>`;
@@ -2147,17 +2216,13 @@ input:checked + .slider:before {
 
         function showEdit(parent){
             activeAddress = parent;
+            newAddrLabel = document.getElementById('newAddrLabel');
             document.getElementById('edit-container').classList.add('show');
             let x = document.getElementById('edit');
             x.classList.add('slide-up');
-            x.children[2].children[0].focus();
+            newAddrLabel.focus();
             x.children[1].textContent = parent.children[1].textContent;
-            x.children[2].children[0].value =  parent.children[0].textContent;
-            x.children[2].children[0].addEventListener('keypress' ,(event) => {
-                if(event.keyCode == 13){
-                    editdata();
-                }
-            })
+            newAddrLabel.value =  parent.children[0].textContent;
             let y =document.addEventListener("click", function(event) {
                 if (event.target.closest('#edit') || event.target.closest('.edit-options')) return;
                 closeEdit();
@@ -2167,15 +2232,15 @@ input:checked + .slider:before {
 
         function editdata(){
             let x = document.getElementById('edit'),
-                label = x.children[2].children[0].value;
+                label = newAddrLabel.value;
                 if(label == '')
                     label = 'Unknown';
                 compactIDB.writeData('labels', label, x.children[1].textContent).then((resolve) => {
+                    activeAddress.children[0].textContent = label;
+                    closeEdit()
                 }).catch((error) => {
                     console.log(error);
                 })
-                activeAddress.children[0].textContent = label;
-                closeEdit()
         }
 
         function removedata(){
@@ -2187,7 +2252,7 @@ input:checked + .slider:before {
         function closeEdit(){
             document.getElementById('edit-container').classList.remove('show');
             document.getElementById('edit').classList.remove('slide-up');
-            document.getElementById('newAddrLabel').value='';
+            newAddrLabel.value='';
         }
 
         function createAllCards(){
@@ -2220,6 +2285,15 @@ input:checked + .slider:before {
                 alert(error)
             })
         }
+
+        function copyToClipboard(parent) {
+            let range = document.createRange();
+            range.selectNode(document.getElementById("a"));
+            window.getSelection().removeAllRanges();
+            window.getSelection().addRange(range);
+            document.execCommand("copy");
+            window.getSelection().removeAllRanges();
+        }
     </script>
 
 <script>