Update posts in feed to use the theming system

src/view/com/util/PostEmbeds.tsx

@@ -7,6 +7,8 @@ import {colors} from '../../lib/styles'
 import {AutoSizedImage} from './images/AutoSizedImage'
 import {ImagesLightbox} from '../../../state/models/shell-ui'
 import {useStores} from '../../../state'
+import {useTheme} from '../../lib/ThemeContext'
+import {usePalette} from '../../lib/hooks/usePalette'
 
 type Embed =
   | AppBskyEmbedImages.Presented
@@ -20,6 +22,8 @@ export function PostEmbeds({
   embed?: Embed
   style?: StyleProp<ViewStyle>
 }) {
+  const theme = useTheme()
+  const pal = usePalette('default')
   const store = useStores()
   if (embed?.$type === 'app.bsky.embed.images#presented') {
     const imgEmbed = embed as AppBskyEmbedImages.Presented
@@ -90,18 +94,24 @@ export function PostEmbeds({
     const externalEmbed = embed as AppBskyEmbedExternal.Presented
     const link = externalEmbed.external
     return (
-      <Link style={[styles.extOuter, style]} href={link.uri} noFeedback>
+      <Link
+        style={[styles.extOuter, pal.view, pal.border, style]}
+        href={link.uri}
+        noFeedback>
         {link.thumb ? (
           <AutoSizedImage style={style} uri={link.thumb} />
         ) : undefined}
-        <Text numberOfLines={1} style={styles.extTitle}>
+        <Text type="h5" numberOfLines={1} style={pal.text}>
           {link.title || link.uri}
         </Text>
-        <Text numberOfLines={1} style={styles.extUrl}>
+        <Text type="body2" numberOfLines={1} style={pal.textLight}>
           {link.uri}
         </Text>
         {link.description ? (
-          <Text numberOfLines={2} style={styles.extDescription}>
+          <Text
+            type="body1"
+            numberOfLines={2}
+            style={[pal.text, styles.extDescription]}>
             {link.description}
           </Text>
         ) : undefined}
@@ -140,23 +150,10 @@ const styles = StyleSheet.create({
   },
 
   extOuter: {
-    borderWidth: 1,
-    borderColor: colors.gray2,
     borderRadius: 8,
     padding: 10,
   },
-  extImage: {},
-  extTitle: {
-    fontSize: 16,
-    fontWeight: 'bold',
-    color: colors.black,
-  },
   extDescription: {
     marginTop: 4,
-    fontSize: 15,
-    color: colors.black,
-  },
-  extUrl: {
-    color: colors.gray4,
   },
 })

src/view/com/util/PostMeta.tsx

@@ -6,6 +6,8 @@ import {Text} from './text/Text'
 import {PostDropdownBtn} from './forms/DropdownButton'
 import {s} from '../../lib/styles'
 import {ago} from '../../../lib/strings'
+import {useTheme} from '../../lib/ThemeContext'
+import {usePalette} from '../../lib/hooks/usePalette'
 
 interface PostMetaOpts {
   itemHref: string
@@ -20,6 +22,8 @@ interface PostMetaOpts {
 }
 
 export function PostMeta(opts: PostMetaOpts) {
+  const theme = useTheme()
+  const pal = usePalette('default')
   let displayName = opts.authorDisplayName || opts.authorHandle
   let handle = opts.authorHandle
 
@@ -44,16 +48,16 @@ export function PostMeta(opts: PostMetaOpts) {
         style={styles.metaItem}
         href={opts.authorHref}
         title={opts.authorHandle}>
-        <Text style={[s.f17, s.bold, s.black]} numberOfLines={1}>
+        <Text style={[pal.text, theme.typography.h5]} numberOfLines={1}>
           {displayName}
           {handle ? (
-            <Text style={[s.f15, s.gray5, s.normal, s.black]}>
+            <Text style={[pal.textLight, theme.typography.h6]}>
               &nbsp;{handle}
             </Text>
           ) : undefined}
         </Text>
       </Link>
-      <Text style={[styles.metaItem, s.f15, s.gray5]}>
+      <Text style={[styles.metaItem, pal.textLight, theme.typography.h6]}>
         &middot; {ago(opts.timestamp)}
       </Text>
       <View style={s.flex1} />
@@ -64,7 +68,11 @@ export function PostMeta(opts: PostMetaOpts) {
         isAuthor={opts.isAuthor}
         onCopyPostText={opts.onCopyPostText}
         onDeletePost={opts.onDeletePost}>
-        <FontAwesomeIcon icon="ellipsis-h" size={14} style={[s.mt2, s.mr5]} />
+        <FontAwesomeIcon
+          icon="ellipsis-h"
+          size={14}
+          style={[s.mt2, s.mr5, pal.text]}
+        />
       </PostDropdownBtn>
     </View>
   )

src/view/com/util/UserInfoText.tsx

@@ -5,8 +5,10 @@ import {Link} from './Link'
 import {Text} from './text/Text'
 import {LoadingPlaceholder} from './LoadingPlaceholder'
 import {useStores} from '../../../state'
+import {TypographyVariant} from '../../lib/ThemeContext'
 
 export function UserInfoText({
+  type = 'body1',
   did,
   attr,
   loading,
@@ -15,6 +17,7 @@ export function UserInfoText({
   style,
   asLink,
 }: {
+  type?: TypographyVariant
   did: string
   attr?: keyof GetProfile.OutputSchema
   loading?: string
@@ -52,9 +55,15 @@ export function UserInfoText({
 
   let inner
   if (didFail) {
-    inner = <Text style={style}>{failed}</Text>
+    inner = (
+      <Text type={type} style={style}>
+        {failed}
+      </Text>
+    )
   } else if (profile) {
-    inner = <Text style={style}>{`${prefix || ''}${profile[attr]}`}</Text>
+    inner = (
+      <Text type={type} style={style}>{`${prefix || ''}${profile[attr]}`}</Text>
+    )
   } else {
     inner = (
       <LoadingPlaceholder

src/view/com/util/text/RichText.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import {TextStyle, StyleProp} from 'react-native'
 import {TextLink} from '../Link'
 import {Text} from './Text'
-import {s} from '../../../lib/styles'
+import {lh} from '../../../lib/styles'
 import {toShortUrl} from '../../../../lib/strings'
-import {TypographyVariant} from '../../../lib/ThemeContext'
+import {useTheme, TypographyVariant} from '../../../lib/ThemeContext'
 import {usePalette} from '../../../lib/hooks/usePalette'
 
 type TextSlice = {start: number; end: number}
@@ -21,22 +21,24 @@ export function RichText({
   style,
   numberOfLines,
 }: {
-  type: TypographyVariant
+  type?: TypographyVariant
   text: string
   entities?: Entity[]
   style?: StyleProp<TextStyle>
   numberOfLines?: number
 }) {
+  const theme = useTheme()
   const pal = usePalette('default')
+  const lineHeightStyle = lh(theme, 'body1', 1.2)
   if (!entities?.length) {
     if (/^\p{Extended_Pictographic}+$/u.test(text) && text.length <= 5) {
       style = {
         fontSize: 26,
         lineHeight: 30,
       }
-      return <Text style={style}>{text}</Text>
+      return <Text style={[style, pal.text]}>{text}</Text>
     }
-    return <Text style={style}>{text}</Text>
+    return <Text style={[style, pal.text, lineHeightStyle]}>{text}</Text>
   }
   if (!style) style = []
   else if (!Array.isArray(style)) style = [style]
@@ -55,7 +57,7 @@ export function RichText({
             type={type}
             text={segment.text}
             href={`/profile/${segment.entity.value}`}
-            style={[style, pal.link]}
+            style={[style, lineHeightStyle, pal.link]}
           />,
         )
       } else if (segment.entity.type === 'link') {
@@ -65,7 +67,7 @@ export function RichText({
             type={type}
             text={toShortUrl(segment.text)}
             href={segment.entity.value}
-            style={[style, pal.link]}
+            style={[style, lineHeightStyle, pal.link]}
           />,
         )
       }
@@ -73,7 +75,10 @@ export function RichText({
     key++
   }
   return (
-    <Text type={type} style={[pal.text, style]} numberOfLines={numberOfLines}>
+    <Text
+      type={type}
+      style={[style, pal.text, lineHeightStyle]}
+      numberOfLines={numberOfLines}>
       {els}
     </Text>
   )