Merge pull request #4308 from MetaMask/i4232-addtoken

Update designs for Add Token screen

1 files changed, 23 insertions, 22 deletions

diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 9b2982096..f667eeda8 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -74,28 +74,32 @@ input.large-input {
 }
 
 .page-container {
-  width: 400px;
+  width: 408px;
   background-color: $white;
   box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
   z-index: 25;
   display: flex;
   flex-flow: column;
-  border-radius: 7px;
+  border-radius: 8px;
 
   &__header {
     display: flex;
     flex-flow: column;
     border-bottom: 1px solid $geyser;
-    padding: 20px;
+    padding: 16px;
     flex: 0 0 auto;
     position: relative;
+
+    &--no-padding-bottom {
+      padding-bottom: 0;
+    }
   }
 
   &__header-close {
     color: $tundora;
     position: absolute;
-    top: 20px;
-    right: 20px;
+    top: 16px;
+    right: 16px;
     cursor: pointer;
     overflow: hidden;
 
@@ -117,7 +121,7 @@ input.large-input {
     flex-flow: row;
     justify-content: center;
     border-top: 1px solid $geyser;
-    padding: 1.6rem;
+    padding: 16px;
     flex: 0 0 auto;
 
     .btn-clear,
@@ -128,11 +132,10 @@ input.large-input {
   }
 
   &__footer-button {
-    width: 165px;
     height: 55px;
     font-size: 1rem;
     text-transform: uppercase;
-    margin-right: 1.2rem;
+    margin-right: 16px;
     border-radius: 2px;
 
     &:last-of-type {
@@ -162,25 +165,20 @@ input.large-input {
   }
 
   &__tabs {
-    padding: 0 1.3rem;
     display: flex;
+    margin-top: 16px;
   }
 
   &__tab {
     min-width: 5rem;
-    padding: .2rem .8rem .9rem;
+    padding: 8px;
     color: $dusty-gray;
     font-family: Roboto;
-    font-size: 1.1rem;
-    line-height: initial;
+    font-size: 1rem;
     text-align: center;
     cursor: pointer;
     border-bottom: none;
-    margin-right: 1rem;
-
-    &:hover {
-      color: $black;
-    }
+    margin-right: 16px;
 
     &:last-of-type {
       margin-right: 0;
@@ -189,10 +187,6 @@ input.large-input {
     &--selected {
       color: $curious-blue;
       border-bottom: 3px solid $curious-blue;
-
-      &:hover {
-        color: $curious-blue;
-      }
     }
   }
 
@@ -260,7 +254,8 @@ input.large-input {
 
 @media screen and (min-width: 576px) {
   .page-container {
-    height: 600px;
+    max-height: 82vh;
+    min-height: 570px;
     flex: 0 0 auto;
   }
 }
@@ -303,3 +298,9 @@ input.form-control {
     border: 1px solid $monzo;
   }
 }
+
+.hide-text-overflow {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}