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

@@ -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,19 +384,19 @@ 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 {
       return <div className='panel disabledPanel'>
         <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} />

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 : '')