Remove adblock.less (#9043)

* Remove adblock.less Closes #9042 Addresses #7321
brave · Jun 7, 2017 · 107d4c3 · 107d4c3
1 parent 11fdec4
commit 107d4c3
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 21 deletions.
diff --git a/app/renderer/components/common/switchControl.js b/app/renderer/components/common/switchControl.js
@@ -29,7 +29,7 @@ class SwitchControl extends ImmutableComponent {
       large: this.props.large,
       small: this.props.small,
       hasTopText: this.props.topl10nId,
-      [this.props.customWrapper]: !!this.props.customWrapper
+      [this.props.customWrapperClassName]: !!this.props.customWrapperClassName
     })}
       data-switch-status={this.props.checkedOn}
       data-test-id={this.props.testId}
@@ -46,8 +46,9 @@ class SwitchControl extends ImmutableComponent {
           this.props.topl10nId
           ? <span className={cx({
             switchControlTopText: true,
-            [this.props.customTopText]: !!this.props.customTopText
-          })} data-l10n-id={this.props.topl10nId} />
+            [this.props.customTopTextClassName]: !!this.props.customTopTextClassName
+          })}
+            data-l10n-id={this.props.topl10nId} />
           : null
         }
         <div data-test-id='switchBackground' className={cx({
@@ -63,11 +64,30 @@ class SwitchControl extends ImmutableComponent {
       </div>
       {
         (this.props.rightl10nId || this.props.rightText) && this.props.topl10nId
-        ? <div className='switchControlText'><div className='switchControlRightText'><div className='switchSpacer'>&nbsp;</div><span className='switchControlRightText' data-l10n-id={this.props.rightl10nId} data-l10n-args={this.props.rightl10nArgs}>{this.props.rightText || ''}</span></div></div>
+        ? <div className='switchControlText'>
+          <div className='switchControlRightText'>
+            <div className='switchSpacer'>&nbsp;</div>
+            <span className={cx({
+              switchControlRightText: true,
+              [this.props.customRightTextClassName]: !!this.props.customRightTextClassName
+            })}
+              data-l10n-id={this.props.rightl10nId}
+              data-l10n-args={this.props.rightl10nArgs}
+            >{this.props.rightText || ''}</span>
+          </div>
+        </div>
         : <div className='switchControlRight'>
-          {(this.props.rightl10nId || this.props.rightText) && !this.props.onInfoClick
-          ? <span className='switchControlRightText' data-l10n-id={this.props.rightl10nId} data-l10n-args={this.props.rightl10nArgs}>{this.props.rightText || ''}</span>
-          : null}
+          {
+            (this.props.rightl10nId || this.props.rightText) && !this.props.onInfoClick
+            ? <span className={cx({
+              switchControlRightText: true,
+              [this.props.customRightTextClassName]: !!this.props.customRightTextClassName
+            })}
+              data-l10n-id={this.props.rightl10nId}
+              data-l10n-args={this.props.rightl10nArgs}
+            >{this.props.rightText || ''}</span>
+          : null
+        }
           {
             (this.props.rightl10nId || this.props.rightText) && this.props.onInfoClick
             ? <div className='switchControlRightText'>
@@ -80,7 +100,7 @@ class SwitchControl extends ImmutableComponent {
                 'fa-question-circle': true,
                 info: true,
                 clickable: true,
-                [this.props.customInfoButton]: !!this.props.customInfoButton
+                [this.props.customInfoButtonClassName]: !!this.props.customInfoButtonClassName
               })}
                 onClick={this.props.onInfoClick}
                 title={this.props.infoTitle}

diff --git a/app/renderer/components/main/braveryPanel.js b/app/renderer/components/main/braveryPanel.js
@@ -192,7 +192,7 @@ class BraveryPanel extends ImmutableComponent {
         <div title={this.displayHost} className={css(styles.braveryPanel_compact__header__displayHost)}>{this.displayHost}</div>
         <div className={css(styles.braveryPanel_compact__header_bottom__shieldsSwitch)}>
           <SwitchControl large
-            customWrapper={css(styles.braveryPanel_compact__header_bottom__shieldsSwitch__switchControl)}
+            customWrapperClassName={css(styles.braveryPanel_compact__header_bottom__shieldsSwitch__switchControl)}
             onClick={this.onToggleShields}
             leftl10nId='shieldsDown'
             rightl10nId='shieldsUp'
@@ -212,8 +212,8 @@ class BraveryPanel extends ImmutableComponent {
       </div>
       <div className={css(styles.braveryPanel__header_right)}>
         <SwitchControl large
-          customWrapper={css(styles.braveryPanel__header_right__switchControl)}
-          customTopText={css(styles.braveryPanel__header_right__switchControl__topText)}
+          customWrapperClassName={css(styles.braveryPanel__header_right__switchControl)}
+          customTopTextClassName={css(styles.braveryPanel__header_right__switchControl__topText)}
           onClick={this.onToggleShields}
           leftl10nId='shieldsDown'
           rightl10nId='shieldsUp'
@@ -548,7 +548,7 @@ class BraveryPanel extends ImmutableComponent {
                   compactBraveryPanel && gridStyles.row7col1,
                   compactBraveryPanel && styles.braveryPanel_compact__body__advanced__control__switchControl
                 )}
-                  customInfoButton={css(styles.braveryPanel__body__advanced__control__switchControl__infoButton)}
+                  customInfoButtonClassName={css(styles.braveryPanel__body__advanced__control__switchControl__infoButton)}
                   onClick={this.onToggleFp}
                   rightl10nId='fingerprintingProtection'
                   checkedOn={fpEnabled}

diff --git a/js/about/adblock.js b/js/about/adblock.js
@@ -19,7 +19,7 @@ const ipc = window.chrome.ipcRenderer
 
 // Stylesheets
 require('../../less/switchControls.less')
-require('../../less/about/adblock.less')
+require('../../less/about/common.less')
 
 class AdBlockItem extends ImmutableComponent {
   constructor (props) {
@@ -37,6 +37,7 @@ class AdBlockItem extends ImmutableComponent {
       <SwitchControl id={this.props.resource.get('uuid')}
         rightText={this.props.resource.get('title')}
         className={`switch-${this.props.resource.get('uuid')}`}
+        customRightTextClassName={css(styles.adblockLists__adblockItem__switchControl)}
         disabled={this.props.disabled}
         onClick={this.onClick}
         checkedOn={getSetting(this.prefKey, this.props.settings)} />
@@ -127,9 +128,15 @@ const styles = StyleSheet.create({
   adblockDetailsPageContent: {
     marginBottom: '10px'
   },
+
   adblockLists: {
     marginTop: '10px'
   },
+  adblockLists__adblockItem__switchControl: {
+    // TODO: refactor switchControl to remove !important
+    marginLeft: '15px !important'
+  },
+
   adblockSubtext: {
     fontSize: 'smaller',
     fontWeight: 'bold',

diff --git a/less/about/adblock.less b/less/about/adblock.less