[🐴] Reduce header size (#4078)

* make text input container smaller

* make header much smaller

* improve web styling
zio/stable
Samuel Newman 2024-05-17 20:17:59 +01:00 committed by GitHub
parent 5e312d5f3a
commit 115041f4bf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 49 additions and 38 deletions

View File

@ -82,7 +82,7 @@ export function MessageInput({
)
return (
<View style={a.p_md}>
<View style={[a.px_md, a.py_sm]}>
<View
style={[
a.w_full,

View File

@ -7,6 +7,7 @@ import {useLingui} from '@lingui/react'
import {useFocusEffect, useNavigation} from '@react-navigation/native'
import {NativeStackScreenProps} from '@react-navigation/native-stack'
import {makeProfileLink} from '#/lib/routes/links'
import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types'
import {useGate} from '#/lib/statsig/statsig'
import {useProfileShadow} from '#/state/cache/profile-shadow'
@ -22,9 +23,10 @@ import {useSetMinimalShellMode} from 'state/shell'
import {PreviewableUserAvatar} from 'view/com/util/UserAvatar'
import {CenteredView} from 'view/com/util/Views'
import {MessagesList} from '#/screens/Messages/Conversation/MessagesList'
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
import {ConvoMenu} from '#/components/dms/ConvoMenu'
import {Error} from '#/components/Error'
import {Link} from '#/components/Link'
import {ListMaybePlaceholder} from '#/components/Lists'
import {Loader} from '#/components/Loader'
import {Text} from '#/components/Typography'
@ -130,6 +132,8 @@ function Inner() {
)
}
const PFP_SIZE = isWeb ? 40 : 34
let Header = ({
profile: initialProfile,
}: {
@ -157,14 +161,13 @@ let Header = ({
t.atoms.border_contrast_low,
a.border_b,
a.flex_row,
a.justify_between,
a.align_start,
a.gap_lg,
a.pl_xl,
a.align_center,
a.gap_sm,
gtTablet ? a.pl_lg : a.pl_xl,
a.pr_lg,
a.py_md,
a.py_sm,
]}>
{!gtTablet ? (
{!gtTablet && (
<TouchableOpacity
testID="conversationHeaderBackBtn"
onPress={onPressBack}
@ -182,37 +185,37 @@ let Header = ({
color={t.atoms.text.color}
/>
</TouchableOpacity>
) : (
<View style={{width: 30}} />
)}
{profile && moderationOpts ? (
<HeaderReady profile={profile} moderationOpts={moderationOpts} />
) : (
<>
<View style={[a.align_center, a.gap_sm, a.flex_1]}>
<View style={[a.flex_row, a.align_center, a.gap_md, a.flex_1]}>
<View
style={[
{width: 32, height: 32},
{width: PFP_SIZE, height: PFP_SIZE},
a.rounded_full,
t.atoms.bg_contrast_25,
]}
/>
<View
style={[
{width: 120, height: 16},
a.rounded_xs,
t.atoms.bg_contrast_25,
a.mt_xs,
]}
/>
<View
style={[
{width: 175, height: 12},
a.rounded_xs,
t.atoms.bg_contrast_25,
]}
/>
<View style={a.gap_xs}>
<View
style={[
{width: 120, height: 16},
a.rounded_xs,
t.atoms.bg_contrast_25,
a.mt_xs,
]}
/>
<View
style={[
{width: 175, height: 12},
a.rounded_xs,
t.atoms.bg_contrast_25,
]}
/>
</View>
</View>
<View style={{width: 30}} />
@ -248,26 +251,34 @@ function HeaderReady({
return (
<>
<View style={[a.align_center, a.gap_sm, a.flex_1]}>
<View style={[a.align_center]}>
<PreviewableUserAvatar
size={32}
profile={profile}
moderation={moderation.ui('avatar')}
disableHoverCard={moderation.blocked}
/>
<Link
style={[a.flex_row, a.align_center, a.gap_md, a.flex_1, a.pr_md]}
to={makeProfileLink(profile)}>
<PreviewableUserAvatar
size={PFP_SIZE}
profile={profile}
moderation={moderation.ui('avatar')}
disableHoverCard={moderation.blocked}
/>
<View style={a.flex_1}>
<Text
style={[a.text_lg, a.font_bold, a.pt_sm, a.pb_2xs]}
style={[a.text_md, a.font_bold, web(a.leading_normal)]}
numberOfLines={1}>
{displayName}
</Text>
{!isDeletedAccount && (
<Text style={[t.atoms.text_contrast_medium]} numberOfLines={1}>
<Text
style={[
t.atoms.text_contrast_medium,
a.text_sm,
web([a.leading_normal, {marginTop: -2}]),
]}
numberOfLines={1}>
@{profile.handle}
</Text>
)}
</View>
</View>
</Link>
{isConvoActive(convoState) && (
<ConvoMenu