Normalize buttons in about:preferences

Auditors: @luixxiul
Test Plan:
Buttons inside prefs should look the same across tabs

Author: cezaraugusto

app/renderer/components/common/browserButton.js

@@ -170,6 +170,7 @@ const styles = StyleSheet.create({
     border: '1px solid white',
     color: globalStyles.button.secondary.color,
     cursor: 'pointer',
+    fontWeight: 500,
 
     ':hover': {
       border: `1px solid ${globalStyles.button.secondary.borderHoverColor}`,

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

@@ -6,7 +6,7 @@ const React = require('react')
 const {StyleSheet, css} = require('aphrodite/no-important')
 
 // components
-const Button = require('../../common/button')
+const BrowserButton = require('../../common/browserButton')
 const cx = require('../../../../../js/lib/classSet')
 const ModalOverlay = require('../../common/modalOverlay')
 const ImmutableComponent = require('../../immutableComponent')
@@ -96,11 +96,8 @@ class BitcoinDashboard extends ImmutableComponent {
     const buttonAttrs = {
       l10nId: 'add',
       testId: 'bitcoinPurchaseButton',
-      className: cx({
-        primaryButton: true,
-        [css(styles.panelButton)]: true,
-        disabled: disabled
-      })
+      primaryColor: true,
+      disabled: disabled
     }
     const hrefAttrs = {
       href: this.props.ledgerData.get('buyURL'),
@@ -118,11 +115,11 @@ class BitcoinDashboard extends ImmutableComponent {
       if (!disabled) {
         buttonAttrs.onClick = this.props.showOverlay.bind(this)
       }
-      return <Button {...buttonAttrs} />
+      return <BrowserButton {...buttonAttrs} />
     }
 
     return <a {...hrefAttrs}>
-      <Button {...buttonAttrs} />
+      <BrowserButton {...buttonAttrs} />
     </a>
   }
 
@@ -196,13 +193,10 @@ class BitcoinDashboard extends ImmutableComponent {
         </div>
         <div className={css(styles.panel__divider, styles.panel__divider_right)}>
           <a target='_blank' href={url}>
-            {/* TODO: refactor button.js */}
-            <Button className={cx({
-              primaryButton: true,
-              [css(styles.panelButton)]: true
-            })}
+            <BrowserButton
+              primaryColor
               testId='exchangePanelButton'
-              label={name}
+              l10nId={name}
             />
           </a>
         </div>
@@ -223,11 +217,8 @@ class BitcoinDashboard extends ImmutableComponent {
       </div>
       <div className={css(styles.panel__divider, styles.panel__divider_right)}>
         <a target='_blank' href='https://www.buybitcoinworldwide.com/'>
-          {/* TODO: refactor button.js */}
-          <Button className={cx({
-            primaryButton: true,
-            [css(styles.panelButton)]: true
-          })}
+          <BrowserButton
+            primaryColor
             testId='worldWidePanelButton'
             label='buybitcoinworldwide.com'
           />
@@ -261,11 +252,8 @@ class BitcoinDashboard extends ImmutableComponent {
               ledgerData.get('hasBitcoinHandler') && ledgerData.get('paymentURL')
                 ? <div className={css(styles.panel__divider_right__bitcoinPanel__paymentURL)}>
                   <a href={ledgerData.get('paymentURL')} target='_blank'>
-                    {/* TODO: refactor button.js */}
-                    <Button className={cx({
-                      primaryButton: true,
-                      [css(styles.panelButton)]: true
-                    })}
+                    <BrowserButton
+                      primaryColor
                       l10nId='bitcoinVisitAccount'
                       testId='bitcoinVisitAccountButton'
                     />
@@ -275,11 +263,8 @@ class BitcoinDashboard extends ImmutableComponent {
             }
             <div data-l10n-id='bitcoinPaymentURL' className={css(styles.panel__divider_right__bitcoinPanel__walletLabelText)} />
             <div className={css(styles.panel__divider_right__bitcoinPanel__walletAddressText)}>{ledgerData.get('address')}</div>
-            {/* TODO: refactor button.js */}
-            <Button className={cx({
-              primaryButton: true,
-              [css(styles.panelButton)]: true
-            })}
+            <BrowserButton
+              primaryColor
               l10nId='copyToClipboard'
               testId='copyToClipboardButton'
               onClick={this.copyToClipboard.bind(this, ledgerData.get('address'))}
@@ -308,11 +293,8 @@ class BitcoinDashboard extends ImmutableComponent {
         </div>
       </div>
       <div className={css(styles.panel__divider, styles.panel__divider_right)}>
-        {/* TODO: refactor button.js */}
-        <Button className={cx({
-          primaryButton: true,
-          [css(styles.panelButton)]: true
-        })}
+        <BrowserButton
+          primaryColor
           l10nId='displayQRCode'
           testId='displayQRCode'
           onClick={this.props.showQRcode.bind(this)}
@@ -449,10 +431,9 @@ class BitcoinDashboardFooter extends ImmutableComponent {
           ? this.coinbaseMessageWrapper
           : null
       }
-      <Button className={cx({
-        whiteButton: true,
-        [css(styles.dashboardFooter_coinbaseFooter__doneButton)]: this.coinbaseCountries
-      })}
+      <BrowserButton
+        secondaryColor
+        custom={this.coinbaseCountries && styles.dashboardFooter_coinbaseFooter__doneButton}
         l10nId='done'
         testId='panelDoneButton'
         onClick={this.props.hideParentOverlay}
@@ -582,7 +563,8 @@ const styles = StyleSheet.create({
     borderBottom: `3px solid ${globalStyles.color.modalLightGray}`
   },
   panel__smartphonePanel: {
-    padding: `${panelPadding} 0 ${panelPaddingBody}`
+    padding: `${panelPadding} 0 ${panelPaddingBody}`,
+    alignItems: 'center'
   },
 
   modalOverlay__qrcodeOverlay: {

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

@@ -12,7 +12,7 @@ const {formattedTimeFromNow, formattedDateFromTimestamp} = require('../../../../
 const appUrlUtil = require('../../../../../js/lib/appUrlUtil')
 
 // components
-const Button = require('../../common/button')
+const BrowserButton = require('../../common/browserButton')
 const ImmutableComponent = require('../../immutableComponent')
 
 // style
@@ -117,8 +117,7 @@ class HistoryFooter extends ImmutableComponent {
       <div className={css(styles.historyFooter__nextPayment)}>
         <span data-l10n-id={l10nDataId} data-l10n-args={JSON.stringify(l10nDataArgs)} />
       </div>
-      {/* TODO: refactor button.less */}
-      <Button className='primaryButton'
+      <BrowserButton primaryColor
         l10nId='paymentHistoryOKText'
         testId='paymentHistoryOKText'
         onClick={this.props.hideOverlay.bind(this, 'paymentHistory')}

app/renderer/components/styles/global.js

@@ -277,8 +277,8 @@ const globalStyles = {
       gradientColor1: '#fff',
       gradientColor2: '#ececec',
       background: 'linear-gradient(#fff, #ececec)',
-      color: '#444',
-      hoverColor: '#000',
+      color: '#666',
+      hoverColor: '#444',
       borderHoverColor: 'rgb(153, 153, 153)'
     },
 

js/about/preferences.js

@@ -16,7 +16,7 @@ const {SettingsList, SettingItem, SettingCheckbox, SettingItemIcon} = require('.
 const {SettingTextbox} = require('../../app/renderer/components/common/textbox')
 const {SettingDropdown} = require('../../app/renderer/components/common/dropdown')
 const {DefaultSectionTitle} = require('../../app/renderer/components/common/sectionTitle')
-const Button = require('../../app/renderer/components/common/button')
+const BrowserButton = require('../../app/renderer/components/common/browserButton')
 
 // Tabs
 const PaymentsTab = require('../../app/renderer/components/preferences/paymentsTab')
@@ -149,8 +149,11 @@ class GeneralTab extends ImmutableComponent {
     const defaultBrowser = getSetting(settings.IS_DEFAULT_BROWSER, this.props.settings)
       ? <SettingItem dataL10nId='defaultBrowser' />
       : <SettingItem dataL10nId='notDefaultBrowser' >
-        <Button l10nId='setAsDefault' className='primaryButton setAsDefaultButton'
-          onClick={this.setAsDefaultBrowser} />
+        <BrowserButton
+          primaryColor
+          l10nId='setAsDefault'
+          onClick={this.setAsDefaultBrowser}
+        />
       </SettingItem>
 
     const defaultZoomSetting = getSetting(settings.DEFAULT_ZOOM_LEVEL, this.props.settings)
@@ -234,8 +237,11 @@ class GeneralTab extends ImmutableComponent {
           </SettingDropdown>
         </SettingItem>
         <SettingItem dataL10nId='importBrowserData'>
-          <Button l10nId='importNow' className='primaryButton importNowButton'
-            onClick={this.importBrowserDataNow} />
+          <BrowserButton
+            primaryColor
+            l10nId='importNow'
+            onClick={this.importBrowserDataNow}
+          />
         </SettingItem>
         {defaultBrowser}
         <SettingItem>
@@ -547,10 +553,15 @@ class ShieldsTab extends ImmutableComponent {
         <SettingCheckbox checked={this.props.braveryDefaults.get('safeBrowsing')} dataL10nId='safeBrowsing' onChange={this.onToggleSafeBrowsing} />
         <SettingCheckbox checked={this.props.braveryDefaults.get('noScript')} dataL10nId='noScriptPref' onChange={this.onToggleNoScript} />
         <SettingCheckbox dataL10nId='blockCanvasFingerprinting' prefKey={settings.BLOCK_CANVAS_FINGERPRINTING} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-        <Button l10nId='manageAdblockSettings' className='primaryButton manageAdblockSettings'
-          onClick={aboutActions.createTabRequested.bind(null, {
-            url: 'about:adblock'
-          })} />
+        {/* TODO: move this inline style to Aphrodite once refactored */}
+        <div style={{marginTop: '15px'}}>
+          <BrowserButton
+            primaryColor
+            l10nId='manageAdblockSettings'
+            onClick={aboutActions.createTabRequested.bind(null, {
+              url: 'about:adblock'
+            })} />
+        </div>
       </SettingsList>
       <DefaultSectionTitle data-l10n-id='shieldsPanelOptions' />
       <SettingsList>
@@ -605,11 +616,15 @@ class SecurityTab extends ImmutableComponent {
         <SettingCheckbox dataL10nId='autocompleteData' prefKey={settings.SHUTDOWN_CLEAR_AUTOCOMPLETE_DATA} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
         <SettingCheckbox dataL10nId='autofillData' prefKey={settings.SHUTDOWN_CLEAR_AUTOFILL_DATA} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
         <SettingCheckbox dataL10nId='savedSiteSettings' prefKey={settings.SHUTDOWN_CLEAR_SITE_SETTINGS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-        <Button className='primaryButton'
-          l10nId='clearBrowsingDataNow'
-          testId='clearBrowsingDataButton'
-          onClick={this.clearBrowsingDataNow}
-        />
+        {/* TODO: move this inline style to Aphrodite once refactored */}
+        <div style={{marginTop: '15px'}}>
+          <BrowserButton
+            primaryColor
+            l10nId='clearBrowsingDataNow'
+            testId='clearBrowsingDataButton'
+            onClick={this.clearBrowsingDataNow}
+          />
+        </div>
       </SettingsList>
       <DefaultSectionTitle data-l10n-id='passwordsAndForms' />
       <SettingsList>
@@ -646,10 +661,17 @@ class SecurityTab extends ImmutableComponent {
       <DefaultSectionTitle data-l10n-id='autofillSettings' />
       <SettingsList>
         <SettingCheckbox dataL10nId='enableAutofill' prefKey={settings.AUTOFILL_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-        <Button l10nId='manageAutofillData' className='primaryButton manageAutofillDataButton'
-          onClick={aboutActions.createTabRequested.bind(null, {
-            url: 'about:autofill'
-          })} disabled={!getSetting(settings.AUTOFILL_ENABLED, this.props.settings)} />
+        {/* TODO: move this inline style to Aphrodite once refactored */}
+        <div style={{marginTop: '15px'}}>
+          <BrowserButton
+            primaryColor
+            l10nId='manageAutofillData'
+            disabled={!getSetting(settings.AUTOFILL_ENABLED, this.props.settings)}
+            onClick={aboutActions.createTabRequested.bind(null, {
+              url: 'about:autofill'
+            })}
+          />
+        </div>
       </SettingsList>
       <DefaultSectionTitle data-l10n-id='fullscreenContent' />
       <SettingsList>

less/button.less

@@ -128,28 +128,3 @@ span.buttonSeparator {
     font-size: 14px;
   }
 }
-
-// for about:preferences
-.prefBody {
-  .settingsList > .settingItem + button,
-  .settingItem > span + button,
-  .paymentsContainer button:not(.close),
-  .syncContainer .browserButton {
-    font-size: 0.9rem;
-    padding: 8px 20px;
-  }
-
-  .settingsList > .settingItem + button,
-  .settingItem > span + button,
-  .paymentsContainer button:not(.close) {
-    margin: 0;
-  }
-
-  .settingsList > .settingItem + button {
-    margin-top: 20px;
-  }
-
-  .settingItem > span + button {
-    margin-top: 5px;
-  }
-}