Add frontend validation to send-token

4 files changed, 26 insertions, 3 deletions

diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index da1d00777..865915c30 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -1,5 +1,6 @@
 .confirm-screen-container {
   position: absolute;
+  align-items: center;
 
   @media screen and (max-width: 575px) {
     margin-top: 35px;
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index f7b3cc3e5..8f6731358 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -87,10 +87,10 @@
     }
 
     button.btn-clear {
-      font-size: 75%;
       background: $white;
       border: 1px solid;
       border-radius: 2px;
+      font-size: 12px;
 
       @media screen and (max-width: $break-small) {
         width: 23%;
@@ -99,10 +99,9 @@
       }
 
       @media screen and (min-width: $break-large) {
-        font-size: .6em;
         border-color: $curious-blue;
         color: $curious-blue;
-        padding: 0px;
+        padding: 0;
         width: 85px;
         height: 34px;
       }
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index 3f75beb85..012b1faf6 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -42,6 +42,8 @@
 
 .network-check__transparent {
   opacity: 0;
+  width: 16px;
+  margin: 0;
 }
 
 .menu-icon-circle, .menu-icon-circle--active {
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 091816e7d..847b893ab 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -46,6 +46,27 @@
 .send-screen-input-wrapper {
   width: 95%;
   position: relative;
+
+  &__error-message {
+    display: none;
+  }
+
+  &--error {
+    input,
+    .send-screen-gas-input {
+      border-color: $red !important;
+    }
+
+    .send-screen-input-wrapper__error-message {
+      display: block;
+      position: absolute;
+      bottom: 4px;
+      font-size: 12px;
+      line-height: 12px;
+      left: 8px;
+      color: $red;
+    }
+  }
 }
 
 .send-screen-input {