From 4512243290fc08f1202360ab3f5f0b2b21bb0393 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Fri, 16 Mar 2018 16:39:00 -0700
Subject: Fix styling on confirm-send-ether and confirm-send-token (#3600)

---
 .../pending-tx/confirm-deploy-contract.js          |   2 +-
 ui/app/components/pending-tx/confirm-send-ether.js | 320 +++++++++++----------
 ui/app/components/pending-tx/confirm-send-token.js | 134 ++++-----
 3 files changed, 231 insertions(+), 225 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js
index e7c4c536b..4810bb515 100644
--- a/ui/app/components/pending-tx/confirm-deploy-contract.js
+++ b/ui/app/components/pending-tx/confirm-deploy-contract.js
@@ -293,7 +293,7 @@ class ConfirmDeployContract extends Component {
         ]),
 
         h('form#pending-tx-form', {
-          onClick: event => this.onSubmit(event),
+          onSubmit: event => this.onSubmit(event),
         }, [
           h('.page-container__footer', [
             // Cancel Button
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 4d4732bdb..908df3671 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -224,181 +224,185 @@ ConfirmSendEther.prototype.render = function () {
           h('div.page-container__title', 'Confirm'),
           h('div.page-container__subtitle', `Please review your transaction.`),
         ]),
-        h('div.flex-row.flex-center.confirm-screen-identicons', [
-          h('div.confirm-screen-account-wrapper', [
-            h(
-              Identicon,
-              {
-                address: fromAddress,
-                diameter: 60,
-              },
-            ),
-            h('span.confirm-screen-account-name', fromName),
-            // 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', [
-            h(
-              Identicon,
-              {
-                address: txParams.to,
-                diameter: 60,
-              },
-            ),
-            h('span.confirm-screen-account-name', toName),
-            // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
+        h('.page-container__content', [
+          h('div.flex-row.flex-center.confirm-screen-identicons', [
+            h('div.confirm-screen-account-wrapper', [
+              h(
+                Identicon,
+                {
+                  address: fromAddress,
+                  diameter: 60,
+                },
+              ),
+              h('span.confirm-screen-account-name', fromName),
+              // 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', [
+              h(
+                Identicon,
+                {
+                  address: txParams.to,
+                  diameter: 60,
+                },
+              ),
+              h('span.confirm-screen-account-name', toName),
+              // 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-send-amount', [`${amountInFIAT}`]),
-        h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]),
-        h('div.flex-center.confirm-memo-wrapper', [
-          h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
-        ]),
+          // 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', [`${amountInFIAT}`]),
+          h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]),
+          h('div.flex-center.confirm-memo-wrapper', [
+            h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
+          ]),
 
-        h('div.confirm-screen-rows', [
-          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', fromName),
-              h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+          h('div.confirm-screen-rows', [
+            h('section.flex-row.flex-center.confirm-screen-row', [
+              h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', fromName),
+                h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+              ]),
             ]),
-          ]),
 
-          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', toName),
-              h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
+            h('section.flex-row.flex-center.confirm-screen-row', [
+              h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', toName),
+                h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
+              ]),
             ]),
-          ]),
 
-          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`),
+            h('section.flex-row.flex-center.confirm-screen-row', [
+              h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`),
 
-              h('div.confirm-screen-row-detail', `${gasFeeInETH} ETH`),
+                h('div.confirm-screen-row-detail', `${gasFeeInETH} ETH`),
+              ]),
             ]),
-          ]),
 
 
-          h('section.flex-row.flex-center.confirm-screen-total-box ', [
-            h('div.confirm-screen-section-column', [
-              h('span.confirm-screen-label', [ t('total') + ' ' ]),
-              h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
-            ]),
+            h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
+              h('div.confirm-screen-section-column', [
+                h('span.confirm-screen-label', [ t('total') + ' ' ]),
+                h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
+              ]),
 
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`),
-              h('div.confirm-screen-row-detail', `${totalInETH} ETH`),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`),
+                h('div.confirm-screen-row-detail', `${totalInETH} ETH`),
+              ]),
             ]),
           ]),
+
+  // These are latest errors handling from master
+  // Leaving as comments as reference when we start implementing error handling
+  //         h('style', `
+  //           .conf-buttons button {
+  //             margin-left: 10px;
+  //             text-transform: uppercase;
+  //           }
+  //         `),
+
+  //         txMeta.simulationFails ?
+  //           h('.error', {
+  //             style: {
+  //               marginLeft: 50,
+  //               fontSize: '0.9em',
+  //             },
+  //           }, 'Transaction Error. Exception thrown in contract code.')
+  //         : null,
+
+  //         !isValidAddress ?
+  //           h('.error', {
+  //             style: {
+  //               marginLeft: 50,
+  //               fontSize: '0.9em',
+  //             },
+  //           }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.')
+  //         : null,
+
+  //         insufficientBalance ?
+  //           h('span.error', {
+  //             style: {
+  //               marginLeft: 50,
+  //               fontSize: '0.9em',
+  //             },
+  //           }, 'Insufficient balance for transaction')
+  //         : null,
+
+  //         // send + cancel
+  //         h('.flex-row.flex-space-around.conf-buttons', {
+  //           style: {
+  //             display: 'flex',
+  //             justifyContent: 'flex-end',
+  //             margin: '14px 25px',
+  //           },
+  //         }, [
+  //           h('button', {
+  //             onClick: (event) => {
+  //               this.resetGasFields()
+  //               event.preventDefault()
+  //             },
+  //           }, 'Reset'),
+
+  //           // Accept Button or Buy Button
+  //           insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') :
+  //             h('input.confirm.btn-green', {
+  //               type: 'submit',
+  //               value: 'SUBMIT',
+  //               style: { marginLeft: '10px' },
+  //               disabled: buyDisabled,
+  //             }),
+
+  //           h('button.cancel.btn-red', {
+  //             onClick: props.cancelTransaction,
+  //           }, 'Reject'),
+  //         ]),
+  //         showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', {
+  //           style: {
+  //             display: 'flex',
+  //             justifyContent: 'flex-end',
+  //             margin: '14px 25px',
+  //           },
+  //         }, [
+  //           h('button.cancel.btn-red', {
+  //             onClick: props.cancelAllTransactions,
+  //           }, 'Reject All'),
+  //         ]) : null,
+  //       ]),
+  //     ])
+  //   )
+  // }
         ]),
 
-// These are latest errors handling from master
-// Leaving as comments as reference when we start implementing error handling
-//         h('style', `
-//           .conf-buttons button {
-//             margin-left: 10px;
-//             text-transform: uppercase;
-//           }
-//         `),
-
-//         txMeta.simulationFails ?
-//           h('.error', {
-//             style: {
-//               marginLeft: 50,
-//               fontSize: '0.9em',
-//             },
-//           }, 'Transaction Error. Exception thrown in contract code.')
-//         : null,
-
-//         !isValidAddress ?
-//           h('.error', {
-//             style: {
-//               marginLeft: 50,
-//               fontSize: '0.9em',
-//             },
-//           }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.')
-//         : null,
-
-//         insufficientBalance ?
-//           h('span.error', {
-//             style: {
-//               marginLeft: 50,
-//               fontSize: '0.9em',
-//             },
-//           }, 'Insufficient balance for transaction')
-//         : null,
-
-//         // send + cancel
-//         h('.flex-row.flex-space-around.conf-buttons', {
-//           style: {
-//             display: 'flex',
-//             justifyContent: 'flex-end',
-//             margin: '14px 25px',
-//           },
-//         }, [
-//           h('button', {
-//             onClick: (event) => {
-//               this.resetGasFields()
-//               event.preventDefault()
-//             },
-//           }, 'Reset'),
-
-//           // Accept Button or Buy Button
-//           insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') :
-//             h('input.confirm.btn-green', {
-//               type: 'submit',
-//               value: 'SUBMIT',
-//               style: { marginLeft: '10px' },
-//               disabled: buyDisabled,
-//             }),
-
-//           h('button.cancel.btn-red', {
-//             onClick: props.cancelTransaction,
-//           }, 'Reject'),
-//         ]),
-//         showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', {
-//           style: {
-//             display: 'flex',
-//             justifyContent: 'flex-end',
-//             margin: '14px 25px',
-//           },
-//         }, [
-//           h('button.cancel.btn-red', {
-//             onClick: props.cancelAllTransactions,
-//           }, 'Reject All'),
-//         ]) : null,
-//       ]),
-//     ])
-//   )
-// }
-      ]),
+        h('form#pending-tx-form', {
+          onSubmit: this.onSubmit,
+        }, [
+          h('.page-container__footer', [
+            // Cancel Button
+            h('button.btn-cancel.page-container__footer-button.allcaps', {
+              onClick: (event) => {
+                clearSend()
+                this.cancel(event, txMeta)
+              },
+            }, t('cancel')),
 
-      h('form#pending-tx-form', {
-        onSubmit: this.onSubmit,
-      }, [
-        // Cancel Button
-        h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', {
-          onClick: (event) => {
-            clearSend()
-            this.cancel(event, txMeta)
-          },
-        }, t('cancel')),
-
-        // Accept Button
-        h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]),
+            // Accept Button
+            h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]),
+          ]),
+        ]),
       ]),
     ])
   )
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index 69afa8094..0a4182014 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -265,7 +265,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
 
   return fiatAmount && fiatGas
     ? (
-      h('section.flex-row.flex-center.confirm-screen-total-box ', [
+      h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
         h('div.confirm-screen-section-column', [
           h('span.confirm-screen-label', [ t('total') + ' ' ]),
           h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
@@ -278,7 +278,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
       ])
     )
     : (
-      h('section.flex-row.flex-center.confirm-screen-total-box ', [
+      h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
         h('div.confirm-screen-section-column', [
           h('span.confirm-screen-label', [ t('total') + ' ' ]),
           h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
@@ -319,80 +319,82 @@ ConfirmSendToken.prototype.render = function () {
           h('div.page-container__title', t('confirm')),
           h('div.page-container__subtitle', t('pleaseReviewTransaction')),
         ]),
-        h('div.flex-row.flex-center.confirm-screen-identicons', [
-          h('div.confirm-screen-account-wrapper', [
-            h(
-              Identicon,
-              {
-                address: fromAddress,
-                diameter: 60,
-              },
-            ),
-            h('span.confirm-screen-account-name', fromName),
-            // 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', [
-            h(
-              Identicon,
-              {
-                address: toAddress,
-                diameter: 60,
-              },
-            ),
-            h('span.confirm-screen-account-name', toName),
-            // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
+        h('.page-container__content', [
+          h('div.flex-row.flex-center.confirm-screen-identicons', [
+            h('div.confirm-screen-account-wrapper', [
+              h(
+                Identicon,
+                {
+                  address: fromAddress,
+                  diameter: 60,
+                },
+              ),
+              h('span.confirm-screen-account-name', fromName),
+              // 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', [
+              h(
+                Identicon,
+                {
+                  address: toAddress,
+                  diameter: 60,
+                },
+              ),
+              h('span.confirm-screen-account-name', toName),
+              // 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)}`,
-        // ]),
-
-        this.renderHeroAmount(),
-
-        h('div.confirm-screen-rows', [
-          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', fromName),
-              h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.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(),
+
+          h('div.confirm-screen-rows', [
+            h('section.flex-row.flex-center.confirm-screen-row', [
+              h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', fromName),
+                h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+              ]),
             ]),
-          ]),
 
-          toAddress && h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', toName),
-              h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
+            toAddress && h('section.flex-row.flex-center.confirm-screen-row', [
+              h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', toName),
+                h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
+              ]),
             ]),
-          ]),
 
-          this.renderGasFee(),
+            this.renderGasFee(),
 
-          this.renderTotalPlusGas(),
+            this.renderTotalPlusGas(),
 
-        ]),
-      ]),
-
-      h('form#pending-tx-form', {
-        onSubmit: this.onSubmit,
-      }, [
-        // Cancel Button
-        h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', {
-          onClick: (event) => this.cancel(event, txMeta),
-        }, t('cancel')),
+          ]),
 
-        // Accept Button
-        h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]),
+        ]),
+        h('form#pending-tx-form', {
+          onSubmit: this.onSubmit,
+        }, [
+          h('.page-container__footer', [
+            // Cancel Button
+            h('button.btn-cancel.page-container__footer-button.allcaps', {
+              onClick: (event) => this.cancel(event, txMeta),
+            }, t('cancel')),
+
+            // Accept Button
+            h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]),
+          ]),
+        ]),
       ]),
-
-
     ])
   )
 }
-- 
cgit