Show unread indicator as red if it is affecting the app badge counter

Not sure about this, might revert later #156 #90
devhubapp · Jul 3, 2019 · bf7270e · bf7270e
1 parent 0cb1995
commit bf7270e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/packages/components/src/components/columns/ColumnHeaderItem.tsx b/packages/components/src/components/columns/ColumnHeaderItem.tsx
@@ -78,6 +78,9 @@ export interface ColumnHeaderItemProps {
   title?: string
   titleStyle?: StyleProp<TextStyle>
   tooltip: string | undefined
+  unreadIndicatorBackgroundThemeColor?:
+    | keyof ThemeColors
+    | ((theme: ThemeColors) => string)
 }
 
 export const ColumnHeaderItem = React.memo((props: ColumnHeaderItemProps) => {
@@ -116,6 +119,7 @@ export const ColumnHeaderItem = React.memo((props: ColumnHeaderItemProps) => {
     title,
     titleStyle,
     tooltip,
+    unreadIndicatorBackgroundThemeColor = 'primaryBackgroundColor',
   } = props
 
   const theme = useTheme()
@@ -138,6 +142,11 @@ export const ColumnHeaderItem = React.memo((props: ColumnHeaderItemProps) => {
         hoverForegroundThemeColor,
       )
 
+      const unreadIndicatorBackgroundColor = getThemeColorOrItself(
+        theme,
+        unreadIndicatorBackgroundThemeColor,
+      )
+
       const isHovered = (_isHovered || forceHoverState) && !disabled
       const immediate =
         constants.DISABLE_ANIMATIONS ||
@@ -163,6 +172,7 @@ export const ColumnHeaderItem = React.memo((props: ColumnHeaderItemProps) => {
             : foregroundColor || theme.foregroundColor,
         mutedForegroundColor: theme.foregroundColorMuted60,
         primaryBackgroundColor: theme.primaryBackgroundColor,
+        unreadIndicatorBackgroundColor,
       }
     },
     [
@@ -320,7 +330,7 @@ export const ColumnHeaderItem = React.memo((props: ColumnHeaderItemProps) => {
                     width: 12,
                     height: 12,
                     backgroundColor:
-                      springAnimatedStyles.primaryBackgroundColor,
+                      springAnimatedStyles.unreadIndicatorBackgroundColor,
                     borderColor:
                       springAnimatedStyles.backgroundColorWithoutTransparency,
                     borderWidth: 2,

diff --git a/packages/components/src/components/layout/Sidebar.tsx b/packages/components/src/components/layout/Sidebar.tsx
@@ -16,6 +16,7 @@ import { useReduxState } from '../../hooks/use-redux-state'
 import { bugsnag } from '../../libs/bugsnag'
 import { emitter } from '../../libs/emitter'
 import { FlatList } from '../../libs/flatlist'
+import { Platform } from '../../libs/platform'
 import * as actions from '../../redux/actions'
 import * as selectors from '../../redux/selectors'
 import { sharedStyles } from '../../styles/shared'
@@ -676,6 +677,11 @@ const SidebarColumnItem = React.memo(
         tooltip={`${headerDetails.title} (${headerDetails.subtitle})`
           .toLowerCase()
           .trim()}
+        unreadIndicatorBackgroundThemeColor={
+          Platform.OS === 'web' && column.type === 'notifications'
+            ? 'red'
+            : undefined
+        }
       />
     )
   },