[🐴] Reduce header size (#4078)
* make text input container smaller * make header much smaller * improve web stylingzio/stable
parent
5e312d5f3a
commit
115041f4bf
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue