rm replyLine

src/lib/themes.ts

@@ -21,8 +21,6 @@ export const defaultTheme: Theme = {
       icon: lightPalette.contrast_500,
 
       // non-standard
-      replyLine: lightPalette.contrast_100,
-      replyLineDot: lightPalette.contrast_200,
       postCtrl: lightPalette.contrast_500,
       brandText: lightPalette.primary_500,
       emptyStateIcon: lightPalette.contrast_300,
@@ -304,8 +302,6 @@ export const darkTheme: Theme = {
       icon: darkPalette.contrast_500,
 
       // non-standard
-      replyLine: darkPalette.contrast_200,
-      replyLineDot: darkPalette.contrast_200,
       postCtrl: darkPalette.contrast_500,
       brandText: darkPalette.primary_500,
       emptyStateIcon: darkPalette.contrast_300,
@@ -350,8 +346,6 @@ export const dimTheme: Theme = {
       icon: dimPalette.contrast_500,
 
       // non-standard
-      replyLine: dimPalette.contrast_200,
-      replyLineDot: dimPalette.contrast_200,
       postCtrl: dimPalette.contrast_500,
       brandText: dimPalette.primary_500,
       emptyStateIcon: dimPalette.contrast_300,

src/view/com/post/Post.tsx

@@ -12,10 +12,8 @@ import {useQueryClient} from '@tanstack/react-query'
 
 import {MAX_POST_LINES} from '#/lib/constants'
 import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
-import {usePalette} from '#/lib/hooks/usePalette'
 import {makeProfileLink} from '#/lib/routes/links'
 import {countLines} from '#/lib/strings/helpers'
-import {colors} from '#/lib/styles'
 import {
   POST_TOMBSTONE,
   type Shadow,
@@ -26,7 +24,7 @@ import {unstableCacheProfileView} from '#/state/queries/profile'
 import {Link} from '#/view/com/util/Link'
 import {PostMeta} from '#/view/com/util/PostMeta'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a} from '#/alf'
+import {atoms as a, select, useTheme} from '#/alf'
 import {
   GalleryBleed,
   maybeApplyGalleryOffsetStyles,
@@ -119,7 +117,7 @@ function PostInner({
   onBeforePress?: () => void
 }) {
   const queryClient = useQueryClient()
-  const pal = usePalette('default')
+  const t = useTheme()
   const {openComposer} = useOpenComposer()
   const [limitLines, setLimitLines] = useState(
     () => countLines(richText?.text) >= MAX_POST_LINES,
@@ -164,8 +162,8 @@ function PostInner({
         href={itemHref}
         style={[
           styles.outer,
-          pal.border,
+          t.atoms.border_contrast_low,
-          !hideTopBorder && {borderTopWidth: StyleSheet.hairlineWidth},
+          !hideTopBorder && a.border_t,
           style,
         ]}
         onBeforePress={onBeforePress}
@@ -176,7 +174,20 @@ function PostInner({
           setHover(false)
         }}>
         <SubtleHover hover={hover} />
-        {showReplyLine && <View style={styles.replyLine} />}
+        {showReplyLine && (
+          <View
+            style={[
+              styles.replyLine,
+              {
+                backgroundColor: select(t.name, {
+                  light: t.palette.contrast_100,
+                  dim: t.palette.contrast_200,
+                  dark: t.palette.contrast_200,
+                }),
+              },
+            ]}
+          />
+        )}
         <View style={styles.layout}>
           <View style={styles.layoutAvi}>
             <PreviewableUserAvatar
@@ -290,7 +301,6 @@ const styles = StyleSheet.create({
     top: 70,
     bottom: 0,
     borderLeftWidth: 2,
-    borderLeftColor: colors.gray2,
   },
   contentHider: {
     marginBottom: 2,

src/view/com/posts/PostFeedItem.tsx

@@ -33,7 +33,7 @@ import {
 import {Link} from '#/view/com/util/Link'
 import {PostMeta} from '#/view/com/util/PostMeta'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a} from '#/alf'
+import {atoms as a, select, useTheme} from '#/alf'
 import {
   GalleryBleed,
   maybeApplyGalleryOffsetStyles,
@@ -167,6 +167,7 @@ let FeedItemInner = ({
   const queryClient = useQueryClient()
   const {openComposer} = useOpenComposer()
   const pal = usePalette('default')
+  const t = useTheme()
   const {currentAccount} = useSession()
 
   const [hover, setHover] = useState(false)
@@ -346,8 +347,11 @@ let FeedItemInner = ({
                 style={[
                   styles.replyLine,
                   {
-                    flexGrow: 1,
+                    backgroundColor: select(t.name, {
-                    backgroundColor: pal.colors.replyLine,
+                      light: t.palette.contrast_100,
+                      dim: t.palette.contrast_200,
+                      dark: t.palette.contrast_200,
+                    }),
                     marginBottom: 4,
                   },
                 ]}
@@ -381,8 +385,11 @@ let FeedItemInner = ({
                 style={[
                   styles.replyLine,
                   {
-                    flexGrow: 1,
+                    backgroundColor: select(t.name, {
-                    backgroundColor: pal.colors.replyLine,
+                      light: t.palette.contrast_100,
+                      dim: t.palette.contrast_200,
+                      dark: t.palette.contrast_200,
+                    }),
                     marginTop: live ? 8 : 4,
                   },
                 ]}
@@ -536,6 +543,7 @@ const styles = StyleSheet.create({
     cursor: 'pointer',
   },
   replyLine: {
+    flexGrow: 1,
     width: 2,
     marginLeft: 'auto',
     marginRight: 'auto',

src/view/com/posts/ViewFullThread.tsx

@@ -1,75 +1,70 @@
 import {useMemo} from 'react'
-import {StyleSheet, View} from 'react-native'
+import {View} from 'react-native'
 import Svg, {Circle, Line} from 'react-native-svg'
 import {AtUri} from '@atproto/api'
-import {msg} from '@lingui/core/macro'
+import {useLingui} from '@lingui/react/macro'
-import {useLingui} from '@lingui/react'
 
-import {usePalette} from '#/lib/hooks/usePalette'
 import {makeProfileLink} from '#/lib/routes/links'
-import {useInteractionState} from '#/components/hooks/useInteractionState'
+import {atoms as a, select, useTheme} from '#/alf'
+import {Link} from '#/components/Link'
 import {SubtleHover} from '#/components/SubtleHover'
-import {Link} from '../util/Link'
+import {Text} from '#/components/Typography'
-import {Text} from '../util/text/Text'
 
 export function ViewFullThread({uri}: {uri: string}) {
-  const {
+  const t = useTheme()
-    state: hover,
-    onIn: onHoverIn,
-    onOut: onHoverOut,
-  } = useInteractionState()
-  const pal = usePalette('default')
   const itemHref = useMemo(() => {
     const urip = new AtUri(uri)
     return makeProfileLink({did: urip.hostname, handle: ''}, 'post', urip.rkey)
   }, [uri])
-  const {_} = useLingui()
+  const {t: l} = useLingui()
 
   return (
     <Link
-      style={[styles.viewFullThread]}
+      style={[
-      href={itemHref}
+        a.flex_row,
-      asAnchor
+        {
-      noFeedback
+          gap: 10,
-      onPointerEnter={onHoverIn}
+          paddingLeft: 18,
-      onPointerLeave={onHoverOut}>
+        },
-      <SubtleHover
+      ]}
-        hover={hover}
+      to={itemHref}
-        // adjust position for visual alignment - the actual box has lots of top padding and not much bottom padding -sfn
+      label={l`View full thread`}>
-        style={{top: 8, bottom: -5}}
+      {({hovered}) => (
-      />
+        <>
-      <View style={styles.viewFullThreadDots}>
+          <SubtleHover
-        <Svg width="4" height="40">
+            hover={hovered}
-          <Line
+            // adjust position for visual alignment - the actual box has lots of top padding and not much bottom padding -sfn
-            x1="2"
+            style={{top: 8, bottom: -5}}
-            y1="0"
-            x2="2"
-            y2="15"
-            stroke={pal.colors.replyLine}
-            strokeWidth="2"
           />
-          <Circle cx="2" cy="22" r="1.5" fill={pal.colors.replyLineDot} />
+          <View style={[a.align_center, {width: 42}]}>
-          <Circle cx="2" cy="28" r="1.5" fill={pal.colors.replyLineDot} />
+            <Svg width="4" height="40">
-          <Circle cx="2" cy="34" r="1.5" fill={pal.colors.replyLineDot} />
+              <Line
-        </Svg>
+                x1="2"
-      </View>
+                y1="0"
-
+                x2="2"
-      <Text type="md" style={[pal.link, {paddingTop: 18, paddingBottom: 4}]}>
+                y2="15"
-        {/* HACKFIX: Trans isn't working after SDK 53 upgrade -sfn */}
+                stroke={select(t.name, {
-        {_(msg`View full thread`)}
+                  light: t.palette.contrast_100,
-      </Text>
+                  dim: t.palette.contrast_200,
+                  dark: t.palette.contrast_200,
+                })}
+                strokeWidth="2"
+              />
+              <Circle cx="2" cy="22" r="1.5" fill={t.palette.contrast_200} />
+              <Circle cx="2" cy="28" r="1.5" fill={t.palette.contrast_200} />
+              <Circle cx="2" cy="34" r="1.5" fill={t.palette.contrast_200} />
+            </Svg>
+          </View>
+          <Text
+            style={[
+              a.text_md,
+              {color: t.palette.primary_500, paddingTop: 18, paddingBottom: 4},
+            ]}>
+            {/* HACKFIX: Trans isn't working after SDK 53 upgrade -sfn */}
+            {l`View full thread`}
+          </Text>
+        </>
+      )}
     </Link>
   )
 }
-
-const styles = StyleSheet.create({
-  viewFullThread: {
-    flexDirection: 'row',
-    gap: 10,
-    paddingLeft: 18,
-  },
-  viewFullThreadDots: {
-    width: 42,
-    alignItems: 'center',
-  },
-})