Restructuring paymentsTab.js

app/renderer/components/preferences/payment/enabledContent.js

@@ -298,9 +298,11 @@ const styles = StyleSheet.create({
   },
 
   iconText: {
-    color: '#c7c7c7',
+    color: globalStyles.color.mediumGray,
     margin: '0 0 0 5px',
-    fontSize: paymentStyles.font.regular
+
+    // TODO: refactor preferences.less to remove !important
+    fontSize: `${globalStyles.fontSize.settingItemSubtext} !important`
   },
 
   contribution: {

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')
+const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
 const ImmutableComponent = require('../../../../js/components/immutableComponent')
@@ -22,7 +22,7 @@ const {LedgerRecoveryContent, LedgerRecoveryFooter} = require('./payment/ledgerR
 const cx = require('../../../../js/lib/classSet')
 const globalStyles = require('../styles/global')
 const {paymentStyles} = require('../styles/payment')
-const advanceIcon = require('../../../extensions/brave/img/ledger/icon_settings.svg')
+const settingIcon = require('../../../extensions/brave/img/ledger/icon_settings.svg')
 const historyIcon = require('../../../extensions/brave/img/ledger/icon_history.svg')
 
 // other
@@ -160,55 +160,74 @@ class PaymentsTab extends ImmutableComponent {
         />
         : null
       }
-      <div className={css(styles.titleBar)}>
-        <div className='sectionTitleWrapper pull-left'>
+
+      <div className={css(styles.flexAlignEnd)}>
+        <div className='sectionTitleWrapper'>
           <span className='sectionTitle'>Brave Payments</span>
           <span className='sectionSubTitle'>beta</span>
         </div>
-        <div className={css(styles.paymentsSwitches)}>
-          <div className={css(styles.switchWrap)} data-test-id='enablePaymentsSwitch'>
-            <span className={css(styles.switchSpan)} data-l10n-id='off' />
+
+        <div className={css(
+          styles.flexAlignCenter,
+          styles.paymentsSwitches
+        )}>
+          <div className={css(styles.flexAlignEnd, styles.switchWrap)} data-test-id='enablePaymentsSwitch'>
+            <span className={css(styles.switchWrap__switchSpan)} data-l10n-id='off' />
             <SettingCheckbox dataL10nId='on'
               prefKey={settings.PAYMENTS_ENABLED}
               settings={this.props.settings}
               onChangeSetting={this.props.onChangeSetting}
-              switchClassName={css(styles.switchControl)}
-              labelClassName={css(styles.label)}
+              switchClassName={css(styles.switchWrap__switchControl)}
+              labelClassName={css(styles.switchWrap__label)}
             />
           </div>
           {
             this.enabled
-            ? <div className={css(styles.switchWrap, styles.autoSuggestSwitch)}>
-              <div className={css(styles.mainIconsLeft)}>
-                <SettingCheckbox dataL10nId='autoSuggestSites'
-                  prefKey={settings.AUTO_SUGGEST_SITES}
-                  settings={this.props.settings}
-                  disabled={!enabled}
-                  onChangeSetting={this.props.onChangeSetting}
-                  switchClassName={css(styles.switchControl)}
-                />
-                <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 className={css(
+                styles.flexAlignCenter,
+                styles.switchWrap,
+                styles.switchWrap__right
+              )}>
+              <div className={css(styles.switchWrap__autoSuggestSwitch)}>
+                <div className={css(styles.flexAlignCenter, styles.autoSuggestSwitch__subtext)}>
+                  <SettingCheckbox dataL10nId='autoSuggestSites'
+                    prefKey={settings.AUTO_SUGGEST_SITES}
+                    settings={this.props.settings}
+                    disabled={!enabled}
+                    onChangeSetting={this.props.onChangeSetting}
+                    switchClassName={css(styles.switchWrap__switchControl)}
+                  />
+                  <a className={cx({
+                    fa: true,
+                    'fa-question-circle': true,
+                    [css(styles.autoSuggestSwitch__moreInfo)]: true,
+                    [css(styles.autoSuggestSwitch__moreInfoBtnSuggest)]: true
+                  })}
+                    href='https://brave.com/Payments_FAQ.html'
+                    target='_blank'
+                    data-l10n-id='paymentsFAQLink'
+                  />
+                </div>
               </div>
-              <div className={css(styles.mainIconsRight)}>
+              <div className={css(styles.switchWrap__mainIconsRight)}>
                 <a
                   data-test-id={this.hasWalletTransaction ? 'paymentHistoryButton' : 'disabledPaymentHistoryButton'}
                   data-l10n-id='paymentHistoryIcon'
-                  className={css(styles.mainIcons, styles.historyIcon, !this.hasWalletTransaction && styles.historyDisabled)}
+                  className={css(
+                    styles.switchWrap__mainIcons,
+                    styles.mainIcons__historyIcon,
+                    !this.hasWalletTransaction && styles.mainIcons__historyDisabled
+                  )}
                   onClick={(enabled && this.hasWalletTransaction) ? this.props.showOverlay.bind(this, 'paymentHistory') : () => {}}
                 />
                 <a
-                  className={css(styles.mainIcons, styles.advanceIcon, !enabled && styles.advanceIconDisabled)}
                   data-test-id={!enabled ? 'advancedSettingsButtonLoading' : 'advancedSettingsButton'}
                   data-l10n-id='advancedSettingsIcon'
+                  className={css(
+                    styles.switchWrap__mainIcons,
+                    styles.mainIcons__settingIcon,
+                    !enabled && styles.mainIcons__settingIconDisabled
+                  )}
                   onClick={enabled ? this.props.showOverlay.bind(this, 'advancedSettings') : () => {}}
                 />
               </div>
@@ -232,92 +251,119 @@ class PaymentsTab extends ImmutableComponent {
 }
 
 const styles = StyleSheet.create({
+  flexAlignCenter: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  flexAlignEnd: {
+    display: 'flex',
+    alignItems: 'flex-end'
+  },
+
   paymentsContainer: {
     position: 'relative',
     overflowX: 'hidden',
-    width: '805px'
-  },
-  titleBar: {
-    overflow: 'hidden',
-    display: 'flex',
-    alignItems: 'center',
+    width: '805px',
     marginTop: '15px'
   },
   paymentsSwitches: {
     display: 'flex',
-    marginTop: '2px',
+    position: 'relative',
+    bottom: '2px',
     minHeight: '29px'
   },
+
   switchWrap: {
-    display: 'flex',
-    alignItems: 'flex-end',
     width: paymentStyles.width.tableCell
   },
-  switchControl: {
-    paddingTop: 0,
-    paddingBottom: 0
+  switchWrap__switchControl: {
+    // TODO: Refactor switchControls.less
+    paddingTop: '0 !important',
+    paddingBottom: '0 !important'
   },
-  switchSpan: {
+  switchWrap__switchSpan: {
     color: '#999',
     fontWeight: 'bold'
   },
-  autoSuggestSwitch: {
+  switchWrap__label: {
+    fontWeight: 'bold',
+    color: globalStyles.color.braveOrange
+  },
+  switchWrap__right: {
+    justifyContent: 'space-between',
+    position: 'relative'
+  },
+
+  switchWrap__autoSuggestSwitch: {
+    // TODO: Refactor switchControls.less
     position: 'relative',
-    left: '-5px',
-    alignItems: 'flex-end',
-    justifyContent: 'space-between'
+    right: '5px',
+    top: '1px'
   },
-  moreInfo: {
-    fontWeight: 'bold',
-    fontSize: paymentStyles.font.regular,
-    color: '#c7c7c7'
+  autoSuggestSwitch__subtext: {
+    fontSize: globalStyles.fontSize.settingItemSubtext
+  },
+  autoSuggestSwitch__moreInfo: {
+    color: globalStyles.color.commonTextColor
   },
-  moreInfoBtnSuggest: {
-    marginLeft: '7px',
-    marginTop: '4px',
+  autoSuggestSwitch__moreInfoBtnSuggest: {
+    position: 'relative',
+    left: '5px',
     cursor: 'pointer',
-    textDecoration: 'none'
+
+    // TODO: refactor preferences.less to remove !important
+    ':hover': {
+      textDecoration: 'none !important'
+    }
   },
-  label: {
-    fontWeight: 'bold',
-    color: globalStyles.color.braveOrange
+
+  switchWrap__mainIconsRight: {
+    position: 'relative',
+    right: '12px',
+    top: '3.5px'
   },
-  mainIcons: {
+  switchWrap__mainIcons: {
     backgroundColor: globalStyles.color.braveOrange,
     width: '25px',
     height: '26px',
     display: 'inline-block',
-    marginLeft: '7px',
     position: 'relative',
-    top: '7px',
 
     ':hover': {
       backgroundColor: globalStyles.color.braveDarkOrange
     }
   },
-  mainIconsLeft: {
-    display: 'flex'
-  },
-  mainIconsRight: {
-    paddingRight: '10px'
-  },
-  historyIcon: {
-    '-webkit-mask-image': `url(${historyIcon})`
+
+  mainIcons__historyIcon: {
+    right: '5px',
+    WebkitMaskImage: `url(${historyIcon})`,
+
+    ':hover': {
+      backgroundColor: globalStyles.color.braveDarkOrange
+    }
   },
-  historyDisabled: {
+  mainIcons__historyDisabled: {
     backgroundColor: globalStyles.color.chromeTertiary,
     cursor: 'default',
 
     ':hover': {
       backgroundColor: globalStyles.color.chromeTertiary
     }
   },
-  advanceIcon: {
-    '-webkit-mask-image': `url(${advanceIcon})`
+  mainIcons__settingIcon: {
+    WebkitMaskImage: `url(${settingIcon})`,
+
+    ':hover': {
+      backgroundColor: globalStyles.color.braveDarkOrange
+    }
   },
-  advanceIconDisabled: {
+  mainIcons__settingIconDisabled: {
     backgroundColor: globalStyles.color.chromeTertiary,
-    cursor: 'default'
+    cursor: 'default',
+
+    ':hover': {
+      backgroundColor: globalStyles.color.chromeTertiary
+    }
   }
 })
 

app/renderer/components/styles/global.js

@@ -16,6 +16,7 @@ const globalStyles = {
     }
   },
   color: {
+    commonTextColor: '#3b3b3b',
     linkColor: '#0099CC',
     highlightBlue: '#37A9FD',
     privateTabBackground: '#665296',
@@ -167,7 +168,8 @@ const globalStyles = {
   },
   fontSize: {
     tabIcon: '14px',
-    tabTitle: '12px'
+    tabTitle: '12px',
+    settingItemSubtext: '.95rem'
   },
   appIcons: {
     clipboard: 'fa fa-clipboard',

less/about/common.less

@@ -4,7 +4,7 @@
 @import "../switchControls.less";
 @import "../sortableTable.less";
 
-@textColor: #3B3B3B;
+@textColor: @commonTextColor;
 
 * {
   color: @textColor;

less/about/preferences.less

@@ -192,7 +192,7 @@ span.settingsListCopy {
   }
 
   .subtext {
-    font-size: 0.95em;
+    font-size: @settingItemSubtextFontSize;
   }
 
   .iconTitle {

less/variables.less

@@ -2,6 +2,8 @@
  * 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/. */
 
+@commonTextColor: #3b3b3b;
+
 @linkColor: #0099CC;
 @highlightBlue: #37A9FD;
 @borderRadius: 2px;
@@ -41,6 +43,7 @@
 @progressBarColor: #3498DB;
 @defaultFontSize: 13px;
 @contextMenuFontSize: 14px;
+@settingItemSubtextFontSize: 0.95rem;
 @audioColor: @highlightBlue;
 @focusUrlbarOutline: @highlightBlue;
 @siteSecureColor: @buttonColor;