Confirm eth v2

5 files changed, 119 insertions, 80 deletions

diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 330a55cce..537a9a659 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -192,7 +192,7 @@ ConfirmSendEther.prototype.render = function () {
   this.inputs = []
 
   return (
-    h('div.flex-column.flex-grow.confirm-screen-container', {
+    h('div.confirm-screen-container', {
       style: { minWidth: '355px' },
     }, [
       // Main Send token Card
@@ -202,6 +202,7 @@ ConfirmSendEther.prototype.render = function () {
             onClick: () => backToAccountDetail(selectedAddress),
           }, 'BACK'),
           h('div.confirm-screen-title', 'Confirm Transaction'),
+          h('div.confirm-screen-header-tip'),
         ]),
         h('div.flex-row.flex-center.confirm-screen-identicons', [
           h('div.confirm-screen-account-wrapper', [
@@ -209,11 +210,11 @@ ConfirmSendEther.prototype.render = function () {
               Identicon,
               {
                 address: fromAddress,
-                diameter: 100,
+                diameter: 60,
               },
             ),
             h('span.confirm-screen-account-name', fromName),
-            h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
+            // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
           ]),
           h('i.fa.fa-arrow-right.fa-lg'),
           h('div.confirm-screen-account-wrapper', [
@@ -221,27 +222,27 @@ ConfirmSendEther.prototype.render = function () {
               Identicon,
               {
                 address: txParams.to,
-                diameter: 100,
+                diameter: 60,
               },
             ),
             h('span.confirm-screen-account-name', toName),
-            h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
+            // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
           ]),
         ]),
 
-        h('h3.flex-center.confirm-screen-sending-to-message', {
-          style: {
-            textAlign: 'center',
-            fontSize: '16px',
-          },
-        }, [
-          `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
-        ]),
+        // h('h3.flex-center.confirm-screen-sending-to-message', {
+        //   style: {
+        //     textAlign: 'center',
+        //     fontSize: '16px',
+        //   },
+        // }, [
+        //   `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
+        // ]),
 
         h('h3.flex-center.confirm-screen-send-amount', [`$${amountInUSD}`]),
         h('h3.flex-center.confirm-screen-send-amount-currency', [ 'USD' ]),
         h('div.flex-center.confirm-memo-wrapper', [
-          h('h3.confirm-screen-send-memo', [ memo ]),
+          h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
         ]),
 
         h('div.confirm-screen-rows', [
@@ -365,17 +366,16 @@ ConfirmSendEther.prototype.render = function () {
 // }
       ]),
 
-      h('form#pending-tx-form.flex-column.flex-center', {
+      h('form#pending-tx-form', {
         onSubmit: this.onSubmit,
       }, [
-
-        // Accept Button
-        h('button.confirm-screen-confirm-button', ['CONFIRM']),
-
         // Cancel Button
         h('div.cancel.btn-light.confirm-screen-cancel-button', {
           onClick: (event) => this.cancel(event, txMeta),
         }, 'CANCEL'),
+
+        // Accept Button
+        h('button.confirm-screen-confirm-button', ['CONFIRM']),
       ]),
     ])
   )
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;
diff --git a/ui/lib/feature-toggle-utils.js b/ui/lib/feature-toggle-utils.js
index f4ff446d3..6d4e461ca 100644
--- a/ui/lib/feature-toggle-utils.js
+++ b/ui/lib/feature-toggle-utils.js
@@ -1,4 +1,4 @@
-function checkFeatureToggle(name) {
+function checkFeatureToggle (name) {
   const queryPairMap = window.location.search.substr(1).split('&')
     .map(pair => pair.split('='))
     .reduce((pairs, [key, value]) => ({...pairs, [key]: value }), {})
@@ -8,4 +8,4 @@ function checkFeatureToggle(name) {
 
 module.exports = {
   checkFeatureToggle,
-}
\ No newline at end of file
+}