Reintroduce extra spacing between some about:preferences switch controls

and their text labels Adds 'compact' prop to SettingCheckbox. By default, the gap is there since that is the most common state. As per review of #10470
brave · Aug 14, 2017 · 773dbb1 · 773dbb1
1 parent d69eaa5
commit 773dbb1
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/app/renderer/components/common/settings.js b/app/renderer/components/common/settings.js
@@ -90,7 +90,8 @@ class SettingCheckbox extends ImmutableComponent {
 
     const labelClass = cx({
       [css(settingCheckboxStyles.label)]: this.props.small,
-      [this.props.labelClassName]: !!this.props.labelClassName
+      [this.props.labelClassName]: !!this.props.labelClassName,
+      [css(settingCheckboxStyles.expansiveRightText)]: !this.props.compact
     })
 
     return <div {...props} data-test-id={this.props.dataTestId}>
@@ -112,6 +113,9 @@ class SettingCheckbox extends ImmutableComponent {
 const settingCheckboxStyles = StyleSheet.create({
   label: {
     fontSize: 'smaller'
+  },
+  expansiveRightText: {
+    paddingLeft: '9px'
   }
 })
 

diff --git a/app/renderer/components/preferences/payment/ledgerTable.js b/app/renderer/components/preferences/payment/ledgerTable.js
@@ -264,7 +264,7 @@ class LedgerTable extends ImmutableComponent {
       <div className={css(styles.hideExcludedSites)}>
         <div className={css(styles.columnOffset)} />
         <div className={css(styles.rightColumn)}>
-          <SettingCheckbox small
+          <SettingCheckbox small compact
             dataL10nId='hideExcluded'
             prefKey={settings.PAYMENTS_SITES_HIDE_EXCLUDED}
             settings={this.props.settings}

diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js
@@ -200,6 +200,7 @@ class PaymentsTab extends ImmutableComponent {
             <span className={css(styles.switchWrap__switchSpan)} data-l10n-id='off' />
             <SettingCheckbox
               dataL10nId='on'
+              compact
               prefKey={settings.PAYMENTS_ENABLED}
               settings={this.props.settings}
               onChangeSetting={this.props.onChangeSetting}
@@ -227,6 +228,7 @@ class PaymentsTab extends ImmutableComponent {
               <div className={css(styles.switchWrap__autoSuggestSwitch)}>
                 <div className={css(styles.flexAlignCenter, styles.autoSuggestSwitch__subtext)}>
                   <SettingCheckbox dataL10nId='autoSuggestSites'
+                    compact
                     prefKey={settings.PAYMENTS_SITES_AUTO_SUGGEST}
                     settings={this.props.settings}
                     disabled={!enabled}