Improve style of reply bar (#5447)

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

src/view/com/post-thread/PostThreadComposePrompt.tsx

@@ -1,14 +1,17 @@
 import React from 'react'
-import {StyleSheet, TouchableOpacity} from 'react-native'
+import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {PressableScale} from '#/lib/custom-animations/PressableScale'
+import {useHaptics} from '#/lib/haptics'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {useHapticsDisabled} from '#/state/preferences'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {Text} from '../util/text/Text'
-import {UserAvatar} from '../util/UserAvatar'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
+import {atoms as a, useTheme} from '#/alf'
+import {Text} from '#/components/Typography'
 
 export function PostThreadComposePrompt({
   onPressCompose,
@@ -17,47 +20,57 @@ export function PostThreadComposePrompt({
 }) {
   const {currentAccount} = useSession()
   const {data: profile} = useProfileQuery({did: currentAccount?.did})
-  const pal = usePalette('default')
   const {_} = useLingui()
-  const {isDesktop} = useWebMediaQueries()
+  const {isTabletOrDesktop} = useWebMediaQueries()
+  const t = useTheme()
+  const playHaptics = useHaptics()
+  const isHapticsDisabled = useHapticsDisabled()
+
+  const onPress = () => {
+    playHaptics('Light')
+    setTimeout(
+      () => {
+        onPressCompose()
+      },
+      isHapticsDisabled ? 0 : 75,
+    )
+  }
+
   return (
-    <TouchableOpacity
-      testID="replyPromptBtn"
-      style={[pal.view, pal.border, styles.prompt]}
-      onPress={() => onPressCompose()}
+    <PressableScale
       accessibilityRole="button"
       accessibilityLabel={_(msg`Compose reply`)}
-      accessibilityHint={_(msg`Opens composer`)}>
-      <UserAvatar
-        avatar={profile?.avatar}
-        size={38}
-        type={profile?.associated?.labeler ? 'labeler' : 'user'}
-      />
-      <Text
-        type="xl"
+      accessibilityHint={_(msg`Opens composer`)}
+      style={[
+        {paddingTop: 8, paddingBottom: isTabletOrDesktop ? 8 : 11},
+        a.px_sm,
+        a.border_t,
+        t.atoms.border_contrast_low,
+        t.atoms.bg,
+      ]}
+      onPress={onPress}>
+      <View
         style={[
-          pal.text,
-          isDesktop ? styles.labelDesktopWeb : styles.labelMobile,
+          a.flex_row,
+          a.align_center,
+          a.p_sm,
+          a.gap_sm,
+          a.rounded_full,
+          t.atoms.bg_contrast_25,
         ]}>
-        <Trans>Write your reply</Trans>
-      </Text>
-    </TouchableOpacity>
+        <UserAvatar
+          size={22}
+          avatar={profile?.avatar}
+          type={profile?.associated?.labeler ? 'labeler' : 'user'}
+        />
+        <Text
+          style={[
+            isTabletOrDesktop ? a.text_md : a.text_sm,
+            t.atoms.text_contrast_medium,
+          ]}>
+          <Trans>Write your reply</Trans>
+        </Text>
+      </View>
+    </PressableScale>
   )
 }
-
-const styles = StyleSheet.create({
-  prompt: {
-    paddingHorizontal: 16,
-    paddingTop: 10,
-    paddingBottom: 10,
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderTopWidth: StyleSheet.hairlineWidth,
-  },
-  labelMobile: {
-    paddingLeft: 12,
-  },
-  labelDesktopWeb: {
-    paddingLeft: 12,
-  },
-})