forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Clean up drawer (#5761)
* 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>
authored by
Samuel Newman
Samuel Newman
Eric Bailey
and committed by
GitHub
21542c4a
6bc00f8d
+263
-344
+241
-313
src/view/shell/Drawer.tsx
+241
-313
src/view/shell/Drawer.tsx
···
1
1
import React, {ComponentProps} from 'react'
2
-
import {
3
-
Linking,
4
-
SafeAreaView,
5
-
ScrollView,
6
-
StyleProp,
7
-
StyleSheet,
8
-
TouchableOpacity,
9
-
View,
10
-
ViewStyle,
11
-
} from 'react-native'
12
-
import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
2
+
import {Linking, ScrollView, TouchableOpacity, View} from 'react-native'
3
+
import {useSafeAreaInsets} from 'react-native-safe-area-context'
13
4
import {msg, Plural, Trans} from '@lingui/macro'
14
5
import {useLingui} from '@lingui/react'
15
6
import {StackActions, useNavigation} from '@react-navigation/native'
16
7
17
8
import {FEEDBACK_FORM_URL, HELP_DESK_URL} from '#/lib/constants'
9
+
import {PressableScale} from '#/lib/custom-animations/PressableScale'
18
10
import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
19
-
import {usePalette} from '#/lib/hooks/usePalette'
20
11
import {getTabState, TabState} from '#/lib/routes/helpers'
21
12
import {NavigationProp} from '#/lib/routes/types'
22
-
import {colors, s} from '#/lib/styles'
23
-
import {useTheme} from '#/lib/ThemeContext'
13
+
import {sanitizeHandle} from '#/lib/strings/handles'
14
+
import {colors} from '#/lib/styles'
24
15
import {isWeb} from '#/platform/detection'
25
16
import {emitSoftReset} from '#/state/events'
26
17
import {useKawaiiMode} from '#/state/preferences/kawaii'
···
29
20
import {SessionAccount, useSession} from '#/state/session'
30
21
import {useSetDrawerOpen} from '#/state/shell'
31
22
import {formatCount} from '#/view/com/util/numeric/format'
32
-
import {Text} from '#/view/com/util/text/Text'
33
23
import {UserAvatar} from '#/view/com/util/UserAvatar'
34
24
import {NavSignupCard} from '#/view/shell/NavSignupCard'
35
25
import {atoms as a} from '#/alf'
36
-
import {useTheme as useAlfTheme} from '#/alf'
26
+
import {useTheme} from '#/alf'
37
27
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
28
+
import {Divider} from '#/components/Divider'
38
29
import {
39
30
Bell_Filled_Corner0_Rounded as BellFilled,
40
31
Bell_Stroke2_Corner0_Rounded as Bell,
···
50
41
} from '#/components/icons/HomeOpen'
51
42
import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as MagnifyingGlassFilled} from '#/components/icons/MagnifyingGlass'
52
43
import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2'
53
-
import {Message_Stroke2_Corner0_Rounded as Message} from '#/components/icons/Message'
44
+
import {
45
+
Message_Stroke2_Corner0_Rounded as Message,
46
+
Message_Stroke2_Corner0_Rounded_Filled as MessageFilled,
47
+
} from '#/components/icons/Message'
54
48
import {SettingsGear2_Stroke2_Corner0_Rounded as Settings} from '#/components/icons/SettingsGear2'
55
49
import {
56
50
UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
57
51
UserCircle_Stroke2_Corner0_Rounded as UserCircle,
58
52
} from '#/components/icons/UserCircle'
59
-
import {TextLink} from '../com/util/Link'
53
+
import {InlineLinkText} from '#/components/Link'
54
+
import {Text} from '#/components/Typography'
60
55
61
-
const iconWidth = 28
56
+
const iconWidth = 26
62
57
63
58
let DrawerProfileCard = ({
64
59
account,
···
68
63
onPressProfile: () => void
69
64
}): React.ReactNode => {
70
65
const {_, i18n} = useLingui()
71
-
const pal = usePalette('default')
66
+
const t = useTheme()
72
67
const {data: profile} = useProfileQuery({did: account.did})
73
68
74
69
return (
···
76
71
testID="profileCardButton"
77
72
accessibilityLabel={_(msg`Profile`)}
78
73
accessibilityHint={_(msg`Navigates to your profile`)}
79
-
onPress={onPressProfile}>
74
+
onPress={onPressProfile}
75
+
style={[a.gap_sm]}>
80
76
<UserAvatar
81
-
size={80}
77
+
size={52}
82
78
avatar={profile?.avatar}
83
79
// See https://github.com/bluesky-social/social-app/pull/1801:
84
80
usePlainRNImage={true}
85
81
type={profile?.associated?.labeler ? 'labeler' : 'user'}
86
82
/>
87
-
<Text
88
-
type="title-lg"
89
-
style={[pal.text, s.bold, styles.profileCardDisplayName]}
90
-
numberOfLines={1}>
91
-
{profile?.displayName || account.handle}
92
-
</Text>
93
-
<Text
94
-
type="2xl"
95
-
style={[pal.textLight, styles.profileCardHandle]}
96
-
numberOfLines={1}>
97
-
@{account.handle}
98
-
</Text>
99
-
<View
100
-
style={[
101
-
styles.profileCardFollowers,
102
-
a.gap_xs,
103
-
a.flex_row,
104
-
a.align_center,
105
-
a.flex_wrap,
106
-
]}>
107
-
<Text type="xl" style={pal.textLight}>
108
-
<Trans>
109
-
<Text type="xl-medium" style={pal.text}>
110
-
{formatCount(i18n, profile?.followersCount ?? 0)}
111
-
</Text>{' '}
112
-
<Plural
113
-
value={profile?.followersCount || 0}
114
-
one="follower"
115
-
other="followers"
116
-
/>
117
-
</Trans>
83
+
<View style={[a.gap_2xs]}>
84
+
<Text
85
+
emoji
86
+
style={[a.font_heavy, a.text_xl, a.mt_2xs, a.leading_tight]}
87
+
numberOfLines={1}>
88
+
{profile?.displayName || account.handle}
118
89
</Text>
119
-
<Text type="xl" style={pal.textLight}>
120
-
·
121
-
</Text>
122
-
<Text type="xl" style={pal.textLight}>
123
-
<Trans>
124
-
<Text type="xl-medium" style={pal.text}>
125
-
{formatCount(i18n, profile?.followsCount ?? 0)}
126
-
</Text>{' '}
127
-
<Plural
128
-
value={profile?.followsCount || 0}
129
-
one="following"
130
-
other="following"
131
-
/>
132
-
</Trans>
90
+
<Text
91
+
emoji
92
+
style={[t.atoms.text_contrast_medium, a.text_md, a.leading_tight]}
93
+
numberOfLines={1}>
94
+
{sanitizeHandle(account.handle, '@')}
133
95
</Text>
134
96
</View>
97
+
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
98
+
<Trans>
99
+
<Text style={[a.text_md, a.font_bold]}>
100
+
{formatCount(i18n, profile?.followersCount ?? 0)}
101
+
</Text>{' '}
102
+
<Plural
103
+
value={profile?.followersCount || 0}
104
+
one="follower"
105
+
other="followers"
106
+
/>
107
+
</Trans>{' '}
108
+
·{' '}
109
+
<Trans>
110
+
<Text style={[a.text_md, a.font_bold]}>
111
+
{formatCount(i18n, profile?.followsCount ?? 0)}
112
+
</Text>{' '}
113
+
<Plural
114
+
value={profile?.followsCount || 0}
115
+
one="following"
116
+
other="following"
117
+
/>
118
+
</Trans>
119
+
</Text>
135
120
</TouchableOpacity>
136
121
)
137
122
}
···
139
124
export {DrawerProfileCard}
140
125
141
126
let DrawerContent = ({}: {}): React.ReactNode => {
142
-
const theme = useTheme()
143
-
const t = useAlfTheme()
144
-
const pal = usePalette('default')
127
+
const t = useTheme()
145
128
const {_} = useLingui()
129
+
const insets = useSafeAreaInsets()
146
130
const setDrawerOpen = useSetDrawerOpen()
147
131
const navigation = useNavigation<NavigationProp>()
148
-
const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
149
-
useNavigationTabState()
132
+
const {
133
+
isAtHome,
134
+
isAtSearch,
135
+
isAtFeeds,
136
+
isAtNotifications,
137
+
isAtMyProfile,
138
+
isAtMessages,
139
+
} = useNavigationTabState()
150
140
const {hasSession, currentAccount} = useSession()
151
141
const kawaii = useKawaiiMode()
152
142
···
184
174
185
175
const onPressSearch = React.useCallback(
186
176
() => onPressTab('Search'),
177
+
[onPressTab],
178
+
)
179
+
180
+
const onPressMessages = React.useCallback(
181
+
() => onPressTab('Messages'),
187
182
[onPressTab],
188
183
)
189
184
···
228
223
// =
229
224
230
225
return (
231
-
<View
232
-
testID="drawer"
233
-
style={[
234
-
styles.view,
235
-
theme.colorScheme === 'light' ? pal.view : t.atoms.bg_contrast_25,
236
-
]}>
237
-
<SafeAreaView style={s.flex1}>
238
-
<ScrollView style={styles.main}>
239
-
{hasSession && currentAccount ? (
240
-
<View style={{}}>
241
-
<DrawerProfileCard
242
-
account={currentAccount}
243
-
onPressProfile={onPressProfile}
244
-
/>
245
-
</View>
246
-
) : (
247
-
<View style={{paddingRight: 20}}>
248
-
<NavSignupCard />
249
-
</View>
250
-
)}
226
+
<View testID="drawer" style={[a.flex_1, t.atoms.bg]}>
227
+
<ScrollView
228
+
style={[a.flex_1]}
229
+
contentContainerStyle={[
230
+
a.px_xl,
231
+
{
232
+
paddingTop: Math.max(
233
+
insets.top + a.pt_xl.paddingTop,
234
+
a.pt_xl.paddingTop,
235
+
),
236
+
},
237
+
]}>
238
+
{hasSession && currentAccount ? (
239
+
<DrawerProfileCard
240
+
account={currentAccount}
241
+
onPressProfile={onPressProfile}
242
+
/>
243
+
) : (
244
+
<View style={[a.pr_xl]}>
245
+
<NavSignupCard />
246
+
</View>
247
+
)}
251
248
252
-
{hasSession ? (
253
-
<>
254
-
<View style={{height: 16}} />
255
-
<SearchMenuItem isActive={isAtSearch} onPress={onPressSearch} />
256
-
<HomeMenuItem isActive={isAtHome} onPress={onPressHome} />
257
-
<NotificationsMenuItem
258
-
isActive={isAtNotifications}
259
-
onPress={onPressNotifications}
260
-
/>
261
-
<FeedsMenuItem isActive={isAtFeeds} onPress={onPressMyFeeds} />
262
-
<ListsMenuItem onPress={onPressLists} />
263
-
<ProfileMenuItem
264
-
isActive={isAtMyProfile}
265
-
onPress={onPressProfile}
266
-
/>
267
-
<SettingsMenuItem onPress={onPressSettings} />
268
-
</>
269
-
) : (
270
-
<>
271
-
<HomeMenuItem isActive={isAtHome} onPress={onPressHome} />
272
-
<FeedsMenuItem isActive={isAtFeeds} onPress={onPressMyFeeds} />
273
-
<SearchMenuItem isActive={isAtSearch} onPress={onPressSearch} />
274
-
</>
275
-
)}
276
-
277
-
<View style={styles.smallSpacer} />
249
+
<Divider style={[a.mt_xl, a.mb_sm]} />
278
250
279
-
<View style={[{flexWrap: 'wrap', gap: 12}, s.flexCol]}>
280
-
<TextLink
281
-
type="md"
282
-
style={pal.link}
283
-
href="https://bsky.social/about/support/tos"
284
-
text={_(msg`Terms of Service`)}
251
+
{hasSession ? (
252
+
<>
253
+
<SearchMenuItem isActive={isAtSearch} onPress={onPressSearch} />
254
+
<HomeMenuItem isActive={isAtHome} onPress={onPressHome} />
255
+
<ChatMenuItem isActive={isAtMessages} onPress={onPressMessages} />
256
+
<NotificationsMenuItem
257
+
isActive={isAtNotifications}
258
+
onPress={onPressNotifications}
285
259
/>
286
-
<TextLink
287
-
type="md"
288
-
style={pal.link}
289
-
href="https://bsky.social/about/support/privacy-policy"
290
-
text={_(msg`Privacy Policy`)}
260
+
<FeedsMenuItem isActive={isAtFeeds} onPress={onPressMyFeeds} />
261
+
<ListsMenuItem onPress={onPressLists} />
262
+
<ProfileMenuItem
263
+
isActive={isAtMyProfile}
264
+
onPress={onPressProfile}
291
265
/>
292
-
{kawaii && (
293
-
<Text type="md" style={pal.textLight}>
294
-
Logo by{' '}
295
-
<TextLink
296
-
type="md"
297
-
href="/profile/sawaratsuki.bsky.social"
298
-
text="@sawaratsuki.bsky.social"
299
-
style={pal.link}
300
-
/>
301
-
</Text>
302
-
)}
303
-
</View>
266
+
<SettingsMenuItem onPress={onPressSettings} />
267
+
</>
268
+
) : (
269
+
<>
270
+
<HomeMenuItem isActive={isAtHome} onPress={onPressHome} />
271
+
<FeedsMenuItem isActive={isAtFeeds} onPress={onPressMyFeeds} />
272
+
<SearchMenuItem isActive={isAtSearch} onPress={onPressSearch} />
273
+
</>
274
+
)}
304
275
305
-
<View style={styles.smallSpacer} />
306
-
<View style={styles.smallSpacer} />
307
-
</ScrollView>
276
+
<Divider style={[a.mb_xl, a.mt_sm]} />
308
277
309
-
<DrawerFooter
310
-
onPressFeedback={onPressFeedback}
311
-
onPressHelp={onPressHelp}
312
-
/>
313
-
</SafeAreaView>
278
+
<View style={[a.flex_col, a.gap_md, a.flex_wrap]}>
279
+
<InlineLinkText
280
+
style={[a.text_md]}
281
+
label={_(msg`Terms of Service`)}
282
+
to="https://bsky.social/about/support/tos">
283
+
<Trans>Terms of Service</Trans>
284
+
</InlineLinkText>
285
+
<InlineLinkText
286
+
style={[a.text_md]}
287
+
to="https://bsky.social/about/support/privacy-policy"
288
+
label={_(msg`Privacy Policy`)}>
289
+
<Trans>Privacy Policy</Trans>
290
+
</InlineLinkText>
291
+
{kawaii && (
292
+
<Text style={t.atoms.text_contrast_medium}>
293
+
<Trans>
294
+
Logo by{' '}
295
+
<InlineLinkText
296
+
style={[a.text_md]}
297
+
to="/profile/sawaratsuki.bsky.social"
298
+
label="@sawaratsuki.bsky.social">
299
+
@sawaratsuki.bsky.social
300
+
</InlineLinkText>
301
+
</Trans>
302
+
</Text>
303
+
)}
304
+
</View>
305
+
</ScrollView>
306
+
307
+
<DrawerFooter
308
+
onPressFeedback={onPressFeedback}
309
+
onPressHelp={onPressHelp}
310
+
/>
314
311
</View>
315
312
)
316
313
}
···
325
322
onPressHelp: () => void
326
323
}): React.ReactNode => {
327
324
const {_} = useLingui()
325
+
const insets = useSafeAreaInsets()
328
326
return (
329
-
<View style={styles.footer}>
327
+
<View
328
+
style={[
329
+
a.flex_row,
330
+
a.gap_sm,
331
+
a.flex_wrap,
332
+
a.pl_xl,
333
+
a.pt_md,
334
+
{paddingBottom: Math.max(insets.bottom, a.pb_xl.paddingBottom)},
335
+
]}>
330
336
<Button
331
337
label={_(msg`Send feedback`)}
332
338
size="small"
···
356
362
}
357
363
DrawerFooter = React.memo(DrawerFooter)
358
364
359
-
interface MenuItemProps extends ComponentProps<typeof TouchableOpacity> {
365
+
interface MenuItemProps extends ComponentProps<typeof PressableScale> {
360
366
icon: JSX.Element
361
367
label: string
362
368
count?: string
···
371
377
onPress: () => void
372
378
}): React.ReactNode => {
373
379
const {_} = useLingui()
374
-
const pal = usePalette('default')
380
+
const t = useTheme()
375
381
return (
376
382
<MenuItem
377
383
icon={
378
384
isActive ? (
379
-
<MagnifyingGlassFilled
380
-
style={pal.text as StyleProp<ViewStyle>}
381
-
width={iconWidth}
382
-
/>
385
+
<MagnifyingGlassFilled style={[t.atoms.text]} width={iconWidth} />
383
386
) : (
384
-
<MagnifyingGlass
385
-
style={pal.text as StyleProp<ViewStyle>}
386
-
width={iconWidth}
387
-
/>
387
+
<MagnifyingGlass style={[t.atoms.text]} width={iconWidth} />
388
388
)
389
389
}
390
390
label={_(msg`Search`)}
···
405
405
onPress: () => void
406
406
}): React.ReactNode => {
407
407
const {_} = useLingui()
408
-
const pal = usePalette('default')
408
+
const t = useTheme()
409
409
return (
410
410
<MenuItem
411
411
icon={
412
412
isActive ? (
413
-
<HomeFilled
414
-
style={pal.text as StyleProp<ViewStyle>}
415
-
width={iconWidth}
416
-
/>
413
+
<HomeFilled style={[t.atoms.text]} width={iconWidth} />
417
414
) : (
418
-
<Home style={pal.text as StyleProp<ViewStyle>} width={iconWidth} />
415
+
<Home style={[t.atoms.text]} width={iconWidth} />
419
416
)
420
417
}
421
418
label={_(msg`Home`)}
···
428
425
}
429
426
HomeMenuItem = React.memo(HomeMenuItem)
430
427
428
+
let ChatMenuItem = ({
429
+
isActive,
430
+
onPress,
431
+
}: {
432
+
isActive: boolean
433
+
onPress: () => void
434
+
}): React.ReactNode => {
435
+
const {_} = useLingui()
436
+
const t = useTheme()
437
+
return (
438
+
<MenuItem
439
+
icon={
440
+
isActive ? (
441
+
<MessageFilled style={[t.atoms.text]} width={iconWidth} />
442
+
) : (
443
+
<Message style={[t.atoms.text]} width={iconWidth} />
444
+
)
445
+
}
446
+
label={_(msg`Chats`)}
447
+
accessibilityLabel={_(msg`Chats`)}
448
+
accessibilityHint=""
449
+
bold={isActive}
450
+
onPress={onPress}
451
+
/>
452
+
)
453
+
}
454
+
ChatMenuItem = React.memo(ChatMenuItem)
455
+
431
456
let NotificationsMenuItem = ({
432
457
isActive,
433
458
onPress,
···
436
461
onPress: () => void
437
462
}): React.ReactNode => {
438
463
const {_} = useLingui()
439
-
const pal = usePalette('default')
464
+
const t = useTheme()
440
465
const numUnreadNotifications = useUnreadNotifications()
441
466
return (
442
467
<MenuItem
443
468
icon={
444
469
isActive ? (
445
-
<BellFilled
446
-
style={pal.text as StyleProp<ViewStyle>}
447
-
width={iconWidth}
448
-
/>
470
+
<BellFilled style={[t.atoms.text]} width={iconWidth} />
449
471
) : (
450
-
<Bell style={pal.text as StyleProp<ViewStyle>} width={iconWidth} />
472
+
<Bell style={[t.atoms.text]} width={iconWidth} />
451
473
)
452
474
}
453
475
label={_(msg`Notifications`)}
···
473
495
onPress: () => void
474
496
}): React.ReactNode => {
475
497
const {_} = useLingui()
476
-
const pal = usePalette('default')
498
+
const t = useTheme()
477
499
return (
478
500
<MenuItem
479
501
icon={
480
502
isActive ? (
481
-
<HashtagFilled
482
-
width={iconWidth}
483
-
style={pal.text as FontAwesomeIconStyle}
484
-
/>
503
+
<HashtagFilled width={iconWidth} style={[t.atoms.text]} />
485
504
) : (
486
-
<Hashtag width={iconWidth} style={pal.text as FontAwesomeIconStyle} />
505
+
<Hashtag width={iconWidth} style={[t.atoms.text]} />
487
506
)
488
507
}
489
508
label={_(msg`Feeds`)}
···
498
517
499
518
let ListsMenuItem = ({onPress}: {onPress: () => void}): React.ReactNode => {
500
519
const {_} = useLingui()
501
-
const pal = usePalette('default')
520
+
const t = useTheme()
521
+
502
522
return (
503
523
<MenuItem
504
-
icon={<List style={pal.text} width={iconWidth} />}
524
+
icon={<List style={[t.atoms.text]} width={iconWidth} />}
505
525
label={_(msg`Lists`)}
506
526
accessibilityLabel={_(msg`Lists`)}
507
527
accessibilityHint=""
···
519
539
onPress: () => void
520
540
}): React.ReactNode => {
521
541
const {_} = useLingui()
522
-
const pal = usePalette('default')
542
+
const t = useTheme()
523
543
return (
524
544
<MenuItem
525
545
icon={
526
546
isActive ? (
527
-
<UserCircleFilled
528
-
style={pal.text as StyleProp<ViewStyle>}
529
-
width={iconWidth}
530
-
/>
547
+
<UserCircleFilled style={[t.atoms.text]} width={iconWidth} />
531
548
) : (
532
-
<UserCircle
533
-
style={pal.text as StyleProp<ViewStyle>}
534
-
width={iconWidth}
535
-
/>
549
+
<UserCircle style={[t.atoms.text]} width={iconWidth} />
536
550
)
537
551
}
538
552
label={_(msg`Profile`)}
···
546
560
547
561
let SettingsMenuItem = ({onPress}: {onPress: () => void}): React.ReactNode => {
548
562
const {_} = useLingui()
549
-
const pal = usePalette('default')
563
+
const t = useTheme()
550
564
return (
551
565
<MenuItem
552
-
icon={
553
-
<Settings style={pal.text as StyleProp<ViewStyle>} width={iconWidth} />
554
-
}
566
+
icon={<Settings style={[t.atoms.text]} width={iconWidth} />}
555
567
label={_(msg`Settings`)}
556
568
accessibilityLabel={_(msg`Settings`)}
557
569
accessibilityHint=""
···
569
581
bold,
570
582
onPress,
571
583
}: MenuItemProps) {
572
-
const pal = usePalette('default')
584
+
const t = useTheme()
573
585
return (
574
-
<TouchableOpacity
586
+
<PressableScale
575
587
testID={`menuItemButton-${label}`}
576
-
style={styles.menuItem}
588
+
style={[a.flex_row, a.align_center, a.gap_sm, {paddingVertical: 10}]}
577
589
onPress={onPress}
578
590
accessibilityRole="tab"
579
591
accessibilityLabel={accessibilityLabel}
580
-
accessibilityHint="">
581
-
<View style={[styles.menuItemIconWrapper]}>
592
+
accessibilityHint=""
593
+
targetScale={0.95}>
594
+
<View style={[a.relative]}>
582
595
{icon}
583
596
{count ? (
584
597
<View
585
598
style={[
586
-
styles.menuItemCount,
587
-
a.rounded_full,
588
-
count.length > 2
589
-
? styles.menuItemCountHundreds
590
-
: count.length > 1
591
-
? styles.menuItemCountTens
592
-
: undefined,
599
+
a.absolute,
600
+
a.inset_0,
601
+
a.align_end,
602
+
{top: -4, right: a.gap_sm.gap * -1},
593
603
]}>
594
-
<Text
595
-
style={[styles.menuItemCountLabel, a.font_bold]}
596
-
numberOfLines={1}>
597
-
{count}
598
-
</Text>
604
+
<View
605
+
style={[
606
+
a.rounded_full,
607
+
{
608
+
right: count.length === 1 ? 6 : 0,
609
+
paddingHorizontal: 4,
610
+
paddingVertical: 1,
611
+
backgroundColor: t.palette.primary_500,
612
+
},
613
+
]}>
614
+
<Text
615
+
style={[
616
+
a.text_xs,
617
+
a.leading_tight,
618
+
a.font_bold,
619
+
{
620
+
fontVariant: ['tabular-nums'],
621
+
color: colors.white,
622
+
},
623
+
]}
624
+
numberOfLines={1}>
625
+
{count}
626
+
</Text>
627
+
</View>
599
628
</View>
600
629
) : undefined}
601
630
</View>
602
631
<Text
603
-
type={bold ? '2xl-bold' : '2xl'}
604
-
style={[pal.text, s.flex1]}
632
+
style={[a.flex_1, a.text_2xl, bold && a.font_bold]}
605
633
numberOfLines={1}>
606
634
{label}
607
635
</Text>
608
-
</TouchableOpacity>
636
+
</PressableScale>
609
637
)
610
638
}
611
-
612
-
const styles = StyleSheet.create({
613
-
view: {
614
-
flex: 1,
615
-
paddingBottom: 50,
616
-
maxWidth: 300,
617
-
},
618
-
viewDarkMode: {
619
-
backgroundColor: '#1B1919',
620
-
},
621
-
main: {
622
-
paddingHorizontal: 20,
623
-
paddingTop: 20,
624
-
},
625
-
smallSpacer: {
626
-
height: 20,
627
-
},
628
-
629
-
profileCardDisplayName: {
630
-
marginTop: 20,
631
-
paddingRight: 30,
632
-
},
633
-
profileCardHandle: {
634
-
marginTop: 4,
635
-
paddingRight: 30,
636
-
},
637
-
profileCardFollowers: {
638
-
marginTop: 16,
639
-
},
640
-
641
-
menuItem: {
642
-
flexDirection: 'row',
643
-
alignItems: 'center',
644
-
paddingVertical: 16,
645
-
},
646
-
menuItemIconWrapper: {
647
-
width: 24,
648
-
height: 24,
649
-
alignItems: 'center',
650
-
justifyContent: 'center',
651
-
marginRight: 12,
652
-
},
653
-
menuItemCount: {
654
-
position: 'absolute',
655
-
width: 'auto',
656
-
right: -6,
657
-
top: -4,
658
-
backgroundColor: colors.blue3,
659
-
paddingHorizontal: 4,
660
-
paddingBottom: 1,
661
-
borderRadius: 6,
662
-
},
663
-
menuItemCountTens: {
664
-
width: 25,
665
-
},
666
-
menuItemCountHundreds: {
667
-
right: -12,
668
-
width: 34,
669
-
},
670
-
menuItemCountLabel: {
671
-
fontSize: 12,
672
-
fontVariant: ['tabular-nums'],
673
-
color: colors.white,
674
-
},
675
-
676
-
inviteCodes: {
677
-
paddingLeft: 0,
678
-
paddingVertical: 8,
679
-
flexDirection: 'row',
680
-
},
681
-
inviteCodesIcon: {
682
-
marginRight: 6,
683
-
flexShrink: 0,
684
-
marginTop: 2,
685
-
},
686
-
687
-
footer: {
688
-
flexWrap: 'wrap',
689
-
flexDirection: 'row',
690
-
gap: 8,
691
-
paddingRight: 20,
692
-
paddingTop: 20,
693
-
paddingLeft: 20,
694
-
},
695
-
footerBtn: {
696
-
flexDirection: 'row',
697
-
alignItems: 'center',
698
-
padding: 10,
699
-
borderRadius: 25,
700
-
},
701
-
footerBtnFeedback: {
702
-
paddingHorizontal: 20,
703
-
},
704
-
footerBtnFeedbackLight: {
705
-
backgroundColor: '#DDEFFF',
706
-
},
707
-
footerBtnFeedbackDark: {
708
-
backgroundColor: colors.blue6,
709
-
},
710
-
})