acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Clean up drawer (#5761)

Browse Source 
* clean up drawer

* add a lil bit of padding

* Drawer nits (#5778)

* Avi stuff

* Rm SafeAreaView, not working on Android

* Dividers and spacing

* Fix count on android, ended up refactoring the whole MenuItem

* Litttttle more space

* Improve NavSignupCard

* format nit

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

---------

Co-authored-by: Eric Bailey <git@esb.lol>
This commit is contained in:
Samuel Newman
2024-10-17 03:43:10 +03:00
committed by GitHub
parent 6bc00f8d71
commit 21542c4a77
3 changed files with 266 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/shell/Drawer.tsx
+244 -316
View File
@@ -1,26 +1,17 @@
import React, {ComponentProps} from 'react'
import {
Linking,
SafeAreaView,
ScrollView,
StyleProp,
StyleSheet,
TouchableOpacity,
View,
ViewStyle,
} from 'react-native'
import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
import {Linking, ScrollView, TouchableOpacity, View} from 'react-native'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {msg, Plural, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {StackActions, useNavigation} from '@react-navigation/native'
import {FEEDBACK_FORM_URL, HELP_DESK_URL} from '#/lib/constants'
import {PressableScale} from '#/lib/custom-animations/PressableScale'
import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
import {usePalette} from '#/lib/hooks/usePalette'
import {getTabState, TabState} from '#/lib/routes/helpers'
import {NavigationProp} from '#/lib/routes/types'
import {colors, s} from '#/lib/styles'
import {useTheme} from '#/lib/ThemeContext'
import {sanitizeHandle} from '#/lib/strings/handles'
import {colors} from '#/lib/styles'
import {isWeb} from '#/platform/detection'
import {emitSoftReset} from '#/state/events'
import {useKawaiiMode} from '#/state/preferences/kawaii'
@@ -29,12 +20,12 @@ import {useProfileQuery} from '#/state/queries/profile'
import {SessionAccount, useSession} from '#/state/session'
import {useSetDrawerOpen} from '#/state/shell'
import {formatCount} from '#/view/com/util/numeric/format'
import {Text} from '#/view/com/util/text/Text'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {NavSignupCard} from '#/view/shell/NavSignupCard'
import {atoms as a} from '#/alf'
import {useTheme as useAlfTheme} from '#/alf'
import {useTheme} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {Divider} from '#/components/Divider'
import {
Bell_Filled_Corner0_Rounded as BellFilled,
Bell_Stroke2_Corner0_Rounded as Bell,
@@ -50,15 +41,19 @@ import {
} from '#/components/icons/HomeOpen'
import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as MagnifyingGlassFilled} from '#/components/icons/MagnifyingGlass'
import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2'
import {Message_Stroke2_Corner0_Rounded as Message} from '#/components/icons/Message'
import {
Message_Stroke2_Corner0_Rounded as Message,
Message_Stroke2_Corner0_Rounded_Filled as MessageFilled,
} from '#/components/icons/Message'
import {SettingsGear2_Stroke2_Corner0_Rounded as Settings} from '#/components/icons/SettingsGear2'
import {
UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
UserCircle_Stroke2_Corner0_Rounded as UserCircle,
} from '#/components/icons/UserCircle'
import {TextLink} from '../com/util/Link'
import {InlineLinkText} from '#/components/Link'
import {Text} from '#/components/Typography'
const iconWidth = 28
const iconWidth = 26
let DrawerProfileCard = ({
account,
@@ -68,7 +63,7 @@ let DrawerProfileCard = ({
onPressProfile: () => void
}): React.ReactNode => {
const {_, i18n} = useLingui()
const pal = usePalette('default')
const t = useTheme()
const {data: profile} = useProfileQuery({did: account.did})
return (
@@ -76,62 +71,52 @@ let DrawerProfileCard = ({
testID="profileCardButton"
accessibilityLabel={_(msg`Profile`)}
accessibilityHint={_(msg`Navigates to your profile`)}
onPress={onPressProfile}>
onPress={onPressProfile}
style={[a.gap_sm]}>
<UserAvatar
size={80}
size={52}
avatar={profile?.avatar}
// See https://github.com/bluesky-social/social-app/pull/1801:
usePlainRNImage={true}
type={profile?.associated?.labeler ? 'labeler' : 'user'}
/>
<Text
type="title-lg"
style={[pal.text, s.bold, styles.profileCardDisplayName]}
numberOfLines={1}>
{profile?.displayName || account.handle}
</Text>
<Text
type="2xl"
style={[pal.textLight, styles.profileCardHandle]}
numberOfLines={1}>
@{account.handle}
</Text>
<View
style={[
styles.profileCardFollowers,
a.gap_xs,
a.flex_row,
a.align_center,
a.flex_wrap,
]}>
<Text type="xl" style={pal.textLight}>
<Trans>
<Text type="xl-medium" style={pal.text}>
{formatCount(i18n, profile?.followersCount ?? 0)}
</Text>{' '}
<Plural
value={profile?.followersCount || 0}
one="follower"
other="followers"
/>
</Trans>
<View style={[a.gap_2xs]}>
<Text
emoji
style={[a.font_heavy, a.text_xl, a.mt_2xs, a.leading_tight]}
numberOfLines={1}>
{profile?.displayName || account.handle}
</Text>
<Text type="xl" style={pal.textLight}>
&middot;
</Text>
<Text type="xl" style={pal.textLight}>
<Trans>
<Text type="xl-medium" style={pal.text}>
{formatCount(i18n, profile?.followsCount ?? 0)}
</Text>{' '}
<Plural
value={profile?.followsCount || 0}
one="following"
other="following"
/>
</Trans>
<Text
emoji
style={[t.atoms.text_contrast_medium, a.text_md, a.leading_tight]}
numberOfLines={1}>
{sanitizeHandle(account.handle, '@')}
</Text>
</View>
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
<Trans>
<Text style={[a.text_md, a.font_bold]}>
{formatCount(i18n, profile?.followersCount ?? 0)}
</Text>{' '}
<Plural
value={profile?.followersCount || 0}
one="follower"
other="followers"
/>
</Trans>{' '}
&middot;{' '}
<Trans>
<Text style={[a.text_md, a.font_bold]}>
{formatCount(i18n, profile?.followsCount ?? 0)}
</Text>{' '}
<Plural
value={profile?.followsCount || 0}
one="following"
other="following"
/>
</Trans>
</Text>
</TouchableOpacity>
)
}
@@ -139,14 +124,19 @@ DrawerProfileCard = React.memo(DrawerProfileCard)
export {DrawerProfileCard}
let DrawerContent = ({}: {}): React.ReactNode => {
const theme = useTheme()
const t = useAlfTheme()
const pal = usePalette('default')
const t = useTheme()
const {_} = useLingui()
const insets = useSafeAreaInsets()
const setDrawerOpen = useSetDrawerOpen()
const navigation = useNavigation<NavigationProp>()
const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
useNavigationTabState()
const {
isAtHome,
isAtSearch,
isAtFeeds,
isAtNotifications,
isAtMyProfile,
isAtMessages,
} = useNavigationTabState()
const {hasSession, currentAccount} = useSession()
const kawaii = useKawaiiMode()
@@ -187,6 +177,11 @@ let DrawerContent = ({}: {}): React.ReactNode => {
[onPressTab],
)
const onPressMessages = React.useCallback(
() => onPressTab('Messages'),
[onPressTab],
)
const onPressNotifications = React.useCallback(
() => onPressTab('Notifications'),
[onPressTab],
@@ -228,89 +223,91 @@ let DrawerContent = ({}: {}): React.ReactNode => {
// =
return (
<View
testID="drawer"
style={[
styles.view,
theme.colorScheme === 'light' ? pal.view : t.atoms.bg_contrast_25,
]}>
<SafeAreaView style={s.flex1}>
<ScrollView style={styles.main}>
{hasSession && currentAccount ? (
<View style={{}}>
<DrawerProfileCard
account={currentAccount}
onPressProfile={onPressProfile}
/>
</View>
) : (
<View style={{paddingRight: 20}}>
<NavSignupCard />
</View>
)}
{hasSession ? (
<>
<View style={{height: 16}} />
<SearchMenuItem isActive={isAtSearch} onPress={onPressSearch} />
<HomeMenuItem isActive={isAtHome} onPress={onPressHome} />
<NotificationsMenuItem
isActive={isAtNotifications}
onPress={onPressNotifications}
/>
<FeedsMenuItem isActive={isAtFeeds} onPress={onPressMyFeeds} />
<ListsMenuItem onPress={onPressLists} />
<ProfileMenuItem
isActive={isAtMyProfile}
onPress={onPressProfile}
/>
<SettingsMenuItem onPress={onPressSettings} />
</>
) : (
<>
<HomeMenuItem isActive={isAtHome} onPress={onPressHome} />
<FeedsMenuItem isActive={isAtFeeds} onPress={onPressMyFeeds} />
<SearchMenuItem isActive={isAtSearch} onPress={onPressSearch} />
</>
)}
<View style={styles.smallSpacer} />
<View style={[{flexWrap: 'wrap', gap: 12}, s.flexCol]}>
<TextLink
type="md"
style={pal.link}
href="https://bsky.social/about/support/tos"
text={_(msg`Terms of Service`)}
/>
<TextLink
type="md"
style={pal.link}
href="https://bsky.social/about/support/privacy-policy"
text={_(msg`Privacy Policy`)}
/>
{kawaii && (
<Text type="md" style={pal.textLight}>
Logo by{' '}
<TextLink
type="md"
href="/profile/sawaratsuki.bsky.social"
text="@sawaratsuki.bsky.social"
style={pal.link}
/>
</Text>
)}
<View testID="drawer" style={[a.flex_1, t.atoms.bg]}>
<ScrollView
style={[a.flex_1]}
contentContainerStyle={[
a.px_xl,
{
paddingTop: Math.max(
insets.top + a.pt_xl.paddingTop,
a.pt_xl.paddingTop,
),
},
]}>
{hasSession && currentAccount ? (
<DrawerProfileCard
account={currentAccount}
onPressProfile={onPressProfile}
/>
) : (
<View style={[a.pr_xl]}>
<NavSignupCard />
</View>
)}
<View style={styles.smallSpacer} />
<View style={styles.smallSpacer} />
</ScrollView>
<Divider style={[a.mt_xl, a.mb_sm]} />
<DrawerFooter
onPressFeedback={onPressFeedback}
onPressHelp={onPressHelp}
/>
</SafeAreaView>
{hasSession ? (
<>
<SearchMenuItem isActive={isAtSearch} onPress={onPressSearch} />
<HomeMenuItem isActive={isAtHome} onPress={onPressHome} />
<ChatMenuItem isActive={isAtMessages} onPress={onPressMessages} />
<NotificationsMenuItem
isActive={isAtNotifications}
onPress={onPressNotifications}
/>
<FeedsMenuItem isActive={isAtFeeds} onPress={onPressMyFeeds} />
<ListsMenuItem onPress={onPressLists} />
<ProfileMenuItem
isActive={isAtMyProfile}
onPress={onPressProfile}
/>
<SettingsMenuItem onPress={onPressSettings} />
</>
) : (
<>
<HomeMenuItem isActive={isAtHome} onPress={onPressHome} />
<FeedsMenuItem isActive={isAtFeeds} onPress={onPressMyFeeds} />
<SearchMenuItem isActive={isAtSearch} onPress={onPressSearch} />
</>
)}
<Divider style={[a.mb_xl, a.mt_sm]} />
<View style={[a.flex_col, a.gap_md, a.flex_wrap]}>
<InlineLinkText
style={[a.text_md]}
label={_(msg`Terms of Service`)}
to="https://bsky.social/about/support/tos">
<Trans>Terms of Service</Trans>
</InlineLinkText>
<InlineLinkText
style={[a.text_md]}
to="https://bsky.social/about/support/privacy-policy"
label={_(msg`Privacy Policy`)}>
<Trans>Privacy Policy</Trans>
</InlineLinkText>
{kawaii && (
<Text style={t.atoms.text_contrast_medium}>
<Trans>
Logo by{' '}
<InlineLinkText
style={[a.text_md]}
to="/profile/sawaratsuki.bsky.social"
label="@sawaratsuki.bsky.social">
@sawaratsuki.bsky.social
</InlineLinkText>
</Trans>
</Text>
)}
</View>
</ScrollView>
<DrawerFooter
onPressFeedback={onPressFeedback}
onPressHelp={onPressHelp}
/>
</View>
)
}
@@ -325,8 +322,17 @@ let DrawerFooter = ({
onPressHelp: () => void
}): React.ReactNode => {
const {_} = useLingui()
const insets = useSafeAreaInsets()
return (
<View style={styles.footer}>
<View
style={[
a.flex_row,
a.gap_sm,
a.flex_wrap,
a.pl_xl,
a.pt_md,
{paddingBottom: Math.max(insets.bottom, a.pb_xl.paddingBottom)},
]}>
<Button
label={_(msg`Send feedback`)}
size="small"
@@ -356,7 +362,7 @@ let DrawerFooter = ({
}
DrawerFooter = React.memo(DrawerFooter)
interface MenuItemProps extends ComponentProps<typeof TouchableOpacity> {
interface MenuItemProps extends ComponentProps<typeof PressableScale> {
icon: JSX.Element
label: string
count?: string
@@ -371,20 +377,14 @@ let SearchMenuItem = ({
onPress: () => void
}): React.ReactNode => {
const {_} = useLingui()
const pal = usePalette('default')
const t = useTheme()
return (
<MenuItem
icon={
isActive ? (
<MagnifyingGlassFilled
style={pal.text as StyleProp<ViewStyle>}
width={iconWidth}
/>
<MagnifyingGlassFilled style={[t.atoms.text]} width={iconWidth} />
) : (
<MagnifyingGlass
style={pal.text as StyleProp<ViewStyle>}
width={iconWidth}
/>
<MagnifyingGlass style={[t.atoms.text]} width={iconWidth} />
)
}
label={_(msg`Search`)}
@@ -405,17 +405,14 @@ let HomeMenuItem = ({
onPress: () => void
}): React.ReactNode => {
const {_} = useLingui()
const pal = usePalette('default')
const t = useTheme()
return (
<MenuItem
icon={
isActive ? (
<HomeFilled
style={pal.text as StyleProp<ViewStyle>}
width={iconWidth}
/>
<HomeFilled style={[t.atoms.text]} width={iconWidth} />
) : (
<Home style={pal.text as StyleProp<ViewStyle>} width={iconWidth} />
<Home style={[t.atoms.text]} width={iconWidth} />
)
}
label={_(msg`Home`)}
@@ -428,6 +425,34 @@ let HomeMenuItem = ({
}
HomeMenuItem = React.memo(HomeMenuItem)
let ChatMenuItem = ({
isActive,
onPress,
}: {
isActive: boolean
onPress: () => void
}): React.ReactNode => {
const {_} = useLingui()
const t = useTheme()
return (
<MenuItem
icon={
isActive ? (
<MessageFilled style={[t.atoms.text]} width={iconWidth} />
) : (
<Message style={[t.atoms.text]} width={iconWidth} />
)
}
label={_(msg`Chats`)}
accessibilityLabel={_(msg`Chats`)}
accessibilityHint=""
bold={isActive}
onPress={onPress}
/>
)
}
ChatMenuItem = React.memo(ChatMenuItem)
let NotificationsMenuItem = ({
isActive,
onPress,
@@ -436,18 +461,15 @@ let NotificationsMenuItem = ({
onPress: () => void
}): React.ReactNode => {
const {_} = useLingui()
const pal = usePalette('default')
const t = useTheme()
const numUnreadNotifications = useUnreadNotifications()
return (
<MenuItem
icon={
isActive ? (
<BellFilled
style={pal.text as StyleProp<ViewStyle>}
width={iconWidth}
/>
<BellFilled style={[t.atoms.text]} width={iconWidth} />
) : (
<Bell style={pal.text as StyleProp<ViewStyle>} width={iconWidth} />
<Bell style={[t.atoms.text]} width={iconWidth} />
)
}
label={_(msg`Notifications`)}
@@ -473,17 +495,14 @@ let FeedsMenuItem = ({
onPress: () => void
}): React.ReactNode => {
const {_} = useLingui()
const pal = usePalette('default')
const t = useTheme()
return (
<MenuItem
icon={
isActive ? (
<HashtagFilled
width={iconWidth}
style={pal.text as FontAwesomeIconStyle}
/>
<HashtagFilled width={iconWidth} style={[t.atoms.text]} />
) : (
<Hashtag width={iconWidth} style={pal.text as FontAwesomeIconStyle} />
<Hashtag width={iconWidth} style={[t.atoms.text]} />
)
}
label={_(msg`Feeds`)}
@@ -498,10 +517,11 @@ FeedsMenuItem = React.memo(FeedsMenuItem)
let ListsMenuItem = ({onPress}: {onPress: () => void}): React.ReactNode => {
const {_} = useLingui()
const pal = usePalette('default')
const t = useTheme()
return (
<MenuItem
icon={<List style={pal.text} width={iconWidth} />}
icon={<List style={[t.atoms.text]} width={iconWidth} />}
label={_(msg`Lists`)}
accessibilityLabel={_(msg`Lists`)}
accessibilityHint=""
@@ -519,20 +539,14 @@ let ProfileMenuItem = ({
onPress: () => void
}): React.ReactNode => {
const {_} = useLingui()
const pal = usePalette('default')
const t = useTheme()
return (
<MenuItem
icon={
isActive ? (
<UserCircleFilled
style={pal.text as StyleProp<ViewStyle>}
width={iconWidth}
/>
<UserCircleFilled style={[t.atoms.text]} width={iconWidth} />
) : (
<UserCircle
style={pal.text as StyleProp<ViewStyle>}
width={iconWidth}
/>
<UserCircle style={[t.atoms.text]} width={iconWidth} />
)
}
label={_(msg`Profile`)}
@@ -546,12 +560,10 @@ ProfileMenuItem = React.memo(ProfileMenuItem)
let SettingsMenuItem = ({onPress}: {onPress: () => void}): React.ReactNode => {
const {_} = useLingui()
const pal = usePalette('default')
const t = useTheme()
return (
<MenuItem
icon={
<Settings style={pal.text as StyleProp<ViewStyle>} width={iconWidth} />
}
icon={<Settings style={[t.atoms.text]} width={iconWidth} />}
label={_(msg`Settings`)}
accessibilityLabel={_(msg`Settings`)}
accessibilityHint=""
@@ -569,142 +581,58 @@ function MenuItem({
bold,
onPress,
}: MenuItemProps) {
const pal = usePalette('default')
const t = useTheme()
return (
<TouchableOpacity
<PressableScale
testID={`menuItemButton-${label}`}
style={styles.menuItem}
style={[a.flex_row, a.align_center, a.gap_sm, {paddingVertical: 10}]}
onPress={onPress}
accessibilityRole="tab"
accessibilityLabel={accessibilityLabel}
accessibilityHint="">
<View style={[styles.menuItemIconWrapper]}>
accessibilityHint=""
targetScale={0.95}>
<View style={[a.relative]}>
{icon}
{count ? (
<View
style={[
styles.menuItemCount,
a.rounded_full,
count.length > 2
? styles.menuItemCountHundreds
: count.length > 1
? styles.menuItemCountTens
: undefined,
a.absolute,
a.inset_0,
a.align_end,
{top: -4, right: a.gap_sm.gap * -1},
]}>
<Text
style={[styles.menuItemCountLabel, a.font_bold]}
numberOfLines={1}>
{count}
</Text>
<View
style={[
a.rounded_full,
{
right: count.length === 1 ? 6 : 0,
paddingHorizontal: 4,
paddingVertical: 1,
backgroundColor: t.palette.primary_500,
},
]}>
<Text
style={[
a.text_xs,
a.leading_tight,
a.font_bold,
{
fontVariant: ['tabular-nums'],
color: colors.white,
},
]}
numberOfLines={1}>
{count}
</Text>
</View>
</View>
) : undefined}
</View>
<Text
type={bold ? '2xl-bold' : '2xl'}
style={[pal.text, s.flex1]}
style={[a.flex_1, a.text_2xl, bold && a.font_bold]}
numberOfLines={1}>
{label}
</Text>
</TouchableOpacity>
</PressableScale>
)
}
const styles = StyleSheet.create({
view: {
flex: 1,
paddingBottom: 50,
maxWidth: 300,
},
viewDarkMode: {
backgroundColor: '#1B1919',
},
main: {
paddingHorizontal: 20,
paddingTop: 20,
},
smallSpacer: {
height: 20,
},
profileCardDisplayName: {
marginTop: 20,
paddingRight: 30,
},
profileCardHandle: {
marginTop: 4,
paddingRight: 30,
},
profileCardFollowers: {
marginTop: 16,
},
menuItem: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 16,
},
menuItemIconWrapper: {
width: 24,
height: 24,
alignItems: 'center',
justifyContent: 'center',
marginRight: 12,
},
menuItemCount: {
position: 'absolute',
width: 'auto',
right: -6,
top: -4,
backgroundColor: colors.blue3,
paddingHorizontal: 4,
paddingBottom: 1,
borderRadius: 6,
},
menuItemCountTens: {
width: 25,
},
menuItemCountHundreds: {
right: -12,
width: 34,
},
menuItemCountLabel: {
fontSize: 12,
fontVariant: ['tabular-nums'],
color: colors.white,
},
inviteCodes: {
paddingLeft: 0,
paddingVertical: 8,
flexDirection: 'row',
},
inviteCodesIcon: {
marginRight: 6,
flexShrink: 0,
marginTop: 2,
},
footer: {
flexWrap: 'wrap',
flexDirection: 'row',
gap: 8,
paddingRight: 20,
paddingTop: 20,
paddingLeft: 20,
},
footerBtn: {
flexDirection: 'row',
alignItems: 'center',
padding: 10,
borderRadius: 25,
},
footerBtnFeedback: {
paddingHorizontal: 20,
},
footerBtnFeedbackLight: {
backgroundColor: '#DDEFFF',
},
footerBtnFeedbackDark: {
backgroundColor: colors.blue6,
},
})
src/view/shell/NavSignupCard.tsx
+21 -31
View File
@@ -5,18 +5,15 @@ import {useLingui} from '@lingui/react'
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
import {useCloseAllActiveElements} from '#/state/util'
import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles'
import {Button} from '#/view/com/util/forms/Button'
import {Text} from '#/view/com/util/text/Text'
import {Logo} from '#/view/icons/Logo'
import {atoms as a} from '#/alf'
import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
import {Button, ButtonText} from '#/components/Button'
import {Link} from '#/components/Link'
import {Text} from '#/components/Typography'
let NavSignupCard = ({}: {}): React.ReactNode => {
const {_} = useLingui()
const pal = usePalette('default')
const {requestSwitchToAccount} = useLoggedOutViewControls()
const closeAllActiveElements = useCloseAllActiveElements()
@@ -32,45 +29,38 @@ let NavSignupCard = ({}: {}): React.ReactNode => {
}, [requestSwitchToAccount, closeAllActiveElements])
return (
<View
style={{
alignItems: 'flex-start',
paddingTop: 6,
marginBottom: 24,
}}>
<View style={[{maxWidth: 200}]}>
<Link to="/" label="Bluesky - Home">
<Logo width={48} />
<Logo width={32} />
</Link>
<View style={{paddingTop: 18}}>
<Text type="md-bold" style={[pal.text]}>
<Trans>Sign up or sign in to join the conversation</Trans>
<View style={[a.pt_lg]}>
<Text
style={[a.text_3xl, a.font_heavy, {lineHeight: a.text_3xl.fontSize}]}>
<Trans>Join the conversation</Trans>
</Text>
</View>
<View
style={{
flexDirection: 'row',
flexWrap: 'wrap',
paddingTop: 12,
gap: 8,
}}>
<View style={[a.flex_row, a.flex_wrap, a.gap_sm, a.pt_md]}>
<Button
onPress={showCreateAccount}
accessibilityHint={_(msg`Sign up`)}
accessibilityLabel={_(msg`Sign up`)}>
<Text type="md" style={[{color: 'white'}, s.bold]}>
label={_(msg`Sign up`)}
size="small"
variant="solid"
color="primary">
<ButtonText>
<Trans>Sign up</Trans>
</Text>
</ButtonText>
</Button>
<Button
type="default"
onPress={showSignIn}
accessibilityHint={_(msg`Sign in`)}
accessibilityLabel={_(msg`Sign in`)}>
<Text type="md" style={[pal.text, s.bold]}>
label={_(msg`Sign in`)}
size="small"
variant="solid"
color="secondary">
<ButtonText>
<Trans>Sign in</Trans>
</Text>
</ButtonText>
</Button>
</View>
src/view/shell/index.tsx
+1
View File
@@ -96,6 +96,7 @@ function ShellInner() {
<ErrorBoundary>
<Drawer
renderDrawerContent={renderDrawerContent}
drawerStyle={{width: Math.min(400, winDim.width * 0.8)}}
open={isDrawerOpen}
onOpen={onOpenDrawer}
onClose={onCloseDrawer}