Merge pull request #4308 from MetaMask/i4232-addtoken

Update designs for Add Token screen

6 files changed, 29 insertions, 490 deletions

diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss
deleted file mode 100644
index a3ea0d85b..000000000
--- a/ui/app/css/itcss/components/add-token.scss
+++ /dev/null
@@ -1,461 +0,0 @@
-.add-token {
-  width: 498px;
-  max-height: 805px;
-  display: flex;
-  flex-flow: column nowrap;
-  position: relative;
-  z-index: 12;
-  font-family: 'Roboto';
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08);
-
-  &__wrapper {
-    background-color: $white;
-    display: flex;
-    flex-flow: column nowrap;
-    align-items: center;
-    flex: 0 0 auto;
-  }
-
-  &__header {
-    display: flex;
-    flex-flow: column nowrap;
-    padding: 20px 20px 0px;
-    border-bottom: 1px solid $geyser;
-    flex: 0 0 auto;
-
-    &__cancel {
-      color: $dodger-blue;
-      display: flex;
-      align-items: center;
-
-      span {
-        font-family: Roboto;
-        font-size: 16px;
-        font-weight: 400;
-        line-height: 21px;
-        margin-left: 8px;
-        cursor:pointer;
-      }
-    }
-
-    &__title {
-      color: $tundora;
-      font-size: 32px;
-      font-weight: 500;
-      margin-top: 4px;
-    }
-
-    &__subtitle {
-      font-weight: 400;
-      margin-top: 15px;
-      margin-bottom: 21px;
-    }
-
-    &__tabs {
-      display: flex;
-
-      &__tab {
-        height: 54px;
-        padding: 15px 10px;
-        color: $dusty-gray;
-        font-family: Roboto;
-        font-size: 18px;
-        font-weight: 400;
-        line-height: 24px;
-        text-align: center;
-      }
-
-      &__tab:first-of-type {
-        margin-right: 20px;
-      }
-
-      &__unselected:hover {
-        color: $black;
-        border-bottom: none;
-        cursor: pointer;
-      }
-
-      &__selected {
-        color: $curious-blue;
-        border-bottom: 3px solid $curious-blue;
-      }
-    }
-  }
-
-  &__info-box {
-    height: 96px;
-    margin: 20px 20px 0px;
-    border-radius: 4px;
-    background-color: $alabaster;
-    position: relative;
-    padding-left: 18px;
-    display: flex;
-    flex-flow: column;
-
-    &__close::after {
-      content: '\00D7';
-      font-size: 29px;
-      font-weight: 200;
-      color: $dusty-gray;
-      position: absolute;
-      right: 17px;
-      cursor: pointer;
-    }
-
-    &__title {
-      color: $mid-gray;
-      font-family: Roboto;
-      font-size: 14px;
-      font-weight: 400;
-      margin-top: 15px;
-      margin-bottom: 9px;
-    }
-
-    &__copy,
-    &__copy--blue {
-      color: $mid-gray;
-      font-family: Roboto;
-      font-size: 12px;
-      font-weight: 400;
-      line-height: 18px;
-    }
-
-    &__copy--blue {
-      color: $curious-blue;
-    }
-  }
-
-  &__description {
-    text-align: center;
-  }
-
-  &__description + &__description {
-    margin-top: 24px;
-  }
-
-  &__confirmation-description {
-    font-weight: 400;
-    margin: 20px 0 40px 0;
-  }
-
-  &__content-container {
-    width: 100%;
-  }
-
-  &__input-container {
-    display: flex;
-    position: relative;
-  }
-
-  &__search-input-error-message {
-    position: absolute;
-    bottom: -10px;
-    left: 22px;
-    font-size: 12px;
-    width: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    color: $red;
-  }
-
-  &__input,
-  &__add-custom-input {
-    height: 54px;
-    padding: 0px 20px;
-    border: 1px solid $geyser;
-    border-radius: 4px;
-    margin: 22px 24px;
-    position: relative;
-    flex: 1 0 auto;
-    color: $scorpion;
-    font-family: Roboto;
-    font-size: 16px;
-
-    &::placeholder {
-      color: $scorpion;
-      font-family: Roboto;
-      font-size: 16px;
-      line-height: 21px;
-    }
-  }
-
-  &__footers {
-    width: 100%;
-  }
-
-  &__add-custom {
-    color: $scorpion;
-    font-size: 18px;
-    line-height: 24px;
-    text-align: center;
-    padding: 12px 0;
-    font-weight: 600;
-    cursor: pointer;
-    position: relative;
-
-    &:hover {
-      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;
-    }
-  }
-
-  &__add-custom-form {
-    display: flex;
-    flex-flow: column nowrap;
-    margin: 40px 0 30px;
-  }
-
-  &__add-custom-field {
-    position: relative;
-    display: flex;
-    flex-flow: column;
-    flex: 1 0 auto;
-
-    &--error {
-      .add-token__add-custom-input {
-        border-color: $red;
-      }
-    }
-  }
-
-  &__add-custom-error-message {
-    position: absolute;
-    bottom: 1px;
-    left: 22px;
-    font-size: 12px;
-    width: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    color: $red;
-  }
-
-  &__add-custom-label {
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 21px;
-    margin-left: 22px;
-    color: $scorpion;
-  }
-
-  &__add-custom-input {
-    margin-top: 6px;
-    font-size: 16px;
-
-    &::placeholder {
-      color: $silver;
-      font-size: 16px;
-    }
-  }
-
-  &__add-custom-field + &__add-custom-field {
-    margin-top: 6px;
-  }
-
-  &__buttons {
-    display: flex;
-    flex-flow: row nowrap;
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: center;
-    padding-bottom: 30px;
-    padding-top: 20px;
-  }
-
-  &__confirm-button,
-  &__cancel-button {
-    margin: 0 12px;
-    padding: 10px 13px;
-    height: 54px;
-    width: 133px;
-    margin-right: 1.2rem;
-  }
-
-  &__token-icons-title {
-    color: #5B5D67;
-    font-family: Roboto;
-    font-size: 18px;
-    font-weight: 400;
-    line-height: 24px;
-    margin-left: 24px;
-    margin-top: 8px;
-    margin-bottom: 20px;
-  }
-
-  &__token-icons-container {
-    display: flex;
-    flex-flow: row wrap;
-  }
-
-  &__token-wrapper {
-    transition: 200ms ease-in-out;
-    display: flex;
-    flex-flow: row nowrap;
-    flex: 0 0 42.5%;
-    align-items: center;
-    padding: 12px;
-    margin: 0% 2.5% 1.5%;
-    box-sizing: border-box;
-    border-radius: 10px;
-    cursor: pointer;
-    border: 2px solid transparent;
-    position: relative;
-
-    &:hover {
-      border: 2px solid rgba($malibu-blue, .5);
-    }
-
-    &--selected {
-      border: 2px solid $malibu-blue !important;
-    }
-
-    &--disabled {
-      opacity: .4;
-      pointer-events: none;
-    }
-  }
-
-  &__token-data {
-    align-self: flex-start;
-  }
-
-  &__token-name {
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 19px;
-  }
-
-  &__token-symbol {
-    font-size: 22px;
-    line-height: 29px;
-    font-weight: 600;
-  }
-
-  &__token-icon {
-    width: 60px;
-    height: 60px;
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position: center;
-    border-radius: 50%;
-    background-color: $white;
-    box-shadow: 0 2px 4px 0 rgba($black, .24);
-    margin-right: 12px;
-    flex: 0 0 auto;
-  }
-
-  &__token-message {
-    position: absolute;
-    color: $caribbean-green;
-    font-size: 11px;
-    bottom: 0;
-    left: 85px;
-  }
-
-  &__confirmation-token-list {
-    display: flex;
-    flex-flow: column nowrap;
-
-    .token-balance {
-      display: flex;
-      flex-flow: row nowrap;
-      align-items: flex-start;
-
-      &__amount {
-        color: $scorpion;
-        font-size: 43px;
-        line-height: 43px;
-        margin-right: 8px;
-      }
-
-      &__symbol {
-        color: $scorpion;
-        font-size: 16px;
-        font-weight: 400;
-        line-height: 24px;
-      }
-    }
-  }
-
-  &__confirmation-title {
-    padding: 30px 120px 12px;
-
-    @media screen and (max-width: $break-small) {
-      padding: 20px 0;
-      width: 100%;
-    }
-  }
-
-  &__confirmation-content {
-    padding-bottom: 60px;
-  }
-
-  &__confirmation-token-list-item {
-    display: flex;
-    flex-flow: row nowrap;
-    margin: 0 auto;
-    align-items: center;
-  }
-
-  &__confirmation-token-list-item + &__confirmation-token-list-item {
-    margin-top: 30px;
-  }
-
-  &__confirmation-token-icon {
-    margin-right: 18px;
-  }
-
-  @media screen and (max-width: $break-small) {
-    top: 0;
-    width: 100%;
-    overflow: hidden;
-    flex: 1 0 auto;
-
-    &__wrapper {
-      box-shadow: none !important;
-      flex: 1 1 auto;
-      width: 100%;
-      overflow-y: scroll;
-      height: 400px;
-    }
-
-    &__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 {
-      padding: 1rem;
-      margin: 0;
-      border-top: 1px solid $gallery;
-      width: 100%;
-    }
-  }
-}
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 86daf60d8..4cbed6093 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -15,8 +15,9 @@
   font-size: 14px;
   font-weight: 500;
   transition: border-color .3s ease;
-  padding: 0 20px;
+  padding: 0 16px;
   min-width: 140px;
+  width: 100%;
   text-transform: uppercase;
   outline: none;
 }
@@ -110,6 +111,7 @@
   font-size: .85rem;
   font-weight: 400;
   transition: border-color .3s ease;
+  width: 100%;
 
   &:hover {
     border-color: $scorpion;
@@ -126,6 +128,7 @@
   font-size: .85rem;
   font-weight: 400;
   transition: border-color .3s ease;
+  width: 100%;
 }
 
 // No longer used in flat design, remove when modal buttons done
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 1c544e162..1d87b8004 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -30,8 +30,6 @@
 
 @import './token-list.scss';
 
-@import './add-token.scss';
-
 @import './currency-display.scss';
 
 @import './account-menu.scss';
@@ -62,4 +60,4 @@
 
 @import './sender-to-recipient.scss';
 
-@import '../../../components/export-text-container/export-text-container.scss';
+@import '../../../components/index';
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 2903e07b4..bbe0ee661 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -144,8 +144,8 @@ $wallet-view-bg: $alabaster;
     flex: 0 0 auto;
     margin: 36px auto;
     background: none;
-    padding: .7rem 2rem;
     transition: border-color .3s ease;
+    width: 150px;
 
     &:hover {
       border-color: $curious-blue;
diff --git a/ui/app/css/itcss/components/pages/index.scss b/ui/app/css/itcss/components/pages/index.scss
index 195185fff..709f8baf6 100644
--- a/ui/app/css/itcss/components/pages/index.scss
+++ b/ui/app/css/itcss/components/pages/index.scss
@@ -1,3 +1 @@
 @import './reveal-seed.scss';
-
-@import '../../../../components/pages/unlock-page/unlock-page.scss';
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;
+}