Merge branch 'NewUI-flat' into uat

1 files changed, 71 insertions, 16 deletions

diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss
index aa8221c9a..5f6d0fcff 100644
--- a/ui/app/css/itcss/components/add-token.scss
+++ b/ui/app/css/itcss/components/add-token.scss
@@ -7,19 +7,6 @@
   z-index: 12;
   font-family: 'DIN Next Light';
 
-  @media screen and (max-width: $break-small) {
-    top: 0;
-    width: 100%;
-
-    &__wrapper {
-      box-shadow: none !important;
-    }
-
-    &__footers {
-      border-bottom: 1px solid $gallery;
-    }
-  }
-
   &__wrapper {
     background-color: $white;
     box-shadow: 0 2px 4px 0 rgba($black, .08);
@@ -109,7 +96,18 @@
     cursor: pointer;
 
     &:hover {
-      background-color: $gallery;
+      background-color: rgba(0, 0, 0, .05);
+    }
+
+    &:active {
+      background-color: rgba(0, 0, 0, .1);
+    }
+
+    .fa {
+      position: absolute;
+      right: 24px;
+      font-size: 24px;
+      line-height: 24px;
     }
   }
 
@@ -180,7 +178,7 @@
     transition: 200ms ease-in-out;
     display: flex;
     flex-flow: row nowrap;
-    flex: 0 0 45%;
+    flex: 0 0 42.5%;
     align-items: center;
     padding: 12px;
     margin: 2.5%;
@@ -204,6 +202,10 @@
     }
   }
 
+  &__token-data {
+    align-self: flex-start;
+  }
+
   &__token-name {
     font-size: 14px;
     line-height: 19px;
@@ -263,6 +265,11 @@
 
   &__confirmation-title {
     padding: 30px 120px 12px;
+
+    @media screen and (max-width: $break-small) {
+      padding: 20px 0;
+      width: 100%;
+    }
   }
 
   &__confirmation-content {
@@ -272,7 +279,7 @@
   &__confirmation-token-list-item {
     display: flex;
     flex-flow: row nowrap;
-    padding: 0 120px;
+    margin: 0 auto;
     align-items: center;
   }
 
@@ -283,4 +290,52 @@
   &__confirmation-token-icon {
     margin-right: 18px;
   }
+
+  @media screen and (max-width: $break-small) {
+    top: 0;
+    width: 100%;
+    overflow: hidden;
+    height: 100%;
+
+    &__wrapper {
+      box-shadow: none !important;
+      flex: 1 1 auto;
+      width: 100%;
+      overflow-y: auto;
+    }
+
+    &__footers {
+      border-bottom: 1px solid $gallery;
+    }
+
+    &__token-icon {
+      width: 50px;
+      height: 50px;
+    }
+
+    &__token-symbol {
+      font-size: 18px;
+      line-height: 24px;
+    }
+
+    &__token-name {
+      font-size: 12px;
+      line-height: 16px;
+    }
+
+    &__buttons {
+      flex-flow: row nowrap;
+      width: 100%;
+      align-items: center;
+      justify-content: center;
+      padding: 12px 0;
+      margin: 0;
+      border-top: 1px solid $gallery;
+
+      button {
+        flex: 1 0 auto;
+        margin: 0 12px;
+      }
+    }
+  }
 }