forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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
+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
+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
/>