Something went wrong. Try again.
Bluesky app fork with some witchin' additions 💫 forked from jollywhoppers.com/witchsky.app
Something went wrong. Try again.
3.4 kB · 108 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109import {View} from 'react-native'import {msg, Trans} from '@lingui/macro'import {useLingui} from '@lingui/react'
import {atoms as a, platform, tokens, useBreakpoints, useTheme} from '#/alf'import {Button, ButtonText} from '#/components/Button'import {useDialogContext} from '#/components/Dialog'import { ScreenID, type ScreenProps,} from '#/components/dialogs/EmailDialog/types'import {Divider} from '#/components/Divider'import {GradientFill} from '#/components/GradientFill'import {ShieldCheck_Stroke2_Corner0_Rounded as ShieldIcon} from '#/components/icons/Shield'import {Text} from '#/components/Typography'
export function VerificationReminder({ showScreen,}: ScreenProps<ScreenID.VerificationReminder>) { const t = useTheme() const {_} = useLingui() const {gtPhone, gtMobile} = useBreakpoints() const control = useDialogContext()
const dialogPadding = gtMobile ? a.p_2xl.padding : a.p_xl.padding
// FIXME: the usage of "tokens.gradients.summer" here is temporary, // its the closest thats built into bluesky that matches witchskys color scheme // someone, preferbly xan, should edit src/alf/tokens.ts to have proper witchsky colors // maybe even support all the other themes too?
return ( <View style={[a.gap_lg]}> <View style={[ a.absolute, { top: platform({web: dialogPadding, default: a.p_2xl.padding}) * -1, left: dialogPadding * -1, right: dialogPadding * -1, height: 150, }, ]}> <View style={[ a.absolute, a.inset_0, a.align_center, a.justify_center, a.overflow_hidden, a.pt_md, t.atoms.bg_contrast_100, { borderTopLeftRadius: a.rounded_md.borderRadius, borderTopRightRadius: a.rounded_md.borderRadius, }, ]}> <GradientFill gradient={tokens.gradients.summer} /> <ShieldIcon width={64} fill="white" style={[a.z_10]} /> </View> </View>
<View style={[a.mb_xs, {height: 150 - dialogPadding}]} />
<View style={[a.gap_sm]}> <Text style={[a.text_xl, a.font_bold]}> <Trans>Please verify your email</Trans> </Text> <Text style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}> <Trans> Your email has not yet been verified. Please verify your email in order to enjoy all the features of Witchsky. </Trans> </Text> </View>
<Divider />
<View style={[a.gap_sm, gtPhone && [a.flex_row_reverse]]}> <Button label={_(msg`Get started`)} variant="solid" color="primary" size="large" onPress={() => showScreen({ id: ScreenID.Verify, }) }> <ButtonText> <Trans>Get started</Trans> </ButtonText> </Button> <Button label={_(msg`Maybe later`)} accessibilityHint={_(msg`Snoozes the reminder`)} variant="ghost" color="secondary" size="large" onPress={() => control.close()}> <ButtonText> <Trans>Maybe later</Trans> </ButtonText> </Button> </View> </View> )}