Followup on brave#7944, change inactive private tab background to 30%…

… of original color

Auditors: @bsclifton @cezaraugusto @bradleyrichter

Test Plan:
- open private tab
- open another private tab
- non active private tab should have light purple bg

app/renderer/components/styles/tab.js

@@ -106,6 +106,14 @@ const styles = StyleSheet.create({
     }
   },
 
+  private: {
+    background: 'rgba(75, 60, 110, 0.3)',
+
+    ':hover': {
+      background: globalStyles.color.privateTabBackgroundActive
+    }
+  },
+
   dragging: {
     ':hover': {
       closeTab: {

app/renderer/components/tabContent.js

@@ -223,7 +223,7 @@ class TabTitle extends ImmutableComponent {
   get themeColor () {
     const themeColor = this.props.tab.get('themeColor') || this.props.tab.get('computedThemeColor')
     const activeNonPrivateTab = !this.props.tab.get('isPrivate') && this.props.isActive
-    const activePrivateTab = this.props.tab.get('isPrivate') && this.props.isActive
+    const activePrivateTab = (this.props.tab.get('isPrivate') && this.props.isActive) || this.props.isHover
     const defaultColor = activePrivateTab ? globalStyles.color.white100 : globalStyles.color.black100
 
     return activeNonPrivateTab && this.props.paintTabs && !!themeColor

js/components/tab.js

@@ -33,6 +33,7 @@ class Tab extends ImmutableComponent {
     this.onMouseEnter = this.onMouseEnter.bind(this)
     this.onMouseLeave = this.onMouseLeave.bind(this)
     this.onUpdateTabSize = this.onUpdateTabSize.bind(this)
+    this.isHover = false
   }
   get frame () {
     return windowStore.getFrame(this.props.tab.get('frameKey'))
@@ -139,6 +140,8 @@ class Tab extends ImmutableComponent {
       windowActions.setPreviewFrame(null)
     }
     windowActions.setTabHoverState(this.frame, false)
+
+    this.isHover = false
   }
 
   onMouseEnter (e) {
@@ -154,6 +157,8 @@ class Tab extends ImmutableComponent {
         window.setTimeout(windowActions.setPreviewFrame.bind(null, this.frame), previewMode ? 0 : 200)
     }
     windowActions.setTabHoverState(this.frame, true)
+
+    this.isHover = true
   }
 
   onAuxClick (e) {
@@ -301,6 +306,7 @@ class Tab extends ImmutableComponent {
           <TabTitle
             isActive={this.props.isActive}
             paintTabs={this.props.paintTabs}
+            isHover={this.isHover}
             tab={this.props.tab}
             pageTitle={this.displayValue}
           />