Confirm eth v2

3 files changed, 98 insertions, 59 deletions

diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index 36d1bdd9a..dc642c2bc 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -1,32 +1,43 @@
 .confirm-screen-container {
-  position: absolute;
+  position: relative;
   align-items: center;
+  font-family: Roboto;
+  flex: 0 0 auto;
+  flex-flow: column nowrap;
+  box-shadow: 0 2px 4px 0 rgba($black, .08);
+  border-radius: 8px;
 
   @media screen and (max-width: 575px) {
-    margin-top: 35px;
     width: 100%;
   }
 
   @media screen and (min-width: 576px) {
-    margin-top: 6.9vh;
+    top: -26px;
   }
 }
 
 .confirm-screen-wrapper {
+  height: 100%;
+  width: 380px;
+  background-color: $white;
   display: flex;
-  flex-direction: column;
+  flex-flow: column nowrap;
+  z-index: 25;
   align-items: center;
-  z-index: 100;
-  top: 5%;
-  font-family: 'DIN NEXT';
-  background: $white;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
-  // padding: 20px 24px 32px;
-  color: $scorpion;
-  width: 100%;
+  font-family: Roboto;
+  position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
 
-  @media screen and (min-width: $break-large) {
-    width: 498px;
+  @media screen and (max-width: $break-small) {
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    top: 0;
+    box-shadow: none;
+    height: calc(100vh - 41px - 100px);
   }
 }
 
@@ -39,27 +50,34 @@
   margin: 0;
 }
 
-.confirm-screen-wrapper > .confirm-screen-header {
-
-  @media screen and (max-width: $break-small) {
-    margin-left: 8px;
-  }
-}
-
 .confirm-screen-header {
-  font-size: 26px;
+  height: 88px;
+  background-color: $athens-grey;
   position: relative;
   display: flex;
-  flex-flow: row nowrap;
+  justify-content: center;
   align-items: center;
+  font-size: 22px;
+  line-height: 29px;
   width: 100%;
-  padding: 20px 24px 0;
+  padding: 25px 0;
+  flex: 0 0 auto;
 
   @media screen and (max-width: $break-small) {
     font-size: 22px;
   }
 }
 
+.confirm-screen-header-tip {
+  height: 25px;
+  width: 25px;
+  background: $athens-grey;
+  position: absolute;
+  transform: rotate(45deg);
+  left: 178px;
+  top: 71px;
+}
+
 .confirm-screen-title {
   line-height: 27px;
 
@@ -70,12 +88,12 @@
 }
 
 .confirm-screen-back-button {
-  background: $white;
-  border: 1px solid $dusty-gray;
+  background: transparent;
+  border: 1px solid $curious-blue;
   left: 24px;
   position: absolute;
   text-align: center;
-  color: $black;
+  color: $curious-blue;
   padding: 6px 13px 7px 12px;
   border-radius: 2px;
   height: 30px;
@@ -93,14 +111,15 @@
 
 .confirm-screen-account-name {
   margin-top: 12px;
+  font-size: 14px;
+  line-height: 19px;
+  color: $scorpion;
+  text-align: center;
 }
 
-.confirm-screen-account-name,
 .confirm-screen-row-info {
   font-size: 16px;
-  line-height: 24px;
-  color: $scorpion;
-  text-align: center;
+  line-height: 21px;
 }
 
 .confirm-screen-account-number {
@@ -113,6 +132,7 @@
 
 .confirm-screen-identicons {
   margin-top: 24px;
+  flex: 0 0 auto;
 
   i.fa-arrow-right {
     align-self: start;
@@ -132,34 +152,34 @@
 }
 
 .confirm-screen-send-amount {
-  font-size: 64px;
   color: $scorpion;
   margin-top: 12px;
-  line-height: 60px;
   text-align: center;
-  font-family: 'DIN NEXT Light';
+  font-size: 40px;
+  font-weight: 300;
+  line-height: 53px;
+  flex: 0 0 auto;
 }
 
 .confirm-screen-send-amount-currency {
   font-size: 20px;
   line-height: 20px;
   text-align: center;
+  flex: 0 0 auto;
 }
 
 .confirm-memo-wrapper {
   min-height: 24px;
   width: 100%;
   border-bottom: 1px solid $alto;
+  flex: 0 0 auto;
 }
 
 .confirm-screen-send-memo {
-  color: $dusty-gray;
+  color: $scorpion;
   font-size: 16px;
-  line-height: 24px;
-  text-align: center;
-  margin-top: 21px;
-  margin-bottom: 18px;
-  font-family: 'DIN NEXT Light';
+  line-height: 19px;
+  font-weight: 400;
 }
 
 .confirm-screen-label {
@@ -180,7 +200,7 @@ section .confirm-screen-account-number,
   display: flex;
   flex-flow: column nowrap;
   width: 100%;
-  padding: 0 24px 32px;
+  flex: 0 0 auto;
 }
 
 .confirm-screen-section-column {
@@ -191,24 +211,26 @@ section .confirm-screen-account-number,
   display: flex;
   flex-flow: row nowrap;
   border-bottom: 1px solid $alto;
-  width: calc(100% - 24px);
+  width: 100%;
   align-items: center;
-  padding: 12px 0;
-  margin: 0 12px;
+  padding: 12px;
+  padding-left: 35px;
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 300;
 }
 
 .confirm-screen-row-detail {
   font-size: 12px;
   line-height: 16px;
   color: $dusty-gray;
-  font-family: 'DIN NEXT Light';
 }
 
 .confirm-screen-total-box {
   background-color: $wild-sand;
-  border-radius: 8px;
-  padding: 22px 14px;
-  margin-top: 13px;
+  padding: 20px;
+  padding-left: 35px;
+  border-bottom: 1px solid $alto;
 
   .confirm-screen-label {
     line-height: 18px;
@@ -219,44 +241,62 @@ section .confirm-screen-account-number,
   }
 
   &__subtitle {
-    font-size: 14px;
-    line-height: 20px;
-    font-family: 'DIN NEXT Light';
+    font-size: 12px;
+    line-height: 22px;
+  }
+
+  .confirm-screen-row-info {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 21px;
   }
 }
 
 .confirm-screen-confirm-button {
   height: 62px;
-  width: 216.88px;
   border-radius: 2px;
   background-color: #02c9b1;
   font-size: 16px;
   color: $white;
   text-align: center;
-  font-family: 'DIN NEXT';
+  font-family: Roboto;
   padding-top: 15px;
   padding-bottom: 15px;
-  margin-top: 23px;
   border-width: 0;
   box-shadow: none;
+  flex: 1 0 auto;
+  font-weight: 300;
 }
 
 .btn-light.confirm-screen-cancel-button {
   height: 62px;
-  width: 216.88px;
   background: none;
   border: none;
   opacity: 1;
-  width: 8em;
-  font-family: 'DIN NEXT';
+  font-family: Roboto;
   border-width: 0;
   padding-top: 15px;
   padding-bottom: 15px;
   font-size: 16px;
+  line-height: 32px;
   box-shadow: none;
   cursor: pointer;
+  flex: 1 0 auto;
+  font-weight: 300;
 }
 
 #pending-tx-form {
   flex: 1 0 auto;
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  background-color: $white;
+  padding: 19px 18px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+
+
+  @media screen and (max-width: $break-small) {
+    border-top: 1px solid $alto;
+  }
 }
diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss
index 5b7817651..58e2d444e 100644
--- a/ui/app/css/itcss/settings/typography.scss
+++ b/ui/app/css/itcss/settings/typography.scss
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto:300,500');
+@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
 
 @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');
 
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 764d9c179..7433df81f 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -31,7 +31,6 @@ $concrete: #f3f3f3;
 $tundora: #4d4d4d;
 $nile-blue: #1b344d;
 $scorpion: #5d5d5d;
-$caribbean-green: #02C9B1;
 $silver: #cdcdcd;
 $caribbean-green: #02c9b1;
 $monzo: #d0021b;