Polish braveryPanel.js on fb3f28e for brave#10181

Also:
- Add globalStyles.appIcons.question

Addresses brave#9029

Auditors: @cezaraugusto

Test Plan:
1. Open about:preferences#shields
2. Enable compact panel
3. Open https://twitter.com
4. Open compact panel
5. Make sure the fp block pulldown is placed properly
6. Disable compact panel
7. Open twitter.com again
8. Open the default panel
9. Make sure the fp pulldown is placed properly

app/renderer/components/main/braveryPanel.js

@@ -497,8 +497,7 @@ class BraveryPanel extends React.Component {
                 <div data-l10n-id='adControl' className={css(
                   !this.props.shieldsUp && styles.braveryPanel__body__advanced__control__forms__title_disabled,
                   gridStyles.row1col1,
-                  !this.props.isCompactBraveryPanel && styles.braveryPanel__body__advanced__control__forms__title,
-                  this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__advanced__control__forms__title
+                  styles.braveryPanel__body__advanced__control__forms__title
                 )} />
 
                 <div className={css(
@@ -541,9 +540,8 @@ class BraveryPanel extends React.Component {
                 <div data-l10n-id='cookieControl' className={css(
                   !this.props.shieldsUp && styles.braveryPanel__body__advanced__control__forms__title_disabled,
                   !this.props.isCompactBraveryPanel && gridStyles.row1col2,
-                  !this.props.isCompactBraveryPanel && styles.braveryPanel__body__advanced__control__forms__title,
                   this.props.isCompactBraveryPanel && gridStyles.row3col1,
-                  this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__advanced__control__forms__title
+                  styles.braveryPanel__body__advanced__control__forms__title
                 )} />
 
                 <div className={css(
@@ -560,26 +558,19 @@ class BraveryPanel extends React.Component {
                   </BraveryPanelDropdown>
                 </div>
 
-                <div data-l10n-id='fingerprintingProtection' className={css(
+                <div className={css(
                   !this.props.shieldsUp && styles.braveryPanel__body__advanced__control__forms__title_disabled,
                   !this.props.isCompactBraveryPanel && gridStyles.row3col2,
-                  !this.props.isCompactBraveryPanel && styles.braveryPanel__body__advanced__control__forms__title,
                   this.props.isCompactBraveryPanel && gridStyles.row5col1,
-                  this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__advanced__control__forms__title
-                )} />
-                <span className={cx({
-                  [css(gridStyles.row3col2)]: !this.props.isCompactBraveryPanel,
-                  [css(gridStyles.row5col1)]: this.props.isCompactBraveryPanel,
-                  [css(styles.braveryPanel__body__advanced__control__forms__title_disabled)]: !this.props.shieldsUp,
-                  [css(styles.braveryPanel_compact__body__advanced__control__forms__title)]: this.props.isCompactBraveryPanel,
-                  [css(styles.braveryPanel__body__advanced__control__forms__title)]: !this.props.isCompactBraveryPanel,
-                  fa: true,
-                  pullRight: true,
-                  'fa-question-circle': true
-                })}
-                  title={config.fingerprintingInfoUrl}
-                  onClick={this.onInfoClick}
-                />
+                  styles.braveryPanel__body__advanced__control__fpWrapper,
+                  styles.braveryPanel__body__advanced__control__forms__title
+                )}>
+                  <span data-l10n-id='fingerprintingProtection' />
+                  <span className={globalStyles.appIcons.question}
+                    title={config.fingerprintingInfoUrl}
+                    onClick={this.onInfoClick}
+                  />
+                </div>
 
                 <div className={css(
                   !this.props.shieldsUp && styles.braveryPanel__body__advanced__control__forms__dropdown_disabled,
@@ -616,7 +607,6 @@ class BraveryPanel extends React.Component {
           }
           <hr className={css(
             styles.braveryPanel__body__hr,
-            styles.braveryPanel__body__hr_splitter,
             this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__hr
           )} />
           <div className={css(
@@ -721,6 +711,10 @@ const gridStyles = StyleSheet.create({
   row8col1: {
     gridRow: 8,
     gridColumn: 1
+  },
+  row9col1: {
+    gridRow: 9,
+    gridColumn: 1
   }
 })
 
@@ -916,10 +910,7 @@ const styles = StyleSheet.create({
     background: globalStyles.braveryPanel.body.hr.background,
     border: 0,
     height: '1px',
-    margin: '10px 0'
-  },
-  braveryPanel__body__hr_splitter: {
-    marginTop: '30px'
+    margin: '1rem 0'
   },
   braveryPanel__body__footer: {
     display: 'flex',
@@ -981,14 +972,11 @@ const styles = StyleSheet.create({
     display: 'flex',
     flexFlow: 'column nowrap'
   },
-  braveryPanel_compact__body__advanced__control__forms__title: {
-    margin: '0 0 .25rem .25rem'
-  },
   braveryPanel_compact__body__advanced__control__forms__dropdown: {
     marginBottom: '.75rem'
   },
   braveryPanel_compact__body__advanced__control__switchControl: {
-    padding: '5px 0 5px .25rem'
+    padding: '5px .25rem'
   },
   braveryPanel_compact__body__footer: {
     padding: '0 .25rem'
@@ -1004,15 +992,19 @@ const styles = StyleSheet.create({
     margin: '15px 10px'
   },
   braveryPanel__body__advanced__control__forms__title: {
-    marginBottom: '4px',
-    marginLeft: '8px'
+    margin: '0 .25rem .25rem .25rem'
   },
   braveryPanel__body__advanced__control__forms__title_disabled: {
     opacity: 0.3
   },
   braveryPanel__body__advanced__control__forms__dropdown_disabled: {
     opacity: 0.3
   },
+  braveryPanel__body__advanced__control__fpWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
   braveryPanel__body__advanced__control__switchControl__infoButton: {
     display: 'inline',
     cursor: 'pointer',

app/renderer/components/styles/global.js

@@ -241,21 +241,22 @@ const globalStyles = {
     prefsPanelHeading: '23px'
   },
   appIcons: {
+    angleDoubleRight: 'fa fa-angle-double-right',
     clipboard: 'fa fa-clipboard',
     closeTab: 'fa fa-times-circle',
     defaultIcon: 'fa fa-file-o',
+    exclude: 'fa fa-ban',
+    findNext: 'fa fa-caret-down',
+    findPrev: 'fa fa-caret-up',
     loading: 'fa fa-spinner fa-spin',
+    moreInfo: 'fa fa-info-circle',
     private: 'fa fa-eye',
+    question: 'fa fa-question-circle',
     refresh: 'fa fa-refresh',
     remove: 'fa fa-times',
-    volumeOff: 'fa fa-volume-off',
-    volumeOn: 'fa fa-volume-up',
-    exclude: 'fa fa-ban',
     trash: 'fa fa-trash',
-    moreInfo: 'fa fa-info-circle',
-    angleDoubleRight: 'fa fa-angle-double-right',
-    findPrev: 'fa fa-caret-up',
-    findNext: 'fa fa-caret-down'
+    volumeOff: 'fa fa-volume-off',
+    volumeOn: 'fa fa-volume-up'
   },
   animations: {
     subtleShowUp: {

less/switchControls.less

@@ -98,6 +98,3 @@
     }
   }
 }
-.pullRight {
-  text-align: right;
-}