Merge pull request #7722 from cezaraugusto/tabsbar/7720

Make private tab color predominant
brave · Mar 15, 2017 · 3b3ad3c · 3b3ad3c
2 parents ef92417 + c1cf03e
commit 3b3ad3c
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 6 deletions.
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
@@ -18,7 +18,8 @@ const globalStyles = {
   color: {
     linkColor: '#0099CC',
     highlightBlue: '#37A9FD',
-    privateTabBackground: '#392e54',
+    privateTabBackground: '#665296',
+    privateTabBackgroundActive: '#4b3c6e',
     bitcoinOrange: '#f7931a',
     chromePrimary: '#F3F3F3',
     chromeSecondary: '#d3d3d3',

diff --git a/app/renderer/components/styles/tab.js b/app/renderer/components/styles/tab.js
@@ -99,16 +99,16 @@ const styles = StyleSheet.create({
   },
 
   activePrivateTab: {
-    background: 'rgb(247, 247, 247)',
-    color: 'black'
+    background: globalStyles.color.privateTabBackgroundActive,
+    color: '#fff'
   },
 
   private: {
-    background: '#9c8dc1', // (globalStyles.color.privateTabBackground, 40%)
+    background: globalStyles.color.privateTabBackground,
     color: '#fff',
 
     ':hover': {
-      background: '#665296', // (globalStyles.color.privateTabBackground, 20%)
+      background: globalStyles.color.privateTabBackgroundActive,
       color: '#fff'
     }
   },

diff --git a/app/renderer/components/tabContent.js b/app/renderer/components/tabContent.js
@@ -211,7 +211,9 @@ class TabTitle extends ImmutableComponent {
   get themeColor () {
     const themeColor = this.props.tabProps.get('themeColor') || this.props.tabProps.get('computedThemeColor')
     const defaultColor = this.props.tabProps.get('isPrivate') ? globalStyles.color.white100 : globalStyles.color.black100
-    return this.props.isActive && this.props.paintTabs && themeColor
+    const activeNonPrivateTab = !this.props.tabProps.get('isPrivate') && this.props.isActive
+
+    return activeNonPrivateTab && this.props.paintTabs && !!themeColor
       ? getTextColorForBackground(themeColor)
       : defaultColor
   }

diff --git a/js/components/tab.js b/js/components/tab.js
@@ -262,6 +262,9 @@ class Tab extends ImmutableComponent {
         this.props.isActive && this.props.tab.get('isPrivate') && styles.activePrivateTab,
         playIndicatorBreakpoint && this.canPlayAudio && styles.narrowViewPlayIndicator,
         this.props.isActive && this.themeColor && perPageStyles.themeColor,
+        // Private color should override themeColor
+        this.props.tab.get('isPrivate') && styles.private,
+        this.props.isActive && this.props.tab.get('isPrivate') && styles.activePrivateTab,
         !this.isPinned && this.narrowView && styles.tabNarrowView,
         !this.isPinned && this.narrowestView && styles.tabNarrowestView,
         !this.isPinned && this.props.tab.get('breakpoint') === 'smallest' && styles.tabMinAllowedSize