Composer - fix divider when replying to someone (#4279)

* move replyto border to beneath

* use hairline width for consistency

* fix border colors

2 files changed, 13 insertions, 7 deletions

diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index 00dbcb591..4911adf2c 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -183,7 +183,9 @@ export const ComposePost = observer(function ComposePost({
         [0, 1],
         [
           'transparent',
-          isWeb ? t.palette.contrast_100 : t.palette.contrast_400,
+          isWeb
+            ? t.atoms.border_contrast_low.borderColor
+            : t.atoms.border_contrast_high.borderColor,
         ],
       ),
     }
diff --git a/src/view/com/composer/ComposerReplyTo.tsx b/src/view/com/composer/ComposerReplyTo.tsx
index 7dc17fd4a..1bb4a5c21 100644
--- a/src/view/com/composer/ComposerReplyTo.tsx
+++ b/src/view/com/composer/ComposerReplyTo.tsx
@@ -10,16 +10,17 @@ import {
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {usePalette} from 'lib/hooks/usePalette'
+import {isWeb} from '#/platform/detection'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {sanitizeHandle} from 'lib/strings/handles'
 import {ComposerOptsPostRef} from 'state/shell/composer'
 import {QuoteEmbed} from 'view/com/util/post-embeds/QuoteEmbed'
 import {Text} from 'view/com/util/text/Text'
 import {PreviewableUserAvatar} from 'view/com/util/UserAvatar'
+import {useTheme} from '#/alf'
 
 export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) {
-  const pal = usePalette('default')
+  const t = useTheme()
   const {_} = useLingui()
   const {embed} = replyTo
 
@@ -75,7 +76,10 @@ export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) {
 
   return (
     <Pressable
-      style={[pal.border, styles.replyToLayout]}
+      style={[
+        isWeb ? t.atoms.border_contrast_low : t.atoms.border_contrast_high,
+        styles.replyToLayout,
+      ]}
       onPress={onPress}
       accessibilityRole="button"
       accessibilityLabel={_(
@@ -91,7 +95,7 @@ export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) {
         type={replyTo.author.associated?.labeler ? 'labeler' : 'user'}
       />
       <View style={styles.replyToPost}>
-        <Text type="xl-medium" style={[pal.text]}>
+        <Text type="xl-medium" style={t.atoms.text}>
           {sanitizeDisplayName(
             replyTo.author.displayName || sanitizeHandle(replyTo.author.handle),
           )}
@@ -100,7 +104,7 @@ export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) {
           <View style={styles.replyToText}>
             <Text
               type="post-text"
-              style={pal.text}
+              style={t.atoms.text}
               numberOfLines={!showFull ? 6 : undefined}>
               {replyTo.text}
             </Text>
@@ -218,7 +222,7 @@ const styles = StyleSheet.create({
   replyToLayout: {
     flexDirection: 'row',
     alignItems: 'flex-start',
-    borderTopWidth: 1,
+    borderBottomWidth: StyleSheet.hairlineWidth,
     paddingTop: 16,
     paddingBottom: 16,
   },