Merge pull request #6009 from luixxiul/refactoring-payment

Refactor about:preferences#payments (part 1)
brave · Dec 6, 2016 · 6545307 · 6545307
2 parents 148c693 + 95c6ddc
commit 6545307
Show file tree

Hide file tree

Showing 5 changed files with 217 additions and 164 deletions.
diff --git 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'
@@ -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' />
@@ -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)} />
@@ -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'))} />
@@ -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 () {
@@ -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)} >
@@ -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>
@@ -1268,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')} />
@@ -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
@@ -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 : '')