Merge branch 'master' of github.com:MetaMask/metamask-extension into i18n-translator-redux

9 files changed, 101 insertions, 11 deletions

diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss
index 4752741aa..c4037d862 100644
--- a/ui/app/css/itcss/components/account-menu.scss
+++ b/ui/app/css/itcss/components/account-menu.scss
@@ -87,7 +87,6 @@
     flex: 1 0 auto;
     display: flex;
     flex-flow: column nowrap;
-    padding-top: 4px;
   }
 
   &__check-mark {
@@ -115,13 +114,11 @@
     color: $white;
     font-size: 18px;
     font-weight: 300;
-    line-height: 16px;
   }
 
   &__balance {
     color: $dusty-gray;
     font-size: 14px;
-    line-height: 19px;
   }
 
   &__action {
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index 1977b49ae..abe138f54 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -242,6 +242,22 @@ section .confirm-screen-account-number,
   }
 }
 
+@media screen and (max-width: 379px) {
+  .confirm-screen-row {
+    span.confirm-screen-section-column {
+      flex: 0.4;
+    }
+
+    div.confirm-screen-section-column {
+      flex: 0.6;
+    }
+
+    .currency-display__input {
+      font-size: 14px;
+    }
+  }
+}
+
 .confirm-screen-row-detail {
   font-size: 12px;
   line-height: 16px;
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index c32d1de5e..374cb71b6 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -10,8 +10,9 @@
 .network-component.pointer {
   border: 2px solid $silver;
   border-radius: 82px;
-  padding: 3px;
+  padding: 7px 3px;
   flex: 0 0 auto;
+  display: flex;
 
   &.ethereum-network .menu-icon-circle div {
     background-color: rgba(3, 135, 137, .7) !important;
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 5cdda5e6c..777a82318 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -265,7 +265,6 @@ $wallet-view-bg: $alabaster;
 .account-name {
   font-size: 24px;
   font-weight: 300;
-  line-height: 20px;
   color: $black;
   margin-top: 8px;
   margin-bottom: .9rem;
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index bb17e53cd..bdea1b008 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -660,6 +660,13 @@
 
   &__gas-fee-display {
     width: 100%;
+    position: relative;
+
+    .currency-display--message {
+      padding: 8px 38px 8px 10px;
+      display: flex;
+      align-items: center;
+    }
   }
 
   &__sliders-icon-container {
@@ -885,3 +892,23 @@
     }
   }
 }
+
+.sliders-icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  width: 24px;
+  border: 1px solid $curious-blue;
+  border-radius: 4px;
+  background-color: $white;
+  position: absolute;
+  right: 15px;
+  top: 14px;
+  cursor: pointer;
+  font-size: 1em;
+}
+
+.sliders-icon {
+  color: $curious-blue;
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index c3df493df..d03faf486 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -97,7 +97,7 @@
 
 .tx-list-content-wrapper {
   align-items: stretch;
-  margin-bottom: 4px;
+  margin: 4px 0;
   flex: 1 0 auto;
   width: 100%;
   display: flex;
@@ -126,6 +126,54 @@
   }
 }
 
+.tx-list-item-retry-container {
+  background: #d1edff;
+  width: 100%;
+  border-radius: 4px;
+  font-size: 0.8em;
+  display: flex;
+  justify-content: center;
+  margin-left: 44px;
+  width: calc(100% - 44px);
+
+  @media screen and (min-width: 576px) and (max-width: 679px) {
+    flex-flow: column;
+    align-items: center;
+  }
+
+  @media screen and (min-width: 380px) and (max-width: 575px) {
+    flex-flow: row;
+  }
+
+  @media screen and (max-width: 379px) {
+    flex-flow: column;
+    align-items: center;
+  }
+}
+
+.tx-list-item-retry-copy {
+  font-family: Roboto;
+}
+
+.tx-list-item-retry-link {
+  text-decoration: underline;
+  margin-left: 6px;
+  cursor: pointer;
+
+  @media screen and (min-width: 576px) and (max-width: 679px) {
+    margin-left: 0px;
+  }
+
+  @media screen and (min-width: 380px) and (max-width: 575px) {
+    margin-left: 6px;
+  }
+
+  @media screen and (max-width: 379px) {
+    margin-left: 0px;
+    text-align: center;
+  }
+}
+
 .tx-list-date {
   color: $dusty-gray;
   font-size: 12px;
@@ -136,6 +184,7 @@
   align-self: center;
   flex: 0 0 auto;
   margin-right: 16px;
+  display: flex;
 }
 
 .tx-list-account-and-status-wrapper {
@@ -189,6 +238,10 @@
   .tx-list-status--failed {
     color: $monzo;
   }
+
+  .tx-list-status--dropped {
+    opacity: 0.5;
+  }
 }
 
 .tx-list-item {
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 1fbd9896f..1e226b93e 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -13,7 +13,6 @@ body {
   font-family: Roboto, Arial;
   color: #4d4d4d;
   font-weight: 300;
-  line-height: 1.4em;
   background: #f7f7f7;
   width: 100%;
   height: 100%;
@@ -103,6 +102,7 @@ input.large-input {
     &::after {
       content: '\00D7';
       font-size: 40px;
+      line-height: 20px;
     }
   }
 
diff --git a/ui/app/css/itcss/generic/reset.scss b/ui/app/css/itcss/generic/reset.scss
index e054d533e..a417a0453 100644
--- a/ui/app/css/itcss/generic/reset.scss
+++ b/ui/app/css/itcss/generic/reset.scss
@@ -112,10 +112,6 @@ section {
   display: block;
 }
 
-body {
-  line-height: 1;
-}
-
 ol,
 ul {
   list-style: none;
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index d96c1ae43..640fd95b8 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -46,6 +46,7 @@ $manatee: #93949d;
 $spindle: #c7ddec;
 $mid-gray: #5b5d67;
 $cape-cod: #38393a;
+$onahau: #d1edff;
 $java: #29b6af;
 $wild-strawberry: #ff4a8d;
 $cornflower-blue: #7057ff;