Confirm Token and Confirm Contract v2

3 files changed, 43 insertions, 38 deletions

diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js
index 386e14afe..ea4aa1dde 100644
--- a/ui/app/components/pending-tx/confirm-deploy-contract.js
+++ b/ui/app/components/pending-tx/confirm-deploy-contract.js
@@ -270,7 +270,8 @@ ConfirmDeployContract.prototype.render = function () {
           h('button.confirm-screen-back-button', {
             onClick: () => backToAccountDetail(selectedAddress),
           }, 'BACK'),
-          h('div.confirm-screen-title', 'Confirm Transaction'),
+          h('div.confirm-screen-title', 'Confirm Contract'),
+          h('div.confirm-screen-header-tip'),
         ]),
         h('div.flex-row.flex-center.confirm-screen-identicons', [
           h('div.confirm-screen-account-wrapper', [
@@ -278,11 +279,11 @@ ConfirmDeployContract.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', [
@@ -292,14 +293,14 @@ ConfirmDeployContract.prototype.render = function () {
           ]),
         ]),
 
-        h('h3.flex-center.confirm-screen-sending-to-message', {
-          style: {
-            textAlign: 'center',
-            fontSize: '16px',
-          },
-        }, [
-          `You're deploying a new contract.`,
-        ]),
+        // h('h3.flex-center.confirm-screen-sending-to-message', {
+        //   style: {
+        //     textAlign: 'center',
+        //     fontSize: '16px',
+        //   },
+        // }, [
+        //   `You're deploying a new contract.`,
+        // ]),
 
         this.renderHeroAmount(),
 
@@ -326,17 +327,17 @@ ConfirmDeployContract.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/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index 384ac92cc..d6ff5a5af 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -155,7 +155,7 @@ ConfirmSendToken.prototype.renderHeroAmount = function () {
         h('h3.flex-center.confirm-screen-send-amount', `$${fiatAmount}`),
         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}"` : '' ]),
         ]),
       ])
     )
@@ -164,7 +164,7 @@ ConfirmSendToken.prototype.renderHeroAmount = function () {
         h('h3.flex-center.confirm-screen-send-amount', tokenAmount),
         h('h3.flex-center.confirm-screen-send-amount-currency', symbol),
         h('div.flex-center.confirm-memo-wrapper', [
-          h('h3.confirm-screen-send-memo', memo),
+          h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
         ]),
       ])
     )
@@ -242,7 +242,7 @@ ConfirmSendToken.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
@@ -252,6 +252,7 @@ ConfirmSendToken.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', [
@@ -259,11 +260,11 @@ ConfirmSendToken.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', [
@@ -271,22 +272,22 @@ ConfirmSendToken.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)}`,
+        // ]),
 
         this.renderHeroAmount(),
 
@@ -314,18 +315,19 @@ ConfirmSendToken.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 dc642c2bc..643747e36 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -140,7 +140,9 @@
   }
 
   i.fa-file-text-o {
-    font-size: 100px;
+    font-size: 60px;
+    margin: 16px 8px 0 8px;
+    text-align: center;
   }
 }
 
@@ -294,7 +296,7 @@ section .confirm-screen-account-number,
   padding: 19px 18px;
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
-
+  width: 100%;
 
   @media screen and (max-width: $break-small) {
     border-top: 1px solid $alto;