Merge pull request #6969 from MetaMask/developv7.0.0

Master Version Bump

11 files changed, 210 insertions, 151 deletions

diff --git a/ui/app/css/index.scss b/ui/app/css/index.scss
index ffccbd64f..865b23127 100644
--- a/ui/app/css/index.scss
+++ b/ui/app/css/index.scss
@@ -16,3 +16,7 @@
 @import './itcss/components/index.scss';
 
 @import './itcss/trumps/index.scss';
+
+@import '../../../node_modules/react-tooltip-component/dist/react-tooltip-component';
+
+@import '../../../node_modules/react-select/dist/react-select';
diff --git a/ui/app/css/itcss/components/account-dropdown-mini.scss b/ui/app/css/itcss/components/account-dropdown-mini.scss
deleted file mode 100644
index 996993db7..000000000
--- a/ui/app/css/itcss/components/account-dropdown-mini.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-.account-dropdown-mini {
-  height: 22px;
-  background-color: $white;
-  font-family: Roboto;
-  line-height: 16px;
-  font-size: 12px;
-  width: 124px;
-
-  &__close-area {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 1000;
-    width: 100%;
-    height: 100%;
-  }
-
-  &__list {
-    z-index: 1050;
-    position: absolute;
-    height: 180px;
-    width: 96pxpx;
-    border: 1px solid $geyser;
-    border-radius: 4px;
-    background-color: $white;
-    box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11);
-    overflow-y: scroll;
-  }
-
-  .account-list-item {
-    margin-top: 6px;
-  }
-
-  .account-list-item__account-name {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    width: 80px;
-  }
-
-  .account-list-item__top-row {
-    margin: 0;
-  }
-
-  .account-list-item__icon {
-    position: initial;
-  }
-}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss
index 716404cc3..283b083da 100644
--- a/ui/app/css/itcss/components/account-dropdown.scss
+++ b/ui/app/css/itcss/components/account-dropdown.scss
@@ -84,7 +84,6 @@
   &__account-primary-balance {
     color: $scorpion;
     border: none;
-    outline: 0 !important;
   }
 
   &__account-secondary-balance {
diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss
index b1a74dce2..9ece7a672 100644
--- a/ui/app/css/itcss/components/currency-display.scss
+++ b/ui/app/css/itcss/components/currency-display.scss
@@ -19,7 +19,6 @@
     font-size: 16px;
     line-height: 22px;
     border: none;
-    outline: 0 !important;
     max-width: 22ch;
   }
 
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 3d426a33c..0e2034670 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -1,4 +1,5 @@
 @import '../../../components/ui/button/buttons';
+@import '../../../components/ui/dialog/dialog';
 
 @import './footer.scss';
 
@@ -42,8 +43,6 @@
 
 @import './account-details-dropdown.scss';
 
-@import './account-dropdown-mini.scss';
-
 @import './editable-label.scss';
 
 @import './pages/index.scss';
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index b3aae8eec..162aac38f 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -3,7 +3,11 @@
   background-color: #FFFFFF;
   box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
   z-index: 25;
-  height: 100%;
+  height: unset;
+
+  @media screen and (min-width: 576px) {
+    position: absolute;
+  }
 
   &__header {
     display: flex;
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 9a0b81aed..ff5f6f6cf 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -65,72 +65,6 @@ $wallet-view-bg: $alabaster;
   @media #{$sub-mid-size-breakpoint-range} {
     min-width: 160px;
   }
-
-  .wallet-view-account-details {
-    flex: 0 0 auto;
-  }
-
-  &__name-container {
-    flex: 0 0 auto;
-    cursor: pointer;
-    width: 100%;
-  }
-
-  &__keyring-label {
-    height: 50px;
-    color: $dusty-gray;
-    font-family: Roboto;
-    font-size: 10px;
-    text-align: right;
-    padding: 17px 20px 0;
-    box-sizing: border-box;
-  }
-
-  &__details-button {
-    font-size: 10px;
-    border-radius: 17px;
-    background-color: transparent;
-    margin: 0 auto;
-    padding: 4px 12px;
-    flex: 0 0 auto;
-  }
-
-  &__tooltip {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 24px;
-  }
-
-  &__address {
-    border-radius: 3px;
-    background-color: $alto;
-    color: $scorpion;
-    font-size: 14px;
-    line-height: 12px;
-    padding: 4px 12px;
-    cursor: pointer;
-    flex: 0 0 auto;
-
-    &__pressed {
-      background-color: $manatee,
-    }
-  }
-
-  &__sidebar-close {
-
-    @media screen and (max-width: 575px) {
-      &::after {
-        content: '\00D7';
-        font-size: 40px;
-        color: $tundora;
-        position: absolute;
-        top: 12px;
-        left: 12px;
-        cursor: pointer;
-      }
-    }
-  }
 }
 
 @media screen and (min-width: 576px) {
@@ -228,20 +162,6 @@ $wallet-view-bg: $alabaster;
   }
 }
 
-// wallet view
-.account-name {
-  font-size: 24px;
-  color: $black;
-  margin-top: 8px;
-  margin-bottom: .9rem;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  width: 100%;
-  padding: 0 8px;
-  text-align: center;
-}
-
 // account options dropdown
 .account-options-menu {
   align-items: center;
diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss
index 6c950d846..25924b6c0 100644
--- a/ui/app/css/itcss/components/request-signature.scss
+++ b/ui/app/css/itcss/components/request-signature.scss
@@ -101,6 +101,30 @@
     font-size: 14px;
   }
 
+  &__account-item {
+    height: 22px;
+    background-color: $white;
+    font-family: Roboto;
+    line-height: 16px;
+    font-size: 12px;
+    width: 124px;
+
+    .account-list-item {
+      margin-top: 6px;
+    }
+
+    .account-list-item__account-name {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      width: 80px;
+    }
+
+    .account-list-item__top-row {
+      margin: 0;
+    }
+  }
+
   &__balance {
     color: $dusty-gray;
     margin-right: 17px;
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index c1a7381b6..81678408a 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -536,8 +536,6 @@
   }
 
   &__form {
-    padding: 10px 0 25px;
-
     @media screen and (max-width: $break-small) {
       margin: 0;
       flex: 1 1 auto;
@@ -553,7 +551,7 @@
   }
 
   &__form-row {
-    margin: 8px 18px 0px;
+    margin: 1rem 1rem 0px;
     position: relative;
     display: flex;
     flex-flow: row;
@@ -570,7 +568,6 @@
   &__form-field {
     flex: 1 1 auto;
     min-width: 0;
-    max-width: 277px;
 
     .currency-display {
       color: $tundora;
@@ -646,6 +643,17 @@
     height: 54px;
     border: none;
 
+    &__single-asset {
+      display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        padding: 8px 8px;
+
+        &:hover {
+          background-color: rgba($alto, 0.2);
+        }
+    }
+
     &__asset {
       display: flex;
       flex-flow: row nowrap;
@@ -747,16 +755,8 @@
   &__to-autocomplete {
     position: relative;
 
-    &__down-caret {
-      z-index: 1026;
-      position: absolute;
-      top: 18px;
-      right: 12px;
-    }
-
     &__qr-code {
       z-index: 1026;
-      position: absolute;
       top: 13px;
       right: 33px;
       cursor: pointer;
@@ -767,13 +767,52 @@
     &__qr-code:hover {
       background: #f1f1f1;
     }
+  }
 
-    &__input.with-qr {
-      padding-right: 65px;
+  &__to-autocomplete {
+    display: flex;
+    flex-direction: row;
+    z-index: 1025;
+    position: relative;
+    height: 54px;
+    width: 100%;
+    border: 1px solid $Grey-100;
+    border-radius: 8px;
+    background-color: $white;
+    color: $tundora;
+    padding: 0 10px;
+    font-family: Roboto;
+    line-height: 21px;
+    align-items: center;
+
+    &__input {
+      font-size: 16px;
+      height: 100%;
+      border: none;
+      flex: 1 1 auto;
+      width: 0;
+
+      &::placeholder {
+        color: #A1A5B3;
+      }
+    }
+
+    &__resolved {
+      font-size: 12px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      height: 30px;
+      cursor: pointer;
+
+      + .send-v2__to-autocomplete__qr-code {
+        top: 2px;
+        right: 0;
+      }
     }
   }
 
-  &__to-autocomplete, &__memo-text-area, &__hex-data {
+  &__memo-text-area, &__hex-data {
     &__input {
       z-index: 1025;
       position: relative;
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 8b282aa1e..aaf6c7c0e 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -38,9 +38,17 @@ html {
   display: flex;
 }
 
-input:focus,
-textarea:focus {
-  outline: none;
+.mouse-user-styles {
+  button:focus,
+  input:focus,
+  textarea:focus,
+  .unit-input__input,
+  .account-list-item__account-primary-balance,
+  .account-list-item__input,
+  .currency-display__input
+   {
+    outline: none;
+  }
 }
 
 /* stylelint-disable */
@@ -122,3 +130,14 @@ input.form-control {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.pinned-to-bottom {
+  position: absolute;
+  bottom: 0px;
+}
+
+.pinned-to-bottom-right {
+  position: absolute;
+  bottom: 0px;
+  right: 0;
+}
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index c02be0d98..9257456ec 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -74,6 +74,36 @@ $send-card-z-index: 20;
 $sidebar-z-index: 26;
 $sidebar-overlay-z-index: 25;
 
+// Flex
+%row-nowrap {
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+%col-nowrap {
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+// Background Image Sizing
+%bg-contain {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+%ellipsify {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+%modal {
+  background-color: $white;
+  border-radius: 10px;
+  box-shadow: 0px 5px 16px rgba($black, 0.25);;
+}
+
 /*
   Z Indicies - Current
   app - 11
@@ -94,24 +124,73 @@ $break-large: 576px;
 $primary-font-type: Roboto;
 
 $Blue-000: #eaf6ff;
+$Blue-100: #a7d9fe;
+$Blue-200: #75c4fd;
+$Blue-300: #43aefc;
 $Blue-400: #1098fc;
 $Blue-500: #037DD6;
 $Blue-600: #0260a4;
+$Blue-700: #024272;
+$Blue-800: #01253f;
+$Blue-900: #00080d;
 
 $Grey-000: #f2f3f4;
 $Grey-100: #D6D9DC;
 $Grey-200: #bbc0c5;
+$Grey-300: #9fa6ae;
 $Grey-400: #848c96;
+$Grey-200: #bbc0c5;
 $Grey-500: #6A737D;
+$Grey-600: #535a61;
 $Grey-800: #24272a;
 
 $Red-000: #fcf2f3;
+$Red-100: #f7d5d8;
+$Red-200: #f1b9be;
+$Red-300: #e88f97;
+$Red-400: #e06470;
 $Red-500: #D73A49;
 $Red-600: #b92534;
+$Red-700: #8e1d28;
+$Red-800: #64141c;
+$Red-900: #3a0c10;
 
 $Orange-000: #fef5ef;
+$Orange-300: #faa66c;
+$Orange-600: #c65507;
 $Orange-500: #F66A0A;
 
+// Font Sizes
+%h3 {
+  font-size: 1.5rem;
+  line-height: 2.125rem;
+  font-weight: 400;
+}
+
+%h4 {
+  font-size: 1.125rem;
+  line-height: 1.3125rem;
+  font-weight: 400;
+}
+
+%h5 {
+  font-size: 1rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+}
+
+%h6 {
+  font-size: .875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+}
+
+%h8 {
+  font-size: .75rem;
+  line-height: 1.0625rem;
+  font-weight: 400;
+}
+
 
 /*
   Spacing Variables
@@ -127,3 +206,24 @@ $xlarge-spacing: 48px;
 $xxlarge-spacing: 64px;
 
 
+%input {
+  background: $white;
+  border: 1px solid $Grey-100;
+  box-sizing: border-box;
+  border-radius: 8px;
+  padding: .625rem .75rem;
+  font-size: 1.25rem;
+}
+// Input mixin
+
+%input-2 {
+  border: 2px solid $Grey-200;
+  border-radius: 6px;
+  color: $Grey-800;
+  padding: 0.875rem 1rem;
+  font-size: 1.125rem;
+
+  &:focus-within {
+    border-color: $Blue-500;
+  }
+}