From 21ece29eab80de4af2c606a65b54c13764b04c93 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Sat, 3 Dec 2016 23:50:28 +0900
Subject: [PATCH 1/3] Refactor about:preferences#payments (part 1)

1. Refactored about:preferences#payments (titleBar and walletBar)
  - Partly addresses #5494
2. Applied vertical-top to the right element
  - Fixes #5962
3. Refactored dialog on about:preferences#payments (l10n)
  - Closes #6007
4. Refactored Brave wallet modal dialog (part 1)
  - Fixes #5785 based on https://github.com/luixxiul/browser-laptop/commit/2327e9eca53eb4a637dd4c3e3a2a1d1f613c2fbc
5. Replaced the button on the modal dialog with the SVG icon

Auditors: @bradleyrichter @bsclifton

Test Plan 1:
1. Make sure paymentsMessage and walletBar appears at the same place by toggling the switch off/on
2. Set the toggle to on
3. Make sure every button in titleBar and walletBar works
4. Make sure height of the fund select box and account balance box is equal
5. Make sure the loading message and the question mark is aligned center
6. Make sure no button label is wrapped

Test Plan 2: make sure the row of the ledger table on about:payments is aligned horizontally

Test Plan 3:
1. Disable Coinbase via VPN
2. Make sure every button on the dialog on about:preferences#payments works

Test Plan 4:
1. Disable Coinbase via VPN
2. Make sure the grey footer no longer appears on the Add funds dialog

Test Plan 5:
1. Make sure the top right button on the modal dialog works
---
 js/about/preferences.js       |  20 +--
 js/components/modalOverlay.js |   2 +-
 less/about/preferences.less   | 280 ++++++++++++++++++++++------------
 less/modalOverlay.less        |  55 ++-----
 4 files changed, 205 insertions(+), 152 deletions(-)

diff --git a/js/about/preferences.js b/js/about/preferences.js
index 1a2667e97ac..c5e503bd5b5 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -339,7 +339,7 @@ class BitcoinDashboard extends ImmutableComponent {
   }
   get qrcodeOverlayFooter () {
     if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) {
-      return <div>
+      return <div className='qrcodeOverlayFooter'>
         <div id='coinbaseLogo' />
         <a href='https://itunes.apple.com/us/app/coinbase-bitcoin-wallet/id886427730?mt=8' target='_blank' id='appstoreLogo' />
         <a href='https://play.google.com/store/apps/details?id=com.coinbase.android' target='_blank' id='playstoreLogo' />
@@ -384,11 +384,11 @@ class BitcoinDashboard extends ImmutableComponent {
         <div className='settingsPanelDivider'>
           <span className='fa fa-credit-card' />
           <div className='settingsListTitle' data-l10n-id='moneyAdd' />
-          <div className='settingsListSubTitle' data-l10n-id='moneyAddSubTitle' />
+          <div className='settingsListTitle subTitle' data-l10n-id='moneyAddSubTitle' />
         </div>
         <div className='settingsPanelDivider'>
           {this.bitcoinPurchaseButton}
-          <div className='settingsListSubTitle' data-l10n-id='transferTime' />
+          <div className='settingsListTitle subTitle' data-l10n-id='transferTime' />
         </div>
       </div>
     } else {
@@ -396,7 +396,7 @@ class BitcoinDashboard extends ImmutableComponent {
         <div className='settingsPanelDivider'>
           <span className='fa fa-credit-card' />
           <div className='settingsListTitle' data-l10n-id='moneyAdd' />
-          <div className='settingsListSubTitle' data-l10n-id='moneyAddSubTitle' />
+          <div className='settingsListTitle subTitle' data-l10n-id='moneyAddSubTitle' />
         </div>
         <div className='settingsPanelDivider'>
           <div data-l10n-id='coinbaseNotAvailable' />
@@ -497,7 +497,7 @@ class BitcoinDashboard extends ImmutableComponent {
               <span className='fa fa-bitcoin fa-stack-1x' />
             </span>
             <div className='settingsListTitle' data-l10n-id='bitcoinAdd' />
-            <div className='settingsListSubTitle' data-l10n-id='bitcoinAddDescription' />
+            <div className='settingsListTitle subTitle' data-l10n-id='bitcoinAddDescription' />
           </div>
           {
             this.ledgerData.get('address')
@@ -908,7 +908,7 @@ class PaymentsTab extends ImmutableComponent {
       return null
     }
 
-    return <div>
+    return <div className='balance'>
       {
       !(this.props.ledgerData.get('balance') === undefined || this.props.ledgerData.get('balance') === null)
         ? <input className='form-control fundsAmount' readOnly value={this.btcToCurrencyString(this.props.ledgerData.get('balance'))} />
@@ -1235,6 +1235,9 @@ class PaymentsTab extends ImmutableComponent {
                       }
                     </select>
                   </SettingItem>
+                  <SettingItem>
+                    {this.paymentHistoryButton}
+                  </SettingItem>
                 </SettingsList>
               </td>
               <td>
@@ -1249,14 +1252,13 @@ class PaymentsTab extends ImmutableComponent {
                         <SettingItem>
                           {this.fundsAmount}
                           {this.walletButton}
-                          {this.paymentHistoryButton}
                         </SettingItem>
                       </SettingsList>
                     </div>
                 }
               </td>
               <td>
-                <div id='walletStatus' data-l10n-id={this.walletStatus.id} data-l10n-args={this.walletStatus.args ? JSON.stringify(this.walletStatus.args) : null} />
+                <div className='walletStatus' data-l10n-id={this.walletStatus.id} data-l10n-args={this.walletStatus.args ? JSON.stringify(this.walletStatus.args) : null} />
                 {this.nextReconcileDate}
               </td>
             </tr>
@@ -1299,7 +1301,7 @@ class PaymentsTab extends ImmutableComponent {
           <span className='sectionTitle'>Brave Payments</span>
           <span className='sectionSubTitle'>beta</span>
         </div>
-        <div className='pull-left' id='paymentsSwitches'>
+        <div className='paymentsSwitches'>
           <div className='enablePaymentsSwitch'>
             <span data-l10n-id='off' />
             <SettingCheckbox dataL10nId='on' prefKey={settings.PAYMENTS_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
diff --git a/js/components/modalOverlay.js b/js/components/modalOverlay.js
index 8b8a709c503..0a751d9e2fe 100644
--- a/js/components/modalOverlay.js
+++ b/js/components/modalOverlay.js
@@ -15,7 +15,7 @@ class ModalOverlay extends ImmutableComponent {
     var button = null
     var title = null
     if (!this.props.emptyDialog) {
-      close = (this.props.onHide ? <button type='button' className='close pull-right' onClick={this.props.onHide}><span>&times;</span></button> : null)
+      close = (this.props.onHide ? <button type='button' className='close pull-right' onClick={this.props.onHide} /> : null)
       title = (this.props.title ? <div className='sectionTitle' data-l10n-id={this.props.title} /> : null)
     }
     let customTitleClassesStr = (this.props.customTitleClasses ? this.props.customTitleClasses : '')
diff --git a/less/about/preferences.less b/less/about/preferences.less
index c034cb69517..e37777d1d82 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -13,33 +13,6 @@ body {
   display: none !important; /* for testing/debug only */
 }
 
-#paymentsSwitches {
-  display: flex;
-  align-items: center;
-  min-height: 40px;
-
-  .enablePaymentsSwitch {
-    float: left;
-    min-width: 215px;
-    margin-right: 30px;
-
-    span {
-      font-weight: bold;
-      color: @gray;
-    }
-
-    label {
-      font-weight: bold;
-      color: @braveOrange;
-    }
-  }
-
-  .settingItem {
-    display: inline;
-    margin-right: 30px;
-  }
-}
-
 #coinbaseLogo {
   width: 40px;
   height: 40px;
@@ -69,12 +42,6 @@ body {
   display: inline-block;
 }
 
-.bitcoinQRTitle {
-  color: @braveOrange;
-  margin-bottom: 70px;
-  text-align: center;
-}
-
 .sectionTitle {
   color: @darkGray;
   cursor: default;
@@ -516,30 +483,6 @@ table.sortableTable {
   }
 }
 
-.paymentsMessage {
-  background-color: @lightGray;
-  border-radius: @borderRadiusUIbox;
-  margin: 1em 0;
-  padding: 40px;
-  font-size: 1.3em;
-  line-height: 1.3em;
-  color: @mediumGray;
-  width: 500px;
-  float: left;
-  > div {
-    padding: 0.5em 0;
-    font-size: 14px;
-  }
-  > h3 {
-    font-weight: 200;
-    font-size: 18px;
-    padding-bottom: 0.5em;
-  }
-  .boldText {
-    font-weight: bold;
-  }
-}
-
 #ledgerTable {
 
   tr {
@@ -547,6 +490,11 @@ table.sortableTable {
     td {
       padding: 0 15px;
     }
+
+    td {
+      position: relative;
+    }
+
     .th-inner {
       font-weight: bold;
 
@@ -563,13 +511,6 @@ table.sortableTable {
   text-align: left;
 }
 
-span.paymentHistoryButton.browserButton {
-  display: block;
-  color: @braveOrange;
-  font-size: 14px;
-  white-space: nowrap;
-}
-
 .paymentHistoryFooter span.okButton.primaryButton {
   background-color: gray;
   float: right;
@@ -622,12 +563,37 @@ div.nextPaymentSubmission {
 
 
 #paymentsContainer {
+  @walletTableData: 235px + 30px; // .walletBar td (min-width + padding)
+  @barMargin: 15px 0 30px;
+
   position: relative;
   overflow-x: hidden;
   width: 805px;
 
   .titleBar {
     overflow: hidden;
+    display: flex;
+    align-items: center;
+
+    .paymentsSwitches {
+      display: flex;
+
+      .enablePaymentsSwitch {
+        display: flex;
+        align-items: center;
+        width: @walletTableData;
+
+        span {
+          font-weight: bold;
+          color: @gray;
+        }
+
+        label {
+          font-weight: bold;
+          color: @braveOrange;
+        }
+      }
+    }
   }
 
   & > table,
@@ -638,22 +604,107 @@ div.nextPaymentSubmission {
     width: 80%;
   }
 
+  .paymentsMessage {
+    background-color: @lightGray;
+    border-radius: @borderRadiusUIbox;
+    margin: @barMargin;
+    padding: 40px;
+    font-size: 1.3em;
+    line-height: 1.3em;
+    color: @mediumGray;
+    width: 500px;
+    float: left;
+
+    > div {
+      padding: 0.5em 0;
+      font-size: 14px;
+    }
+
+    > h3 {
+      font-weight: 200;
+      font-size: 18px;
+      padding-bottom: 0.5em;
+    }
+
+    .boldText {
+      font-weight: bold;
+    }
+  }
+
   .walletBar {
     padding: 20px;
     padding-bottom: 10px;
     background: @lightGray;
     border-radius: @borderRadiusUIbox;
-    margin: 30px 0px;
+    margin: @barMargin;
+
+    .settingsList .settingItem {
+      .paymentHistoryButton {
+        display: block;
+        color: @braveOrange;
+        font-size: 14px;
+        margin: 0;
+        padding: 0;
+        text-align: left;
+        cursor: pointer;
+      }
+
+      .balance {
+        display: flex;
+        align-items: center;
+        vertical-align: 0;
+        height: 100%;
+        margin-bottom: 0;
+
+        > span {
+          height: 2.25em; // .form-control
+          display: flex;
+          align-items: center;
+          margin: 0;
+          padding: 0; // .fundsFAQ
+
+          > span {
+            margin: 0; // for "Loading..."
+            padding: 0; // .fundsFAQ
+          }
+        }
+
+        + button {
+          margin-top: 12px; // .nextReconcileDate
+        }
+
+        .fundsFAQ {
+          color: @gray;
+          margin: 0 0 0 5px;
+        }
+      }
+    }
+
     th {
       text-align: left;
     }
+
     tr {
       height: 1em;
     }
+
     td {
       padding: 15px 30px 0 0;
       width: auto;
       min-width: 235px;
+      vertical-align: top;
+
+      .settingsListContainer {
+        margin-bottom: 0;
+
+        #fundsSelectBox {
+          width: auto;
+        }
+      }
+
+      .walletStatus {
+        font-size: 14.5px; // .form-control
+      }
     }
 
     .fundsAmount {
@@ -661,13 +712,9 @@ div.nextPaymentSubmission {
       margin: 0;
       width: auto;
     }
-    .fundsFAQ {
-      display: inline;
-      position: relative;
-      top: 1px;
-      left: 5px;
-    }
-    .accountBalanceError, .nextReconcileDate {
+
+    .accountBalanceError,
+    .nextReconcileDate {
       font-size: 14px;
       margin: 10px 0;
     }
@@ -712,11 +759,6 @@ div.nextPaymentSubmission {
     }
 
     td {
-      color: @mediumGray;
-      -webkit-font-smoothing: antialiased;
-      text-align: left;
-      vertical-align: top;
-      position: relative;
 
       a {
         vertical-align: middle;
@@ -783,9 +825,60 @@ div.nextPaymentSubmission {
 }
 
 #bitcoinDashboard {
+
+  .modal {
+    .qrcodeOverlay {
+      border: 0;
+      width: 350px;
+      height: auto;
+      margin: 100px auto 0 auto;
+      background: white;
+      box-shadow: @dialogShadow;
+
+      &.fade {
+        transition: @transitionFast;
+      }
+
+      button.close span {
+        color: @gray;
+        font-size: 2.5em;
+      }
+
+      img {
+        clear: both;
+        display: block;
+        margin: 0 auto;
+      }
+
+      .dialog-header {}
+
+      .dialog-body {
+        padding: 30px;
+
+        .bitcoinQRTitle {
+          color: @braveOrange;
+          text-align: center;
+        }
+      }
+
+      .dialog-footer {
+        .qrcodeOverlayFooter {
+          display: flex;
+          justify-content: center;
+          background: @gray;
+          padding: 15px 0;
+        }
+      }
+    }
+  }
+
   .board {
     .panel {
       padding-left: 100px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
   }
 }
@@ -799,7 +892,7 @@ div.nextPaymentSubmission {
     position: relative;
     margin-top: 8px;
     margin-bottom: 8px;
-    padding: 20px;
+    padding: 25px 20px;
 
     &.advancedSettings {
       padding-left: 50px;
@@ -815,10 +908,6 @@ div.nextPaymentSubmission {
       position: relative;
       float: left;
 
-      .settingsListTitle {
-        margin-top: 0;
-      }
-
       &:nth-child(1) {
         text-align: left;
       }
@@ -862,17 +951,18 @@ div.nextPaymentSubmission {
       color: @darkGray;
       font-weight: bold;
       font-size: 15px;
-      margin-bottom: 15px;
-      padding-right: 25px;
-    }
-    .settingsListSubTitle {
-      color: @darkGray;
-      clear: both;
-      font-weight: normal;
-      font-size: 14px;
-      font-style: italic;
-      line-height: 1.3em;
+      margin: 0;
+
+      &.subTitle {
+        clear: both;
+        font-weight: normal;
+        font-size: 14px;
+        font-style: italic;
+        line-height: 1.3em;
+        margin-top: 20px;
+      }
     }
+
     span {
       display: inline;
     }
@@ -929,7 +1019,6 @@ div.nextPaymentSubmission {
           font-size: 14px;
           margin: 0;
         }
-
       }
 
       .keyContainer {
@@ -1143,11 +1232,6 @@ div.nextPaymentSubmission {
   }
 }
 
-#fundsSelectBox {
-  margin-top: 0px;
-  width: auto;
-}
-
 .moreExtensionsComingSoon {
   padding-top: 10px;
   font-style: italic;
diff --git a/less/modalOverlay.less b/less/modalOverlay.less
index 5cc3fe609bd..200e103d330 100644
--- a/less/modalOverlay.less
+++ b/less/modalOverlay.less
@@ -38,15 +38,6 @@
       box-shadow: none;
       border: none;
 
-      button.close {
-        margin-top: -8px;
-        margin-right: -8px;
-        span {
-          font-size: 1.5em;
-          color: @highlightBlue;
-        }
-      }
-
       iframe {
         display: block;
         width: 100%;
@@ -58,35 +49,6 @@
         overflow: hidden;
       }
     }
-
-    .qrcodeOverlay {
-      width: 350px;
-      height: auto;
-      margin: 100px auto 0 auto;
-      background: white;
-      box-shadow: @dialogShadow;
-
-      button.close span {
-        color: @gray;
-        font-size: 2.5em;
-      }
-
-      img {
-        clear: both;
-        display: block;
-        margin: 0 auto;
-        padding: 20px 0 0 0;
-      }
-
-      .dialog-header {
-        padding: 15px;
-      }
-
-      .dialog-footer {
-        background: @gray;
-        padding: 15px;
-      }
-    }
   }
 
   .dialog {
@@ -141,14 +103,19 @@
   button {
     &.close {
       display: inline-block;
-      background: none;
-      height: 2em;
-      width: 2em;
-      min-width: 2em;
+      background: url('../img/toolbar/stoploading_btn.svg') center no-repeat;
+      background-size: 15px 15px;
+      height: 15px;
+      width: 15px;
       cursor: pointer;
       border: none;
-      box-shadow: none;
-      margin: 5px;
+      position: absolute;
+      right: 15px;
+      top: 15px;
+
+      &:focus {
+        outline: none;
+      }
 
       span {
         font-size: 2.5em;

From 9bdb37ae13f4fe139861aa66f16b1086b8f4a5bb Mon Sep 17 00:00:00 2001
From: Brian Clifton <brian@clifton.me>
Date: Mon, 5 Dec 2016 15:11:29 -0700
Subject: [PATCH 2/3] Fix broken tests (selector related)

Fixes https://github.com/brave/browser-laptop/issues/5951
(was broke with https://github.com/brave/browser-laptop/commit/46ee335509920c0a569a9da29d38bb3d3d4ee1e6)

Auditors: @luixxiul

Test Plan:
1. Window 1: run `npm run watch-all`
2. Window 2: run `npm run uitest -- --grep="Payment Panel"
3. Watch tests pass
---
 js/about/preferences.js | 2 +-
 test/lib/selectors.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/about/preferences.js b/js/about/preferences.js
index c5e503bd5b5..bcc81028389 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -927,7 +927,7 @@ class PaymentsTab extends ImmutableComponent {
     const onButtonClick = this.props.ledgerData.get('created')
       ? this.props.showOverlay.bind(this, 'addFunds')
       : (this.props.ledgerData.get('creating') ? () => {} : this.createWallet)
-    return <Button l10nId={buttonText} className='primaryButton wideButton' onClick={onButtonClick.bind(this)} disabled={this.props.ledgerData.get('creating')} />
+    return <Button l10nId={buttonText} className='primaryButton wideButton addFunds' onClick={onButtonClick.bind(this)} disabled={this.props.ledgerData.get('creating')} />
   }
 
   get paymentHistoryButton () {
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
index 2fd9aefce1e..aaf9edd518d 100644
--- a/test/lib/selectors.js
+++ b/test/lib/selectors.js
@@ -60,7 +60,7 @@ module.exports = {
   addFundsButton: '.addFunds',
   advancedSettings: '.advancedSettings',
   fundsSelectBox: '#fundsSelectBox',
-  paymentsStatus: '#walletStatus',
+  paymentsStatus: '.walletStatus',
   ledgerTable: '#ledgerTable',
   bitcoinDashboard: '#bitcoinDashboard',
   modalCloseButton: 'button.close',

From 95c6ddcd989208ca1cb21427cd154d09796269a3 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Tue, 6 Dec 2016 11:29:31 +0900
Subject: [PATCH 3/3] Replaced ids with className (for more consistency)

Auditors: @bsclifton

Test Plan: make sure styling of about:payments is not broken and tests pass
---
 js/about/preferences.js     | 8 ++++----
 less/about/preferences.less | 8 ++++----
 test/lib/selectors.js       | 6 +++---
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/js/about/preferences.js b/js/about/preferences.js
index bcc81028389..59f4ede89b4 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -285,7 +285,7 @@ class LedgerTable extends ImmutableComponent {
     if (!this.synopsis || !this.synopsis.size) {
       return null
     }
-    return <div id='ledgerTable'>
+    return <div className='ledgerTable'>
       <SortableTable
         headings={['rank', 'publisher', 'include', 'views', 'timeSpent', 'percentage']}
         defaultHeading='rank'
@@ -473,7 +473,7 @@ class BitcoinDashboard extends ImmutableComponent {
   render () {
     window.addEventListener('message', this.onMessage.bind(this), false)
     var emptyDialog = true
-    return <div id='bitcoinDashboard'>
+    return <div className='bitcoinDashboard'>
       {
       this.props.bitcoinOverlayVisible
         ? <ModalOverlay title={'bitcoinBuy'} content={this.bitcoinOverlayContent} customTitleClasses={'coinbaseOverlay'} emptyDialog={emptyDialog} onHide={this.props.hideOverlay.bind(this)} />
@@ -1224,7 +1224,7 @@ class PaymentsTab extends ImmutableComponent {
               <td>
                 <SettingsList>
                   <SettingItem>
-                    <select className='form-control' id='fundsSelectBox'
+                    <select className='form-control fundsSelectBox'
                       value={getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT,
                         this.props.settings)}
                       onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.PAYMENTS_CONTRIBUTION_AMOUNT)} >
@@ -1270,7 +1270,7 @@ class PaymentsTab extends ImmutableComponent {
   }
 
   render () {
-    return <div id='paymentsContainer'>
+    return <div className='paymentsContainer'>
       {
       this.enabled && this.props.addFundsOverlayVisible
         ? <ModalOverlay title={this.overlayTitle} content={this.overlayContent} onHide={this.props.hideOverlay.bind(this, 'addFunds')} />
diff --git a/less/about/preferences.less b/less/about/preferences.less
index e37777d1d82..36286d57aae 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -483,7 +483,7 @@ table.sortableTable {
   }
 }
 
-#ledgerTable {
+.ledgerTable {
 
   tr {
     th,
@@ -562,7 +562,7 @@ div.nextPaymentSubmission {
 }
 
 
-#paymentsContainer {
+.paymentsContainer {
   @walletTableData: 235px + 30px; // .walletBar td (min-width + padding)
   @barMargin: 15px 0 30px;
 
@@ -697,7 +697,7 @@ div.nextPaymentSubmission {
       .settingsListContainer {
         margin-bottom: 0;
 
-        #fundsSelectBox {
+        .fundsSelectBox {
           width: auto;
         }
       }
@@ -824,7 +824,7 @@ div.nextPaymentSubmission {
   }
 }
 
-#bitcoinDashboard {
+.bitcoinDashboard {
 
   .modal {
     .qrcodeOverlay {
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
index aaf9edd518d..6ac91bc0f65 100644
--- a/test/lib/selectors.js
+++ b/test/lib/selectors.js
@@ -59,10 +59,10 @@ module.exports = {
   walletSwitch: '.enablePaymentsSwitch .switchBackground',
   addFundsButton: '.addFunds',
   advancedSettings: '.advancedSettings',
-  fundsSelectBox: '#fundsSelectBox',
+  fundsSelectBox: '.fundsSelectBox',
   paymentsStatus: '.walletStatus',
-  ledgerTable: '#ledgerTable',
-  bitcoinDashboard: '#bitcoinDashboard',
+  ledgerTable: '.ledgerTable',
+  bitcoinDashboard: '.bitcoinDashboard',
   modalCloseButton: 'button.close',
   coinbaseBuyButton: '[data-l10n-id="add"]',
   paymentQRCode: '[title="Brave wallet QR code"]',