Align avatar in reply prompt (#8501)
* align avi in reply prompt * update skellie
This commit is contained in:
@@ -1,30 +1,19 @@
|
|||||||
import {View} from 'react-native'
|
import {View} from 'react-native'
|
||||||
|
|
||||||
import {OUTER_SPACE} from '#/screens/PostThread/const'
|
|
||||||
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
|
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
|
||||||
import * as Skele from '#/components/Skeleton'
|
import * as Skele from '#/components/Skeleton'
|
||||||
|
|
||||||
/*
|
|
||||||
* Wacky padding here is just replicating what we have in the actual
|
|
||||||
* `PostThreadComposePrompt` component
|
|
||||||
*/
|
|
||||||
export function ThreadItemReplyComposerSkeleton() {
|
export function ThreadItemReplyComposerSkeleton() {
|
||||||
const t = useTheme()
|
const t = useTheme()
|
||||||
const {gtMobile} = useBreakpoints()
|
const {gtMobile} = useBreakpoints()
|
||||||
|
|
||||||
|
if (!gtMobile) return null
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View
|
<View style={[a.px_sm, a.py_xs, a.border_t, t.atoms.border_contrast_low]}>
|
||||||
style={[
|
<View style={[a.flex_row, a.align_center, a.gap_sm, a.px_sm, a.py_sm]}>
|
||||||
a.border_t,
|
<Skele.Circle size={24} />
|
||||||
t.atoms.border_contrast_low,
|
<Skele.Text style={[a.text_md, {maxWidth: 119}]} />
|
||||||
gtMobile ? a.py_xs : {paddingTop: 8, paddingBottom: 11},
|
|
||||||
{
|
|
||||||
paddingHorizontal: OUTER_SPACE,
|
|
||||||
},
|
|
||||||
]}>
|
|
||||||
<View style={[a.flex_row, a.align_center, a.gap_xs, a.py_sm]}>
|
|
||||||
<Skele.Circle size={gtMobile ? 24 : 22} />
|
|
||||||
<Skele.Text style={[a.text_md]} />
|
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -38,15 +38,10 @@ export function PostThreadComposePrompt({
|
|||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
style={[
|
style={[
|
||||||
|
a.px_sm,
|
||||||
gtMobile
|
gtMobile
|
||||||
? [
|
? [a.py_xs, a.border_t, t.atoms.border_contrast_low, t.atoms.bg]
|
||||||
a.py_xs,
|
: [a.pb_2xs],
|
||||||
a.px_sm,
|
|
||||||
a.border_t,
|
|
||||||
t.atoms.border_contrast_low,
|
|
||||||
t.atoms.bg,
|
|
||||||
]
|
|
||||||
: [a.px_md, a.pb_2xs],
|
|
||||||
style,
|
style,
|
||||||
]}>
|
]}>
|
||||||
{!gtMobile && (
|
{!gtMobile && (
|
||||||
@@ -87,7 +82,7 @@ export function PostThreadComposePrompt({
|
|||||||
a.transition_color,
|
a.transition_color,
|
||||||
]}>
|
]}>
|
||||||
<UserAvatar
|
<UserAvatar
|
||||||
size={gtMobile ? 24 : 22}
|
size={24}
|
||||||
avatar={profile?.avatar}
|
avatar={profile?.avatar}
|
||||||
type={profile?.associated?.labeler ? 'labeler' : 'user'}
|
type={profile?.associated?.labeler ? 'labeler' : 'user'}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user