bas.sh
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
1import {useCallback} from 'react'
2import {View} from 'react-native'
3import {Image} from 'expo-image'
4import {msg, Trans} from '@lingui/macro'
5import {useLingui} from '@lingui/react'
6
7import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
8import {atoms as a, useTheme, web} from '#/alf'
9import {Button, ButtonText} from '#/components/Button'
10import * as Dialog from '#/components/Dialog'
11import {useNuxDialogContext} from '#/components/dialogs/nuxs'
12import {Sparkle_Stroke2_Corner0_Rounded as SparkleIcon} from '#/components/icons/Sparkle'
13import {Text} from '#/components/Typography'
14import {IS_WEB} from '#/env'
15
16export function ActivitySubscriptionsNUX() {
17 const t = useTheme()
18 const {_} = useLingui()
19 const nuxDialogs = useNuxDialogContext()
20 const control = Dialog.useDialogControl()
21
22 const enableSquareButtons = useEnableSquareButtons()
23
24 Dialog.useAutoOpen(control)
25
26 const onClose = useCallback(() => {
27 nuxDialogs.dismissActiveNux()
28 }, [nuxDialogs])
29
30 return (
31 <Dialog.Outer control={control} onClose={onClose}>
32 <Dialog.Handle />
33
34 <Dialog.ScrollableInner
35 label={_(msg`Introducing activity notifications`)}
36 style={[web({maxWidth: 400})]}
37 contentContainerStyle={[
38 {
39 paddingTop: 0,
40 paddingLeft: 0,
41 paddingRight: 0,
42 },
43 ]}>
44 <View
45 style={[
46 a.align_center,
47 a.overflow_hidden,
48 t.atoms.bg_contrast_25,
49 {
50 gap: IS_WEB ? 16 : 24,
51 paddingTop: IS_WEB ? 24 : 48,
52 borderTopLeftRadius: a.rounded_md.borderRadius,
53 borderTopRightRadius: a.rounded_md.borderRadius,
54 },
55 ]}>
56 <View
57 style={[
58 a.pl_sm,
59 a.pr_md,
60 a.py_sm,
61 enableSquareButtons ? a.rounded_sm : a.rounded_full,
62 a.flex_row,
63 a.align_center,
64 a.gap_xs,
65 {
66 backgroundColor: t.palette.primary_100,
67 },
68 ]}>
69 <SparkleIcon fill={t.palette.primary_800} size="sm" />
70 <Text
71 style={[
72 a.font_semi_bold,
73 {
74 color: t.palette.primary_800,
75 },
76 ]}>
77 <Trans>New Feature</Trans>
78 </Text>
79 </View>
80
81 <View style={[a.relative, a.w_full]}>
82 <View
83 style={[
84 a.absolute,
85 t.atoms.bg_contrast_25,
86 t.atoms.shadow_md,
87 {
88 shadowOpacity: 0.4,
89 top: 5,
90 bottom: 0,
91 left: '17%',
92 right: '17%',
93 width: '66%',
94 borderTopLeftRadius: 40,
95 borderTopRightRadius: 40,
96 },
97 ]}
98 />
99 <View
100 style={[
101 a.overflow_hidden,
102 {
103 aspectRatio: 398 / 228,
104 },
105 ]}>
106 <Image
107 accessibilityIgnoresInvertColors
108 source={require('../../../../assets/images/activity_notifications_announcement.webp')}
109 style={[
110 a.w_full,
111 {
112 aspectRatio: 398 / 268,
113 },
114 ]}
115 alt={_(
116 msg`A screenshot of a profile page with a bell icon next to the follow button, indicating the new activity notifications feature.`,
117 )}
118 />
119 </View>
120 </View>
121 </View>
122 <View
123 style={[
124 a.align_center,
125 a.px_xl,
126 IS_WEB ? [a.pt_xl, a.gap_xl, a.pb_sm] : [a.pt_3xl, a.gap_3xl],
127 ]}>
128 <View style={[a.gap_md, a.align_center]}>
129 <Text
130 style={[
131 a.text_3xl,
132 a.leading_tight,
133 a.font_bold,
134 a.text_center,
135 {
136 fontSize: IS_WEB ? 28 : 32,
137 maxWidth: 300,
138 },
139 ]}>
140 <Trans>Get notified when someone posts</Trans>
141 </Text>
142 <Text
143 style={[
144 a.text_md,
145 a.leading_snug,
146 a.text_center,
147 {
148 maxWidth: 340,
149 },
150 ]}>
151 <Trans>
152 You can now choose to be notified when specific people post. If
153 there’s someone you want timely updates from, go to their
154 profile and find the new bell icon near the follow button.
155 </Trans>
156 </Text>
157 </View>
158
159 {!IS_WEB && (
160 <Button
161 label={_(msg`Close`)}
162 size="large"
163 variant="solid"
164 color="primary"
165 onPress={() => {
166 control.close()
167 }}
168 style={[a.w_full, {maxWidth: 280}]}>
169 <ButtonText>
170 <Trans>Close</Trans>
171 </ButtonText>
172 </Button>
173 )}
174 </View>
175
176 <Dialog.Close />
177 </Dialog.ScrollableInner>
178 </Dialog.Outer>
179 )
180}