Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Make reply prompt more subtle on desktop (#5569)

* make reply prompt more subtle on desktop

* fix alignment

* Tweak transition timing

---------

Co-authored-by: Eric Bailey <git@esb.lol>

authored by

Samuel Newman
Eric Bailey
and committed by
GitHub
40596683 3972d3d4

+44 -8
+28
src/alf/atoms.ts
··· 901 901 hidden: { 902 902 display: 'none', 903 903 }, 904 + 905 + /* 906 + * Transition 907 + */ 908 + transition_none: web({ 909 + transitionProperty: 'none', 910 + }), 911 + transition_all: web({ 912 + transitionProperty: 'all', 913 + transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)', 914 + transitionDuration: '100ms', 915 + }), 916 + transition_color: web({ 917 + transitionProperty: 918 + 'color, background-color, border-color, text-decoration-color, fill, stroke', 919 + transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)', 920 + transitionDuration: '100ms', 921 + }), 922 + transition_opacity: web({ 923 + transitionProperty: 'opacity', 924 + transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)', 925 + transitionDuration: '100ms', 926 + }), 927 + transition_transform: web({ 928 + transitionProperty: 'transform', 929 + transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)', 930 + transitionDuration: '100ms', 931 + }), 904 932 } as const
+16 -8
src/view/com/post-thread/PostThreadComposePrompt.tsx
··· 5 5 6 6 import {PressableScale} from '#/lib/custom-animations/PressableScale' 7 7 import {useHaptics} from '#/lib/haptics' 8 - import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 9 8 import {useHapticsDisabled} from '#/state/preferences' 10 9 import {useProfileQuery} from '#/state/queries/profile' 11 10 import {useSession} from '#/state/session' 12 11 import {UserAvatar} from '#/view/com/util/UserAvatar' 13 - import {atoms as a, useTheme} from '#/alf' 12 + import {atoms as a, useBreakpoints, useTheme} from '#/alf' 13 + import {useInteractionState} from '#/components/hooks/useInteractionState' 14 14 import {Text} from '#/components/Typography' 15 15 16 16 export function PostThreadComposePrompt({ ··· 21 21 const {currentAccount} = useSession() 22 22 const {data: profile} = useProfileQuery({did: currentAccount?.did}) 23 23 const {_} = useLingui() 24 - const {isTabletOrDesktop} = useWebMediaQueries() 24 + const {gtMobile} = useBreakpoints() 25 25 const t = useTheme() 26 26 const playHaptics = useHaptics() 27 27 const isHapticsDisabled = useHapticsDisabled() 28 + const { 29 + state: hovered, 30 + onIn: onHoverIn, 31 + onOut: onHoverOut, 32 + } = useInteractionState() 28 33 29 34 const onPress = () => { 30 35 playHaptics('Light') ··· 42 47 accessibilityLabel={_(msg`Compose reply`)} 43 48 accessibilityHint={_(msg`Opens composer`)} 44 49 style={[ 45 - {paddingTop: 8, paddingBottom: isTabletOrDesktop ? 8 : 11}, 46 - a.px_sm, 50 + gtMobile ? a.py_xs : {paddingTop: 8, paddingBottom: 11}, 51 + gtMobile ? {paddingLeft: 6, paddingRight: 6} : a.px_sm, 47 52 a.border_t, 48 53 t.atoms.border_contrast_low, 49 54 t.atoms.bg, 50 55 ]} 51 - onPress={onPress}> 56 + onPress={onPress} 57 + onHoverIn={onHoverIn} 58 + onHoverOut={onHoverOut}> 52 59 <View 53 60 style={[ 54 61 a.flex_row, ··· 56 63 a.p_sm, 57 64 a.gap_sm, 58 65 a.rounded_full, 59 - t.atoms.bg_contrast_25, 66 + (!gtMobile || hovered) && t.atoms.bg_contrast_25, 67 + a.transition_color, 60 68 ]}> 61 69 <UserAvatar 62 - size={22} 70 + size={gtMobile ? 24 : 22} 63 71 avatar={profile?.avatar} 64 72 type={profile?.associated?.labeler ? 'labeler' : 'user'} 65 73 />