forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Align avatar in reply prompt (#8501)
* align avi in reply prompt
* update skellie
authored by
Samuel Newman
and committed by
GitHub
5c50e102
2c8dd122
+10
-26
+6
-17
src/screens/PostThread/components/ThreadItemReplyComposer.tsx
+6
-17
src/screens/PostThread/components/ThreadItemReplyComposer.tsx
···
1
1
import {View} from 'react-native'
2
2
3
-
import {OUTER_SPACE} from '#/screens/PostThread/const'
4
3
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
5
4
import * as Skele from '#/components/Skeleton'
6
5
7
-
/*
8
-
* Wacky padding here is just replicating what we have in the actual
9
-
* `PostThreadComposePrompt` component
10
-
*/
11
6
export function ThreadItemReplyComposerSkeleton() {
12
7
const t = useTheme()
13
8
const {gtMobile} = useBreakpoints()
14
9
10
+
if (!gtMobile) return null
11
+
15
12
return (
16
-
<View
17
-
style={[
18
-
a.border_t,
19
-
t.atoms.border_contrast_low,
20
-
gtMobile ? a.py_xs : {paddingTop: 8, paddingBottom: 11},
21
-
{
22
-
paddingHorizontal: OUTER_SPACE,
23
-
},
24
-
]}>
25
-
<View style={[a.flex_row, a.align_center, a.gap_xs, a.py_sm]}>
26
-
<Skele.Circle size={gtMobile ? 24 : 22} />
27
-
<Skele.Text style={[a.text_md]} />
13
+
<View style={[a.px_sm, a.py_xs, a.border_t, t.atoms.border_contrast_low]}>
14
+
<View style={[a.flex_row, a.align_center, a.gap_sm, a.px_sm, a.py_sm]}>
15
+
<Skele.Circle size={24} />
16
+
<Skele.Text style={[a.text_md, {maxWidth: 119}]} />
28
17
</View>
29
18
</View>
30
19
)
+4
-9
src/view/com/post-thread/PostThreadComposePrompt.tsx
+4
-9
src/view/com/post-thread/PostThreadComposePrompt.tsx
···
38
38
return (
39
39
<View
40
40
style={[
41
+
a.px_sm,
41
42
gtMobile
42
-
? [
43
-
a.py_xs,
44
-
a.px_sm,
45
-
a.border_t,
46
-
t.atoms.border_contrast_low,
47
-
t.atoms.bg,
48
-
]
49
-
: [a.px_md, a.pb_2xs],
43
+
? [a.py_xs, a.border_t, t.atoms.border_contrast_low, t.atoms.bg]
44
+
: [a.pb_2xs],
50
45
style,
51
46
]}>
52
47
{!gtMobile && (
···
87
82
a.transition_color,
88
83
]}>
89
84
<UserAvatar
90
-
size={gtMobile ? 24 : 22}
85
+
size={24}
91
86
avatar={profile?.avatar}
92
87
type={profile?.associated?.labeler ? 'labeler' : 'user'}
93
88
/>