Change inactive private tab background to 30% of original color (#7975)

* Followup on #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

* Update per feedback by @cezaraugusto

Auditors: @cezaraugusto, @NejcZdovc

Test Plan:
1. open private tab
2. open another private tab
3. non active private tab should have light purple background

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,8 +223,8 @@ 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 defaultColor = activePrivateTab ? globalStyles.color.white100 : globalStyles.color.black100
+    const isPrivateTab = this.props.tab.get('isPrivate') && (this.props.isActive || this.props.tab.get('hoverState'))
+    const defaultColor = isPrivateTab ? globalStyles.color.white100 : globalStyles.color.black100
 
     return activeNonPrivateTab && this.props.paintTabs && !!themeColor
       ? getTextColorForBackground(themeColor)