Improve icon color readability on dark themes

erenakaeris · Mar 21, 2019 · 1ec0e57 · 1ec0e57
1 parent 38725b8
commit 1ec0e57
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/packages/components/src/components/cards/EventCard.tsx b/packages/components/src/components/cards/EventCard.tsx
@@ -186,24 +186,27 @@ export const EventCard = React.memo((props: EventCardProps) => {
 
   const smallLeftColumn = false
 
+  const backgroundThemeColor =
+    (isSelected && 'backgroundColorLess2') ||
+    (isRead && 'backgroundColorDarker1') ||
+    'backgroundColor'
+
   return (
     <SpringAnimatedView
       key={`event-card-${id}-inner`}
       ref={itemRef}
       style={[
         styles.container,
         {
-          backgroundColor:
-            (isSelected && springAnimatedTheme.backgroundColorLess2) ||
-            (isRead && springAnimatedTheme.backgroundColorDarker1) ||
-            springAnimatedTheme.backgroundColor,
+          backgroundColor: springAnimatedTheme[backgroundThemeColor],
         },
       ]}
     >
       <EventCardHeader
         key={`event-card-header-${id}`}
         actionText={actionText}
         avatarUrl={avatarUrl}
+        backgroundThemeColor={backgroundThemeColor}
         cardIconColor={cardIconColor}
         cardIconName={cardIconName}
         date={event.created_at}

diff --git a/packages/components/src/components/cards/partials/EventCardHeader.tsx b/packages/components/src/components/cards/partials/EventCardHeader.tsx
@@ -7,25 +7,29 @@ import {
   getFullDateText,
   getGitHubURLForUser,
   GitHubIcon,
+  ThemeColors,
   trimNewLinesAndSpaces,
 } from '@devhub/core'
 import { useCSSVariablesOrSpringAnimatedTheme } from '../../../hooks/use-css-variables-or-spring--animated-theme'
 import { useReduxAction } from '../../../hooks/use-redux-action'
 import { Platform } from '../../../libs/platform'
 import * as actions from '../../../redux/actions'
 import { contentPadding } from '../../../styles/variables'
+import { getReadableColor } from '../../../utils/helpers/colors'
 import { SpringAnimatedIcon } from '../../animated/spring/SpringAnimatedIcon'
 import { SpringAnimatedText } from '../../animated/spring/SpringAnimatedText'
 import { SpringAnimatedView } from '../../animated/spring/SpringAnimatedView'
 import { ColumnHeaderItem } from '../../columns/ColumnHeaderItem'
 import { Avatar } from '../../common/Avatar'
 import { IntervalRefresh } from '../../common/IntervalRefresh'
 import { Link } from '../../common/Link'
+import { useTheme } from '../../context/ThemeContext'
 import { cardStyles, getCardStylesForTheme } from '../styles'
 
 export interface EventCardHeaderProps {
   actionText: string
   avatarUrl: string
+  backgroundThemeColor: keyof ThemeColors
   cardIconColor?: string
   cardIconName: GitHubIcon
   date: MomentInput
@@ -62,6 +66,7 @@ export function EventCardHeader(props: EventCardHeaderProps) {
   const {
     actionText,
     avatarUrl,
+    backgroundThemeColor,
     cardIconColor,
     cardIconName,
     date,
@@ -76,6 +81,7 @@ export function EventCardHeader(props: EventCardHeaderProps) {
   } = props
 
   const springAnimatedTheme = useCSSVariablesOrSpringAnimatedTheme()
+  const theme = useTheme()
 
   const saveItemsForLater = useReduxAction(actions.saveItemsForLater)
 
@@ -235,7 +241,13 @@ export function EventCardHeader(props: EventCardHeaderProps) {
               cardIconName === 'star' && {
                 lineHeight: 14,
               },
-              !!cardIconColor && { color: cardIconColor },
+              !!cardIconColor && {
+                color: getReadableColor(
+                  cardIconColor,
+                  theme[backgroundThemeColor],
+                  0.3,
+                ),
+              },
             ]}
             size={16}
             style={{

diff --git a/packages/components/src/components/cards/partials/NotificationCardHeader.tsx b/packages/components/src/components/cards/partials/NotificationCardHeader.tsx
@@ -278,7 +278,13 @@ export function NotificationCardHeader(props: NotificationCardHeaderProps) {
               {
                 width: columnHeaderItemContentSize,
               },
-              !!cardIconColor && { color: cardIconColor },
+              !!cardIconColor && {
+                color: getReadableColor(
+                  cardIconColor,
+                  theme[backgroundThemeColor],
+                  0.3,
+                ),
+              },
             ]}
             size={16}
             style={{