Merge pull request #6969 from cezaraugusto/feature/ledger/6966

Polish on Payments Panel

app/extensions/brave/locales/en-US/preferences.properties

@@ -89,7 +89,7 @@ off=off
 on=on
 ok=Ok
 minimumPercentage=Hide sites with less than 1% usage
-autoSuggestSites=auto-include sites
+autoSuggestSites=auto-include
 notifications=Show notifications
 moneyAdd=Use your debit/credit card
 moneyAddSubTitle=No Bitcoin needed!

js/about/preferences.js

@@ -139,6 +139,7 @@ class SettingCheckbox extends ImmutableComponent {
     }
     return <div {...props}>
       <SwitchControl id={this.props.prefKey}
+        small={this.props.small}
         disabled={this.props.disabled}
         onClick={this.onClick}
         checkedOn={this.props.checked !== undefined ? this.props.checked : getSetting(this.props.prefKey, this.props.settings)} />
@@ -170,6 +171,7 @@ class SiteSettingCheckbox extends ImmutableComponent {
   render () {
     return <div style={this.props.style} className='settingItem siteSettingItem'>
       <SwitchControl
+        small={this.props.small}
         disabled={this.props.disabled}
         onClick={this.onClick}
         checkedOn={this.props.checked} />
@@ -256,7 +258,7 @@ class LedgerTable extends ImmutableComponent {
         value: site
       },
       {
-        html: <SiteSettingCheckbox hostPattern={this.getHostPattern(synopsis)} defaultValue={defaultSiteSetting} prefKey='ledgerPayments' siteSettings={this.props.siteSettings} checked={this.enabledForSite(synopsis)} />,
+        html: <SiteSettingCheckbox small hostPattern={this.getHostPattern(synopsis)} defaultValue={defaultSiteSetting} prefKey='ledgerPayments' siteSettings={this.props.siteSettings} checked={this.enabledForSite(synopsis)} />,
         value: this.enabledForSite(synopsis) ? 1 : 0
       },
       views,
@@ -274,7 +276,7 @@ class LedgerTable extends ImmutableComponent {
     }
     return <div className='ledgerTable'>
       <div className='hideExcludedSites'>
-        <SettingCheckbox
+        <SettingCheckbox small
           dataL10nId='hideExcluded'
           prefKey={settings.HIDE_EXCLUDED_SITES}
           settings={this.props.settings}

js/components/switchControl.js

@@ -27,6 +27,7 @@ class SwitchControl extends ImmutableComponent {
       [this.props.className]: !!this.props.className,
       disabled: this.props.disabled,
       large: this.props.large,
+      small: this.props.small,
       hasTopText: this.props.topl10nId
     })}>
       {

less/about/preferences.less

@@ -1016,7 +1016,6 @@ table.sortableTable {
 
         label {
           font-weight: bold;
-          color: @braveOrange;
         }
       }
 
@@ -1464,6 +1463,19 @@ table.sortableTable {
     }
   }
 
+  &.small {
+    .switchBackground {
+      height: @smallSwitchHeight;
+      width: @smallSwitchWidth;
+      .switchIndicator {
+        height: @smallSwitchNubDiameter;
+        width: @smallSwitchNubDiameter;
+        top: 1px;
+        right: calc(@smallSwitchWidth - @smallSwitchNubDiameter - @switchNubRightMargin);
+      }
+    }
+  }
+
   > label {
     vertical-align: middle;
   }

less/variables.less

@@ -58,9 +58,12 @@
 @switchBG_dis: #e8e8e8;
 @switchBGTransition: background-color 100ms;
 @switchHeight: 16px;
+@smallSwitchHeight: 12px;
+@smallSwitchWidth: 30px;
 @switchWidth: 45px;
 @switchRadius: 10px;
 @switchShadow: inset 0 1px 4px rgba(0, 0, 0, 0.35);
+@smallSwitchNubDiameter: 10px;
 @switchNubDiameter: 12px;
 @switchNubTopMargin: 2px;
 @switchNubLeftMargin: 2px;