bas.sh
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {View} from 'react-native'
2import {msg, Trans} from '@lingui/macro'
3import {useLingui} from '@lingui/react'
4
5import {atoms as a, platform, tokens, useBreakpoints, useTheme} from '#/alf'
6import {Button, ButtonText} from '#/components/Button'
7import {useDialogContext} from '#/components/Dialog'
8import {
9 ScreenID,
10 type ScreenProps,
11} from '#/components/dialogs/EmailDialog/types'
12import {Divider} from '#/components/Divider'
13import {GradientFill} from '#/components/GradientFill'
14import {ShieldCheck_Stroke2_Corner0_Rounded as ShieldIcon} from '#/components/icons/Shield'
15import {Text} from '#/components/Typography'
16
17export function VerificationReminder({
18 showScreen,
19}: ScreenProps<ScreenID.VerificationReminder>) {
20 const t = useTheme()
21 const {_} = useLingui()
22 const {gtPhone, gtMobile} = useBreakpoints()
23 const control = useDialogContext()
24
25 const dialogPadding = gtMobile ? a.p_2xl.padding : a.p_xl.padding
26
27 // FIXME: the usage of "tokens.gradients.summer" here is temporary,
28 // its the closest thats built into bluesky that matches witchskys color scheme
29 // someone, preferbly xan, should edit src/alf/tokens.ts to have proper witchsky colors
30 // maybe even support all the other themes too?
31
32 return (
33 <View style={[a.gap_lg]}>
34 <View
35 style={[
36 a.absolute,
37 {
38 top: platform({web: dialogPadding, default: a.p_2xl.padding}) * -1,
39 left: dialogPadding * -1,
40 right: dialogPadding * -1,
41 height: 150,
42 },
43 ]}>
44 <View
45 style={[
46 a.absolute,
47 a.inset_0,
48 a.align_center,
49 a.justify_center,
50 a.overflow_hidden,
51 a.pt_md,
52 t.atoms.bg_contrast_100,
53 {
54 borderTopLeftRadius: a.rounded_md.borderRadius,
55 borderTopRightRadius: a.rounded_md.borderRadius,
56 },
57 ]}>
58 <GradientFill gradient={tokens.gradients.summer} />
59 <ShieldIcon width={64} fill="white" style={[a.z_10]} />
60 </View>
61 </View>
62
63 <View style={[a.mb_xs, {height: 150 - dialogPadding}]} />
64
65 <View style={[a.gap_sm]}>
66 <Text style={[a.text_xl, a.font_bold]}>
67 <Trans>Please verify your email</Trans>
68 </Text>
69 <Text style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
70 <Trans>
71 Your email has not yet been verified. Please verify your email in
72 order to enjoy all the features of Witchsky.
73 </Trans>
74 </Text>
75 </View>
76
77 <Divider />
78
79 <View style={[a.gap_sm, gtPhone && [a.flex_row_reverse]]}>
80 <Button
81 label={_(msg`Get started`)}
82 variant="solid"
83 color="primary"
84 size="large"
85 onPress={() =>
86 showScreen({
87 id: ScreenID.Verify,
88 })
89 }>
90 <ButtonText>
91 <Trans>Get started</Trans>
92 </ButtonText>
93 </Button>
94 <Button
95 label={_(msg`Maybe later`)}
96 accessibilityHint={_(msg`Snoozes the reminder`)}
97 variant="ghost"
98 color="secondary"
99 size="large"
100 onPress={() => control.close()}>
101 <ButtonText>
102 <Trans>Maybe later</Trans>
103 </ButtonText>
104 </Button>
105 </View>
106 </View>
107 )
108}