[Sheets] [Pt. 10] (#5581)

Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>

src/view/com/auth/server-input/index.tsx

@@ -12,6 +12,7 @@ import * as TextField from '#/components/forms/TextField'
 import * as ToggleButton from '#/components/forms/ToggleButton'
 import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
 import {InlineLinkText} from '#/components/Link'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {P, Text} from '#/components/Typography'
 
 export function ServerInputDialog({
@@ -82,7 +83,10 @@ export function ServerInputDialog({
             label="Preferences"
             values={fixedOption}
             onChange={setFixedOption}>
-            <ToggleButton.Button name={BSKY_SERVICE} label={_(msg`Bluesky`)}>
+            <ToggleButton.Button
+              name={BSKY_SERVICE}
+              label={_(msg`Bluesky`)}
+              PressableComponent={NormalizedRNGHPressable}>
               <ToggleButton.ButtonText>
                 {_(msg`Bluesky`)}
               </ToggleButton.ButtonText>
@@ -90,7 +94,8 @@ export function ServerInputDialog({
             <ToggleButton.Button
               testID="customSelectBtn"
               name="custom"
-              label={_(msg`Custom`)}>
+              label={_(msg`Custom`)}
+              PressableComponent={NormalizedRNGHPressable}>
               <ToggleButton.ButtonText>
                 {_(msg`Custom`)}
               </ToggleButton.ButtonText>

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

@@ -5,12 +5,12 @@ 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 {UserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Text} from '#/components/Typography'
 
 export function PostThreadComposePrompt({
@@ -21,10 +21,15 @@ export function PostThreadComposePrompt({
   const {currentAccount} = useSession()
   const {data: profile} = useProfileQuery({did: currentAccount?.did})
   const {_} = useLingui()
-  const {isTabletOrDesktop} = useWebMediaQueries()
+  const {gtMobile} = useBreakpoints()
   const t = useTheme()
   const playHaptics = useHaptics()
   const isHapticsDisabled = useHapticsDisabled()
+  const {
+    state: hovered,
+    onIn: onHoverIn,
+    onOut: onHoverOut,
+  } = useInteractionState()
 
   const onPress = () => {
     playHaptics('Light')
@@ -42,13 +47,15 @@ export function PostThreadComposePrompt({
       accessibilityLabel={_(msg`Compose reply`)}
       accessibilityHint={_(msg`Opens composer`)}
       style={[
-        {paddingTop: 8, paddingBottom: isTabletOrDesktop ? 8 : 11},
-        a.px_sm,
+        gtMobile ? a.py_xs : {paddingTop: 8, paddingBottom: 11},
+        gtMobile ? {paddingLeft: 6, paddingRight: 6} : a.px_sm,
         a.border_t,
         t.atoms.border_contrast_low,
         t.atoms.bg,
       ]}
-      onPress={onPress}>
+      onPress={onPress}
+      onHoverIn={onHoverIn}
+      onHoverOut={onHoverOut}>
       <View
         style={[
           a.flex_row,
@@ -56,10 +63,11 @@ export function PostThreadComposePrompt({
           a.p_sm,
           a.gap_sm,
           a.rounded_full,
-          t.atoms.bg_contrast_25,
+          (!gtMobile || hovered) && t.atoms.bg_contrast_25,
+          a.transition_color,
         ]}>
         <UserAvatar
-          size={22}
+          size={gtMobile ? 24 : 22}
           avatar={profile?.avatar}
           type={profile?.associated?.labeler ? 'labeler' : 'user'}
         />

src/view/com/util/post-ctrls/RepostButton.tsx

@@ -156,7 +156,6 @@ let RepostButton = ({
             </View>
             <Button
               label={_(msg`Cancel quote post`)}
-              onAccessibilityEscape={close}
               onPress={close}
               size="large"
               variant="solid"