Merge pull request #4408 from MetaMask/v4.7.0rc2

Version 4.7.0 - rc2

1 files changed, 30 insertions, 28 deletions

diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 7a64810c4..3525d2003 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -12,7 +12,7 @@ html,
 body {
   font-family: Roboto, Arial;
   color: #4d4d4d;
-  font-weight: 300;
+  font-weight: 400;
   background: #f7f7f7;
   width: 100%;
   height: 100%;
@@ -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,26 +187,22 @@ input.large-input {
     &--selected {
       color: $curious-blue;
       border-bottom: 3px solid $curious-blue;
-
-      &:hover {
-        color: $curious-blue;
-      }
     }
   }
 
   &--full-width {
-    width: initial;
+    width: 100% !important;
   }
 
   &--full-height {
-    height: 100%;
+    height: 100% !important;
+    max-height: initial !important;
+    min-height: initial !important;
   }
 
   &__content {
-    height: 100%;
     overflow-y: auto;
-    min-height: 250px;
-    max-height: 400px;
+    flex: 1;
   }
 
   &__warning-container {
@@ -256,12 +250,14 @@ input.large-input {
     overflow-y: auto;
     background-color: $white;
     border-radius: 0;
+    flex: 1;
   }
 }
 
 @media screen and (min-width: 576px) {
   .page-container {
-    height: 600px;
+    max-height: 82vh;
+    min-height: 570px;
     flex: 0 0 auto;
   }
 }
@@ -304,3 +300,9 @@ input.form-control {
     border: 1px solid $monzo;
   }
 }
+
+.hide-text-overflow {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}