From 2a0d0a731bb0fc40bc84c07925fea425d1ac3133 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Thu, 4 May 2017 02:55:55 +0900
Subject: [PATCH 01/10] Refactor modalOverlay.js with Aphrodite, polish Sync
 and Payments stuff

1. advancedSettings.js

- Remove commonStyles.modalOverlay__footer and commonStyles.modalOverlay__footerButton
- Remove padding from advancedSettings thanks to modal dialog normalization

2. bitcoinDashboard.js

- Add no-important to Aphrodite
- Replace paymentCommon.panelFooter with styles.dashboardFooter with temp__displayNone
- Replace qrcodeOverlay with modalOverlay__qrcodeOverlay

3. ledgerBackup.js

- Remove commonStyles.modalOverlay__footer and commonStyles.modalOverlay__footerButton

4. ledgerRecovery.js

- Remove commonStyles.modalOverlay__footer and commonStyles.modalOverlay__footerButton

5. paymentsTab.js

- Add paymentHistoryOverlay__header
- Add paymentHistoryOverlay__footer
- Add paymentHistoryOverlay__body
- Add temp__displayNone temporarily

6. syncTab.js

- Rename overlayContent to newOverlayContent
- Add newOverlayFooter
- Remove syncOverlayBody__wrapper
- Remove commonStyles.modalOverlay__footer and commonStyles.modalOverlay__footerButton
- Remove commonStyles.modalOverlay__dialog and commonStyles.modalOverlay__title thanks to modal dialog normalization
- Set user-select:none to syncOverlayBody__wrapper

7. commonStyles.js - Remove modalOverlay__* thanks to modal dialog normalization (Addresses #8054)

8. global.js - Add zindexModal

9. payment.js - Remove panelFooter thanks to modal dialog normalization

10. modalOverlay.js - Refactor with Aphrodite (Closes #8054)

dialog
|- dialog__wrapper_modal
|- dialog__wrapper_last
|- dialog__wrapper_transparentBackground
|-- dialog__header
|--- dialog__header__close
|--- dialog__header__title
|-- dialog__body__wrapper
|--- dialog__body
|-- dialog__footer

11. preferences.less - Remove obsolete code (Addresses #8661)

12. modalOverlay.less - Remove obsolete code (Addresses #8054)
---
 .../preferences/payment/advancedSettings.js   |   4 +-
 .../preferences/payment/bitcoinDashboard.js   |  49 ++++--
 .../preferences/payment/ledgerBackup.js       |   2 +-
 .../preferences/payment/ledgerRecovery.js     |   2 +-
 .../components/preferences/paymentsTab.js     |  33 +++-
 .../components/preferences/syncTab.js         |  60 +++-----
 .../components/styles/commonStyles.js         |  23 ---
 app/renderer/components/styles/global.js      |   1 +
 app/renderer/components/styles/payment.js     |   6 -
 js/components/modalOverlay.js                 | 145 ++++++++++++++++--
 less/about/preferences.less                   |  27 ----
 less/modalOverlay.less                        |  77 ----------
 12 files changed, 222 insertions(+), 207 deletions(-)

diff --git a/app/renderer/components/preferences/payment/advancedSettings.js b/app/renderer/components/preferences/payment/advancedSettings.js
index 1102ec16eb..586935fce2 100644
--- a/app/renderer/components/preferences/payment/advancedSettings.js
+++ b/app/renderer/components/preferences/payment/advancedSettings.js
@@ -91,7 +91,7 @@ class AdvancedSettingsContent extends ImmutableComponent {
 
 class AdvancedSettingsFooter extends ImmutableComponent {
   render () {
-    return <div className={css(commonStyles.modalOverlay__footer, commonStyles.modalOverlay__footerButton)}>
+    return <div>
       <Button l10nId='backupLedger'
         className={css(commonStyles.primaryButton)}
         onClick={this.props.showOverlay.bind(this, 'ledgerBackup')}
@@ -110,8 +110,6 @@ class AdvancedSettingsFooter extends ImmutableComponent {
 
 const styles = StyleSheet.create({
   advancedSettings: {
-    paddingLeft: '50px',
-    paddingRight: '50px',
     display: 'flex',
     flexWrap: 'nowrap'
   },
diff --git a/app/renderer/components/preferences/payment/bitcoinDashboard.js b/app/renderer/components/preferences/payment/bitcoinDashboard.js
index 0815c0ffee..114ea44922 100644
--- a/app/renderer/components/preferences/payment/bitcoinDashboard.js
+++ b/app/renderer/components/preferences/payment/bitcoinDashboard.js
@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const {StyleSheet, css} = require('aphrodite')
+const {StyleSheet, css} = require('aphrodite/no-important')
 
 // components
 const Button = require('../../../../../js/components/button')
@@ -189,7 +189,7 @@ class BitcoinDashboard extends ImmutableComponent {
 
   panelFooter () {
     if (this.props.ledgerData.get('buyURLFrame')) {
-      return <div className={css(paymentCommon.panelFooter, styles.panelFooter)}>
+      return <div className={css(styles.dashboardFooter, styles.temp__panelFooter)}>
         {/* TODO: refactor button.js */}
         <Button className='whiteButton'
           l10nId='done'
@@ -197,7 +197,7 @@ class BitcoinDashboard extends ImmutableComponent {
           onClick={this.props.hideParentOverlay} />
       </div>
     } else if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) {
-      return <div className={css(paymentCommon.panelFooter, styles.panelFooter, styles.coinbaseFooter)}>
+      return <div className={css(styles.dashboardFooter, styles.temp__panelFooter, styles.coinbaseFooter)}>
         <div className={css(styles.coinbase)}>
           <div className={css(styles.coinbaseLogo)} />
           <span className={css(styles.coinbaseMessage)} data-l10n-id='coinbaseMessage' />
@@ -209,7 +209,7 @@ class BitcoinDashboard extends ImmutableComponent {
           onClick={this.props.hideParentOverlay} />
       </div>
     } else {
-      return <div className={css(paymentCommon.panelFooter, styles.panelFooter)}>
+      return <div className={css(styles.dashboardFooter, styles.temp__panelFooter)}>
         {/* TODO: refactor button.js */}
         <Button className='whiteButton'
           l10nId='done'
@@ -294,7 +294,10 @@ class BitcoinDashboard extends ImmutableComponent {
         this.props.qrcodeOverlayVisible
           ? <ModalOverlay
             content={this.qrcodeOverlayContent()}
-            customDialogClasses={'qrcodeOverlay'}
+            customDialogClasses={cx({
+              qrcodeOverlay: true,
+              [css(styles.modalOverlay__qrcodeOverlay)]: true
+            })}
             footer={this.qrcodeOverlayFooter()}
             onHide={this.props.hideQRcode.bind(this)}
           />
@@ -369,6 +372,9 @@ class BitcoinDashboard extends ImmutableComponent {
           }
         </div>
         {this.smartphonePanel()}
+
+        {/* TODO: Move panelFooter() to dialog's footer
+        to remove temp__panelFooter and temp__displayNone on paymentsTab.js */}
         {this.panelFooter()}
       </div>
     </div>
@@ -380,17 +386,14 @@ const styles = StyleSheet.create({
     display: 'flex',
     paddingLeft: '100px'
   },
-  panelFooter: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end'
+  dashboardFooter: {
+    color: globalStyles.color.darkGray,
+    fontSize: '13px',
+    fontStyle: 'italic'
   },
   disabledPanel: {
     padding: '15px 0'
   },
-  panelButton: {
-    minWidth: '180px'
-  },
   settingsPanelDivider: {
     width: '50%',
     position: 'relative',
@@ -506,8 +509,30 @@ const styles = StyleSheet.create({
     position: 'absolute',
     left: '-45px'
   },
+
   dialogInsideMargin__bottom: {
     marginBottom: globalStyles.spacing.dialogInsideMargin
+  },
+
+  modalOverlay__qrcodeOverlay: {
+    border: 0,
+    width: '350px',
+    height: 'auto',
+    margin: '100px auto 0 auto',
+    background: '#fff',
+    boxShadow: globalStyles.shadow.dialogShadow
+  },
+
+  // TODO: Refactor button to remove !important
+  panelButton: {
+    minWidth: '180px !important'
+  },
+
+  // TODO: Refactor panelFooter on bitcoinDashboard with <ModalOverlay> to remove this
+  temp__panelFooter: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    margin: '20px'
   }
 })
 
diff --git a/app/renderer/components/preferences/payment/ledgerBackup.js b/app/renderer/components/preferences/payment/ledgerBackup.js
index 197a2a2786..180b7b752e 100644
--- a/app/renderer/components/preferences/payment/ledgerBackup.js
+++ b/app/renderer/components/preferences/payment/ledgerBackup.js
@@ -74,7 +74,7 @@ class LedgerBackupFooter extends ImmutableComponent {
   }
 
   render () {
-    return <div className={css(commonStyles.modalOverlay__footer, commonStyles.modalOverlay__footerButton)}>
+    return <div>
       <Button l10nId='printKeys'
         className={css(commonStyles.primaryButton)}
         onClick={this.printKeys}
diff --git a/app/renderer/components/preferences/payment/ledgerRecovery.js b/app/renderer/components/preferences/payment/ledgerRecovery.js
index 37876acbf4..e2b6d82dc5 100644
--- a/app/renderer/components/preferences/payment/ledgerRecovery.js
+++ b/app/renderer/components/preferences/payment/ledgerRecovery.js
@@ -125,7 +125,7 @@ class LedgerRecoveryFooter extends ImmutableComponent {
   }
 
   render () {
-    return <div className={css(commonStyles.modalOverlay__footer, commonStyles.modalOverlay__footerButton)}>
+    return <div>
       <div className={css(styles.recoveryFooterButtons)}>
         <Button l10nId='recover'
           className={css(commonStyles.primaryButton)}
diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js
index f42380bee3..fb52abcad5 100644
--- a/app/renderer/components/preferences/paymentsTab.js
+++ b/app/renderer/components/preferences/paymentsTab.js
@@ -100,9 +100,15 @@ class PaymentsTab extends ImmutableComponent {
       paymentsContainer: true,
       [css(styles.paymentsContainer)]: true
     })} data-test-id='paymentsContainer'>
+      {/* TODO: Refactor panelFooter on bitcoinDashboard to remove the customFooterClasses, based on modalOverlay.js */}
       {
       this.enabled && this.props.addFundsOverlayVisible
-        ? <ModalOverlay title={this.overlayTitle} content={this.overlayContent} onHide={this.props.hideOverlay.bind(this, 'addFunds')} />
+        ? <ModalOverlay
+          title={this.overlayTitle}
+          content={this.overlayContent}
+          customDialogFooterClasses={css(styles.temp__displayNone)}
+          onHide={this.props.hideOverlay.bind(this, 'addFunds')}
+        />
         : null
       }
       {
@@ -110,6 +116,9 @@ class PaymentsTab extends ImmutableComponent {
           ? <ModalOverlay
             title={'paymentHistoryTitle'}
             customDialogClasses={'paymentHistory'}
+            customDialogHeaderClasses={css(styles.paymentHistoryOverlay__header)}
+            customDialogBodyClasses={css(styles.paymentHistoryOverlay__body)}
+            customDialogFooterClasses={css(styles.paymentHistoryOverlay__footer)}
             customTitleClasses={css(styles.paymentHistoryOverlay__title)}
             content={<HistoryContent
               ledgerData={this.props.ledgerData}
@@ -386,13 +395,31 @@ const styles = StyleSheet.create({
     }
   },
 
+  paymentHistoryOverlay__header: {
+    paddingLeft: `${paymentStylesVariables.spacing.paymentHistoryTablePadding} !important`
+  },
+  paymentHistoryOverlay__body: {
+    background: '#fff',
+    height: '300px',
+    overflowY: 'auto',
+    padding: '0 !important'
+  },
+  paymentHistoryOverlay__footer: {
+    display: 'block !important',
+    paddingLeft: `${paymentStylesVariables.spacing.paymentHistoryTablePadding} !important`,
+    paddingTop: '10px !important',
+    paddingBottom: '10px !important'
+  },
   paymentHistoryOverlay__title: {
     // TODO: refactor preferences.less to remove !important
-    // See: .paymentsContainer .modal .dialog .dialog-header .sectionTitle and .modal .dialog .sectionTitle
 
     color: `${globalStyles.color.braveMediumOrange} !important`,
-    padding: `25px 0 25px ${paymentStylesVariables.spacing.paymentHistoryTablePadding} !important`,
     textIndent: '0 !important'
+  },
+
+  // TODO: Refactor panelFooter on bitcoinDashboard with <ModalOverlay> to remove this
+  temp__displayNone: {
+    display: 'none !important'
   }
 })
 
diff --git a/app/renderer/components/preferences/syncTab.js b/app/renderer/components/preferences/syncTab.js
index fd2f1dd509..6ba9a98639 100644
--- a/app/renderer/components/preferences/syncTab.js
+++ b/app/renderer/components/preferences/syncTab.js
@@ -249,9 +249,9 @@ class SyncTab extends ImmutableComponent {
       </ul>
   }
 
-  get overlayContent () {
+  get newOverlayContent () {
     return <div className='syncOverlay'>
-      <div className={css(styles.syncOverlayBody__wrapper)}>
+      <div>
         <ol>
           <li className={css(styles.syncOverlayBody__listItem, commonStyles.noMarginTop)} data-l10n-id='syncNewDevice1' />
           <li className={css(styles.syncOverlayBody__listItem)}>
@@ -264,16 +264,16 @@ class SyncTab extends ImmutableComponent {
           </li>
         </ol>
       </div>
-      <div className={css(
-        commonStyles.modalOverlay__footer,
-        commonStyles.modalOverlay__footerButton
-      )}>
-        <Button className='whiteButton'
-          l10nId='done'
-          testId='doneButton'
-          onClick={this.props.hideOverlay.bind(this, 'syncNewDevice')}
-        />
-      </div>
+    </div>
+  }
+
+  get newOverlayFooter () {
+    return <div>
+      <Button className='whiteButton'
+        l10nId='done'
+        testId='doneButton'
+        onClick={this.props.hideOverlay.bind(this, 'syncNewDevice')}
+      />
     </div>
   }
 
@@ -307,7 +307,7 @@ class SyncTab extends ImmutableComponent {
   }
 
   get startOverlayContent () {
-    return <div className={css(styles.syncOverlayBody__wrapper)}>
+    return <div>
       <div className={css(styles.syncOverlayBody__formBottomMargin)}>
         {this.deviceNameInputContent}
       </div>
@@ -315,10 +315,7 @@ class SyncTab extends ImmutableComponent {
   }
 
   get startOverlayFooter () {
-    return <div className={css(
-      commonStyles.modalOverlay__footer,
-      commonStyles.modalOverlay__footerButton
-    )}>
+    return <div>
       <Button className='primaryButton'
         l10nId='syncCreate'
         testId='syncCreateButton'
@@ -328,7 +325,7 @@ class SyncTab extends ImmutableComponent {
   }
 
   get addOverlayContent () {
-    return <div className={css(styles.syncOverlayBody__wrapper)}>
+    return <div>
       <div className={css(styles.syncOverlayBody__label)} data-l10n-id='syncEnterPassphrase' />
       <div className={css(styles.syncOverlayBody__form)}>
         <textarea className={css(
@@ -349,10 +346,7 @@ class SyncTab extends ImmutableComponent {
   }
 
   get addOverlayFooter () {
-    return <div className={css(
-      commonStyles.modalOverlay__footer,
-      commonStyles.modalOverlay__footerButton
-    )}>
+    return <div>
       <Button className='primaryButton'
         l10nId='syncCreate'
         testId='syncCreateButton'
@@ -363,7 +357,7 @@ class SyncTab extends ImmutableComponent {
   }
 
   get resetOverlayContent () {
-    return <div className={css(styles.syncOverlayBody__wrapper)}>
+    return <div>
       <ul>
         <li className={css(
           styles.syncOverlayBody__listItem,
@@ -379,10 +373,7 @@ class SyncTab extends ImmutableComponent {
   }
 
   get resetOverlayFooter () {
-    return <div className={css(
-      commonStyles.modalOverlay__footer,
-      commonStyles.modalOverlay__footerButton
-    )}>
+    return <div>
       <Button className='whiteButton'
         l10nId='cancel'
         testId='cancelButton'
@@ -460,9 +451,8 @@ class SyncTab extends ImmutableComponent {
       this.isSetup && this.props.syncNewDeviceOverlayVisible
         ? <ModalOverlay
           title={'syncNewDevice'}
-          customDialogClasses={css(commonStyles.modalOverlay__dialog)}
-          customTitleClasses={css(commonStyles.modalOverlay__title)}
-          content={this.overlayContent}
+          content={this.newOverlayContent}
+          footer={this.newOverlayFooter}
           onHide={this.props.hideOverlay.bind(this, 'syncNewDevice')} />
         : null
       }
@@ -470,8 +460,6 @@ class SyncTab extends ImmutableComponent {
       !this.isSetup && this.props.syncStartOverlayVisible
         ? <ModalOverlay
           title={'syncStart'}
-          customDialogClasses={css(commonStyles.modalOverlay__dialog)}
-          customTitleClasses={css(commonStyles.modalOverlay__title)}
           content={this.startOverlayContent}
           footer={this.startOverlayFooter}
           onHide={this.props.hideOverlay.bind(this, 'syncStart')} />
@@ -481,8 +469,6 @@ class SyncTab extends ImmutableComponent {
       !this.isSetup && this.props.syncAddOverlayVisible
         ? <ModalOverlay
           title={'syncAdd'}
-          customDialogClasses={css(commonStyles.modalOverlay__dialog)}
-          customTitleClasses={css(commonStyles.modalOverlay__title)}
           content={this.addOverlayContent}
           footer={this.addOverlayFooter}
           onHide={this.props.hideOverlay.bind(this, 'syncAdd')} />
@@ -492,8 +478,6 @@ class SyncTab extends ImmutableComponent {
       this.isSetup && this.props.syncResetOverlayVisible
         ? <ModalOverlay
           title={'syncReset'}
-          customDialogClasses={css(commonStyles.modalOverlay__dialog)}
-          customTitleClasses={css(commonStyles.modalOverlay__title)}
           content={this.resetOverlayContent}
           footer={this.resetOverlayFooter}
           onHide={this.props.hideOverlay.bind(this, 'syncReset')} />
@@ -631,7 +615,9 @@ const styles = StyleSheet.create({
 
   syncOverlayBody__wrapper: {
     padding: `${globalStyles.spacing.dialogInsideMargin} 50px`,
-    background: '#fff'
+    background: '#fff',
+    userSelect: 'none'
+
   },
   syncOverlayBody__listWrapper: {
     listStyle: 'none'
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index f8793b5e53..19c50c6200 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/app/renderer/components/styles/commonStyles.js
@@ -63,29 +63,6 @@ const styles = StyleSheet.create({
     maxHeight: `calc(80vh - ${globalStyles.spacing.downloadsBarHeight})`
   },
 
-  // modalOverlay
-  // TODO: refactor modalOverlay
-  modalOverlay__dialog: {
-    // TODO: refactor preferences.less to remove !important
-    background: `linear-gradient(${globalStyles.color.modalVeryLightGray}, ${globalStyles.color.modalLightGray}) !important`,
-    borderRadius: `${globalStyles.radius.borderRadiusModal} !important`
-  },
-  modalOverlay__title: {
-    marginBottom: 0,
-
-    // TODO: refactor modalOverlay.less to remove !important
-    padding: '25px 0 !important'
-  },
-
-  modalOverlay__footer: {
-    padding: '20px'
-  },
-  modalOverlay__footerButton: {
-    display: 'flex',
-    flexFlow: 'nowrap',
-    justifyContent: 'flex-end'
-  },
-
   // itemList.less
   listItem: {
     cursor: 'default',
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index 775073f9af..f3e14c932f 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -189,6 +189,7 @@ const globalStyles = {
     zindexPopUp: '3000',
     zindexContextMenu: '3000',
     zindexDialogs: '3000',
+    zindexModal: '3000',
     zindexPopupWindow: '3000',
     zindexForms: '3000',
     zindexSuggestionText: '3100',
diff --git a/app/renderer/components/styles/payment.js b/app/renderer/components/styles/payment.js
index 427d4744d6..28249a8a19 100644
--- a/app/renderer/components/styles/payment.js
+++ b/app/renderer/components/styles/payment.js
@@ -36,12 +36,6 @@ const paymentCommon = StyleSheet.create({
     marginBottom: '8px',
     padding: '25px 20px'
   },
-  panelFooter: {
-    color: globalStyles.color.darkGray,
-    fontSize: '13px',
-    fontStyle: 'italic',
-    padding: '20px 20px 20px 50px'
-  },
   marginButtons: {
     marginLeft: globalStyles.spacing.overlayButtonMargin
   }
diff --git a/js/components/modalOverlay.js b/js/components/modalOverlay.js
index 905a926527..579ec38005 100644
--- a/js/components/modalOverlay.js
+++ b/js/components/modalOverlay.js
@@ -5,6 +5,12 @@
 const React = require('react')
 const ImmutableComponent = require('../../app/renderer/components/immutableComponent')
 const cx = require('../lib/classSet')
+const Button = require('./button')
+
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../../app/renderer/components/styles/global')
+
+const closeButton = require('../../img/toolbar/stoploading_btn.svg')
 
 /**
  * Represents a modal overlay
@@ -44,32 +50,58 @@ class ModalOverlay extends ImmutableComponent {
 
   get dialogContent () {
     var close = null
-    var button = null
     var title = null
 
-    let customTitleClassesStr = (this.props.customTitleClasses ? this.props.customTitleClasses : '')
     let customDialogClassesStr = (this.props.customDialogClasses ? this.props.customDialogClasses : '')
+    let customDialogHeaderClassesStr = (this.props.customDialogHeaderClasses ? this.props.customDialogHeaderClasses : '')
+    let customDialogBodyWrapperClassesStr = (this.props.customDialogBodyWrapperClasses ? this.props.customDialogBodyWrapperClasses : '')
+    let customDialogBodyClassesStr = (this.props.customDialogBodyClasses ? this.props.customDialogBodyClasses : '')
+    let customDialogFooterClassesStr = (this.props.customDialogFooterClasses ? this.props.customDialogFooterClasses : '')
+    let customTitleClassesStr = (this.props.customTitleClasses ? this.props.customTitleClasses : '')
 
     if (!this.props.emptyDialog) {
-      close = (this.props.onHide ? <button type='button' className='close' onClick={this.props.onHide} /> : null)
-      title = (this.props.title ? <div className={cx({
-        sectionTitle: true,
-        [customTitleClassesStr]: true
-      })} data-l10n-id={this.props.title} /> : null)
+      close = (this.props.onHide
+        ? <Button className={css(styles.dialog__header__close)}
+          testId='modalCloseButton'
+          onClick={this.props.onHide}
+        /> : null)
+      title = (this.props.title
+        ? <div className={cx({
+          [css(styles.dialog__header__title)]: true,
+          [customTitleClassesStr]: true
+        })} data-l10n-id={this.props.title}
+        /> : null)
     }
 
     return <div className={cx({
-      dialog: true,
+      [css(styles.dialog)]: true,
       [customDialogClassesStr]: true
     })}>
-      <div className='dialog-header'>
-        {close}
+
+      <div className={cx({
+        [css(styles.dialog__header)]: true,
+        [customDialogHeaderClassesStr]: true
+      })}>
         {title}
+        {close}
       </div>
-      <div className='dialog-body'>
-        {this.props.content}
+
+      <div className={cx({
+        [css(styles.dialog__body__wrapper)]: true,
+        [customDialogBodyWrapperClassesStr]: true
+      })}>
+        <div className={cx({
+          [css(styles.dialog__body)]: true,
+          [customDialogBodyClassesStr]: true
+        })}>
+          {this.props.content}
+        </div>
       </div>
-      <div className='dialog-footer'>
+
+      <div className={cx({
+        [css(styles.dialog__footer)]: true,
+        [customDialogFooterClassesStr]: true
+      })}>
         {this.props.footer}
       </div>
     </div>
@@ -77,14 +109,93 @@ class ModalOverlay extends ImmutableComponent {
 
   render () {
     return <div className={cx({
-      modal: true,
-      fade: true,
-      last: this.state.last,
-      transparentBackground: this.props.transparentBackground
+      [css(styles.dialog__wrapper_modal)]: true,
+      [css(styles.dialog__wrapper_last)]: this.state.last,
+      [css(styles.dialog__wrapper_transparentBackground)]: this.props.transparentBackground
     })} role='alert'>
       {this.dialogContent}
     </div>
   }
 }
 
+const buttonSize = '15px'
+
+const styles = StyleSheet.create({
+  dialog__wrapper_modal: {
+    opacity: 1,
+    overflow: 'auto',
+    position: 'fixed',
+    background: 'transparent',
+    width: '100vw',
+    height: '100vh',
+    left: 0,
+    top: 0,
+    zIndex: globalStyles.zindex.zindexModal
+  },
+  dialog__wrapper_last: {
+    background: globalStyles.color.black25
+  },
+  dialog__wrapper_transparentBackground: {
+    background: 'transparent'
+  },
+
+  dialog: {
+    boxSizing: 'border-box',
+    cursor: 'default',
+    width: '700px',
+    margin: '0 auto',
+    marginTop: '50px',
+    background: `linear-gradient(${globalStyles.color.modalVeryLightGray}, ${globalStyles.color.modalLightGray})`,
+    border: `solid 1px ${globalStyles.color.lightGray}`,
+    borderRadius: globalStyles.radius.borderRadiusModal,
+    boxShadow: globalStyles.shadow.dialogShadow,
+    position: 'relative',
+    userSelect: 'none',
+    zIndex: globalStyles.zindex.zindexDialogs
+  },
+
+  dialog__header: {
+    padding: '25px',
+    paddingLeft: '50px'
+  },
+  dialog__header__close: {
+    display: 'inline-block',
+    position: 'absolute',
+    right: buttonSize,
+    top: buttonSize,
+    height: buttonSize,
+    width: buttonSize,
+    cursor: 'pointer',
+
+    // TODO: refactor button to remove !important
+    padding: '0 !important',
+    background: `url(${closeButton}) center no-repeat !important`,
+    backgroundSize: `${buttonSize} ${buttonSize} !important`,
+
+    ':focus': {
+      outline: 'none'
+    }
+  },
+  dialog__header__title: {
+    fontSize: '22px',
+    color: globalStyles.color.darkGray,
+    marginBottom: 0
+  },
+
+  dialog__body__wrapper: {
+    background: '#fff'
+  },
+  dialog__body: {
+    padding: `${globalStyles.spacing.dialogInsideMargin} 50px`
+  },
+
+  dialog__footer: {
+    padding: '20px',
+    paddingLeft: '50px',
+    display: 'flex',
+    flexFlow: 'nowrap',
+    justifyContent: 'flex-end'
+  }
+})
+
 module.exports = ModalOverlay
diff --git a/less/about/preferences.less b/less/about/preferences.less
index 3ede8c061e..1d77de172d 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -302,26 +302,6 @@ table.sortableTable {
         }
       }
 
-      // Specific properties of the Payment History
-      &.paymentHistory {
-        .dialog-footer {
-          padding: 20px 30px;
-        }
-
-        .dialog-body {
-          background: #FFF;
-          height: 300px;
-          overflow-y: auto;
-          padding-right: 0;
-          padding-left: 0;
-        }
-
-        .dialog-footer {
-          padding-top: 10px;
-          padding-bottom: 10px;
-        }
-      }
-
       // General properties of the header on the modal dialogs
       .dialog-header {
         .sectionTitle {
@@ -335,13 +315,6 @@ table.sortableTable {
         .bitcoinDashboard {
           .modal {
             .qrcodeOverlay {
-              border: 0;
-              width: 350px;
-              height: auto;
-              margin: 100px auto 0 auto;
-              background: white;
-              box-shadow: @dialogShadow;
-
               &.fade {
                 transition: @transitionFast;
               }
diff --git a/less/modalOverlay.less b/less/modalOverlay.less
index 3a55f095c5..1e1cafb9b2 100644
--- a/less/modalOverlay.less
+++ b/less/modalOverlay.less
@@ -9,33 +9,10 @@
 }
 
 .modal {
-  opacity: 1;
-  overflow: auto;
-  position: fixed;
-  background: transparent;
-  width: 100vw;
-  height: 100vh;
-  left: 0;
-  top: 0;
-  z-index: 8999;
-
   +.modal {
     background: transparent;
   }
 
-  &.last {
-    background: @black25;
-
-    &.transparentBackground {
-      background: transparent;
-    }
-  }
-
-  &.hidden {
-    opacity: 0;
-    z-index: -1;
-  }
-
   .modal {
     .dialog {
       left: 0;
@@ -60,58 +37,4 @@
       }
     }
   }
-
-  .dialog {
-    width: 700px;
-    margin: 0 auto;
-    margin-top: 50px;
-    background: linear-gradient(#FFFFFF, #DEDEDE);
-    border: solid 1px @lightGray;
-    border-radius: @borderRadius;
-    box-shadow: @dialogShadow;
-    position: relative;
-    z-index: 9000;
-    box-sizing: border-box;
-
-    &.fade {
-      transition: @transitionFast;
-    }
-
-    /* Copied to siteDetails.js */
-    .sectionTitle {
-      font-size: 22px;
-      padding: 35px 0 10px 0;
-      text-indent: 50px;
-      color: @darkGray;
-    }
-  }
-
-  button {
-    &.close {
-      display: inline-block;
-      background: url('../img/toolbar/stoploading_btn.svg') center no-repeat;
-      background-size: 15px 15px;
-      height: 15px;
-      width: 15px;
-      cursor: pointer;
-      border: none;
-      position: absolute;
-      right: 15px;
-      top: 15px;
-
-      &:focus {
-        outline: none;
-      }
-
-      span {
-        font-size: 2.5em;
-        color: @gray;
-      }
-    }
-
-    &.alt {
-      background: @gray;
-      border: solid 1px @gray;
-    }
-  }
 }

From c7ed72571732ca527174154fcf622adf17ef2788 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <cezaraugusto@outlook.it>
Date: Thu, 4 May 2017 02:56:11 +0900
Subject: [PATCH 02/10] payment modal dialog - bitcoinDashboard.js - move
 footer to modal

---
 .../preferences/payment/bitcoinDashboard.js   | 72 +++++++++----------
 .../components/preferences/paymentsTab.js     | 15 ++--
 2 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/app/renderer/components/preferences/payment/bitcoinDashboard.js b/app/renderer/components/preferences/payment/bitcoinDashboard.js
index 114ea44922..17702fe5e1 100644
--- a/app/renderer/components/preferences/payment/bitcoinDashboard.js
+++ b/app/renderer/components/preferences/payment/bitcoinDashboard.js
@@ -187,38 +187,6 @@ class BitcoinDashboard extends ImmutableComponent {
     </div>
   }
 
-  panelFooter () {
-    if (this.props.ledgerData.get('buyURLFrame')) {
-      return <div className={css(styles.dashboardFooter, styles.temp__panelFooter)}>
-        {/* TODO: refactor button.js */}
-        <Button className='whiteButton'
-          l10nId='done'
-          testId='panelDoneButton'
-          onClick={this.props.hideParentOverlay} />
-      </div>
-    } else if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) {
-      return <div className={css(styles.dashboardFooter, styles.temp__panelFooter, styles.coinbaseFooter)}>
-        <div className={css(styles.coinbase)}>
-          <div className={css(styles.coinbaseLogo)} />
-          <span className={css(styles.coinbaseMessage)} data-l10n-id='coinbaseMessage' />
-        </div>
-        {/* TODO: refactor button.js */}
-        <Button className='whiteButton'
-          l10nId='done'
-          testId='panelDoneButton'
-          onClick={this.props.hideParentOverlay} />
-      </div>
-    } else {
-      return <div className={css(styles.dashboardFooter, styles.temp__panelFooter)}>
-        {/* TODO: refactor button.js */}
-        <Button className='whiteButton'
-          l10nId='done'
-          testId='panelDoneButton'
-          onClick={this.props.hideParentOverlay} />
-      </div>
-    }
-  }
-
   openBuyURLTab () {
     // close parent dialog
     this.props.hideParentOverlay()
@@ -372,15 +340,42 @@ class BitcoinDashboard extends ImmutableComponent {
           }
         </div>
         {this.smartphonePanel()}
-
-        {/* TODO: Move panelFooter() to dialog's footer
-        to remove temp__panelFooter and temp__displayNone on paymentsTab.js */}
-        {this.panelFooter()}
       </div>
     </div>
   }
 }
 
+class BitcoinDashboardFooter extends ImmutableComponent {
+  get coinbaseCountries () {
+    return coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1
+  }
+
+  get coinbaseStyles () {
+    return <div className={css(styles.coinbase)}>
+      <div className={css(this.coinbaseCountries && styles.coinbaseLogo)} />
+      <span className={css(styles.coinbaseMessage)} data-l10n-id='coinbaseMessage' />
+    </div>
+  }
+
+  render () {
+    return <div className={css(
+      styles.dashboardFooter,
+      styles.temp__panelFooter,
+      this.coinbaseCountries && styles.coinbaseFooter
+      )}>
+      {
+        this.coinbaseCountries
+          ? this.coinbaseStyles
+          : null
+      }
+      <Button className='whiteButton'
+        l10nId='done'
+        testId='panelDoneButton'
+        onClick={this.props.hideParentOverlay} />
+    </div>
+  }
+}
+
 const styles = StyleSheet.create({
   panel: {
     display: 'flex',
@@ -536,4 +531,7 @@ const styles = StyleSheet.create({
   }
 })
 
-module.exports = BitcoinDashboard
+module.exports = {
+  BitcoinDashboard,
+  BitcoinDashboardFooter
+}
diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js
index fb52abcad5..91734fb1c8 100644
--- a/app/renderer/components/preferences/paymentsTab.js
+++ b/app/renderer/components/preferences/paymentsTab.js
@@ -21,7 +21,7 @@ const {
 
 const DisabledContent = require('./payment/disabledContent')
 const EnabledContent = require('./payment/enabledContent')
-const BitcoinDashboard = require('./payment/bitcoinDashboard')
+const {BitcoinDashboard, BitcoinDashboardFooter} = require('./payment/bitcoinDashboard')
 const {AdvancedSettingsContent, AdvancedSettingsFooter} = require('./payment/advancedSettings')
 const {HistoryContent, HistoryFooter} = require('./payment/history')
 const {LedgerBackupContent, LedgerBackupFooter} = require('./payment/ledgerBackup')
@@ -107,6 +107,11 @@ class PaymentsTab extends ImmutableComponent {
           title={this.overlayTitle}
           content={this.overlayContent}
           customDialogFooterClasses={css(styles.temp__displayNone)}
+          footer={
+            <BitcoinDashboardFooter
+              ledgerData={this.props.ledgerData}
+              hideParentOverlay={this.props.hideOverlay.bind(this, 'addFunds')} />
+          }
           onHide={this.props.hideOverlay.bind(this, 'addFunds')}
         />
         : null
@@ -415,12 +420,12 @@ const styles = StyleSheet.create({
 
     color: `${globalStyles.color.braveMediumOrange} !important`,
     textIndent: '0 !important'
-  },
+  }
 
   // TODO: Refactor panelFooter on bitcoinDashboard with <ModalOverlay> to remove this
-  temp__displayNone: {
-    display: 'none !important'
-  }
+  // temp__displayNone: {
+  //   display: 'none !important'
+  // }
 })
 
 module.exports = PaymentsTab

From 32dad70bef78a06790c748339c69a3409215d8e1 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Thu, 4 May 2017 02:56:18 +0900
Subject: [PATCH 03/10] payment modal dialog cleanup 1 - ledgerBackup.js and
 ledgerRecovery.js

---
 .../preferences/payment/ledgerBackup.js       | 81 +++++++++---------
 .../preferences/payment/ledgerRecovery.js     | 85 +++++++++----------
 2 files changed, 77 insertions(+), 89 deletions(-)

diff --git a/app/renderer/components/preferences/payment/ledgerBackup.js b/app/renderer/components/preferences/payment/ledgerBackup.js
index 180b7b752e..60905b606b 100644
--- a/app/renderer/components/preferences/payment/ledgerBackup.js
+++ b/app/renderer/components/preferences/payment/ledgerBackup.js
@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const {StyleSheet, css} = require('aphrodite')
+const {StyleSheet, css} = require('aphrodite/no-important')
 
 // components
 const ImmutableComponent = require('../../immutableComponent')
@@ -26,28 +26,30 @@ class LedgerBackupContent extends ImmutableComponent {
     const paymentId = this.props.ledgerData.get('paymentId')
     const passphrase = this.props.ledgerData.get('passphrase')
 
-    return <div className={css(paymentCommon.board)}>
-      <div className={css(paymentCommon.panel, styles.ledgerBackupContent)}>
-        <span data-l10n-id='ledgerBackupContent' />
-        <div className={css(styles.copyKeyContainer)}>
-          <Button l10nId='copy'
-            className={css(commonStyles.whiteButton, styles.copyButton)}
-            onClick={this.copyToClipboard.bind(this, paymentId)}
-          />
-          <div className={css(styles.keyContainer)}>
-            <h3 className={css(styles.keyContainer__h3)} data-l10n-id='firstKey' />
-            <span className={css(styles.keyContainer__span)}>{paymentId}</span>
-          </div>
+    return <div>
+      <span data-l10n-id='ledgerBackupContent' />
+      <div className={css(styles.copyKeyContainer)}>
+        {/* TODO: refactor button */}
+        <Button className='whiteButton'
+          l10nId='copy'
+          testId='copyButtonFirst'
+          onClick={this.copyToClipboard.bind(this, paymentId)}
+        />
+        <div className={css(styles.keyContainer)}>
+          <h3 className={css(styles.keyContainer__h3)} data-l10n-id='firstKey' />
+          <span className={css(styles.keyContainer__span)}>{paymentId}</span>
         </div>
-        <div className={css(styles.copyKeyContainer)}>
-          <Button l10nId='copy'
-            className={css(commonStyles.whiteButton, styles.copyButton)}
-            onClick={this.copyToClipboard.bind(this, passphrase)}
-          />
-          <div className={css(styles.keyContainer)}>
-            <h3 className={css(styles.keyContainer__h3)} data-l10n-id='secondKey' />
-            <span className={css(styles.keyContainer__span)}>{passphrase}</span>
-          </div>
+      </div>
+      <div className={css(styles.copyKeyContainer)}>
+        {/* TODO: refactor button */}
+        <Button className='whiteButton'
+          l10nId='copy'
+          testId='copyButtonSecond'
+          onClick={this.copyToClipboard.bind(this, passphrase)}
+        />
+        <div className={css(styles.keyContainer)}>
+          <h3 className={css(styles.keyContainer__h3)} data-l10n-id='secondKey' />
+          <span className={css(styles.keyContainer__span)}>{passphrase}</span>
         </div>
       </div>
     </div>
@@ -75,16 +77,19 @@ class LedgerBackupFooter extends ImmutableComponent {
 
   render () {
     return <div>
-      <Button l10nId='printKeys'
-        className={css(commonStyles.primaryButton)}
+      <Button className='primaryButton'
+        l10nId='printKeys'
+        testId='printKeysButton'
         onClick={this.printKeys}
       />
-      <Button l10nId='saveRecoveryFile'
-        className={css(commonStyles.primaryButton, paymentCommon.marginButtons)}
+      <Button className='primaryButton'
+        l10nId='saveRecoveryFile'
+        testId='saveRecoveryFileButton'
         onClick={this.saveKeys}
       />
-      <Button l10nId='done'
-        className={css(commonStyles.whiteButton, commonStyles.inlineButton, paymentCommon.marginButtons)}
+      <Button className='whiteButton'
+        l10nId='done'
+        testId='doneButton'
         onClick={this.props.hideOverlay.bind(this, 'ledgerBackup')}
       />
     </div>
@@ -95,30 +100,20 @@ const styles = StyleSheet.create({
   copyKeyContainer: {
     display: 'flex',
     alignItems: 'flex-end',
-    width: '75%',
-    margin: `${globalStyles.spacing.paymentsMargin} auto`
+    justifyContent: 'center',
+    margin: `${globalStyles.spacing.dialogInsideMargin} auto`
   },
 
   keyContainer: {
     marginLeft: '2em'
   },
-
   keyContainer__h3: {
     marginBottom: globalStyles.spacing.modalPanelHeaderMarginBottom
   },
-
   keyContainer__span: {
-    whiteSpace: 'nowrap'
-  },
-  ledgerBackupContent: {
-    paddingLeft: '50px',
-    paddingRight: '50px',
-    marginTop: 0,
-    marginBottom: 0
-  },
-  copyButton: {
-    fontSize: '14px',
-    margin: 0
+    whiteSpace: 'nowrap',
+    userSelect: 'initial',
+    cursor: 'initial'
   }
 })
 
diff --git a/app/renderer/components/preferences/payment/ledgerRecovery.js b/app/renderer/components/preferences/payment/ledgerRecovery.js
index e2b6d82dc5..4d29e20013 100644
--- a/app/renderer/components/preferences/payment/ledgerRecovery.js
+++ b/app/renderer/components/preferences/payment/ledgerRecovery.js
@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const {StyleSheet, css} = require('aphrodite')
+const {StyleSheet, css} = require('aphrodite/no-important')
 
 // util
 const {btcToCurrencyString} = require('../../../../common/lib/ledgerUtil')
@@ -17,7 +17,6 @@ const {SettingsList, SettingItem} = require('../../settings')
 // style
 const globalStyles = require('../../styles/global')
 const commonStyles = require('../../styles/commonStyles')
-const {paymentCommon} = require('../../styles/payment')
 
 // other
 const aboutActions = require('../../../../../js/about/aboutActions')
@@ -50,17 +49,18 @@ class LedgerRecoveryContent extends ImmutableComponent {
     const recoveryError = this.props.ledgerData.getIn(['error', 'error'])
     const isNetworkError = typeof recoveryError === 'object'
 
-    return <div className={css(paymentCommon.board)}>
+    return <div>
       {
         recoverySucceeded === true
           ? <div className={css(styles.recoveryOverlay)}>
-            <h1 className={css(styles.recoveryOverlay__h1)} data-l10n-id='ledgerRecoverySucceeded' />
-            <p className={css(styles.recoveryOverlay__p, styles.spaceAround)}
+            <h1 className={css(styles.recoveryOverlay__textColor)} data-l10n-id='ledgerRecoverySucceeded' />
+            <p className={css(styles.recoveryOverlay__textColor, styles.recoveryOverlay__spaceAround)}
               data-l10n-id='balanceRecovered'
               data-l10n-args={JSON.stringify(l10nDataArgs)}
             />
-            <Button l10nId='ok'
-              className={css(commonStyles.whiteButton, commonStyles.inlineButton)}
+            <Button className='whiteButton'
+              l10nId='ok'
+              testId='okButton'
               onClick={this.clearRecoveryStatus.bind(this)}
             />
           </div>
@@ -69,12 +69,13 @@ class LedgerRecoveryContent extends ImmutableComponent {
       {
         (recoverySucceeded === false && recoveryError && isNetworkError)
           ? <div className={css(styles.recoveryOverlay)}>
-            <h1 className={css(styles.recoveryOverlay__h1)} data-l10n-id='ledgerRecoveryNetworkFailedTitle' data-test-id='recoveryError' />
-            <p className={css(styles.recoveryOverlay__p, styles.spaceAround)}
+            <h1 className={css(styles.recoveryOverlay__textColor)} data-l10n-id='ledgerRecoveryNetworkFailedTitle' data-test-id='recoveryError' />
+            <p className={css(styles.recoveryOverlay__textColor, styles.recoveryOverlay__spaceAround)}
               data-l10n-id='ledgerRecoveryNetworkFailedMessage'
             />
-            <Button l10nId='ok'
-              className={css(commonStyles.whiteButton, commonStyles.inlineButton)}
+            <Button className='whiteButton'
+              l10nId='ok'
+              testId='okButton'
               onClick={this.clearRecoveryStatus.bind(this)}
             />
           </div>
@@ -83,18 +84,19 @@ class LedgerRecoveryContent extends ImmutableComponent {
       {
         (recoverySucceeded === false && recoveryError && !isNetworkError)
           ? <div className={css(styles.recoveryOverlay)}>
-            <h1 className={css(styles.recoveryOverlay__h1)} data-l10n-id='ledgerRecoveryFailedTitle' />
-            <p className={css(styles.recoveryOverlay__p, styles.spaceAround)}
+            <h1 className={css(styles.recoveryOverlay__textColor)} data-l10n-id='ledgerRecoveryFailedTitle' />
+            <p className={css(styles.recoveryOverlay__textColor, styles.recoveryOverlay__spaceAround)}
               data-l10n-id='ledgerRecoveryFailedMessage'
             />
-            <Button l10nId='ok'
-              className={css(commonStyles.whiteButton, commonStyles.inlineButton)}
+            <Button className='whiteButton'
+              l10nId='ok'
+              testId='okButton'
               onClick={this.clearRecoveryStatus.bind(this)}
             />
           </div>
           : null
       }
-      <div className={css(paymentCommon.panel, styles.recoveryContent)}>
+      <div>
         <h4 className={css(styles.recoveryContent__h4)} data-l10n-id='ledgerRecoverySubtitle' />
         <div className={css(styles.ledgerRecoveryContent)} data-l10n-id='ledgerRecoveryContent' />
         <SettingsList className={css(commonStyles.noMarginBottom)}>
@@ -126,31 +128,26 @@ class LedgerRecoveryFooter extends ImmutableComponent {
 
   render () {
     return <div>
-      <div className={css(styles.recoveryFooterButtons)}>
-        <Button l10nId='recover'
-          className={css(commonStyles.primaryButton)}
-          onClick={this.recoverWallet}
-        />
-        <Button l10nId='recoverFromFile'
-          className={css(commonStyles.primaryButton, paymentCommon.marginButtons)}
-          onClick={this.recoverWalletFromFile}
-        />
-        <Button l10nId='cancel'
-          className={css(commonStyles.whiteButton, commonStyles.inlineButton, paymentCommon.marginButtons)}
-          onClick={this.props.hideOverlay.bind(this, 'ledgerRecovery')}
-        />
-      </div>
+      <Button className='primaryButton'
+        l10nId='recover'
+        testId='recoverButton'
+        onClick={this.recoverWallet}
+      />
+      <Button className='primaryButton'
+        l10nId='recoverFromFile'
+        testId='recoverFromFileButton'
+        onClick={this.recoverWalletFromFile}
+      />
+      <Button className='whiteButton'
+        l10nId='cancel'
+        testId='cancelButton'
+        onClick={this.props.hideOverlay.bind(this, 'ledgerRecovery')}
+      />
     </div>
   }
 }
 
 const styles = StyleSheet.create({
-  recoveryContent: {
-    paddingLeft: '50px',
-    paddingRight: '50px',
-    marginTop: 0,
-    marginBottom: 0
-  },
   recoveryContent__h4: {
     marginBottom: globalStyles.spacing.paymentsMargin
   },
@@ -162,6 +159,10 @@ const styles = StyleSheet.create({
   },
 
   recoveryOverlay: {
+    display: 'flex',
+    flexFlow: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
     backgroundColor: globalStyles.color.black75,
     border: `1px solid ${globalStyles.color.black75}`,
     position: 'absolute',
@@ -169,21 +170,13 @@ const styles = StyleSheet.create({
     left: '-1px',
     width: '100%',
     height: '100%',
-    textAlign: 'center',
     zIndex: 999
   },
-  recoveryOverlay__h1: {
-    color: '#fff',
-    marginTop: '120px'
-  },
-  recoveryOverlay__p: {
+  recoveryOverlay__textColor: {
     color: '#fff'
   },
-  spaceAround: {
+  recoveryOverlay__spaceAround: {
     margin: '50px auto'
-  },
-  recoveryFooterButtons: {
-    float: 'right'
   }
 })
 

From 989883ec66aea4d67b8b4515da0461b033117a11 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Thu, 4 May 2017 02:56:24 +0900
Subject: [PATCH 04/10] payment modal dialog cleanup 2 - advancedSettings.js

---
 .../preferences/payment/advancedSettings.js   | 125 +++++++++---------
 1 file changed, 63 insertions(+), 62 deletions(-)

diff --git a/app/renderer/components/preferences/payment/advancedSettings.js b/app/renderer/components/preferences/payment/advancedSettings.js
index 586935fce2..281e0ed18f 100644
--- a/app/renderer/components/preferences/payment/advancedSettings.js
+++ b/app/renderer/components/preferences/payment/advancedSettings.js
@@ -28,62 +28,60 @@ class AdvancedSettingsContent extends ImmutableComponent {
     const minPublisherDuration = this.props.ledgerData.getIn(['synopsisOptions', 'minPublisherDuration'])
     const minPublisherVisits = this.props.ledgerData.getIn(['synopsisOptions', 'minPublisherVisits'])
 
-    return <div className={css(paymentCommon.board)}>
-      <div className={css(paymentCommon.panel, styles.advancedSettings, commonStyles.noMarginTop, commonStyles.noMarginBottom)} data-test-id='advancedSettings'>
-        <div className={css(styles.settingsPanelDivider, styles.deviderFirst)}>
-          <div className={css(styles.minimumSetting)} data-l10n-id='minimumPageTimeSetting' />
-          <SettingsList>
-            <SettingItem>
-              <SettingDropdown
-                data-test-id='durationSelector'
-                defaultValue={minPublisherDuration || appConfig.defaultSettings[settings.MINIMUM_VISIT_TIME]}
-                onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.MINIMUM_VISIT_TIME)}>
-                <option data-l10n-id='minimumPageTimeLow' value='5000' />
-                <option data-l10n-id='minimumPageTimeMedium' value='8000' />
-                <option data-l10n-id='minimumPageTimeHigh' value='60000' />
-              </SettingDropdown>
-            </SettingItem>
-          </SettingsList>
-          <div className={css(styles.minimumSetting)} data-l10n-id='minimumVisitsSetting' />
-          <SettingsList className={css(commonStyles.noMarginBottom)}>
-            <SettingItem>
-              <SettingDropdown
-                data-test-id='visitSelector'
-                defaultValue={minPublisherVisits || 1}
-                onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.MINIMUM_VISITS)}>
-                <option data-l10n-id='minimumVisitsLow' value='1' />
-                <option data-l10n-id='minimumVisitsMedium' value='5' />
-                <option data-l10n-id='minimumVisitsHigh' value='10' />
-              </SettingDropdown>
-            </SettingItem>
-          </SettingsList>
-        </div>
-        <div className={css(styles.settingsPanelDivider, styles.lastDivider)}>
-          <SettingsList className={css(commonStyles.noMarginBottom)}
-            listClassName={css(styles.list)}
-          >
-            <SettingCheckbox
-              dataTestId='payment-advance-notifications'
-              dataL10nId='notifications'
-              prefKey={settings.PAYMENTS_NOTIFICATIONS}
-              settings={this.props.settings}
-              onChangeSetting={this.props.onChangeSetting}
-              className={css(styles.listItem)}
-              switchClassName={css(styles.checkboxSwitch)}
-              labelClassName={css(commonStyles.noMarginBottom)}
-            />
-            <SettingCheckbox
-              dataTestId='payment-advance-nonverified'
-              dataL10nId='nonVerifiedPublishers'
-              prefKey={settings.PAYMENTS_NON_VERIFIED}
-              settings={this.props.settings}
-              onChangeSetting={this.props.onChangeSetting}
-              className={css(styles.listItem, commonStyles.noMarginBottom)}
-              switchClassName={css(styles.checkboxSwitch)}
-              labelClassName={css(commonStyles.noMarginBottom)}
-            />
-          </SettingsList>
-        </div>
+    return <div className={css(styles.advancedSettings)} data-test-id='advancedSettings'>
+      <div className={css(styles.settingsPanelDivider, styles.deviderFirst)}>
+        <div className={css(styles.minimumSetting)} data-l10n-id='minimumPageTimeSetting' />
+        <SettingsList>
+          <SettingItem>
+            <SettingDropdown
+              data-test-id='durationSelector'
+              defaultValue={minPublisherDuration || appConfig.defaultSettings[settings.MINIMUM_VISIT_TIME]}
+              onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.MINIMUM_VISIT_TIME)}>
+              <option data-l10n-id='minimumPageTimeLow' value='5000' />
+              <option data-l10n-id='minimumPageTimeMedium' value='8000' />
+              <option data-l10n-id='minimumPageTimeHigh' value='60000' />
+            </SettingDropdown>
+          </SettingItem>
+        </SettingsList>
+        <div className={css(styles.minimumSetting)} data-l10n-id='minimumVisitsSetting' />
+        <SettingsList className={css(commonStyles.noMarginBottom)}>
+          <SettingItem>
+            <SettingDropdown
+              data-test-id='visitSelector'
+              defaultValue={minPublisherVisits || 1}
+              onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.MINIMUM_VISITS)}>
+              <option data-l10n-id='minimumVisitsLow' value='1' />
+              <option data-l10n-id='minimumVisitsMedium' value='5' />
+              <option data-l10n-id='minimumVisitsHigh' value='10' />
+            </SettingDropdown>
+          </SettingItem>
+        </SettingsList>
+      </div>
+      <div className={css(styles.settingsPanelDivider, styles.lastDivider)}>
+        <SettingsList className={css(commonStyles.noMarginBottom)}
+          listClassName={css(styles.list)}
+        >
+          <SettingCheckbox
+            dataTestId='payment-advance-notifications'
+            dataL10nId='notifications'
+            prefKey={settings.PAYMENTS_NOTIFICATIONS}
+            settings={this.props.settings}
+            onChangeSetting={this.props.onChangeSetting}
+            className={css(styles.listItem)}
+            switchClassName={css(styles.checkboxSwitch)}
+            labelClassName={css(commonStyles.noMarginBottom)}
+          />
+          <SettingCheckbox
+            dataTestId='payment-advance-nonverified'
+            dataL10nId='nonVerifiedPublishers'
+            prefKey={settings.PAYMENTS_NON_VERIFIED}
+            settings={this.props.settings}
+            onChangeSetting={this.props.onChangeSetting}
+            className={css(styles.listItem, commonStyles.noMarginBottom)}
+            switchClassName={css(styles.checkboxSwitch)}
+            labelClassName={css(commonStyles.noMarginBottom)}
+          />
+        </SettingsList>
       </div>
     </div>
   }
@@ -92,16 +90,19 @@ class AdvancedSettingsContent extends ImmutableComponent {
 class AdvancedSettingsFooter extends ImmutableComponent {
   render () {
     return <div>
-      <Button l10nId='backupLedger'
-        className={css(commonStyles.primaryButton)}
+      <Button className='primaryButton'
+        l10nId='backupLedger'
+        testId='backupLedgerButton'
         onClick={this.props.showOverlay.bind(this, 'ledgerBackup')}
       />
-      <Button l10nId='recoverLedger'
-        className={css(commonStyles.primaryButton, paymentCommon.marginButtons)}
+      <Button className='primaryButton'
+        l10nId='recoverLedger'
+        testId='recoverLedgerButton'
         onClick={this.props.showOverlay.bind(this, 'ledgerRecovery')}
       />
-      <Button l10nId='done'
-        className={css(commonStyles.whiteButton, commonStyles.inlineButton, paymentCommon.marginButtons)}
+      <Button className='whiteButton'
+        l10nId='done'
+        testId='doneButton'
         onClick={this.props.hideOverlay.bind(this, 'advancedSettings')}
       />
     </div>

From 245d232c25550ae180bcaef76d8b4de4fe7f941f Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Thu, 4 May 2017 02:59:08 +0900
Subject: [PATCH 05/10] payment modal dialog cleanup 3

Remove paymentCommon that become obsolete thanks to modal dialog normalization

Also:
- Cleanup styles
- Add registerMock to paymentsTabTest.js

Test Plan:
1. npm run test -- --grep='Payments'
---
 .../preferences/payment/advancedSettings.js   |  1 -
 .../preferences/payment/bitcoinDashboard.js   | 16 ++++++------
 .../components/preferences/payment/history.js |  3 +--
 .../preferences/payment/ledgerBackup.js       |  2 --
 .../preferences/payment/ledgerRecovery.js     | 26 +++++++++----------
 .../components/preferences/paymentsTab.js     |  7 -----
 app/renderer/components/styles/global.js      |  1 -
 app/renderer/components/styles/payment.js     | 25 ------------------
 test/unit/app/renderer/paymentsTabTest.js     |  1 +
 9 files changed, 22 insertions(+), 60 deletions(-)

diff --git a/app/renderer/components/preferences/payment/advancedSettings.js b/app/renderer/components/preferences/payment/advancedSettings.js
index 281e0ed18f..9c70d07aae 100644
--- a/app/renderer/components/preferences/payment/advancedSettings.js
+++ b/app/renderer/components/preferences/payment/advancedSettings.js
@@ -18,7 +18,6 @@ const ImmutableComponent = require('../../immutableComponent')
 // style
 const commonStyles = require('../../styles/commonStyles')
 const globalStyles = require('../../styles/global')
-const {paymentCommon} = require('../../styles/payment')
 
 // other
 const settings = require('../../../../../js/constants/settings')
diff --git a/app/renderer/components/preferences/payment/bitcoinDashboard.js b/app/renderer/components/preferences/payment/bitcoinDashboard.js
index 17702fe5e1..cb22ce3377 100644
--- a/app/renderer/components/preferences/payment/bitcoinDashboard.js
+++ b/app/renderer/components/preferences/payment/bitcoinDashboard.js
@@ -7,14 +7,14 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 
 // components
 const Button = require('../../../../../js/components/button')
+const cx = require('../../../../../js/lib/classSet')
 const ModalOverlay = require('../../../../../js/components/modalOverlay')
 const ImmutableComponent = require('../../immutableComponent')
 
 // styles
 const commonStyles = require('../../styles/commonStyles')
 const globalStyles = require('../../styles/global')
-const {paymentCommon} = require('../../styles/payment')
-const cx = require('../../../../../js/lib/classSet')
+
 const CoinBase = require('../../../../extensions/brave/img/coinbase_logo.png')
 const Andorid = require('../../../../extensions/brave/img/android_download.svg')
 const IOS = require('../../../../extensions/brave/img/ios_download.svg')
@@ -96,7 +96,7 @@ class BitcoinDashboard extends ImmutableComponent {
 
   coinbasePanel () {
     if (this.canUseCoinbase) {
-      return <div className={css(paymentCommon.panel, styles.panel, commonStyles.noMarginTop)}>
+      return <div className={css(styles.panel, styles.cleanup__coinbasePanel__panel)}>
         <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
           <span className={cx({
             fa: true,
@@ -113,7 +113,7 @@ class BitcoinDashboard extends ImmutableComponent {
         </div>
       </div>
     } else {
-      return <div className={css(paymentCommon.panel, styles.panel)}>
+      return <div className={css(styles.panel, styles.cleanup__coinbasePanel__panel)}>
         <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
           <span className={cx({
             fa: true,
@@ -138,7 +138,7 @@ class BitcoinDashboard extends ImmutableComponent {
     if (!url || !name) {
       return this.worldWidePanel()
     } else {
-      return <div className={css(paymentCommon.panel, styles.panel, commonStyles.noMarginTop)}>
+      return <div className={css(styles.panel, styles.cleanup__coinbasePanel__panel)}>
         <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
           <span className={cx({
             fa: true,
@@ -164,7 +164,7 @@ class BitcoinDashboard extends ImmutableComponent {
   }
 
   smartphonePanel () {
-    return <div className={css(paymentCommon.panel, styles.panel, commonStyles.noMarginBottom)}>
+    return <div className={css(styles.panel, styles.cleanup__smartphonePanel)}>
       <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst, styles.alignMiddle)}>
         <span className={cx({
           fa: true,
@@ -197,7 +197,7 @@ class BitcoinDashboard extends ImmutableComponent {
   }
 
   worldWidePanel () {
-    return <div className={css(paymentCommon.panel, styles.panel)}>
+    return <div className={css(styles.panel)}>
       <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
         <span className={cx({
           fa: true,
@@ -277,7 +277,7 @@ class BitcoinDashboard extends ImmutableComponent {
             ? this.coinbasePanel()
             : this.exchangePanel()
         }
-        <div className={css(paymentCommon.panel, styles.panel)}>
+        <div className={css(styles.panel, styles.cleanup__bitcoinPanel)}>
           <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
             <span className={cx({
               'fa-stack': true,
diff --git a/app/renderer/components/preferences/payment/history.js b/app/renderer/components/preferences/payment/history.js
index 3fee7d0a77..6bc89d5f0e 100644
--- a/app/renderer/components/preferences/payment/history.js
+++ b/app/renderer/components/preferences/payment/history.js
@@ -153,8 +153,7 @@ const styles = StyleSheet.create({
 
   headerContainer__wrapper: {
     position: 'sticky',
-    top: 0,
-    background: paymentStylesVariables.color.paymentHistoryTableBackgroundColor
+    top: 0
   },
   headerContainer: {
     paddingTop: columnPadding,
diff --git a/app/renderer/components/preferences/payment/ledgerBackup.js b/app/renderer/components/preferences/payment/ledgerBackup.js
index 60905b606b..7e1f41de77 100644
--- a/app/renderer/components/preferences/payment/ledgerBackup.js
+++ b/app/renderer/components/preferences/payment/ledgerBackup.js
@@ -11,8 +11,6 @@ const Button = require('../../../../../js/components/button')
 
 // style
 const globalStyles = require('../../styles/global')
-const commonStyles = require('../../styles/commonStyles')
-const {paymentCommon} = require('../../styles/payment')
 
 // other
 const aboutActions = require('../../../../../js/about/aboutActions')
diff --git a/app/renderer/components/preferences/payment/ledgerRecovery.js b/app/renderer/components/preferences/payment/ledgerRecovery.js
index 4d29e20013..4a525671ac 100644
--- a/app/renderer/components/preferences/payment/ledgerRecovery.js
+++ b/app/renderer/components/preferences/payment/ledgerRecovery.js
@@ -96,18 +96,16 @@ class LedgerRecoveryContent extends ImmutableComponent {
           </div>
           : null
       }
-      <div>
-        <h4 className={css(styles.recoveryContent__h4)} data-l10n-id='ledgerRecoverySubtitle' />
-        <div className={css(styles.ledgerRecoveryContent)} data-l10n-id='ledgerRecoveryContent' />
-        <SettingsList className={css(commonStyles.noMarginBottom)}>
-          <SettingItem>
-            <h3 data-l10n-id='firstRecoveryKey' />
-            <RecoveryKeyTextbox id='firstRecoveryKey' onChange={this.handleFirstRecoveryKeyChange} />
-            <h3 className={css(styles.recoveryContent__h3)} data-l10n-id='secondRecoveryKey' />
-            <RecoveryKeyTextbox id='secondRecoveryKey' onChange={this.handleSecondRecoveryKeyChange} />
-          </SettingItem>
-        </SettingsList>
-      </div>
+      <h4 className={css(styles.recoveryContent__h4)} data-l10n-id='ledgerRecoverySubtitle' />
+      <div className={css(styles.ledgerRecoveryContent)} data-l10n-id='ledgerRecoveryContent' />
+      <SettingsList className={css(commonStyles.noMarginBottom)}>
+        <SettingItem>
+          <h3 data-l10n-id='firstRecoveryKey' />
+          <RecoveryKeyTextbox id='firstRecoveryKey' onChange={this.handleFirstRecoveryKeyChange} />
+          <h3 className={css(styles.recoveryContent__h3)} data-l10n-id='secondRecoveryKey' />
+          <RecoveryKeyTextbox id='secondRecoveryKey' onChange={this.handleSecondRecoveryKeyChange} />
+        </SettingItem>
+      </SettingsList>
     </div>
   }
 }
@@ -149,13 +147,13 @@ class LedgerRecoveryFooter extends ImmutableComponent {
 
 const styles = StyleSheet.create({
   recoveryContent__h4: {
-    marginBottom: globalStyles.spacing.paymentsMargin
+    marginBottom: globalStyles.spacing.dialogInsideMargin
   },
   recoveryContent__h3: {
     marginBottom: globalStyles.spacing.modalPanelHeaderMarginBottom
   },
   ledgerRecoveryContent: {
-    marginBottom: globalStyles.spacing.paymentsMargin
+    marginBottom: globalStyles.spacing.dialogInsideMargin
   },
 
   recoveryOverlay: {
diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js
index 91734fb1c8..719fe16629 100644
--- a/app/renderer/components/preferences/paymentsTab.js
+++ b/app/renderer/components/preferences/paymentsTab.js
@@ -100,13 +100,11 @@ class PaymentsTab extends ImmutableComponent {
       paymentsContainer: true,
       [css(styles.paymentsContainer)]: true
     })} data-test-id='paymentsContainer'>
-      {/* TODO: Refactor panelFooter on bitcoinDashboard to remove the customFooterClasses, based on modalOverlay.js */}
       {
       this.enabled && this.props.addFundsOverlayVisible
         ? <ModalOverlay
           title={this.overlayTitle}
           content={this.overlayContent}
-          customDialogFooterClasses={css(styles.temp__displayNone)}
           footer={
             <BitcoinDashboardFooter
               ledgerData={this.props.ledgerData}
@@ -421,11 +419,6 @@ const styles = StyleSheet.create({
     color: `${globalStyles.color.braveMediumOrange} !important`,
     textIndent: '0 !important'
   }
-
-  // TODO: Refactor panelFooter on bitcoinDashboard with <ModalOverlay> to remove this
-  // temp__displayNone: {
-  //   display: 'none !important'
-  // }
 })
 
 module.exports = PaymentsTab
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index f3e14c932f..e79bf49cdb 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -142,7 +142,6 @@ const globalStyles = {
     dialogLargeWidth: '600px',
     dialogTopOffset: '30px',
     dialogInsideMargin: '18px',
-    paymentsMargin: '20px',
     privateTabPaddingHorizontal: '30px',
     privateTabPadding: '40px',
     settingsListContainerMargin: '2rem',
diff --git a/app/renderer/components/styles/payment.js b/app/renderer/components/styles/payment.js
index 28249a8a19..e39c27e581 100644
--- a/app/renderer/components/styles/payment.js
+++ b/app/renderer/components/styles/payment.js
@@ -2,9 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-const {StyleSheet} = require('aphrodite')
-const globalStyles = require('./global')
-
 const paymentStyles = {
   font: {
     regular: '14.5px'
@@ -24,28 +21,7 @@ const paymentStyles = {
   }
 }
 
-const paymentCommon = StyleSheet.create({
-  board: {
-    overflowX: 'hidden',
-    clear: 'both'
-  },
-  panel: {
-    background: '#fff',
-    position: 'relative',
-    marginTop: '8px',
-    marginBottom: '8px',
-    padding: '25px 20px'
-  },
-  marginButtons: {
-    marginLeft: globalStyles.spacing.overlayButtonMargin
-  }
-})
-
 const paymentStylesVariables = {
-  color: {
-    // See: .paymentsContainer .modal .dialog.paymentHistory .dialog-body
-    paymentHistoryTableBackgroundColor: '#fff'
-  },
   spacing: {
     paymentHistoryTablePadding: '30px'
   }
@@ -53,6 +29,5 @@ const paymentStylesVariables = {
 
 module.exports = {
   paymentStyles,
-  paymentCommon,
   paymentStylesVariables
 }
diff --git a/test/unit/app/renderer/paymentsTabTest.js b/test/unit/app/renderer/paymentsTabTest.js
index 4830e23c5e..1d15d20ea0 100644
--- a/test/unit/app/renderer/paymentsTabTest.js
+++ b/test/unit/app/renderer/paymentsTabTest.js
@@ -22,6 +22,7 @@ describe('PaymentsTab component', function () {
       warnOnUnregistered: false,
       useCleanCache: true
     })
+    mockery.registerMock('../../img/toolbar/stoploading_btn.svg')
     mockery.registerMock('../../less/switchControls.less', {})
     mockery.registerMock('../../less/about/preferences.less', {})
     mockery.registerMock('../../less/forms.less', {})

From 2a7695a2717dac7f3c04c8bd9997a7afe6cbc10a Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Thu, 4 May 2017 02:59:17 +0900
Subject: [PATCH 06/10] payment modal dialog - refactor bitcoinDashboard.js

Normalize Add funds modal dialog based on the refactored modalOverlay.js
- Reorganize functions
- Reorganize styles to make the dialog consistent with other dialogs

Rename classnames on the BEM style

panel
|- panel__divider
|-- panel__divider_left
|--- panel__divider_left__titleWrapper
|---- panel__divider_left__titleWrapper__iconWrapper
|--- panel__divider_left__listTitleWrapper
|---- panel__divider_left__listTitleWrapper__title
|---- panel__divider_left__listTitleWrapper__subTitle
|-- panel__divider_right
|--- panel__divider_right__title
|--- panel__divider_right__subTitle
|--- panel__divider_right__bitcoinPanel__paymentURL
|--- panel__divider_right__bitcoinPanel__walletLabelText
|--- panel__divider_right__bitcoinPanel__walletAddressText

modalOverlay__qrcodeOverlay
|- modalOverlay__qrcodeOverlay__content
|-- modalOverlay__qrcodeOverlay__content__bitcoinQR
|- modalOverlay__qrcodeOverlay__footerWrapper
|-- modalOverlay__qrcodeOverlay__footerWrapper__footer
|--- modalOverlay__qrcodeOverlay__footerWrapper__footer__qrcodeLogo
|--- modalOverlay__qrcodeOverlay__footerWrapper__footer__appstoreLogo
|--- modalOverlay__qrcodeOverlay__footerWrapper__footer__playstoreLogo

modalOverlay__coinbaseOverlay
|- modalOverlay__coinbaseOverlay__header
|- modalOverlay__coinbaseOverlay__bodyWrapper
|-- modalOverlay__coinbaseOverlay__bodyWrapper__body
|--- modalOverlay__coinbaseOverlay__bodyWrapper__body__iframe
|- modalOverlay__coinbaseOverlay__footer

dashboardFooter
dashboardFooter_coinbaseFooter
|- dashboardFooter_coinbaseFooter__coinbaseMessageWrapper
|-- dashboardFooter_coinbaseFooter__coinbaseMessageWrapper__message

Add bitcoinPanel
Add iconWrapperWidth

Remove modalOverlay.less (Addresses #8661)
Remove data-l10n-id='bitcoinAddress' in favor of 'bitcoinPaymentURL' (Closes #8662)
Remove styles.deviderFirst
Remove styles.alignMiddle
Remove styles.dialogInsideMargin__bottom
Remove styles.disabledPanel
Remove bitcoinDashboard class
Remove unnecessary div
Remove margin:0 from settingListTitle (panel__divider_left__listTitleWrapper__title)

Also:
- Refactor qrcodeOverlay
- Edit qrcodeOverlayContent
- Replace fa icons with functions
- Replace padding magical number with `panelPadding` and `panelPaddingBody`
- Fix done button height on Add funds dialog
- Align done button if coinbase logo is displayed (Closes #6372)
- Display title on Brave wallet QR code (Closes #8663)

Test Plan:
1. Open about:preferences#payments
2. Click "Add funds"
3. Make sure the 3 icons inside the dialog body is aligned

Test plan
1. Open about:preferences#payments
2. Click "Add funds"
3. Click "Fund with credit/debit"
4. Make sure the coinbase widget is displayed at the center

Test Plan:
1. Add your country code to coinbaseCountries.js
2. Open about:preferences#payments
3. Click "Add funds"
4. Click "Display QR code"
5. Make sure the 3 icons appear on the footer

Test Plan:
1. Open about:preferences#payments
2. Enable payments
3. Click "Add funds"
4. Click "Display QR Code"
5. Make sure both the QR image and the label is aligned at the center

Test Plan:
1. Enable coinbase widget (via VPN)
2. Open about:preferences#payments
3. Click "Add funds"
4. Make sure "Done" button is aligned with the other buttons
5. Disable the coinbase widget
6. Make sure "Done button" is aligned to the right side

Test Plan:
1. Open about:preferences#payments
2. Click "Add funds"
3. Click "Display QR code"
4. Hover on the QR code image
5. Make sure its title is displayed
---
 .../locales/en-US/preferences.properties      |   2 +-
 .../preferences/payment/advancedSettings.js   |   2 +-
 .../preferences/payment/bitcoinDashboard.js   | 717 +++++++++++-------
 js/components/modalOverlay.js                 |   3 +-
 less/about/common.less                        |   1 -
 less/modalOverlay.less                        |  40 -
 6 files changed, 434 insertions(+), 331 deletions(-)
 delete mode 100644 less/modalOverlay.less

diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
index 4b6b0cffe6..f5318a8e1a 100644
--- a/app/extensions/brave/locales/en-US/preferences.properties
+++ b/app/extensions/brave/locales/en-US/preferences.properties
@@ -112,8 +112,8 @@ contributionStatementFooterNoteBoxBody2=Brave Payments uses a statistical model
 contributionStatementCopyrightFooter=&copy;2016 - {{currentYear}} Brave Software. Brave is a registered trademark of Brave Software. Site names may be trademarks or registered trademarks of the site owner.
 contributionStatements=Contribution statements
 listOfContributionStatements=List of contribution statements
-bitcoinAddress=Your Brave wallet address is:
 bitcoinPaymentURL=Your Brave wallet address
+bitcoinQRImg.title=Brave wallet QR code
 bitcoinQR=Your Brave wallet QR code
 paymentHistoryTitle=Your Payment History
 bitcoinCopyAddress=Copy Bitcoin address to clipboard
diff --git a/app/renderer/components/preferences/payment/advancedSettings.js b/app/renderer/components/preferences/payment/advancedSettings.js
index 9c70d07aae..ed985dcfaf 100644
--- a/app/renderer/components/preferences/payment/advancedSettings.js
+++ b/app/renderer/components/preferences/payment/advancedSettings.js
@@ -28,7 +28,7 @@ class AdvancedSettingsContent extends ImmutableComponent {
     const minPublisherVisits = this.props.ledgerData.getIn(['synopsisOptions', 'minPublisherVisits'])
 
     return <div className={css(styles.advancedSettings)} data-test-id='advancedSettings'>
-      <div className={css(styles.settingsPanelDivider, styles.deviderFirst)}>
+      <div className={css(styles.settingsPanelDivider)}>
         <div className={css(styles.minimumSetting)} data-l10n-id='minimumPageTimeSetting' />
         <SettingsList>
           <SettingItem>
diff --git a/app/renderer/components/preferences/payment/bitcoinDashboard.js b/app/renderer/components/preferences/payment/bitcoinDashboard.js
index cb22ce3377..a629b5819e 100644
--- a/app/renderer/components/preferences/payment/bitcoinDashboard.js
+++ b/app/renderer/components/preferences/payment/bitcoinDashboard.js
@@ -12,8 +12,8 @@ const ModalOverlay = require('../../../../../js/components/modalOverlay')
 const ImmutableComponent = require('../../immutableComponent')
 
 // styles
-const commonStyles = require('../../styles/commonStyles')
 const globalStyles = require('../../styles/global')
+const commonStyles = require('../../styles/commonStyles')
 
 const CoinBase = require('../../../../extensions/brave/img/coinbase_logo.png')
 const Andorid = require('../../../../extensions/brave/img/android_download.svg')
@@ -52,6 +52,45 @@ class BitcoinDashboard extends ImmutableComponent {
     return !(countryCode && countryCode !== 'US')
   }
 
+  openBuyURLTab () {
+    // close parent dialog
+    this.props.hideParentOverlay()
+  }
+
+  faCreditCard () {
+    return <span className={cx({
+      fa: true,
+      'fa-credit-card': true,
+      [css(styles.faCreditCard)]: true
+    })} />
+  }
+  faBitcoin () {
+    return <span className={cx({
+      'fa-stack': true,
+      'fa-lg': true
+    })}>
+      <span className={cx({
+        fa: true,
+        'fa-circle': true,
+        'fa-stack-2x': true,
+        [css(styles.faCircle)]: true
+      })} />
+      <span className={cx({
+        fa: true,
+        'fa-bitcoin': true,
+        'fa-stack-1x': true,
+        [css(styles.faBitcoin)]: true
+      })} />
+    </span>
+  }
+  faSmartphone () {
+    return <span className={cx({
+      fa: true,
+      'fa-mobile': true,
+      [css(styles.faMobile)]: true
+    })} />
+  }
+
   bitcoinPurchaseButton () {
     if (!this.props.ledgerData.get('buyURLFrame')) {
       /* TODO refactor button */
@@ -61,7 +100,8 @@ class BitcoinDashboard extends ImmutableComponent {
       })}
         l10nId='add'
         testId='bitcoinPurchaseButton'
-        onClick={this.props.showOverlay.bind(this)} />
+        onClick={this.props.showOverlay.bind(this)}
+      />
     }
 
     return <a href={this.props.ledgerData.get('buyURL')} target='_blank' onClick={this.openBuyURLTab}>
@@ -71,66 +111,58 @@ class BitcoinDashboard extends ImmutableComponent {
         [css(styles.panelButton)]: true
       })}
         l10nId='add'
-        testId='bitcoinPurchaseButton' />
+        testId='bitcoinPurchaseButton'
+      />
     </a>
   }
 
-  qrcodeOverlayContent () {
-    return <div>
-      <img className={css(styles.qrcodeImage)} src={this.props.ledgerData.get('paymentIMG')} title='Brave wallet QR code' />
-      <div className={css(styles.bitcoinQRTitle)} data-l10n-id='bitcoinQR' />
-    </div>
-  }
-
-  qrcodeOverlayFooter () {
-    if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) {
-      return <div className={css(styles.qrcodeOverlayFooter)}>
-        <div className={css(styles.coinbaseLogo)} />
-        <a target='_blank' className={css(styles.qrcodeLogo, styles.appstoreLogo)} href='https://itunes.apple.com/us/app/coinbase-bitcoin-wallet/id886427730?mt=8' />
-        <a target='_blank' className={css(styles.qrcodeLogo, styles.playstoreLogo)} href='https://play.google.com/store/apps/details?id=com.coinbase.android' />
-      </div>
-    }
-
-    return null
-  }
-
   coinbasePanel () {
     if (this.canUseCoinbase) {
-      return <div className={css(styles.panel, styles.cleanup__coinbasePanel__panel)}>
-        <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
-          <span className={cx({
-            fa: true,
-            'fa-credit-card': true,
-            [css(styles.fa)]: true,
-            [css(styles.faCreditCard)]: true
-          })} />
-          <div className={css(styles.settingsListTitle)} data-l10n-id='moneyAdd' />
-          <div className={css(styles.settingsListTitle, styles.subTitle)} data-l10n-id='moneyAddSubTitle' />
+      return <div className={css(styles.panel, styles.panel__coinbase)}>
+        <div className={css(styles.panel__divider, styles.panel__divider_left)}>
+          <div className={css(styles.panel__divider_left__titleWrapper)}>
+            <div className={css(styles.panel__divider_left__titleWrapper__iconWrapper)}>
+              {this.faCreditCard()}
+            </div>
+            <div className={css(styles.panel__divider_left__listTitleWrapper)}>
+              <div className={css(styles.panel__divider_left__listTitleWrapper__title)} data-l10n-id='moneyAdd' />
+              <div className={css(
+                styles.panel__divider_left__listTitleWrapper__title,
+                styles.panel__divider_left__listTitleWrapper__subTitle
+              )} data-l10n-id='moneyAddSubTitle' />
+            </div>
+          </div>
         </div>
-        <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerLast)}>
+        <div className={css(styles.panel__divider, styles.panel__divider_right)}>
           {this.bitcoinPurchaseButton()}
-          <div className={css(styles.settingsListTitle, styles.subTitle)} data-l10n-id='transferTime' />
+          <div className={css(
+            styles.panel__divider_right__title,
+            styles.panel__divider_right__subTitle
+          )} data-l10n-id='transferTime' />
         </div>
       </div>
     } else {
-      return <div className={css(styles.panel, styles.cleanup__coinbasePanel__panel)}>
-        <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
-          <span className={cx({
-            fa: true,
-            'fa-credit-card': true,
-            [css(styles.fa)]: true,
-            [css(styles.faCreditCard)]: true
-          })} />
-          <div className={css(styles.settingsListTitle)} data-l10n-id='moneyAdd' />
-          <div className={css(styles.settingsListTitle, styles.subTitle)} data-l10n-id='moneyAddSubTitle' />
+      return <div className={css(styles.panel, styles.panel__coinbase)}>
+        <div className={css(styles.panel__divider, styles.panel__divider_left)}>
+          <div className={css(styles.panel__divider_left__titleWrapper)}>
+            <div className={css(styles.panel__divider_left__titleWrapper__iconWrapper)}>
+              {this.faCreditCard()}
+            </div>
+            <div className={css(styles.panel__divider_left__listTitleWrapper)}>
+              <div className={css(styles.panel__divider_left__listTitleWrapper__title)} data-l10n-id='moneyAdd' />
+              <div className={css(
+                styles.panel__divider_left__listTitleWrapper__title,
+                styles.panel__divider_left__listTitleWrapper__subTitle
+              )} data-l10n-id='moneyAddSubTitle' />
+            </div>
+          </div>
         </div>
-        <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerLast)}>
+        <div className={css(styles.panel__divider, styles.panel__divider_right)}>
           <div data-l10n-id='coinbaseNotAvailable' />
         </div>
       </div>
     }
   }
-
   exchangePanel () {
     const url = this.props.ledgerData.getIn(['exchangeInfo', 'exchangeURL'])
     const name = this.props.ledgerData.getIn(['exchangeInfo', 'exchangeName'])
@@ -138,17 +170,18 @@ class BitcoinDashboard extends ImmutableComponent {
     if (!url || !name) {
       return this.worldWidePanel()
     } else {
-      return <div className={css(styles.panel, styles.cleanup__coinbasePanel__panel)}>
-        <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
-          <span className={cx({
-            fa: true,
-            'fa-credit-card': true,
-            [css(styles.fa)]: true,
-            [css(styles.faCreditCard)]: true
-          })} />
-          <div className={css(styles.settingsListTitle)} data-l10n-id='outsideUSAPayment' />
+      return <div className={css(styles.panel, styles.panel__coinbase)}>
+        <div className={css(styles.panel__divider, styles.panel__divider_left)}>
+          <div className={css(styles.panel__divider_left__titleWrapper)}>
+            <div className={css(styles.panel__divider_left__titleWrapper__iconWrapper)}>
+              {this.faCreditCard()}
+            </div>
+            <div className={css(styles.panel__divider_left__listTitleWrapper)}>
+              <div className={css(styles.panel__divider_left__listTitleWrapper__title)} data-l10n-id='outsideUSAPayment' />
+            </div>
+          </div>
         </div>
-        <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerLast)}>
+        <div className={css(styles.panel__divider, styles.panel__divider_right)}>
           <a target='_blank' href={url}>
             {/* TODO: refactor button.js */}
             <Button className={cx({
@@ -156,25 +189,112 @@ class BitcoinDashboard extends ImmutableComponent {
               [css(styles.panelButton)]: true
             })}
               testId='exchangePanelButton'
-              label={name} />
+              label={name}
+            />
           </a>
         </div>
       </div>
     }
   }
+  worldWidePanel () {
+    return <div className={css(styles.panel)}>
+      <div className={css(styles.panel__divider, styles.panel__divider_left)}>
+        <div className={css(styles.panel__divider_left__titleWrapper)}>
+          <div className={css(styles.panel__divider_left__titleWrapper__iconWrapper)}>
+            {this.faCreditCard()}
+          </div>
+          <div className={css(styles.panel__divider_left__listTitleWrapper)}>
+            <div className={css(styles.panel__divider_left__listTitleWrapper__title)} data-l10n-id='outsideUSAPayment' />
+          </div>
+        </div>
+      </div>
+      <div className={css(styles.panel__divider, styles.panel__divider_right)}>
+        <a target='_blank' href='https://www.buybitcoinworldwide.com/'>
+          {/* TODO: refactor button.js */}
+          <Button className={cx({
+            primaryButton: true,
+            [css(styles.panelButton)]: true
+          })}
+            testId='worldWidePanelButton'
+            label='buybitcoinworldwide.com'
+          />
+        </a>
+      </div>
+    </div>
+  }
+
+  bitcoinPanel () {
+    const ledgerData = this.props.ledgerData
+
+    return <div className={css(styles.panel, styles.panel__bitcoinPanel)}>
+      <div className={css(styles.panel__divider, styles.panel__divider_left)}>
+        <div className={css(styles.panel__divider_left__titleWrapper)}>
+          <div className={css(styles.panel__divider_left__titleWrapper__iconWrapper)}>
+            {this.faBitcoin()}
+          </div>
+          <div className={css(styles.panel__divider_left__listTitleWrapper)}>
+            <div className={css(styles.panel__divider_left__listTitleWrapper__title)} data-l10n-id='bitcoinAdd' />
+            <div className={css(
+              styles.panel__divider_left__listTitleWrapper__title,
+              styles.panel__divider_left__listTitleWrapper__subTitle
+            )} data-l10n-id='bitcoinAddDescription' />
+          </div>
+        </div>
+      </div>
+      {
+        ledgerData.get('address')
+          ? <div className={css(styles.panel__divider, styles.panel__divider_right)}>
+            {
+              ledgerData.get('hasBitcoinHandler') && ledgerData.get('paymentURL')
+                ? <div className={css(styles.panel__divider_right__bitcoinPanel__paymentURL)}>
+                  <a href={ledgerData.get('paymentURL')} target='_blank'>
+                    {/* TODO: refactor button.js */}
+                    <Button className={cx({
+                      primaryButton: true,
+                      [css(styles.panelButton)]: true
+                    })}
+                      l10nId='bitcoinVisitAccount'
+                      testId='bitcoinVisitAccountButton'
+                    />
+                  </a>
+                </div>
+                : null
+            }
+            <div data-l10n-id='bitcoinPaymentURL' className={css(styles.panel__divider_right__bitcoinPanel__walletLabelText)} />
+            <div className={css(styles.panel__divider_right__bitcoinPanel__walletAddressText)}>{ledgerData.get('address')}</div>
+            {/* TODO: refactor button.js */}
+            <Button className={cx({
+              primaryButton: true,
+              [css(styles.panelButton)]: true
+            })}
+              l10nId='copyToClipboard'
+              testId='copyToClipboardButton'
+              onClick={this.copyToClipboard.bind(this, ledgerData.get('address'))}
+            />
+          </div>
+          : <div className={css(styles.panel__divider, styles.panel__divider_right)}>
+            <div data-l10n-id='bitcoinWalletNotAvailable' />
+          </div>
+      }
+    </div>
+  }
 
   smartphonePanel () {
-    return <div className={css(styles.panel, styles.cleanup__smartphonePanel)}>
-      <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst, styles.alignMiddle)}>
-        <span className={cx({
-          fa: true,
-          'fa-mobile': true,
-          [css(styles.faMobile)]: true,
-          [css(styles.fa)]: true
-        })} />
-        <div className={css(styles.settingsListTitle)} data-l10n-id='smartphoneTitle' />
+    return <div className={css(styles.panel, styles.panel__smartphonePanel)}>
+      <div className={css(styles.panel__divider, styles.panel__divider_left)}>
+        <div className={css(
+          styles.panel__divider_left__titleWrapper,
+          styles.panel__divider_left__titleWrapper_noSubTitle
+        )}>
+          <div className={css(styles.panel__divider_left__titleWrapper__iconWrapper)}>
+            {this.faSmartphone()}
+          </div>
+          <div className={css(styles.panel__divider_left__listTitleWrapper)}>
+            <div className={css(styles.panel__divider_left__listTitleWrapper__title)} data-l10n-id='smartphoneTitle' />
+          </div>
+        </div>
       </div>
-      <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerLast, styles.alignMiddle)}>
+      <div className={css(styles.panel__divider, styles.panel__divider_right)}>
         {/* TODO: refactor button.js */}
         <Button className={cx({
           primaryButton: true,
@@ -182,43 +302,50 @@ class BitcoinDashboard extends ImmutableComponent {
         })}
           l10nId='displayQRCode'
           testId='displayQRCode'
-          onClick={this.props.showQRcode.bind(this)} />
+          onClick={this.props.showQRcode.bind(this)}
+        />
       </div>
     </div>
   }
 
-  openBuyURLTab () {
-    // close parent dialog
-    this.props.hideParentOverlay()
+  qrcodeOverlayContent () {
+    return <div className={css(styles.modalOverlay__qrcodeOverlay__content)}>
+      <img
+        src={this.props.ledgerData.get('paymentIMG')}
+        data-l10n-id='bitcoinQRImg'
+      />
+      <div className={css(styles.modalOverlay__qrcodeOverlay__content__bitcoinQR)}
+        data-l10n-id='bitcoinQR'
+      />
+    </div>
   }
-
-  bitcoinOverlayContent () {
-    return <iframe src={this.props.ledgerData.get('buyURL')} />
+  qrcodeOverlayFooter () {
+    if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) {
+      return <div className={css(styles.modalOverlay__qrcodeOverlay__footerWrapper__footer)}>
+        <div className={css(styles.coinbaseLogo)} />
+        <a target='_blank'
+          className={css(
+            styles.modalOverlay__qrcodeOverlay__footerWrapper__footer__qrcodeLogo,
+            styles.modalOverlay__qrcodeOverlay__footerWrapper__footer__appstoreLogo
+          )}
+          href='https://itunes.apple.com/us/app/coinbase-bitcoin-wallet/id886427730?mt=8'
+        />
+        <a target='_blank'
+          className={css(
+            styles.modalOverlay__qrcodeOverlay__footerWrapper__footer__qrcodeLogo,
+            styles.modalOverlay__qrcodeOverlay__footerWrapper__footer__playstoreLogo
+          )}
+          href='https://play.google.com/store/apps/details?id=com.coinbase.android'
+        />
+      </div>
+    }
+    return null
   }
 
-  worldWidePanel () {
-    return <div className={css(styles.panel)}>
-      <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
-        <span className={cx({
-          fa: true,
-          'fa-credit-card': true,
-          [css(styles.fa)]: true,
-          [css(styles.faCreditCard)]: true
-        })} />
-        <div className={css(styles.settingsListTitle)} data-l10n-id='outsideUSAPayment' />
-      </div>
-      <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerLast)}>
-        <a target='_blank' href='https://www.buybitcoinworldwide.com/'>
-          {/* TODO: refactor button.js */}
-          <Button className={cx({
-            primaryButton: true,
-            [css(styles.panelButton)]: true
-          })}
-            testId='worldWidePanelButton'
-            label='buybitcoinworldwide.com' />
-        </a>
-      </div>
-    </div>
+  bitcoinOverlayContent () {
+    return <iframe className={css(styles.modalOverlay__coinbaseOverlay__bodyWrapper__body__iframe)}
+      src={this.props.ledgerData.get('buyURL')}
+    />
   }
 
   copyToClipboard (text) {
@@ -245,14 +372,17 @@ class BitcoinDashboard extends ImmutableComponent {
     window.addEventListener('message', this.onMessage.bind(this), false)
     const ledgerData = this.props.ledgerData
 
-    // TODO remove bitcoinDashboard class
-    return <div className='bitcoinDashboard' data-test-id='bitcoinDashboard'>
+    return <div data-test-id='bitcoinDashboard'>
       {
         this.props.bitcoinOverlayVisible
           ? <ModalOverlay
             title={'bitcoinBuy'}
             content={this.bitcoinOverlayContent()}
-            customDialogClasses={'coinbaseOverlay'}
+            customDialogClasses={css(styles.modalOverlay__coinbaseOverlay)}
+            customDialogHeaderClasses={css(styles.modalOverlay__coinbaseOverlay__header)}
+            customDialogBodyWrapperClasses={css(styles.modalOverlay__coinbaseOverlay__bodyWrapper)}
+            customDialogBodyClasses={css(styles.modalOverlay__coinbaseOverlay__bodyWrapper__body)}
+            customDialogFooterClasses={css(styles.modalOverlay__coinbaseOverlay__footer)}
             emptyDialog
             onHide={this.props.hideOverlay.bind(this)}
           />
@@ -262,85 +392,24 @@ class BitcoinDashboard extends ImmutableComponent {
         this.props.qrcodeOverlayVisible
           ? <ModalOverlay
             content={this.qrcodeOverlayContent()}
-            customDialogClasses={cx({
-              qrcodeOverlay: true,
-              [css(styles.modalOverlay__qrcodeOverlay)]: true
-            })}
+            customDialogClasses={css(styles.modalOverlay__qrcodeOverlay)}
+            customDialogHeaderClasses={css(commonStyles.noPadding)}
+            customDialogFooterClasses={css(
+              commonStyles.noPadding,
+              styles.modalOverlay__qrcodeOverlay__footerWrapper
+            )}
             footer={this.qrcodeOverlayFooter()}
             onHide={this.props.hideQRcode.bind(this)}
           />
           : null
       }
-      <div className={css(paymentCommon.board)}>
-        {
-          (this.userInAmerica || ledgerData.get('buyURLFrame'))
-            ? this.coinbasePanel()
-            : this.exchangePanel()
-        }
-        <div className={css(styles.panel, styles.cleanup__bitcoinPanel)}>
-          <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
-            <span className={cx({
-              'fa-stack': true,
-              'fa-lg': true,
-              [css(styles.bitcoinIcon)]: true
-            })}>
-              <span className={cx({
-                fa: true,
-                'fa-circle': true,
-                'fa-stack-2x': true,
-                [css(styles.faCircle)]: true,
-                [css(styles.fa)]: true
-              })} />
-              <span className={cx({
-                fa: true,
-                'fa-bitcoin': true,
-                'fa-stack-1x': true,
-                [css(styles.faBitcoin)]: true,
-                [css(styles.fa)]: true
-              })} />
-            </span>
-            <div className={css(styles.settingsListTitle)} data-l10n-id='bitcoinAdd' />
-            <div className={css(styles.settingsListTitle, styles.subTitle)} data-l10n-id='bitcoinAddDescription' />
-          </div>
-          {
-            ledgerData.get('address')
-              ? <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerLast)}>
-                {
-                  ledgerData.get('hasBitcoinHandler') && ledgerData.get('paymentURL')
-                    ? <div className={css(styles.hasBitcoinHandler)}>
-                      <a href={ledgerData.get('paymentURL')} target='_blank'>
-                        {/* TODO: refactor button.js */}
-                        <Button className={cx({
-                          primaryButton: true,
-                          [css(styles.dialogInsideMargin__bottom)]: true
-                        })}
-                          l10nId='bitcoinVisitAccount'
-                          testId='bitcoinVisitAccountButton'
-                        />
-                      </a>
-                      <div data-l10n-id='bitcoinAddress' className={css(styles.walletLabelText)} />
-                    </div>
-                    : <div>
-                      <div data-l10n-id='bitcoinPaymentURL' className={css(styles.walletLabelText)} />
-                    </div>
-                }
-                <div className={css(styles.walletAddressText)}>{ledgerData.get('address')}</div>
-                {/* TODO: refactor button.js */}
-                <Button className={cx({
-                  primaryButton: true,
-                  [css(styles.panelButton)]: true
-                })}
-                  l10nId='copyToClipboard'
-                  testId='copyToClipboardButton'
-                  onClick={this.copyToClipboard.bind(this, ledgerData.get('address'))} />
-              </div>
-              : <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerLast)}>
-                <div data-l10n-id='bitcoinWalletNotAvailable' />
-              </div>
-          }
-        </div>
-        {this.smartphonePanel()}
-      </div>
+      {
+        (this.userInAmerica || ledgerData.get('buyURLFrame'))
+          ? this.coinbasePanel()
+          : this.exchangePanel()
+      }
+      {this.bitcoinPanel()}
+      {this.smartphonePanel()}
     </div>
   }
 }
@@ -350,184 +419,258 @@ class BitcoinDashboardFooter extends ImmutableComponent {
     return coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1
   }
 
-  get coinbaseStyles () {
-    return <div className={css(styles.coinbase)}>
+  get coinbaseMessageWrapper () {
+    return <div className={css(styles.dashboardFooter_coinbaseFooter__coinbaseMessageWrapper)}>
       <div className={css(this.coinbaseCountries && styles.coinbaseLogo)} />
-      <span className={css(styles.coinbaseMessage)} data-l10n-id='coinbaseMessage' />
+      <span className={css(styles.dashboardFooter_coinbaseFooter__coinbaseMessageWrapper__message)} data-l10n-id='coinbaseMessage' />
     </div>
   }
 
   render () {
     return <div className={css(
       styles.dashboardFooter,
-      styles.temp__panelFooter,
-      this.coinbaseCountries && styles.coinbaseFooter
-      )}>
+      this.coinbaseCountries && styles.dashboardFooter_coinbaseFooter
+    )}>
       {
         this.coinbaseCountries
-          ? this.coinbaseStyles
+          ? this.coinbaseMessageWrapper
           : null
       }
-      <Button className='whiteButton'
+      <Button className={cx({
+        whiteButton: true,
+        [css(styles.dashboardFooter_coinbaseFooter__doneButton)]: this.coinbaseCountries
+      })}
         l10nId='done'
         testId='panelDoneButton'
-        onClick={this.props.hideParentOverlay} />
+        onClick={this.props.hideParentOverlay}
+      />
     </div>
   }
 }
 
+const qrcodeLogoWidth = '130.5px'
+const qrcodeLogoHeight = '42.75px'
+const panelPadding = '25px'
+const panelPaddingBody = `calc(${panelPadding} - ${globalStyles.spacing.dialogInsideMargin})`
+const iconWrapperWidth = '55px'
+
 const styles = StyleSheet.create({
-  panel: {
-    display: 'flex',
-    paddingLeft: '100px'
+  faBitcoin: {
+    color: 'white',
+    transform: 'rotate(12deg)'
   },
-  dashboardFooter: {
-    color: globalStyles.color.darkGray,
-    fontSize: '13px',
-    fontStyle: 'italic'
+  faCircle: {
+    color: globalStyles.color.bitcoinOrange
   },
-  disabledPanel: {
-    padding: '15px 0'
+  faCreditCard: {
+    fontSize: '30px'
+  },
+  faMobile: {
+    fontSize: '50px'
   },
-  settingsPanelDivider: {
+
+  coinbaseLogo: {
+    width: '40px',
+    height: '40px',
+    display: 'inline-block',
+    marginTop: '1px',
+    marginRight: '10px',
+    background: `url(${CoinBase}) 0 0 / contain no-repeat`
+  },
+
+  // TODO: Refactor button to remove !important
+  panelButton: {
+    minWidth: '180px !important'
+  },
+
+  panel: {
+    display: 'flex'
+  },
+  panel__divider: {
     width: '50%',
-    position: 'relative',
+    boxSizing: 'border-box',
     display: 'flex',
     flexFlow: 'column'
   },
-  settingsPanelDividerFirst: {
+  panel__divider_left: {
     alignItems: 'flex-start'
   },
-  settingsPanelDividerLast: {
+  panel__divider_right: {
     alignItems: 'flex-end'
   },
-  bitcoinQRTitle: {
+
+  panel__divider_right__bitcoinPanel__walletLabelText: {
+    fontSize: '1em',
     color: globalStyles.color.braveOrange,
-    textAlign: 'center'
+    marginBottom: '5px'
   },
-  qrcodeOverlayFooter: {
-    display: 'flex',
-    justifyContent: 'center',
-    background: globalStyles.color.gray,
-    padding: '15px 0'
+  panel__divider_right__bitcoinPanel__walletAddressText: {
+    fontSize: '13px',
+    color: 'black',
+    marginBottom: globalStyles.spacing.dialogInsideMargin,
+    cursor: 'initial',
+    userSelect: 'initial'
   },
-  qrcodeLogo: {
-    width: '130.5px',
-    height: '42.75px',
-    display: 'inline-block'
+  panel__divider_right__bitcoinPanel__paymentURL: {
+    marginBottom: globalStyles.spacing.dialogInsideMargin
   },
-  qrcodeImage: {
-    clear: 'both',
-    display: 'block',
-    margin: '0 auto'
+
+  panel__divider_left__titleWrapper: {
+    display: 'flex',
+    alignItems: 'flex-start'
   },
-  appstoreLogo: {
-    background: `url(${IOS})`,
-    backgroundSize: '130.5px 42.75px',
-    marginRight: '5px'
+  panel__divider_left__titleWrapper_noSubTitle: {
+    alignItems: 'center'
   },
-  playstoreLogo: {
-    background: `url(${Andorid})`,
-    backgroundSize: '130.5px 42.75px'
+  panel__divider_left__titleWrapper__iconWrapper: {
+    display: 'flex',
+    justifyContent: 'center',
+    width: iconWrapperWidth
   },
-  coinbaseLogo: {
-    width: '40px',
-    height: '40px',
-    display: 'inlineBlock',
-    marginTop: '1px',
-    marginRight: '10px',
-    background: `url(${CoinBase}) 0 0 / contain no-repeat`
+  panel__divider_left__listTitleWrapper: {
+    maxWidth: `calc(100% - ${iconWrapperWidth})`
   },
-  settingsListTitle: {
-    color: '#444444',
+  panel__divider_left__listTitleWrapper__title: {
+    color: '#444',
     fontWeight: 'bold',
-    fontSize: '15px',
-    margin: '0'
+    fontSize: '15px'
   },
-  subTitle: {
-    clear: 'both',
+  panel__divider_left__listTitleWrapper__subTitle: {
     fontWeight: 'normal',
     fontSize: '14px',
     fontStyle: 'italic',
     lineHeight: '1.3em',
-    marginTop: '20px'
-  },
-  coinbaseFooter: {
-    justifyContent: 'space-between'
+    marginTop: globalStyles.spacing.dialogInsideMargin
   },
-  coinbase: {
-    display: 'flex',
-    alignItems: 'center'
+  panel__divider_right__title: {
+    color: '#444',
+    fontWeight: 'bold',
+    fontSize: '15px'
   },
-  coinbaseMessage: {
-    display: 'inline-block',
-    maxWidth: '450px'
+  panel__divider_right__subTitle: {
+    fontWeight: 'normal',
+    fontSize: '14px',
+    fontStyle: 'italic',
+    lineHeight: '1.3em',
+    marginTop: globalStyles.spacing.dialogInsideMargin
   },
-  bitcoinIcon: {
-    position: 'absolute',
-    left: '-5px',
-    top: 0
+
+  panel__coinbase: {
+    background: 'initial',
+    padding: `${panelPaddingBody} 0 ${panelPadding}`,
+    borderBottom: `3px solid ${globalStyles.color.modalLightGray}`
   },
-  walletLabelText: {
-    fontSize: '1em',
-    color: globalStyles.color.braveOrange,
-    marginBottom: '5px'
+  panel__bitcoinPanel: {
+    padding: `${panelPadding} 0`,
+    borderBottom: `3px solid ${globalStyles.color.modalLightGray}`
   },
-  walletAddressText: {
-    fontSize: '12px',
-    color: 'black',
-    marginBottom: '15px'
+  panel__smartphonePanel: {
+    padding: `${panelPadding} 0 ${panelPaddingBody}`
   },
-  hasBitcoinHandler: {
+
+  modalOverlay__qrcodeOverlay: {
     display: 'flex',
     flexFlow: 'column',
-    alignItems: 'flex-end'
+    alignItems: 'center',
+    justifyContent: 'center',
+    border: 0,
+    width: '350px',
+    height: '350px',
+    margin: '100px auto 0 auto',
+    background: '#fff'
   },
-  alignMiddle: {
-    justifyContent: 'center'
+  modalOverlay__qrcodeOverlay__content: {
+    textAlign: 'center'
   },
-  faCircle: {
-    color: globalStyles.color.bitcoinOrange
+  modalOverlay__qrcodeOverlay__content__bitcoinQR: {
+    color: globalStyles.color.braveOrange
   },
-  faBitcoin: {
-    color: 'white',
-    transform: 'rotate(12deg)'
+  modalOverlay__qrcodeOverlay__footerWrapper: {
+    width: '100%'
   },
-  faCreditCard: {
-    fontSize: '30px'
+  modalOverlay__qrcodeOverlay__footerWrapper__footer: {
+    display: 'flex',
+    justifyContent: 'center',
+    background: globalStyles.color.gray,
+    padding: '15px 0',
+    width: '100%'
   },
-  faMobile: {
-    fontSize: '50px',
-    left: '-40px'
+  modalOverlay__qrcodeOverlay__footerWrapper__footer__qrcodeLogo: {
+    width: qrcodeLogoWidth,
+    height: qrcodeLogoHeight,
+    display: 'inline-block'
   },
-  fa: {
-    position: 'absolute',
-    left: '-45px'
+  modalOverlay__qrcodeOverlay__footerWrapper__footer__appstoreLogo: {
+    background: `url(${IOS})`,
+    backgroundSize: `${qrcodeLogoWidth} ${qrcodeLogoHeight}`,
+    marginRight: '5px'
   },
-
-  dialogInsideMargin__bottom: {
-    marginBottom: globalStyles.spacing.dialogInsideMargin
+  modalOverlay__qrcodeOverlay__footerWrapper__footer__playstoreLogo: {
+    background: `url(${Andorid})`,
+    backgroundSize: `${qrcodeLogoWidth} ${qrcodeLogoHeight}`
   },
 
-  modalOverlay__qrcodeOverlay: {
+  modalOverlay__coinbaseOverlay: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    width: '100%',
+    padding: 0,
+    margin: 0,
     border: 0,
-    width: '350px',
-    height: 'auto',
-    margin: '100px auto 0 auto',
-    background: '#fff',
-    boxShadow: globalStyles.shadow.dialogShadow
+    borderRadius: 0,
+    background: 'transparent',
+    boxShadow: 'none'
   },
-
-  // TODO: Refactor button to remove !important
-  panelButton: {
-    minWidth: '180px !important'
+  modalOverlay__coinbaseOverlay__header: {
+    padding: 0
+  },
+  modalOverlay__coinbaseOverlay__bodyWrapper: {
+    height: '100%',
+    width: '100%'
+  },
+  modalOverlay__coinbaseOverlay__bodyWrapper__body: {
+    padding: 0,
+    height: '100%',
+    width: '100%',
+    background: 'transparent'
+  },
+  modalOverlay__coinbaseOverlay__bodyWrapper__body__iframe: {
+    display: 'block',
+    width: '100%',
+    height: '100%',
+    border: 'none',
+    boxSizing: 'border-box',
+    margin: 0,
+    padding: 0,
+    overflow: 'hidden'
+  },
+  modalOverlay__coinbaseOverlay__footer: {
+    padding: 0
   },
 
-  // TODO: Refactor panelFooter on bitcoinDashboard with <ModalOverlay> to remove this
-  temp__panelFooter: {
+  dashboardFooter: {
+    fontSize: '13px',
+    fontStyle: 'italic'
+  },
+  dashboardFooter_coinbaseFooter: {
     display: 'flex',
-    justifyContent: 'flex-end',
-    margin: '20px'
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%'
+  },
+  dashboardFooter_coinbaseFooter__coinbaseMessageWrapper: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  dashboardFooter_coinbaseFooter__coinbaseMessageWrapper__message: {
+    display: 'inline-block',
+    maxWidth: '450px'
+  },
+  dashboardFooter_coinbaseFooter__doneButton: {
+    // TODO (Cezar): Remove !important once button components are refactored
+    marginRight: '30px !important' // 20px + 30px -> align the done button with other panelButtons
   }
 })
 
diff --git a/js/components/modalOverlay.js b/js/components/modalOverlay.js
index 579ec38005..b9e2936f62 100644
--- a/js/components/modalOverlay.js
+++ b/js/components/modalOverlay.js
@@ -183,9 +183,10 @@ const styles = StyleSheet.create({
   },
 
   dialog__body__wrapper: {
-    background: '#fff'
+    borderRadius: globalStyles.radius.borderRadiusModal
   },
   dialog__body: {
+    background: '#fff',
     padding: `${globalStyles.spacing.dialogInsideMargin} 50px`
   },
 
diff --git a/less/about/common.less b/less/about/common.less
index bfbdc78f75..389e447cc1 100644
--- a/less/about/common.less
+++ b/less/about/common.less
@@ -1,6 +1,5 @@
 @import "../variables.less";
 @import "../button.less";
-@import "../modalOverlay.less";
 @import "../switchControls.less";
 @import "../sortableTable.less";
 
diff --git a/less/modalOverlay.less b/less/modalOverlay.less
deleted file mode 100644
index 1e1cafb9b2..0000000000
--- a/less/modalOverlay.less
+++ /dev/null
@@ -1,40 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this file,
- * You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-@import "variables.less";
-
-.modal.last + .modal.last {
-  background: transparent;
-}
-
-.modal {
-  +.modal {
-    background: transparent;
-  }
-
-  .modal {
-    .dialog {
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      margin: 0;
-      padding: 0;
-      background: transparent;
-      box-shadow: none;
-      border: none;
-
-      iframe {
-        display: block;
-        width: 100%;
-        height: 100%;
-        border: none;
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-      }
-    }
-  }
-}

From b732f537c7f3a5b407b98465d1a69f04d271db8a Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Thu, 4 May 2017 02:59:22 +0900
Subject: [PATCH 07/10] payment modal dialog - replace divs with sections

- advancedSettings.js
- bitcoinDashboard.js
- disabledContent.js
- enabledContent.js
- history.js
- ledgerBackup.js
- ledgerRecovery.js
- ledgerTable.js
---
 .../preferences/payment/advancedSettings.js   |  8 ++--
 .../preferences/payment/bitcoinDashboard.js   | 44 +++++++++----------
 .../preferences/payment/disabledContent.js    |  4 +-
 .../preferences/payment/enabledContent.js     | 16 +++----
 .../components/preferences/payment/history.js |  4 +-
 .../preferences/payment/ledgerBackup.js       |  8 ++--
 .../preferences/payment/ledgerRecovery.js     | 16 +++----
 .../preferences/payment/ledgerTable.js        |  4 +-
 8 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/app/renderer/components/preferences/payment/advancedSettings.js b/app/renderer/components/preferences/payment/advancedSettings.js
index ed985dcfaf..c71ce3a2db 100644
--- a/app/renderer/components/preferences/payment/advancedSettings.js
+++ b/app/renderer/components/preferences/payment/advancedSettings.js
@@ -27,7 +27,7 @@ class AdvancedSettingsContent extends ImmutableComponent {
     const minPublisherDuration = this.props.ledgerData.getIn(['synopsisOptions', 'minPublisherDuration'])
     const minPublisherVisits = this.props.ledgerData.getIn(['synopsisOptions', 'minPublisherVisits'])
 
-    return <div className={css(styles.advancedSettings)} data-test-id='advancedSettings'>
+    return <section className={css(styles.advancedSettings)} data-test-id='advancedSettings'>
       <div className={css(styles.settingsPanelDivider)}>
         <div className={css(styles.minimumSetting)} data-l10n-id='minimumPageTimeSetting' />
         <SettingsList>
@@ -82,13 +82,13 @@ class AdvancedSettingsContent extends ImmutableComponent {
           />
         </SettingsList>
       </div>
-    </div>
+    </section>
   }
 }
 
 class AdvancedSettingsFooter extends ImmutableComponent {
   render () {
-    return <div>
+    return <section>
       <Button className='primaryButton'
         l10nId='backupLedger'
         testId='backupLedgerButton'
@@ -104,7 +104,7 @@ class AdvancedSettingsFooter extends ImmutableComponent {
         testId='doneButton'
         onClick={this.props.hideOverlay.bind(this, 'advancedSettings')}
       />
-    </div>
+    </section>
   }
 }
 
diff --git a/app/renderer/components/preferences/payment/bitcoinDashboard.js b/app/renderer/components/preferences/payment/bitcoinDashboard.js
index a629b5819e..f728d53cae 100644
--- a/app/renderer/components/preferences/payment/bitcoinDashboard.js
+++ b/app/renderer/components/preferences/payment/bitcoinDashboard.js
@@ -118,7 +118,7 @@ class BitcoinDashboard extends ImmutableComponent {
 
   coinbasePanel () {
     if (this.canUseCoinbase) {
-      return <div className={css(styles.panel, styles.panel__coinbase)}>
+      return <section className={css(styles.panel, styles.panel__coinbase)}>
         <div className={css(styles.panel__divider, styles.panel__divider_left)}>
           <div className={css(styles.panel__divider_left__titleWrapper)}>
             <div className={css(styles.panel__divider_left__titleWrapper__iconWrapper)}>
@@ -140,9 +140,9 @@ class BitcoinDashboard extends ImmutableComponent {
             styles.panel__divider_right__subTitle
           )} data-l10n-id='transferTime' />
         </div>
-      </div>
+      </section>
     } else {
-      return <div className={css(styles.panel, styles.panel__coinbase)}>
+      return <section className={css(styles.panel, styles.panel__coinbase)}>
         <div className={css(styles.panel__divider, styles.panel__divider_left)}>
           <div className={css(styles.panel__divider_left__titleWrapper)}>
             <div className={css(styles.panel__divider_left__titleWrapper__iconWrapper)}>
@@ -160,7 +160,7 @@ class BitcoinDashboard extends ImmutableComponent {
         <div className={css(styles.panel__divider, styles.panel__divider_right)}>
           <div data-l10n-id='coinbaseNotAvailable' />
         </div>
-      </div>
+      </section>
     }
   }
   exchangePanel () {
@@ -170,7 +170,7 @@ class BitcoinDashboard extends ImmutableComponent {
     if (!url || !name) {
       return this.worldWidePanel()
     } else {
-      return <div className={css(styles.panel, styles.panel__coinbase)}>
+      return <section className={css(styles.panel, styles.panel__coinbase)}>
         <div className={css(styles.panel__divider, styles.panel__divider_left)}>
           <div className={css(styles.panel__divider_left__titleWrapper)}>
             <div className={css(styles.panel__divider_left__titleWrapper__iconWrapper)}>
@@ -193,11 +193,11 @@ class BitcoinDashboard extends ImmutableComponent {
             />
           </a>
         </div>
-      </div>
+      </section>
     }
   }
   worldWidePanel () {
-    return <div className={css(styles.panel)}>
+    return <section className={css(styles.panel)}>
       <div className={css(styles.panel__divider, styles.panel__divider_left)}>
         <div className={css(styles.panel__divider_left__titleWrapper)}>
           <div className={css(styles.panel__divider_left__titleWrapper__iconWrapper)}>
@@ -220,13 +220,13 @@ class BitcoinDashboard extends ImmutableComponent {
           />
         </a>
       </div>
-    </div>
+    </section>
   }
 
   bitcoinPanel () {
     const ledgerData = this.props.ledgerData
 
-    return <div className={css(styles.panel, styles.panel__bitcoinPanel)}>
+    return <section className={css(styles.panel, styles.panel__bitcoinPanel)}>
       <div className={css(styles.panel__divider, styles.panel__divider_left)}>
         <div className={css(styles.panel__divider_left__titleWrapper)}>
           <div className={css(styles.panel__divider_left__titleWrapper__iconWrapper)}>
@@ -276,11 +276,11 @@ class BitcoinDashboard extends ImmutableComponent {
             <div data-l10n-id='bitcoinWalletNotAvailable' />
           </div>
       }
-    </div>
+    </section>
   }
 
   smartphonePanel () {
-    return <div className={css(styles.panel, styles.panel__smartphonePanel)}>
+    return <section className={css(styles.panel, styles.panel__smartphonePanel)}>
       <div className={css(styles.panel__divider, styles.panel__divider_left)}>
         <div className={css(
           styles.panel__divider_left__titleWrapper,
@@ -305,11 +305,11 @@ class BitcoinDashboard extends ImmutableComponent {
           onClick={this.props.showQRcode.bind(this)}
         />
       </div>
-    </div>
+    </section>
   }
 
   qrcodeOverlayContent () {
-    return <div className={css(styles.modalOverlay__qrcodeOverlay__content)}>
+    return <section className={css(styles.modalOverlay__qrcodeOverlay__content)}>
       <img
         src={this.props.ledgerData.get('paymentIMG')}
         data-l10n-id='bitcoinQRImg'
@@ -317,11 +317,11 @@ class BitcoinDashboard extends ImmutableComponent {
       <div className={css(styles.modalOverlay__qrcodeOverlay__content__bitcoinQR)}
         data-l10n-id='bitcoinQR'
       />
-    </div>
+    </section>
   }
   qrcodeOverlayFooter () {
     if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) {
-      return <div className={css(styles.modalOverlay__qrcodeOverlay__footerWrapper__footer)}>
+      return <section className={css(styles.modalOverlay__qrcodeOverlay__footerWrapper__footer)}>
         <div className={css(styles.coinbaseLogo)} />
         <a target='_blank'
           className={css(
@@ -337,7 +337,7 @@ class BitcoinDashboard extends ImmutableComponent {
           )}
           href='https://play.google.com/store/apps/details?id=com.coinbase.android'
         />
-      </div>
+      </section>
     }
     return null
   }
@@ -372,7 +372,7 @@ class BitcoinDashboard extends ImmutableComponent {
     window.addEventListener('message', this.onMessage.bind(this), false)
     const ledgerData = this.props.ledgerData
 
-    return <div data-test-id='bitcoinDashboard'>
+    return <section data-test-id='bitcoinDashboard'>
       {
         this.props.bitcoinOverlayVisible
           ? <ModalOverlay
@@ -410,7 +410,7 @@ class BitcoinDashboard extends ImmutableComponent {
       }
       {this.bitcoinPanel()}
       {this.smartphonePanel()}
-    </div>
+    </section>
   }
 }
 
@@ -420,14 +420,14 @@ class BitcoinDashboardFooter extends ImmutableComponent {
   }
 
   get coinbaseMessageWrapper () {
-    return <div className={css(styles.dashboardFooter_coinbaseFooter__coinbaseMessageWrapper)}>
+    return <section className={css(styles.dashboardFooter_coinbaseFooter__coinbaseMessageWrapper)}>
       <div className={css(this.coinbaseCountries && styles.coinbaseLogo)} />
       <span className={css(styles.dashboardFooter_coinbaseFooter__coinbaseMessageWrapper__message)} data-l10n-id='coinbaseMessage' />
-    </div>
+    </section>
   }
 
   render () {
-    return <div className={css(
+    return <section className={css(
       styles.dashboardFooter,
       this.coinbaseCountries && styles.dashboardFooter_coinbaseFooter
     )}>
@@ -444,7 +444,7 @@ class BitcoinDashboardFooter extends ImmutableComponent {
         testId='panelDoneButton'
         onClick={this.props.hideParentOverlay}
       />
-    </div>
+    </section>
   }
 }
 
diff --git a/app/renderer/components/preferences/payment/disabledContent.js b/app/renderer/components/preferences/payment/disabledContent.js
index 597b3b7c3f..a8044cd1f0 100644
--- a/app/renderer/components/preferences/payment/disabledContent.js
+++ b/app/renderer/components/preferences/payment/disabledContent.js
@@ -20,7 +20,7 @@ const CoinBase2 = require('../../../../extensions/brave/img/coinbase_2x.png')
 
 class DisabledContent extends ImmutableComponent {
   render () {
-    return <div data-test-id='disabledContent'>
+    return <section data-test-id='disabledContent'>
       <div className={css(styles.paymentsMessage, styles.walletBarMargin)} data-test-id='paymentsMessage'>
         <h3 className={css(styles.h3)} data-l10n-id='paymentsWelcomeTitle' />
         <div className={css(styles.text)} data-l10n-id='paymentsWelcomeText1' />
@@ -43,7 +43,7 @@ class DisabledContent extends ImmutableComponent {
         <div className={css(styles.textSide)} data-l10n-id='paymentsSidebarText4' />
         <a href='https://www.coinbase.com/' target='_blank'><span className={css(styles.paymentsSidebarCoinbase)} /></a>
       </div>
-    </div>
+    </section>
   }
 }
 
diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/app/renderer/components/preferences/payment/enabledContent.js
index 0866a6661f..507e2b84f1 100644
--- a/app/renderer/components/preferences/payment/enabledContent.js
+++ b/app/renderer/components/preferences/payment/enabledContent.js
@@ -82,7 +82,7 @@ class EnabledContent extends ImmutableComponent {
       value = ledgerData.get('balance')
     }
 
-    return <div className={css(styles.balance)}>
+    return <section className={css(styles.balance)}>
       <FormTextbox data-test-id='fundsAmount' readOnly value={btcToCurrencyString(value, ledgerData)} />
       <a className={css(styles.iconLink)} href='https://brave.com/Payments_FAQ.html' target='_blank'>
         <span className={cx({
@@ -91,7 +91,7 @@ class EnabledContent extends ImmutableComponent {
           [css(styles.iconText)]: true
         })} />
       </a>
-    </div>
+    </section>
   }
 
   lastReconcileMessage () {
@@ -116,10 +116,10 @@ class EnabledContent extends ImmutableComponent {
       date: prevReconcileDateValue
     }
 
-    return <div className={css(styles.contribution, styles.lastContribution)}>
+    return <section className={css(styles.contribution, styles.lastContribution)}>
       <div data-l10n-id='lastContribution' />
       <div data-l10n-id={text} data-l10n-args={JSON.stringify(l10nDataArgs)} />
-    </div>
+    </section>
   }
 
   lastReconcileDate (transaction) {
@@ -157,17 +157,17 @@ class EnabledContent extends ImmutableComponent {
       reconcileDate: nextReconcileDateRelative
     }
 
-    return <div className={css(styles.contribution, styles.nextContribution)}>
+    return <section className={css(styles.contribution, styles.nextContribution)}>
       <div data-l10n-id='nextContribution' />
       <div data-l10n-args={JSON.stringify(l10nDataArgs)} data-l10n-id={l10nDataId} />
-    </div>
+    </section>
   }
 
   render () {
     const ledgerData = this.props.ledgerData
     const walletStatusText = walletStatus(ledgerData)
 
-    return <div>
+    return <section>
       <div className={css(styles.walletBar)} data-test-id='walletBar'>
         <table>
           <thead>
@@ -233,7 +233,7 @@ class EnabledContent extends ImmutableComponent {
         settings={this.props.settings}
         onChangeSetting={this.props.onChangeSetting}
         siteSettings={this.props.siteSettings} />
-    </div>
+    </section>
   }
 }
 
diff --git a/app/renderer/components/preferences/payment/history.js b/app/renderer/components/preferences/payment/history.js
index 6bc89d5f0e..05e12cc040 100644
--- a/app/renderer/components/preferences/payment/history.js
+++ b/app/renderer/components/preferences/payment/history.js
@@ -113,7 +113,7 @@ class HistoryFooter extends ImmutableComponent {
       reconcileDate: formattedTimeFromNow(timestamp)
     }
 
-    return <div className={css(styles.flexAlignCenter, styles.historyFooter)}>
+    return <section className={css(styles.flexAlignCenter, styles.historyFooter)}>
       <div className={css(styles.historyFooter__nextPayment)}>
         <span data-l10n-id={l10nDataId} data-l10n-args={JSON.stringify(l10nDataArgs)} />
       </div>
@@ -123,7 +123,7 @@ class HistoryFooter extends ImmutableComponent {
         testId='paymentHistoryOKText'
         onClick={this.props.hideOverlay.bind(this, 'paymentHistory')}
       />
-    </div>
+    </section>
   }
 }
 
diff --git a/app/renderer/components/preferences/payment/ledgerBackup.js b/app/renderer/components/preferences/payment/ledgerBackup.js
index 7e1f41de77..a6c23508eb 100644
--- a/app/renderer/components/preferences/payment/ledgerBackup.js
+++ b/app/renderer/components/preferences/payment/ledgerBackup.js
@@ -24,7 +24,7 @@ class LedgerBackupContent extends ImmutableComponent {
     const paymentId = this.props.ledgerData.get('paymentId')
     const passphrase = this.props.ledgerData.get('passphrase')
 
-    return <div>
+    return <section>
       <span data-l10n-id='ledgerBackupContent' />
       <div className={css(styles.copyKeyContainer)}>
         {/* TODO: refactor button */}
@@ -50,7 +50,7 @@ class LedgerBackupContent extends ImmutableComponent {
           <span className={css(styles.keyContainer__span)}>{passphrase}</span>
         </div>
       </div>
-    </div>
+    </section>
   }
 }
 
@@ -74,7 +74,7 @@ class LedgerBackupFooter extends ImmutableComponent {
   }
 
   render () {
-    return <div>
+    return <section>
       <Button className='primaryButton'
         l10nId='printKeys'
         testId='printKeysButton'
@@ -90,7 +90,7 @@ class LedgerBackupFooter extends ImmutableComponent {
         testId='doneButton'
         onClick={this.props.hideOverlay.bind(this, 'ledgerBackup')}
       />
-    </div>
+    </section>
   }
 }
 
diff --git a/app/renderer/components/preferences/payment/ledgerRecovery.js b/app/renderer/components/preferences/payment/ledgerRecovery.js
index 4a525671ac..31e9dfe7b0 100644
--- a/app/renderer/components/preferences/payment/ledgerRecovery.js
+++ b/app/renderer/components/preferences/payment/ledgerRecovery.js
@@ -49,10 +49,10 @@ class LedgerRecoveryContent extends ImmutableComponent {
     const recoveryError = this.props.ledgerData.getIn(['error', 'error'])
     const isNetworkError = typeof recoveryError === 'object'
 
-    return <div>
+    return <section>
       {
         recoverySucceeded === true
-          ? <div className={css(styles.recoveryOverlay)}>
+          ? <section className={css(styles.recoveryOverlay)}>
             <h1 className={css(styles.recoveryOverlay__textColor)} data-l10n-id='ledgerRecoverySucceeded' />
             <p className={css(styles.recoveryOverlay__textColor, styles.recoveryOverlay__spaceAround)}
               data-l10n-id='balanceRecovered'
@@ -63,12 +63,12 @@ class LedgerRecoveryContent extends ImmutableComponent {
               testId='okButton'
               onClick={this.clearRecoveryStatus.bind(this)}
             />
-          </div>
+          </section>
           : null
       }
       {
         (recoverySucceeded === false && recoveryError && isNetworkError)
-          ? <div className={css(styles.recoveryOverlay)}>
+          ? <section className={css(styles.recoveryOverlay)}>
             <h1 className={css(styles.recoveryOverlay__textColor)} data-l10n-id='ledgerRecoveryNetworkFailedTitle' data-test-id='recoveryError' />
             <p className={css(styles.recoveryOverlay__textColor, styles.recoveryOverlay__spaceAround)}
               data-l10n-id='ledgerRecoveryNetworkFailedMessage'
@@ -78,12 +78,12 @@ class LedgerRecoveryContent extends ImmutableComponent {
               testId='okButton'
               onClick={this.clearRecoveryStatus.bind(this)}
             />
-          </div>
+          </section>
           : null
       }
       {
         (recoverySucceeded === false && recoveryError && !isNetworkError)
-          ? <div className={css(styles.recoveryOverlay)}>
+          ? <section className={css(styles.recoveryOverlay)}>
             <h1 className={css(styles.recoveryOverlay__textColor)} data-l10n-id='ledgerRecoveryFailedTitle' />
             <p className={css(styles.recoveryOverlay__textColor, styles.recoveryOverlay__spaceAround)}
               data-l10n-id='ledgerRecoveryFailedMessage'
@@ -93,7 +93,7 @@ class LedgerRecoveryContent extends ImmutableComponent {
               testId='okButton'
               onClick={this.clearRecoveryStatus.bind(this)}
             />
-          </div>
+          </section>
           : null
       }
       <h4 className={css(styles.recoveryContent__h4)} data-l10n-id='ledgerRecoverySubtitle' />
@@ -106,7 +106,7 @@ class LedgerRecoveryContent extends ImmutableComponent {
           <RecoveryKeyTextbox id='secondRecoveryKey' onChange={this.handleSecondRecoveryKeyChange} />
         </SettingItem>
       </SettingsList>
-    </div>
+    </section>
   }
 }
 
diff --git a/app/renderer/components/preferences/payment/ledgerTable.js b/app/renderer/components/preferences/payment/ledgerTable.js
index b85b2807d1..d64534cd66 100644
--- a/app/renderer/components/preferences/payment/ledgerTable.js
+++ b/app/renderer/components/preferences/payment/ledgerTable.js
@@ -257,7 +257,7 @@ class LedgerTable extends ImmutableComponent {
       })
     }
 
-    return <div data-test-id='ledgerTable'>
+    return <section data-test-id='ledgerTable'>
       <div className={css(styles.hideExcludedSites)}>
         <div className={css(styles.columnOffset)} />
         <div className={css(styles.rightColumn)}>
@@ -310,7 +310,7 @@ class LedgerTable extends ImmutableComponent {
         </div>
         : null
       }
-    </div>
+    </section>
   }
 }
 

From 229ff44afd8732bbacfb5a148c6140747cb62c9b Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Thu, 4 May 2017 02:59:26 +0900
Subject: [PATCH 08/10] Polish modal dialog - syncTab.js

- Add commonStyles.noMarginBottom to the last element of newOverlayContent
- Remove syncOverlayBody__wrapper
- Remove className='syncOverlay'
- Fix sync passphrase selectability
- Fix table width that doesn't make sense
- Replace divs with sections

Test Plan:
1. Open about:preferences#sync
2. Enable Sync
3. Click "Sync a new device"
4. Make sure just padding exists under "Show secret code words"
5. Click "Show secret code words"
6. Make sure the code is selectable
---
 .../components/preferences/syncTab.js         | 162 ++++++++----------
 1 file changed, 75 insertions(+), 87 deletions(-)

diff --git a/app/renderer/components/preferences/syncTab.js b/app/renderer/components/preferences/syncTab.js
index 6ba9a98639..a1f1031e86 100644
--- a/app/renderer/components/preferences/syncTab.js
+++ b/app/renderer/components/preferences/syncTab.js
@@ -91,7 +91,7 @@ class SyncTab extends ImmutableComponent {
       return null
     }
     // displayed before a sync userId has been created
-    return <div className={css(styles.setupContent)}>
+    return <section className={css(styles.setupContent)}>
       <Button className='primaryButton'
         l10nId='syncStart'
         testId='syncStartButton'
@@ -102,7 +102,7 @@ class SyncTab extends ImmutableComponent {
         testId='syncAddButton'
         onClick={this.props.showOverlay.bind(this, 'syncAdd')}
       />
-    </div>
+    </section>
   }
 
   get postSetupContent () {
@@ -151,7 +151,7 @@ class SyncTab extends ImmutableComponent {
   }
 
   get devicesContent () {
-    return <div className={css(styles.settingsListContainerMargin__top)}>
+    return <section className={css(styles.settingsListContainerMargin__top)}>
       <DefaultSectionTitle data-l10n-id='syncDevices' data-test-id='syncDevices' />
       <SortableTable
         headings={['id', 'syncDeviceName', 'syncDeviceLastActive']}
@@ -161,7 +161,7 @@ class SyncTab extends ImmutableComponent {
         customCellClasses={css(styles.devices__devicesListCell)}
         tableClassNames={css(styles.devices__devicesList)}
       />
-    </div>
+    </section>
   }
 
   get qrcodeContent () {
@@ -169,7 +169,7 @@ class SyncTab extends ImmutableComponent {
       return null
     }
     return this.props.syncQRVisible
-      ? <div>
+      ? <section>
         <ul className={css(styles.syncOverlayBody__listWrapper)}>
           <li className={css(
             styles.syncOverlayBody__listItem,
@@ -187,7 +187,7 @@ class SyncTab extends ImmutableComponent {
           data-l10n-id='syncQRImg'
           data-test-id='syncQRImg'
         />
-      </div>
+      </section>
     : <ul className={css(styles.syncOverlayBody__listWrapper)}>
       <li className={css(
         styles.syncOverlayBody__listItem,
@@ -250,31 +250,31 @@ class SyncTab extends ImmutableComponent {
   }
 
   get newOverlayContent () {
-    return <div className='syncOverlay'>
-      <div>
-        <ol>
-          <li className={css(styles.syncOverlayBody__listItem, commonStyles.noMarginTop)} data-l10n-id='syncNewDevice1' />
-          <li className={css(styles.syncOverlayBody__listItem)}>
-            <div data-l10n-id='syncNewDevice2' />
-            {this.qrcodeContent}
-          </li>
-          <li className={css(styles.syncOverlayBody__listItem)}>
-            <div data-l10n-id='syncNewDevice3' />
-            {this.passphraseContent}
-          </li>
-        </ol>
-      </div>
-    </div>
+    return <ol>
+      <li className={css(
+        styles.syncOverlayBody__listItem,
+        commonStyles.noMarginTop
+      )} data-l10n-id='syncNewDevice1' />
+      <li className={css(styles.syncOverlayBody__listItem)}>
+        <div data-l10n-id='syncNewDevice2' />
+        {this.qrcodeContent}
+      </li>
+      <li className={css(
+        styles.syncOverlayBody__listItem,
+        commonStyles.noMarginBottom
+      )}>
+        <div data-l10n-id='syncNewDevice3' />
+        {this.passphraseContent}
+      </li>
+    </ol>
   }
 
   get newOverlayFooter () {
-    return <div>
-      <Button className='whiteButton'
-        l10nId='done'
-        testId='doneButton'
-        onClick={this.props.hideOverlay.bind(this, 'syncNewDevice')}
-      />
-    </div>
+    return <Button className='whiteButton'
+      l10nId='done'
+      testId='doneButton'
+      onClick={this.props.hideOverlay.bind(this, 'syncNewDevice')}
+    />
   }
 
   get defaultDeviceName () {
@@ -292,40 +292,34 @@ class SyncTab extends ImmutableComponent {
   get deviceNameInputContent () {
     return <SettingItem>
       <div className={css(styles.syncOverlayBody__label)} data-l10n-id='syncDeviceNameInput' />
-      <div>
-        <input className={css(
-          commonStyles.formControl,
-          commonStyles.textbox,
-          commonStyles.textbox__outlineable,
-          commonStyles.textbox__isSettings
-        )}
-          spellCheck='false'
-          ref={(node) => { this.deviceNameInput = node }}
-          placeholder={this.defaultDeviceName} />
-      </div>
+      <input className={css(
+        commonStyles.formControl,
+        commonStyles.textbox,
+        commonStyles.textbox__outlineable,
+        commonStyles.textbox__isSettings
+      )}
+        spellCheck='false'
+        ref={(node) => { this.deviceNameInput = node }}
+        placeholder={this.defaultDeviceName} />
     </SettingItem>
   }
 
   get startOverlayContent () {
-    return <div>
-      <div className={css(styles.syncOverlayBody__formBottomMargin)}>
-        {this.deviceNameInputContent}
-      </div>
-    </div>
+    return <section className={css(styles.syncOverlayBody__formBottomMargin)}>
+      {this.deviceNameInputContent}
+    </section>
   }
 
   get startOverlayFooter () {
-    return <div>
-      <Button className='primaryButton'
-        l10nId='syncCreate'
-        testId='syncCreateButton'
-        onClick={this.onSetup}
-      />
-    </div>
+    return <Button className='primaryButton'
+      l10nId='syncCreate'
+      testId='syncCreateButton'
+      onClick={this.onSetup}
+    />
   }
 
   get addOverlayContent () {
-    return <div>
+    return <section>
       <div className={css(styles.syncOverlayBody__label)} data-l10n-id='syncEnterPassphrase' />
       <div className={css(styles.syncOverlayBody__form)}>
         <textarea className={css(
@@ -342,38 +336,34 @@ class SyncTab extends ImmutableComponent {
       <div className={css(styles.syncOverlayBody__formBottomMargin)}>
         {this.deviceNameInputContent}
       </div>
-    </div>
+    </section>
   }
 
   get addOverlayFooter () {
-    return <div>
-      <Button className='primaryButton'
-        l10nId='syncCreate'
-        testId='syncCreateButton'
-        onClick={this.onRestore}
-        disabled={this.props.syncRestoreEnabled === false}
-      />
-    </div>
+    return <Button className='primaryButton'
+      l10nId='syncCreate'
+      testId='syncCreateButton'
+      onClick={this.onRestore}
+      disabled={this.props.syncRestoreEnabled === false}
+    />
   }
 
   get resetOverlayContent () {
-    return <div>
-      <ul>
-        <li className={css(
-          styles.syncOverlayBody__listItem,
-          commonStyles.noMarginTop
-        )} data-l10n-id='syncResetMessageWhat' />
-        <li className={css(styles.syncOverlayBody__listItem)} data-l10n-id='syncResetMessageWhatNot' />
-        <li className={css(
-          styles.syncOverlayBody__listItem,
-          commonStyles.noMarginBottom
-        )} data-l10n-id='syncResetMessageOtherDevices' />
-      </ul>
-    </div>
+    return <ul>
+      <li className={css(
+        styles.syncOverlayBody__listItem,
+        commonStyles.noMarginTop
+      )} data-l10n-id='syncResetMessageWhat' />
+      <li className={css(styles.syncOverlayBody__listItem)} data-l10n-id='syncResetMessageWhatNot' />
+      <li className={css(
+        styles.syncOverlayBody__listItem,
+        commonStyles.noMarginBottom
+      )} data-l10n-id='syncResetMessageOtherDevices' />
+    </ul>
   }
 
   get resetOverlayFooter () {
-    return <div>
+    return <section>
       <Button className='whiteButton'
         l10nId='cancel'
         testId='cancelButton'
@@ -387,7 +377,7 @@ class SyncTab extends ImmutableComponent {
         testId='syncResetButton'
         onClick={this.onReset}
       />
-    </div>
+    </section>
   }
 
   enableRestore (e) {
@@ -446,7 +436,7 @@ class SyncTab extends ImmutableComponent {
   }
 
   render () {
-    return <div className='syncContainer'>
+    return <section className='syncContainer'>
       {
       this.isSetup && this.props.syncNewDeviceOverlayVisible
         ? <ModalOverlay
@@ -542,7 +532,7 @@ class SyncTab extends ImmutableComponent {
           ? this.clearDataContent
           : null
       }
-    </div>
+    </section>
   }
 }
 
@@ -582,7 +572,8 @@ const styles = StyleSheet.create({
     color: globalStyles.color.mediumGray,
     margin: `${globalStyles.spacing.panelMargin} 0`,
     padding: globalStyles.spacing.panelPadding,
-    width: '500px'
+    boxSizing: 'border-box',
+    width: '600px'
   },
   device__item: {
     flex: 1
@@ -597,7 +588,8 @@ const styles = StyleSheet.create({
   devices__devicesList: {
     // TODO: refactor sortableTable to remove !important
     marginBottom: `${globalStyles.spacing.dialogInsideMargin} !important`,
-    width: '34em !important'
+    boxSizing: 'border-box',
+    width: '600px !important'
   },
   devices__devicesListCell: {
     padding: '4px 8px'
@@ -610,15 +602,11 @@ const styles = StyleSheet.create({
 
   listItem__passphrase: {
     margin: `${globalStyles.spacing.dialogInsideMargin} 0`,
-    color: globalStyles.color.braveDarkOrange
+    color: globalStyles.color.braveDarkOrange,
+    userSelect: 'initial',
+    cursor: 'initial'
   },
 
-  syncOverlayBody__wrapper: {
-    padding: `${globalStyles.spacing.dialogInsideMargin} 50px`,
-    background: '#fff',
-    userSelect: 'none'
-
-  },
   syncOverlayBody__listWrapper: {
     listStyle: 'none'
   },

From 8babd6af35930e5e36cc21a72a183328bfaf0dd9 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Thu, 4 May 2017 02:59:32 +0900
Subject: [PATCH 09/10] Polish modalOverlay.js

Addresses #8054

- Replace let with const
- Replace 50px with a variable
- Replace divs with header, section, and footer
- Add registerMock
---
 app/renderer/components/styles/global.js |  1 +
 js/components/modalOverlay.js            | 35 ++++++++++++------------
 test/unit/about/preferencesTest.js       |  1 +
 3 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index e79bf49cdb..8d416d3f7e 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -142,6 +142,7 @@ const globalStyles = {
     dialogLargeWidth: '600px',
     dialogTopOffset: '30px',
     dialogInsideMargin: '18px',
+    modalDialogPaddingHorizontal: '50px',
     privateTabPaddingHorizontal: '30px',
     privateTabPadding: '40px',
     settingsListContainerMargin: '2rem',
diff --git a/js/components/modalOverlay.js b/js/components/modalOverlay.js
index b9e2936f62..f4619dd249 100644
--- a/js/components/modalOverlay.js
+++ b/js/components/modalOverlay.js
@@ -52,12 +52,12 @@ class ModalOverlay extends ImmutableComponent {
     var close = null
     var title = null
 
-    let customDialogClassesStr = (this.props.customDialogClasses ? this.props.customDialogClasses : '')
-    let customDialogHeaderClassesStr = (this.props.customDialogHeaderClasses ? this.props.customDialogHeaderClasses : '')
-    let customDialogBodyWrapperClassesStr = (this.props.customDialogBodyWrapperClasses ? this.props.customDialogBodyWrapperClasses : '')
-    let customDialogBodyClassesStr = (this.props.customDialogBodyClasses ? this.props.customDialogBodyClasses : '')
-    let customDialogFooterClassesStr = (this.props.customDialogFooterClasses ? this.props.customDialogFooterClasses : '')
-    let customTitleClassesStr = (this.props.customTitleClasses ? this.props.customTitleClasses : '')
+    const customDialogClassesStr = this.props.customDialogClasses ? this.props.customDialogClasses : ''
+    const customDialogHeaderClassesStr = this.props.customDialogHeaderClasses ? this.props.customDialogHeaderClasses : ''
+    const customDialogBodyWrapperClassesStr = this.props.customDialogBodyWrapperClasses ? this.props.customDialogBodyWrapperClasses : ''
+    const customDialogBodyClassesStr = this.props.customDialogBodyClasses ? this.props.customDialogBodyClasses : ''
+    const customDialogFooterClassesStr = this.props.customDialogFooterClasses ? this.props.customDialogFooterClasses : ''
+    const customTitleClassesStr = this.props.customTitleClasses ? this.props.customTitleClasses : ''
 
     if (!this.props.emptyDialog) {
       close = (this.props.onHide
@@ -73,20 +73,20 @@ class ModalOverlay extends ImmutableComponent {
         /> : null)
     }
 
-    return <div className={cx({
+    return <section className={cx({
       [css(styles.dialog)]: true,
       [customDialogClassesStr]: true
     })}>
 
-      <div className={cx({
+      <header className={cx({
         [css(styles.dialog__header)]: true,
         [customDialogHeaderClassesStr]: true
       })}>
         {title}
         {close}
-      </div>
+      </header>
 
-      <div className={cx({
+      <section className={cx({
         [css(styles.dialog__body__wrapper)]: true,
         [customDialogBodyWrapperClassesStr]: true
       })}>
@@ -96,15 +96,15 @@ class ModalOverlay extends ImmutableComponent {
         })}>
           {this.props.content}
         </div>
-      </div>
+      </section>
 
-      <div className={cx({
+      <footer className={cx({
         [css(styles.dialog__footer)]: true,
         [customDialogFooterClassesStr]: true
       })}>
         {this.props.footer}
-      </div>
-    </div>
+      </footer>
+    </section>
   }
 
   render () {
@@ -155,8 +155,7 @@ const styles = StyleSheet.create({
   },
 
   dialog__header: {
-    padding: '25px',
-    paddingLeft: '50px'
+    padding: `25px ${globalStyles.spacing.modalDialogPaddingHorizontal}`
   },
   dialog__header__close: {
     display: 'inline-block',
@@ -187,12 +186,12 @@ const styles = StyleSheet.create({
   },
   dialog__body: {
     background: '#fff',
-    padding: `${globalStyles.spacing.dialogInsideMargin} 50px`
+    padding: `${globalStyles.spacing.dialogInsideMargin} ${globalStyles.spacing.modalDialogPaddingHorizontal}`
   },
 
   dialog__footer: {
     padding: '20px',
-    paddingLeft: '50px',
+    paddingLeft: globalStyles.spacing.modalDialogPaddingHorizontal,
     display: 'flex',
     flexFlow: 'nowrap',
     justifyContent: 'flex-end'
diff --git a/test/unit/about/preferencesTest.js b/test/unit/about/preferencesTest.js
index 7ed957c867..213c99cce4 100644
--- a/test/unit/about/preferencesTest.js
+++ b/test/unit/about/preferencesTest.js
@@ -50,6 +50,7 @@ describe('Preferences component', function () {
     mockery.registerMock('../../../../extensions/brave/img/android_download.svg')
     mockery.registerMock('../../../../extensions/brave/img/ios_download.svg')
     mockery.registerMock('../../img/icon_pencil.svg')
+    mockery.registerMock('../../img/toolbar/stoploading_btn.svg')
 
     window.chrome = fakeElectron
     window.CustomEvent = {}

From 5aef946ada7238e4026033ab6dc58ded6a76c881 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Thu, 4 May 2017 02:59:37 +0900
Subject: [PATCH 10/10] modal dialog - preferences.less

Addresses #8661

Remove leftover styles under .board
Remove leftover styles under .modal
---
 less/about/preferences.less | 140 ------------------------------------
 1 file changed, 140 deletions(-)

diff --git a/less/about/preferences.less b/less/about/preferences.less
index 1d77de172d..af0f21c367 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -284,146 +284,6 @@ table.sortableTable {
     margin: 0 auto;
     width: 80%;
   }
-
-  // This defines the styling of modal dialogs on "Add funds..." and "Advanced Settings..."
-  // TODO: Use modalOverlay in commonStyles.js
-  .modal {
-    .dialog {
-      background: linear-gradient(@modalVeryLightGray, @modalLightGray);
-      border-radius: @borderRadiusModal;
-
-      // Specific properties of the Coinbase overlay displayed by clicking "Fund with debit/credit"
-      &.coinbaseOverlay {
-        background: transparent;
-
-        .dialog-body {
-          height: 100%;
-          width: 100%;
-        }
-      }
-
-      // General properties of the header on the modal dialogs
-      .dialog-header {
-        .sectionTitle {
-          margin-bottom: 0;
-          padding: 25px 0; // text-indent / 2
-        }
-      }
-
-      // General properties of the body on the modal dialogs
-      .dialog-body {
-        .bitcoinDashboard {
-          .modal {
-            .qrcodeOverlay {
-              &.fade {
-                transition: @transitionFast;
-              }
-
-              .dialog-body {
-                padding: 30px;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.board {
-  overflow-x: hidden;
-  clear: both;
-
-  .panel {
-    background: #FFFFFF;
-    position: relative;
-    margin-top: 8px;
-    margin-bottom: 8px;
-    padding: 25px 20px;
-
-    #bitcoinPaymentURL {
-      cursor: pointer;
-      background-color: @lightGray;
-      &:hover {
-        background-color: @gray;
-      }
-      font-size: 0.9em;
-    }
-
-    .settingsListTitle {
-      color: @darkGray;
-      font-weight: bold;
-      font-size: 15px;
-      margin: 0;
-
-      &.subTitle {
-        clear: both;
-        font-weight: normal;
-        font-size: 14px;
-        font-style: italic;
-        line-height: 1.3em;
-        margin-top: 20px;
-      }
-    }
-
-    span {
-      display: inline;
-    }
-    a {
-      text-decoration: none;
-    }
-
-    button > a {
-      color: #fff;
-    }
-
-    .labelText {
-      clear: both;
-      font-size: 1em;
-      color: @braveOrange;
-      margin-bottom: 5px;
-    }
-
-    .primaryButton {
-      min-width: 180px;
-    }
-
-    &:after {
-      content:" ";
-      display:block;
-      clear:both;
-    }
-
-    .ledgerBackupContent {
-      width: 75%;
-      margin: 0 auto;
-      display: block;
-      line-height: 1.3em;
-      margin-bottom: 60px;
-    }
-  }
-
-  .panelFooter {
-    color: @darkGray;
-    font-size: 13px;
-    font-style: italic;
-    padding: 20px 20px 20px 50px;
-  }
-
-  &.contrast {
-    background: @highlightBlue;
-    color: white;
-
-    * {
-      color: white;
-    }
-  }
-
-  .disabledPanel {
-    div:nth-of-type(2) {
-      padding: 15px 0;
-    }
-  }
 }
 
 #searchSelectIcon {