Update: SVG workand clean up on about pref page

app/renderer/components/preferences/helpfulHints.js

@@ -40,11 +40,15 @@ const styles = StyleSheet.create({
   },
 
   helpfulHints: {
-    width: '100%',
-    height: '100%',
     cursor: 'default',
-    padding: '30px 0',
-    marginTop: '20px'
+    padding: '20px 0 0',
+    overflowY: 'auto',
+
+    '@media (min-height: 620px)': {
+      position: 'absolute',
+      bottom: '0',
+      overflowY: 'none'
+    }
   },
 
   hintsTitleContainer: {

app/renderer/components/preferences/preferenceNavigation.js

@@ -0,0 +1,112 @@
+const ImmutableComponent = require('../../../../js/components/immutableComponent')
+const preferenceTabs = require('../../../../js/constants/preferenceTabs')
+const PreferenceNavigationButton = require('./preferenceNavigationButton')
+const HelpfulHints = require('./helpfulHints')
+
+const {StyleSheet, css} = require('aphrodite')
+const globalStyles = require('../styles/global')
+
+// Icons
+const iconGeneral = require('../../../extensions/brave/img/preferences/browser_prefs_general.svg')
+const iconSearch = require('../../../extensions/brave/img/preferences/browser_prefs_search.svg')
+const iconTabs = require('../../../extensions/brave/img/preferences/browser_prefs_tabs.svg')
+// const iconExtensions = require('../../../extensions/brave/img/preferences/browser_prefs_extensions.svg')
+const iconPlugins = require('../../../extensions/brave/img/preferences/browser_prefs_plugins.svg')
+const iconSecurity = require('../../../extensions/brave/img/preferences/browser_prefs_security.svg')
+const iconShields = require('../../../extensions/brave/img/preferences/browser_prefs_shields.svg')
+const iconPayments = require('../../../extensions/brave/img/preferences/browser_prefs_payments.svg')
+// sync TBD
+const iconSync = require('../../../extensions/brave/img/preferences/browser_prefs_sync.svg')
+const iconAdvanced = require('../../../extensions/brave/img/preferences/browser_prefs_advanced.svg')
+
+class PreferenceNavigation extends ImmutableComponent {
+  render () {
+    return <div className={css(styles.prefAside)}>
+      <div className={css(styles.prefNav)}>
+        <PreferenceNavigationButton icon={styles.general}
+          dataL10nId='general'
+          onClick={this.props.changeTab.bind(null, preferenceTabs.GENERAL)}
+          selected={this.props.preferenceTab === preferenceTabs.GENERAL}
+        />
+        <PreferenceNavigationButton icon={styles.search}
+          dataL10nId='search'
+          onClick={this.props.changeTab.bind(null, preferenceTabs.SEARCH)}
+          selected={this.props.preferenceTab === preferenceTabs.SEARCH}
+        />
+        <PreferenceNavigationButton icon={styles.tabs}
+          dataL10nId='tabs'
+          onClick={this.props.changeTab.bind(null, preferenceTabs.TABS)}
+          selected={this.props.preferenceTab === preferenceTabs.TABS}
+        />
+        <PreferenceNavigationButton icon={styles.security}
+          dataL10nId='security'
+          onClick={this.props.changeTab.bind(null, preferenceTabs.SECURITY)}
+          selected={this.props.preferenceTab === preferenceTabs.SECURITY}
+        />
+        <PreferenceNavigationButton icon={styles.sync}
+          dataL10nId='sync'
+          onClick={this.props.changeTab.bind(null, preferenceTabs.SYNC)}
+          selected={this.props.preferenceTab === preferenceTabs.SYNC}
+        />
+        <PreferenceNavigationButton icon={styles.payments}
+          dataL10nId='payments'
+          onClick={this.props.changeTab.bind(null, preferenceTabs.PAYMENTS)}
+          selected={this.props.preferenceTab === preferenceTabs.PAYMENTS}
+        />
+        {
+          /* TODO @cezaraugusto add extensions panel */
+        }
+        <PreferenceNavigationButton icon={styles.plugins}
+          dataL10nId='plugins'
+          onClick={this.props.changeTab.bind(null, preferenceTabs.PLUGINS)}
+          selected={this.props.preferenceTab === preferenceTabs.PLUGINS}
+        />
+        <PreferenceNavigationButton icon={styles.shields}
+          dataL10nId='shields'
+          onClick={this.props.changeTab.bind(null, preferenceTabs.SHIELDS)}
+          selected={this.props.preferenceTab === preferenceTabs.SHIELDS}
+        />
+        <PreferenceNavigationButton icon={styles.advanced}
+          dataL10nId='advanced'
+          onClick={this.props.changeTab.bind(null, preferenceTabs.ADVANCED)}
+          selected={this.props.preferenceTab === preferenceTabs.ADVANCED}
+        />
+      </div>
+      <HelpfulHints hintNumber={this.props.hintNumber} refreshHint={this.props.refreshHint} />
+    </div>
+  }
+}
+
+const navIcon = icon => ({WebkitMask: `url(${icon}) no-repeat 0 0`})
+const styles = StyleSheet.create({
+  prefAside: {
+    background: `linear-gradient(${globalStyles.color.gray}, ${globalStyles.color.mediumGray})`,
+    boxShadow: globalStyles.shadow.insetShadow,
+    position: 'fixed',
+    zIndex: '600',
+    width: globalStyles.spacing.sideBarWidth,
+    height: '100%',
+    display: 'flex',
+    flexFlow: 'column nowrap',
+    fontSize: '16px'
+  },
+
+  prefNav: {
+    display: 'flex',
+    flexFlow: 'column nowrap',
+    flex: '1 0 auto',
+    padding: '30px 0'
+  },
+
+  general: navIcon(iconGeneral),
+  search: navIcon(iconSearch),
+  tabs: navIcon(iconTabs),
+  plugins: navIcon(iconPlugins),
+  security: navIcon(iconSecurity),
+  shields: navIcon(iconShields),
+  payments: navIcon(iconPayments),
+  sync: navIcon(iconSync),
+  advanced: navIcon(iconAdvanced)
+})
+
+module.exports = PreferenceNavigation

app/renderer/components/preferences/preferenceNavigationButton.js

@@ -0,0 +1,88 @@
+const ImmutableComponent = require('../../../../js/components/immutableComponent')
+const {StyleSheet, css} = require('aphrodite')
+const globalStyles = require('../styles/global')
+
+class PreferenceNavigationButton extends ImmutableComponent {
+  render () {
+    return <div className={css(
+      styles.prefNavItem,
+      this.props.selected && styles.topBarButtonSelected,
+      this.props.notImplemented && styles.notImplemented
+    )}>
+      <div onClick={this.props.onClick} className={css(styles.topBarButton)}>
+        <div className={css(
+          styles.icon,
+          this.props.selected && styles.iconActive,
+          this.props.icon)} />
+        <div className={css(styles.text)} data-l10n-id={this.props.dataL10nId} />
+      </div>
+    </div>
+  }
+}
+
+const styles = StyleSheet.create({
+  prefNavItem: {
+    position: 'relative',
+    display: 'block',
+    width: '100%'
+  },
+
+  notImplemented: {
+    display: 'none'
+  },
+
+  topBarButton: {
+    position: 'relative',
+    display: 'flex',
+    flex: '1',
+    alignItems: 'center',
+    background: 'transparent',
+    WebkitUserSelect: 'none',
+    padding: '11px 11px 11px 17px',
+    cursor: 'pointer',
+
+    ':hover': {
+      backgroundColor: globalStyles.color.darkGray
+    }
+  },
+
+  topBarButtonSelected: {
+    backgroundColor: globalStyles.color.mediumGray,
+
+    ':after': {
+      content: '\'\'',
+      borderWidth: '8px 8px 0',
+      borderStyle: 'solid',
+      borderColor: `${globalStyles.color.mediumGray} transparent transparent`,
+      height: '0',
+      left: 'calc(100% - 6px)',
+      transform: 'rotateZ(-90deg)',
+      position: 'absolute',
+      width: '0',
+      top: 'calc(50% - 4px)'
+    },
+
+    ':hover:after': {
+      borderColor: `${globalStyles.color.darkGray} transparent transparent`
+    }
+  },
+
+  icon: {
+    display: 'block',
+    width: '1.4em',
+    height: '1.4em',
+    WebkitMaskSize: 'contain',
+    marginRight: '9px',
+    backgroundColor: '#ffffff'
+  },
+
+  iconActive: {
+    backgroundColor: '#ff5000'
+  },
+
+  text: {
+    color: '#ffffff'
+  }
+})
+
+module.exports = PreferenceNavigationButton

app/renderer/components/styles/global.js

@@ -117,7 +117,7 @@ const globalStyles = {
     dialogShadow: '0px 8px 22px 0px rgba(0, 0, 0, .5)',
     softBoxShadow: '0 4px 8px lightGray',
     lightBoxShadow: '0 2px 2px lightGray',
-    insetShadow: 'inset -5px 0 15px black25',
+    insetShadow: 'inset -5px 0 15px rgba(0,0,0,0.25)',
     orangeButtonShadow: '0 2px 0 braveDarkOrange'
   },
   transition: {