Design tweaks: Smaller sizes, cleaner card layout

erenakaeris · Mar 20, 2019 · 1e1bdf6 · 1e1bdf6
1 parent 7628a6c
commit 1e1bdf6
Show file tree

Hide file tree

Showing 16 changed files with 153 additions and 98 deletions.
diff --git a/packages/components/src/components/AppGlobalStyles.web.tsx b/packages/components/src/components/AppGlobalStyles.web.tsx
@@ -16,8 +16,8 @@ function getStyles(params: { theme: Theme }) {
     ::-webkit-scrollbar-thumb {
       background-color: ${
         separatorColorLuminance > backgroundColorLuminance
-          ? lighten(0.1, separatorColor)
-          : darken(0.1, separatorColor)
+          ? lighten(0.025, separatorColor)
+          : darken(0.025, separatorColor)
       };
     }
 

diff --git a/packages/components/src/components/cards/NotificationCard.tsx b/packages/components/src/components/cards/NotificationCard.tsx
@@ -23,6 +23,7 @@ import {
   getPullRequestIconAndColor,
 } from '../../utils/helpers/github/shared'
 import { fixURL } from '../../utils/helpers/github/url'
+import { findNode } from '../../utils/helpers/shared'
 import { SpringAnimatedView } from '../animated/spring/SpringAnimatedView'
 import { useSpringAnimatedTheme } from '../context/SpringAnimatedThemeContext'
 import { NotificationCardHeader } from './partials/NotificationCardHeader'
@@ -71,7 +72,8 @@ export const NotificationCard = React.memo((props: NotificationCardProps) => {
 
   useEffect(() => {
     if (Platform.OS === 'web' && isSelected && itemRef.current) {
-      itemRef.current.focus()
+      const node = findNode(itemRef.current)
+      node.focus()
     }
   }, [isSelected])
 
@@ -193,30 +195,30 @@ export const NotificationCard = React.memo((props: NotificationCardProps) => {
     avatar_url: getUserAvatarByUsername(repoOwnerName || ''),
     html_url: repo.html_url || getGitHubURLForRepo(repoOwnerName!, repoName!),
   }
-  const actionText = ''
-
   const isBot = Boolean(actor.login && actor.login.indexOf('[bot]') >= 0)
 
   const smallLeftColumn = false
 
+  const backgroundThemeColor =
+    (isSelected && 'backgroundColorLess2') ||
+    (isRead && 'backgroundColorDarker1') ||
+    'backgroundColor'
+
   return (
     <SpringAnimatedView
       key={`notification-card-${id}-inner`}
       ref={itemRef}
       style={[
         styles.container,
         {
-          backgroundColor:
-            (isSelected && springAnimatedTheme.backgroundColorLess2) ||
-            (isRead && springAnimatedTheme.backgroundColorDarker1) ||
-            springAnimatedTheme.backgroundColor,
+          backgroundColor: springAnimatedTheme[backgroundThemeColor],
         },
       ]}
     >
       <NotificationCardHeader
         key={`notification-card-header-${id}`}
-        actionText={actionText}
         avatarUrl={actor && actor.avatar_url}
+        backgroundThemeColor={backgroundThemeColor}
         cardIconColor={cardIconColor}
         cardIconName={cardIconName}
         date={updatedAt}

diff --git a/packages/components/src/components/cards/partials/CardSmallThing.tsx b/packages/components/src/components/cards/partials/CardSmallThing.tsx
@@ -35,8 +35,8 @@ const styles = StyleSheet.create({
 
   text: {
     backgroundColor: 'transparent',
-    fontSize: 12,
-    lineHeight: 20,
+    fontSize: 11,
+    lineHeight: 16,
     opacity: 0.9,
   },
 })

diff --git a/packages/components/src/components/cards/partials/EventCardHeader.tsx b/packages/components/src/components/cards/partials/EventCardHeader.tsx
@@ -190,7 +190,7 @@ export function EventCardHeader(props: EventCardHeaderProps) {
             enableForegroundHover
             fixedIconSize
             iconName={isRead ? 'mail-read' : 'mail'}
-            iconStyle={isRead ? undefined : { lineHeight: 18 }}
+            iconStyle={isRead ? undefined : { lineHeight: 14 }}
             onPress={() =>
               markItemsAsReadOrUnread({
                 type: 'activity',
@@ -199,7 +199,7 @@ export function EventCardHeader(props: EventCardHeaderProps) {
                 localOnly: true,
               })
             }
-            size={18}
+            size={16}
             style={{
               alignSelf: smallLeftColumn ? 'center' : 'flex-start',
               marginTop: 4,
@@ -219,7 +219,7 @@ export function EventCardHeader(props: EventCardHeaderProps) {
               },
             ]}
             onPress={() => saveItemsForLater({ itemIds: ids, save: !isSaved })}
-            size={18}
+            size={16}
             style={{
               alignSelf: smallLeftColumn ? 'center' : 'flex-start',
               marginTop: 4,
@@ -233,11 +233,11 @@ export function EventCardHeader(props: EventCardHeaderProps) {
             iconName={cardIconName}
             iconStyle={[
               cardIconName === 'star' && {
-                lineHeight: 16,
+                lineHeight: 14,
               },
               !!cardIconColor && { color: cardIconColor },
             ]}
-            size={18}
+            size={16}
             style={{
               alignSelf: smallLeftColumn ? 'center' : 'flex-start',
               marginTop: 4,

diff --git a/packages/components/src/components/cards/partials/NotificationCardHeader.tsx b/packages/components/src/components/cards/partials/NotificationCardHeader.tsx
@@ -8,6 +8,7 @@ import {
   getGitHubURLForUser,
   GitHubIcon,
   GitHubNotificationReason,
+  ThemeColors,
   trimNewLinesAndSpaces,
 } from '@devhub/core'
 import { useCSSVariablesOrSpringAnimatedTheme } from '../../../hooks/use-css-variables-or-spring--animated-theme'
@@ -18,21 +19,21 @@ import {
   columnHeaderItemContentSize,
   contentPadding,
 } from '../../../styles/variables'
+import { getReadableColor } from '../../../utils/helpers/colors'
 import { getNotificationReasonMetadata } from '../../../utils/helpers/github/notifications'
 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 { Label } from '../../common/Label'
 import { Link } from '../../common/Link'
-import { Spacer } from '../../common/Spacer'
+import { useTheme } from '../../context/ThemeContext'
 import { cardStyles, getCardStylesForTheme } from '../styles'
 
 export interface NotificationCardHeaderProps {
-  actionText: string
   avatarUrl: string
+  backgroundThemeColor: keyof ThemeColors
   cardIconColor?: string
   cardIconName: GitHubIcon
   date: MomentInput
@@ -68,8 +69,8 @@ const styles = StyleSheet.create({
 
 export function NotificationCardHeader(props: NotificationCardHeaderProps) {
   const {
-    actionText,
     avatarUrl,
+    backgroundThemeColor,
     cardIconColor,
     cardIconName,
     date,
@@ -85,6 +86,7 @@ export function NotificationCardHeader(props: NotificationCardHeaderProps) {
   } = props
 
   const springAnimatedTheme = useCSSVariablesOrSpringAnimatedTheme()
+  const theme = useTheme()
 
   const saveItemsForLater = useReduxAction(actions.saveItemsForLater)
 
@@ -179,30 +181,37 @@ export function NotificationCardHeader(props: NotificationCardHeaderProps) {
               </IntervalRefresh>
             </SpringAnimatedView>
 
-            {!!actionText && (
+            {!!(reasonDetails && reasonDetails.label) && (
               <SpringAnimatedText
                 numberOfLines={1}
-                style={
-                  getCardStylesForTheme(springAnimatedTheme).descriptionText
-                }
+                style={[
+                  getCardStylesForTheme(springAnimatedTheme).descriptionText,
+                  {
+                    color: getReadableColor(
+                      reasonDetails.color,
+                      theme[backgroundThemeColor],
+                      0.3,
+                    ),
+                  },
+                ]}
               >
                 {!!isPrivate && (
                   <SpringAnimatedText
                     style={getCardStylesForTheme(springAnimatedTheme).mutedText}
                   >
                     <SpringAnimatedIcon
                       name="lock"
-                      style={
-                        getCardStylesForTheme(springAnimatedTheme).mutedText
-                      }
+                      style={[
+                        getCardStylesForTheme(springAnimatedTheme).mutedText,
+                      ]}
                     />{' '}
                   </SpringAnimatedText>
                 )}
-                {actionText}
+                {reasonDetails.label.toLowerCase()}
               </SpringAnimatedText>
             )}
 
-            {!!(reasonDetails && reasonDetails.label) && (
+            {/* {!!(reasonDetails && reasonDetails.label) && (
               <>
                 <Spacer height={4} />
 
@@ -217,23 +226,23 @@ export function NotificationCardHeader(props: NotificationCardHeaderProps) {
                   {reasonDetails.label.toLowerCase()}
                 </Label>
               </>
-            )}
+            )} */}
           </View>
 
           <ColumnHeaderItem
             analyticsLabel={isRead ? 'mark_as_unread' : 'mark_as_read'}
             enableForegroundHover
             fixedIconSize
             iconName={isRead ? 'mail-read' : 'mail'}
-            iconStyle={isRead ? undefined : { lineHeight: 18 }}
+            iconStyle={isRead ? undefined : { lineHeight: 14 }}
             onPress={() =>
               markItemsAsReadOrUnread({
                 type: 'notifications',
                 itemIds: ids,
                 unread: !!isRead,
               })
             }
-            size={18}
+            size={16}
             style={{
               alignSelf: smallLeftColumn ? 'center' : 'flex-start',
               marginTop: 4,
@@ -253,7 +262,7 @@ export function NotificationCardHeader(props: NotificationCardHeaderProps) {
               },
             ]}
             onPress={() => saveItemsForLater({ itemIds: ids, save: !isSaved })}
-            size={18}
+            size={16}
             style={{
               alignSelf: smallLeftColumn ? 'center' : 'flex-start',
               marginTop: 4,
@@ -269,12 +278,9 @@ export function NotificationCardHeader(props: NotificationCardHeaderProps) {
               {
                 width: columnHeaderItemContentSize,
               },
-              cardIconName === 'star' && {
-                lineHeight: 16,
-              },
               !!cardIconColor && { color: cardIconColor },
             ]}
-            size={18}
+            size={16}
             style={{
               alignSelf: smallLeftColumn ? 'center' : 'flex-start',
               marginTop: 4,

diff --git a/packages/components/src/components/cards/partials/rows/CommentRow.tsx b/packages/components/src/components/cards/partials/rows/CommentRow.tsx
@@ -38,7 +38,7 @@ export const CommentRow = React.memo((props: CommentRowProps) => {
     avatarUrl,
     body: _body,
     isRead,
-    numberOfLines = 3,
+    numberOfLines = 2,
     smallLeftColumn,
     textStyle,
     url,

diff --git a/packages/components/src/components/cards/partials/rows/IssueOrPullRequestRow.tsx b/packages/components/src/components/cards/partials/rows/IssueOrPullRequestRow.tsx
@@ -12,10 +12,7 @@ import { useCSSVariablesOrSpringAnimatedTheme } from '../../../../hooks/use-css-
 import { Platform } from '../../../../libs/platform'
 import { contentPadding } from '../../../../styles/variables'
 import { fixURL } from '../../../../utils/helpers/github/url'
-import {
-  SpringAnimatedIcon,
-  SpringAnimatedIconProps,
-} from '../../../animated/spring/SpringAnimatedIcon'
+import { SpringAnimatedIconProps } from '../../../animated/spring/SpringAnimatedIcon'
 import { SpringAnimatedText } from '../../../animated/spring/SpringAnimatedText'
 import { Avatar } from '../../../common/Avatar'
 import { IntervalRefresh } from '../../../common/IntervalRefresh'
@@ -56,8 +53,8 @@ export const IssueOrPullRequestRow = React.memo(
       avatarUrl,
       commentsCount,
       createdAt,
-      iconColor,
-      iconName,
+      // iconColor,
+      // iconName,
       id,
       isRead,
       issueOrPullRequestNumber,
@@ -118,11 +115,12 @@ export const IssueOrPullRequestRow = React.memo(
                 style={[
                   Platform.OS !== 'android' && { flexGrow: 1 },
                   getCardStylesForTheme(springAnimatedTheme).normalText,
+                  cardStyles.boldText,
                   isRead &&
                     getCardStylesForTheme(springAnimatedTheme).mutedText,
                 ]}
               >
-                <SpringAnimatedIcon
+                {/* <SpringAnimatedIcon
                   name={iconName}
                   size={13}
                   style={[
@@ -131,7 +129,7 @@ export const IssueOrPullRequestRow = React.memo(
                     { color: iconColor },
                     // isRead && { opacity: mutedOpacity },
                   ]}
-                />{' '}
+                />{' '} */}
                 {title}
               </SpringAnimatedText>
             </Link>
@@ -145,7 +143,7 @@ export const IssueOrPullRequestRow = React.memo(
                     style={{
                       flexDirection: 'row',
                       flexWrap: 'wrap',
-                      margin: -contentPadding / 4,
+                      margin: -contentPadding / 5,
                     }}
                   >
                     {labels.map(label => (
@@ -155,13 +153,13 @@ export const IssueOrPullRequestRow = React.memo(
                         color={label.color && `#${label.color}`}
                         containerStyle={{
                           alignSelf: 'flex-start',
-                          margin: contentPadding / 4,
+                          margin: contentPadding / 5,
                         }}
                         // muted={isRead}
                         outline={false}
                         small
                       >
-                        {label.name}
+                        {label.name.toLowerCase()}
                       </Label>
                     ))}
                   </View>