Private tab/Session tab icon needs right padding before text

app/renderer/components/styles/global.js

@@ -0,0 +1,148 @@
+const globalStyles = {
+  breakpoint: {
+    breakpointWideViewport: '1000px',
+    breakpointNarrowViewport: '600px',
+    breakpointExtensionButtonPadding: '720px',
+    breakpointSmallWin32: '650px',
+    breakpointTinyWin32: '500px'
+  },
+  color: {
+    linkColor: '#0099CC',
+    highlightBlue: '#37A9FD',
+    privateTabBackground: '#392e54',
+    bitcoinOrange: '#f7931a',
+    chromePrimary: '#F3F3F3',
+    chromeSecondary: '#d3d3d3',
+    chromeTertiary: '#c7c7c7',
+    chromeText: '#555555',
+    tabsBackground: '#dddddd',
+    navigationBarBackground: 'white',
+    chromeControlsBackground: '#bbb',
+    chromeControlsBackground2: 'white',
+    toolbarBackground: '#eee',
+    toolbarBorderColor: '#ccc',
+    menuSelectionColor: '#2F7AFB',
+    errorTextColor: '#999',
+    progressBarColor: '#3498DB',
+    siteInsecureColor: '#C63626',
+    siteEVColor: 'green',
+    buttonColor: '#5a5a5a',
+    braveOrange: 'rgb(255, 80, 0)',
+    braveLightOrange: '#FF7A1D',
+    braveMediumOrange: 'rgb(232, 72, 0)',
+    braveDarkOrange: '#D44600',
+    switchBG_off: '#d3d3d3',
+    switchBG_off_lrg: '#adadad',
+    switchBG_dis: '#e8e8e8',
+    switchNubColor: 'white',
+    findbarBackground: '#F7F7F7',
+    veryLightGray: 'rgb(250, 250, 250)',
+    lightGray: 'rgb(236, 236, 236)',
+    gray: 'rgb(153, 153, 153)',
+    mediumGray: 'rgb(101, 101, 101)',
+    darkGray: 'rgb(68, 68, 68)',
+    white25: 'rgba(255, 255, 255, 0.25)',
+    white50: 'rgba(255, 255, 255, 0.5)',
+    gray25: 'rgba(116, 116, 130, 0.25)',
+    gray50: 'rgba(116, 116, 130, 0.5)',
+    black10: 'rgba(0, 0, 0, 0.1)',
+    black25: 'rgba(0, 0, 0, 0.25)',
+    black50: 'rgba(0, 0, 0, 0.5)',
+    black75: 'rgba(0, 0, 0, 0.75)',
+    statsYellow: '#ffc000',
+    statsOrange: '#f39030',
+    statsRed: '#fe521d',
+    statsBlue: '#0796fa',
+    statsLightGray: '#999999',
+    defaultIconBackground: '#F7F7F7'
+  },
+  radius: {
+    borderRadius: '4px',
+    borderRadiusTabs: '4px',
+    borderRadiusURL: '4px',
+    borderRadiusUIbox: '8px',
+    bigBorderRadius: '14px',
+    switchRadius: '10px',
+    carotRadius: '8px'
+  },
+  spacing: {
+    navigatorHeight: '48px',
+    defaultSpacing: '12px',
+    defaultFontSize: '13px',
+    contextMenuFontSize: '14px',
+    dragSpacing: '50px',
+    switchHeight: '16px',
+    switchWidth: '45px',
+    switchNubDiameter: '12px',
+    switchNubTopMargin: '2px',
+    switchNubLeftMargin: '2px',
+    switchNubRightMargin: '2px',
+    navbarHeight: '36px',
+    downloadsBarHeight: '50px',
+    tabsToolbarHeight: '28px',
+    tabPagesHeight: '9px',
+    bookmarksToolbarHeight: '24px',
+    bookmarksToolbarWithFaviconsHeight: '28px',
+    bookmarksFileIconSize: '13px',
+    bookmarksFolderIconSize: '15px',
+    navbarButtonSpacing: '4px',
+    navbarButtonWidth: '20px',
+    navbarBraveButtonWidth: '23px',
+    navbarBraveButtonMarginLeft: '80px',
+    navbarLeftMarginDarwin: '76px',
+    sideBarWidth: '190px',
+    aboutPageSectionPadding: '24px'
+  },
+  shadow: {
+    switchShadow: 'inset 0 1px 4px rgba(0, 0, 0, 0.35)',
+    switchNubShadow: '1px 1px 5px -2px black',
+    buttonShadow: '0px 1px 5px -1px rgba(0, 0, 0, 1.0)',
+    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',
+    orangeButtonShadow: '0 2px 0 braveDarkOrange'
+  },
+  transition: {
+    transitionDuration: '100ms',
+    transition: 'all 600ms linear',
+    transitionFast: 'all 100ms linear',
+    transitionSlow: 'all 1s linear',
+    transitionEase: 'all 600ms ease',
+    transitionFastEase: 'all 100ms ease',
+    transitionSlowEase: 'all 1s ease',
+    switchBGTransition: 'background-color 100ms',
+    switchNubTransition: 'right 100ms'
+  },
+  zindex: {
+    zindexWindowNotActive: '900',
+    zindexWindow: '1000',
+    zindexWindowIsPreview: '1100',
+    zindexDownloadsBar: '1000',
+    zindexTabs: '1000',
+    zindexTabsThumbnail: '1100',
+    zindexTabsDragIndicator: '1100',
+    zindexNavigationBar: '2000',
+    zindexUrlbarNotLegend: '2100',
+    zindexPopUp: '3000',
+    zindexContextMenu: '3000',
+    zindexDialogs: '3000',
+    zindexPopupWindow: '3000',
+    zindexForms: '3000',
+    zindexSuggestionText: '3100',
+    zindexWindowFullScreen: '4000',
+    zindexWindowFullScreenBanner: '4100'
+  }
+}
+
+globalStyles.color.chromeBorderColor = globalStyles.color.chromePrimary
+globalStyles.color.chromeControlsWarningBackground = globalStyles.color.chromePrimary
+globalStyles.color.audioColor = globalStyles.color.highlightBlue
+globalStyles.color.focusUrlbarOutline = globalStyles.color.highlightBlue
+globalStyles.color.siteSecureColor = globalStyles.color.buttonColor
+globalStyles.color.loadTimeColor = globalStyles.color.highlightBlue
+globalStyles.color.activeTabDefaultColor = globalStyles.color.chromePrimary
+globalStyles.color.switchBG_on = globalStyles.color.braveOrange
+globalStyles.color.statsGray = globalStyles.color.chromeText
+
+module.exports = globalStyles

app/renderer/components/tabIcon.js

@@ -0,0 +1,47 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const ImmutableComponent = require('../../../js/components/immutableComponent')
+const {StyleSheet, css} = require('aphrodite')
+const globalStyles = require('./styles/global')
+
+class TabIcon extends ImmutableComponent {
+  render () {
+    const className = css(
+      styles.icon,
+      this.props.withBlueIcon && styles.blueIcon
+    )
+    return <div className={className}>
+      <span className={this.props.styles} />
+    </div>
+  }
+}
+
+class AudioTabIcon extends ImmutableComponent {
+  render () {
+    return <TabIcon withBlueIcon {...this.props} />
+  }
+}
+
+const styles = StyleSheet.create({
+  'icon': {
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    display: 'inline-block',
+    fontSize: '14px',
+    margin: 'auto 7px auto 7px',
+    position: 'relative',
+    verticalAlign: 'middle',
+    textAlign: 'center'
+  },
+  'blueIcon': {
+    color: globalStyles.color.highlightBlue
+  }
+})
+
+module.exports = {
+  TabIcon,
+  AudioTabIcon
+}

js/components/tab.js

@@ -18,6 +18,8 @@ const dnd = require('../dnd')
 const windowStore = require('../stores/windowStore')
 const ipc = global.require('electron').ipcRenderer
 
+const {TabIcon, AudioTabIcon} = require('../../app/renderer/components/tabIcon')
+
 class Tab extends ImmutableComponent {
   constructor () {
     super()
@@ -172,15 +174,15 @@ class Tab extends ImmutableComponent {
     }
 
     let playIcon = null
+    let iconClass = null
+
     if (this.props.tab.get('audioPlaybackActive') || this.props.tab.get('audioMuted')) {
-      playIcon = <span className={cx({
-        audioPlaybackActive: true,
-        fa: true,
-        'fa-volume-up': this.props.tab.get('audioPlaybackActive') &&
-          !this.props.tab.get('audioMuted'),
-        'fa-volume-off': this.props.tab.get('audioPlaybackActive') &&
-          this.props.tab.get('audioMuted')
-      })}
+      if (this.props.tab.get('audioPlaybackActive') && !this.props.tab.get('audioMuted')) {
+        iconClass = 'fa fa-volume-up'
+      } else if (this.props.tab.get('audioPlaybackActive') && this.props.tab.get('audioMuted')) {
+        iconClass = 'fa fa-volume-off'
+      }
+      playIcon = <AudioTabIcon styles={iconClass}
         onClick={this.onMuteFrame.bind(this, !this.props.tab.get('audioMuted'))} />
     }
 
@@ -215,14 +217,14 @@ class Tab extends ImmutableComponent {
         style={activeTabStyle}>
         {
           this.props.tab.get('isPrivate')
-          ? <div className='privateIcon fa fa-eye' />
+          ? <TabIcon styles='fa fa-eye' />
           : null
         }
         {
           this.props.tab.get('partitionNumber')
-          ? <div data-l10n-args={JSON.stringify({partitionNumber: this.props.tab.get('partitionNumber')})}
-            data-l10n-id='sessionInfoTab'
-            className='privateIcon fa fa-user' />
+          ? <TabIcon l10nArgs={JSON.stringify({partitionNumber: this.props.tab.get('partitionNumber')})}
+            l10nId='sessionInfoTab'
+            styles='fa fa-user' />
           : null
         }
         {

less/tabs.less

@@ -99,32 +99,15 @@
     vertical-align: middle;
     width: calc(~'100% - 40px');
     height: 15px;
+    margin-left: 7px;
   }
   .tabIcon {
     background-position: center;
     background-repeat: no-repeat;
     display: inline-block;
     font-size: 12px;
     text-align: center;
-    margin-left: 4px;
-    margin-right: 4px;
-  }
-
-  .privateIcon {
-    background-position: center;
-    background-repeat: no-repeat;
-    display: inline-block;
-    font-size: 14px;
-    margin: auto 0px auto 9px;
-    position: relative;
-    vertical-align: middle;
-  }
-
-
-  .audioPlaybackActive {
-    margin: auto 4px auto 0;
-    color: @audioColor;
-    width: 20px;
+    margin-left: 7px;
   }
 
   .thumbnail {
@@ -168,7 +151,7 @@
   }
 
   &:not(.active):hover {
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(250, 250, 250, 0.4), );
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(250, 250, 250, 0.4));
     &.private {
       background: lighten(@privateTabBackground, 20%);
     }