Integrate notifications into the design system

src/view/com/notifications/FeedItem.tsx

@@ -14,6 +14,7 @@ import {ErrorMessage} from '../util/error/ErrorMessage'
 import {Post} from '../post/Post'
 import {Link} from '../util/Link'
 import {InviteAccepter} from './InviteAccepter'
+import {usePalette} from '../../lib/hooks/usePalette'
 
 const MAX_AUTHORS = 8
 
@@ -22,6 +23,7 @@ export const FeedItem = observer(function FeedItem({
 }: {
   item: NotificationsViewItemModel
 }) {
+  const pal = usePalette('default')
   const itemHref = useMemo(() => {
     if (item.isUpvote || item.isRepost || item.isTrend) {
       const urip = new AtUri(item.subjectUri)
@@ -55,7 +57,14 @@ export const FeedItem = observer(function FeedItem({
         <Post
           uri={item.uri}
           initView={item.additionalPost}
-          style={[item.isRead ? undefined : styles.outerUnread]}
+          style={
+            item.isRead
+              ? undefined
+              : [
+                  styles.outerUnread,
+                  {backgroundColor: pal.colors.unreadNotifBg},
+                ]
+          }
         />
       </Link>
     )
@@ -117,7 +126,14 @@ export const FeedItem = observer(function FeedItem({
 
   return (
     <Link
-      style={[styles.outer, item.isRead ? undefined : styles.outerUnread]}
+      style={[
+        styles.outer,
+        pal.view,
+        pal.border,
+        item.isRead
+          ? undefined
+          : [styles.outerUnread, {backgroundColor: pal.colors.unreadNotifBg}],
+      ]}
       href={itemHref}
       title={itemTitle}
       noFeedback>
@@ -150,36 +166,36 @@ export const FeedItem = observer(function FeedItem({
               </Link>
             ))}
             {authors.length > MAX_AUTHORS ? (
-              <Text style={styles.aviExtraCount}>
+              <Text style={[styles.aviExtraCount, pal.textLight]}>
                 +{authors.length - MAX_AUTHORS}
               </Text>
             ) : undefined}
           </View>
           <View style={styles.meta}>
             {item.isTrend && (
-              <Text style={[styles.metaItem, s.f15]}>{action}</Text>
+              <Text style={[styles.metaItem, pal.text]}>{action}</Text>
             )}
             <Link
               key={authors[0].href}
               style={styles.metaItem}
               href={authors[0].href}
               title={`@${authors[0].handle}`}>
-              <Text style={[s.f15, s.bold, s.black]}>
+              <Text style={[pal.text, s.bold]}>
                 {authors[0].displayName || authors[0].handle}
               </Text>
             </Link>
             {authors.length > 1 ? (
               <>
-                <Text style={[styles.metaItem, s.f15]}>and</Text>
-                <Text style={[styles.metaItem, s.f15, s.bold]}>
+                <Text style={[styles.metaItem, pal.text]}>and</Text>
+                <Text style={[styles.metaItem, pal.text, s.bold]}>
                   {authors.length - 1} {pluralize(authors.length - 1, 'other')}
                 </Text>
               </>
             ) : undefined}
             {!item.isTrend && (
-              <Text style={[styles.metaItem, s.f15]}>{action}</Text>
+              <Text style={[styles.metaItem, pal.text]}>{action}</Text>
             )}
-            <Text style={[styles.metaItem, s.f15, s.gray5]}>
+            <Text style={[styles.metaItem, pal.textLight]}>
               {ago(item.indexedAt)}
             </Text>
           </View>
@@ -204,6 +220,7 @@ function AdditionalPostText({
 }: {
   additionalPost?: PostThreadViewModel
 }) {
+  const pal = usePalette('default')
   if (!additionalPost) {
     return <View />
   }
@@ -211,20 +228,16 @@ function AdditionalPostText({
     return <ErrorMessage message={additionalPost.error} />
   }
   return (
-    <Text style={[s.gray5]}>{additionalPost.thread?.post.record.text}</Text>
+    <Text style={pal.textLight}>{additionalPost.thread?.post.record.text}</Text>
   )
 }
 
 const styles = StyleSheet.create({
   outer: {
-    backgroundColor: colors.white,
     padding: 10,
     borderTopWidth: 1,
-    borderTopColor: colors.gray2,
   },
   outerUnread: {
-    backgroundColor: colors.unreadNotifBg,
-    borderWidth: 1,
     borderColor: colors.blue1,
   },
   layout: {
@@ -245,7 +258,6 @@ const styles = StyleSheet.create({
   aviExtraCount: {
     fontWeight: 'bold',
     paddingLeft: 6,
-    color: colors.gray5,
   },
   layoutContent: {
     flex: 1,
@@ -258,7 +270,6 @@ const styles = StyleSheet.create({
   },
   metaItem: {
     paddingRight: 3,
-    color: colors.black,
   },
   postText: {
     paddingBottom: 5,

src/view/com/post/Post.tsx

@@ -23,6 +23,7 @@ import * as Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
 import {useStores} from '../../../state'
 import {s, colors} from '../../lib/styles'
+import {usePalette} from '../../lib/hooks/usePalette'
 
 export const Post = observer(function Post({
   uri,
@@ -35,6 +36,7 @@ export const Post = observer(function Post({
   showReplyLine?: boolean
   style?: StyleProp<ViewStyle>
 }) {
+  const pal = usePalette('default')
   const store = useStores()
   const [view, setView] = useState<PostThreadViewModel | undefined>(initView)
   const [deleted, setDeleted] = useState(false)
@@ -58,7 +60,7 @@ export const Post = observer(function Post({
   // =
   if (!view || view.isLoading || view.params.uri !== uri) {
     return (
-      <View>
+      <View style={pal.view}>
         <ActivityIndicator />
       </View>
     )
@@ -68,7 +70,7 @@ export const Post = observer(function Post({
   // =
   if (view.hasError || !view.thread) {
     return (
-      <View>
+      <View style={pal.view}>
         <Text>{view.error || 'Thread not found'}</Text>
       </View>
     )
@@ -134,7 +136,7 @@ export const Post = observer(function Post({
 
   return (
     <Link
-      style={[styles.outer, style]}
+      style={[styles.outer, pal.view, pal.border, style]}
       href={itemHref}
       title={itemTitle}
       noFeedback>
@@ -164,12 +166,19 @@ export const Post = observer(function Post({
           />
           {replyHref !== '' && (
             <View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
-              <FontAwesomeIcon icon="reply" size={9} style={[s.gray4, s.mr5]} />
-              <Text style={[s.gray4, s.f12, s.mr2]}>Reply to</Text>
+              <FontAwesomeIcon
+                icon="reply"
+                size={9}
+                style={[pal.textLight, s.mr5]}
+              />
+              <Text type="body2" style={[pal.textLight, s.mr2]}>
+                Reply to
+              </Text>
               <Link href={replyHref} title="Parent post">
                 <UserInfoText
+                  type="body2"
                   did={replyAuthorDid}
-                  style={[s.f12, s.gray5]}
+                  style={[pal.textLight]}
                   prefix="@"
                 />
               </Link>
@@ -177,11 +186,7 @@ export const Post = observer(function Post({
           )}
           {record.text ? (
             <View style={styles.postTextContainer}>
-              <RichText
-                text={record.text}
-                entities={record.entities}
-                style={styles.postText}
-              />
+              <RichText text={record.text} entities={record.entities} />
             </View>
           ) : (
             <View style={{height: 5}} />
@@ -205,10 +210,8 @@ export const Post = observer(function Post({
 
 const styles = StyleSheet.create({
   outer: {
-    backgroundColor: colors.white,
     padding: 10,
     borderTopWidth: 1,
-    borderTopColor: colors.gray2,
   },
   layout: {
     flexDirection: 'row',
@@ -225,12 +228,6 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     paddingBottom: 8,
   },
-  postText: {
-    fontFamily: 'System',
-    fontSize: 16,
-    lineHeight: 20.8, // 1.3 of 16px
-    color: colors.black,
-  },
   replyLine: {
     position: 'absolute',
     left: 36,

src/view/lib/themes.ts

@@ -18,6 +18,7 @@ export const defaultTheme: Theme = {
       actionLabel: colors.gray4,
       replyLine: colors.gray2,
       replyLineDot: colors.gray3,
+      unreadNotifBg: '#ebf6ff',
     },
     primary: {
       background: colors.blue3,
@@ -157,6 +158,7 @@ export const darkTheme: Theme = {
       actionLabel: colors.gray3,
       replyLine: colors.gray5,
       replyLineDot: colors.gray6,
+      unreadNotifBg: colors.blue5,
     },
     primary: {
       ...defaultTheme.palette.primary,