Added aphrodite to paymentTab

brave · Mar 4, 2017 · cd94b65 · cd94b65
1 parent 80d22a1
commit cd94b65
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 72 deletions.
diff --git a/app/renderer/components/preferences/payment/ledgerBackup.js b/app/renderer/components/preferences/payment/ledgerBackup.js
@@ -30,24 +30,20 @@ class LedgerBackupContent extends ImmutableComponent {
       <div className={css(paymentCommon.panel, styles.ledgerBackupContent)}>
         <span data-l10n-id='ledgerBackupContent' />
         <div className={css(styles.copyKeyContainer)}>
-          <div className='copyContainer'>
-            <Button l10nId='copy'
-              className={css(commonStyles.whiteButton, styles.copyButton)}
-              onClick={this.copyToClipboard.bind(this, paymentId)}
-            />
-          </div>
+          <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>
         </div>
         <div className={css(styles.copyKeyContainer)}>
-          <div className='copyContainer'>
-            <Button l10nId='copy'
-              className={css(commonStyles.whiteButton, styles.copyButton)}
-              onClick={this.copyToClipboard.bind(this, passphrase)}
-            />
-          </div>
+          <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>

diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js
@@ -4,7 +4,7 @@
 
 // Note that these are webpack requires, not CommonJS node requiring requires
 const React = require('react')
-// const {StyleSheet, css} = require('aphrodite/no-important')
+const {StyleSheet, css} = require('aphrodite')
 
 // Components
 const ImmutableComponent = require('../../../../js/components/immutableComponent')
@@ -20,7 +20,10 @@ const {LedgerBackupContent, LedgerBackupFooter} = require('./payment/ledgerBacku
 const {LedgerRecoveryContent, LedgerRecoveryFooter} = require('./payment/ledgerRecovery')
 
 // style
-// const globalStyles = require('../styles/global')
+const cx = require('../../../../js/lib/classSet')
+const globalStyles = require('../styles/global')
+const commonStyles = require('../styles/commonStyles')
+const {paymentStyles} = require('../styles/payment')
 
 // other
 const getSetting = require('../../../../js/settings').getSetting
@@ -34,6 +37,7 @@ class PaymentsTab extends ImmutableComponent {
       FirstRecoveryKey: '',
       SecondRecoveryKey: ''
     }
+
     this.handleFirstRecoveryKeyChange = this.handleFirstRecoveryKeyChange.bind(this)
     this.handleSecondRecoveryKeyChange = this.handleSecondRecoveryKeyChange.bind(this)
   }
@@ -52,15 +56,15 @@ class PaymentsTab extends ImmutableComponent {
     return getSetting(settings.PAYMENTS_ENABLED, this.props.settings)
   }
 
-  overlayTitle () {
+  get overlayTitle () {
     if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) {
       return 'addFunds'
     } else {
       return 'addFundsAlternate'
     }
   }
 
-  overlayContent () {
+  get overlayContent () {
     return <BitcoinDashboard ledgerData={this.props.ledgerData}
       settings={this.props.settings}
       bitcoinOverlayVisible={this.props.bitcoinOverlayVisible}
@@ -73,7 +77,10 @@ class PaymentsTab extends ImmutableComponent {
   }
 
   render () {
-    return <div className='paymentsContainer'>
+    return <div className={cx({
+      paymentsContainer: true,
+      [css(styles.paymentsContainer)]: true
+    })}>
       {
       this.enabled && this.props.addFundsOverlayVisible
         ? <ModalOverlay title={this.overlayTitle} content={this.overlayContent} onHide={this.props.hideOverlay.bind(this, 'addFunds')} />
@@ -142,32 +149,53 @@ class PaymentsTab extends ImmutableComponent {
         />
         : null
       }
-      <div className='advancedSettingsWrapper'>
+      <div className={css(styles.advancedSettingsWrapper)}>
         {
           this.props.ledgerData.get('created') && this.enabled
           ? <Button
             l10nId='advancedSettings'
-            className='advancedSettings whiteButton'
+            className={css(commonStyles.whiteButton, styles.button)}
             onClick={this.props.showOverlay.bind(this, 'advancedSettings')}
           />
           : null
         }
       </div>
-      <div className='titleBar'>
+      <div className={css(styles.titleBar)}>
         <div className='sectionTitleWrapper pull-left'>
           <span className='sectionTitle'>Brave Payments</span>
           <span className='sectionSubTitle'>beta</span>
         </div>
-        <div className='paymentsSwitches'>
-          <div className='enablePaymentsSwitch'>
+        <div className={css(styles.paymentsSwitches)}>
+          <div className={css(styles.switchWrap)}>
             <span data-l10n-id='off' />
-            <SettingCheckbox dataL10nId='on' prefKey={settings.PAYMENTS_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
+            <SettingCheckbox dataL10nId='on'
+              prefKey={settings.PAYMENTS_ENABLED}
+              settings={this.props.settings}
+              onChangeSetting={this.props.onChangeSetting}
+              switchClassName={css(styles.switchControl)}
+              labelClassName={css(styles.label)}
+            />
           </div>
           {
             this.props.ledgerData.get('created') && this.enabled
-            ? <div className='autoSuggestSwitch'>
-              <SettingCheckbox dataL10nId='autoSuggestSites' prefKey={settings.AUTO_SUGGEST_SITES} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-              <a className='moreInfoBtn fa fa-question-circle' href='https://brave.com/Payments_FAQ.html' target='_blank' data-l10n-id='paymentsFAQLink' />
+            ? <div className={css(styles.switchWrap, styles.autoSuggestSwitch)}>
+              <SettingCheckbox dataL10nId='autoSuggestSites'
+                prefKey={settings.AUTO_SUGGEST_SITES}
+                settings={this.props.settings}
+                onChangeSetting={this.props.onChangeSetting}
+                switchClassName={css(styles.switchControl)}
+                labelClassName={css(styles.label)}
+              />
+              <a className={cx({
+                fa: true,
+                'fa-question-circle': true,
+                [css(styles.moreInfo)]: true,
+                [css(styles.moreInfoBtnSuggest)]: true
+              })}
+                href='https://brave.com/Payments_FAQ.html'
+                target='_blank'
+                data-l10n-id='paymentsFAQLink'
+              />
             </div>
             : null
           }
@@ -187,4 +215,56 @@ class PaymentsTab extends ImmutableComponent {
   }
 }
 
+const styles = StyleSheet.create({
+  paymentsContainer: {
+    position: 'relative',
+    overflowX: 'hidden',
+    width: '805px'
+  },
+  advancedSettingsWrapper: {
+    textAlign: 'right',
+    marginRight: '15px',
+    marginBottom: '7.5px',
+    position: 'relative',
+    left: '3px'
+  },
+  button: {
+    minWidth: '235px'
+  },
+  titleBar: {
+    overflow: 'hidden',
+    display: 'flex',
+    alignItems: 'center'
+  },
+  paymentsSwitches: {
+    display: 'flex'
+  },
+  switchWrap: {
+    display: 'flex',
+    alignItems: 'center',
+    width: paymentStyles.width.tableCell
+  },
+  switchControl: {
+    paddingTop: 0,
+    paddingBottom: 0
+  },
+  autoSuggestSwitch: {
+    position: 'relative',
+    left: '-5px'
+  },
+  moreInfo: {
+    fontWeight: 'bold',
+    fontSize: paymentStyles.font.regular,
+    color: globalStyles.color.gray
+  },
+  moreInfoBtnSuggest: {
+    marginLeft: '7px',
+    cursor: 'pointer',
+    textDecoration: 'none'
+  },
+  label: {
+    fontWeight: 'bold'
+  }
+})
+
 module.exports = PaymentsTab
diff --git a/less/about/preferences.less b/less/about/preferences.less
@@ -301,10 +301,6 @@ table.sortableTable {
   @walletBarItemMargin: 12px;
   @walletBarPadding: @walletBarItemMargin * 1.5;
 
-  position: relative;
-  overflow-x: hidden;
-  width: 805px;
-
   // General properties on about:preferences#payments.
   // Make sure any change here could cause unexpected regressions.
   a {
@@ -401,63 +397,22 @@ table.sortableTable {
     }
   }
 
-  .advancedSettingsWrapper {
-    // cf: .hideExcludedSites
-    @margin-bottom: @walletBarMargin / 2;
-
-    text-align: right;
-    margin-right: @walletBarPadding;
-    margin-bottom: @margin-bottom;
-
-    // align the button with .autoSuggestSwitch
-    position: relative;
-    left: 3px;
-
-    button {
-      min-width: 235px; // PR #6287
-    }
-  }
-
   // This defines the styling of the title row (1st) on about:preferences#payments
   .titleBar {
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-
     .paymentsSwitches {
-      display: flex;
 
       .enablePaymentsSwitch,
       .autoSuggestSwitch {
-        display: flex;
-        align-items: center;
-        width: @walletBarTableData;
 
-        .settingItem .switchControl {
-          padding-top: 0;
-          padding-bottom: 0;
-        }
+        .settingItem
 
         span,
         .moreInfoBtn {
-          font-weight: bold;
-          font-size: @fontSize;
-          color: @gray;
-        }
-
-        label {
-          font-weight: bold;
         }
       }
 
       .autoSuggestSwitch {
-        position: relative;
-        left: -5px; // .prefTabContainer .switchControl
-
         .moreInfoBtn {
-          margin-left: 7px;
-          cursor: pointer;
-          text-decoration: none;
         }
       }
     }