ansxor.ca
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
slight improvements to first use/sign-up flow (welcome modal!)
xan.lol
assets/images/welcome-modal-bg.jpg
assets/images/welcome-modal-bg.jpg
This is a binary file and will not be displayed.
assets/images/welcome-modal-bg.webp
assets/images/welcome-modal-bg.webp
This is a binary file and will not be displayed.
+12
-11
src/components/WelcomeModal.tsx
+12
-11
src/components/WelcomeModal.tsx
···
8
import {logger} from '#/logger'
9
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
10
import {Logo} from '#/view/icons/Logo'
11
-
import {atoms as a, flatten, useBreakpoints, web} from '#/alf'
12
import {Button, ButtonText} from '#/components/Button'
13
import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'
14
import {Text} from '#/components/Typography'
15
16
-
const welcomeModalBg = require('../../assets/images/welcome-modal-bg.jpg') // TODO: Xan: Change background to something cuter
17
18
interface WelcomeModalProps {
19
control: {
···
29
const {gtMobile} = useBreakpoints()
30
const [isExiting, setIsExiting] = useState(false)
31
const [signInLinkHovered, setSignInLinkHovered] = useState(false)
32
33
const fadeOutAndClose = (callback?: () => void) => {
34
setIsExiting(true)
···
84
maxHeight: 600,
85
width: '90%',
86
height: '90%',
87
-
backgroundColor: '#716066',
88
},
89
a.rounded_lg,
90
a.overflow_hidden,
···
110
a.text_2xl,
111
a.font_semi_bold,
112
a.user_select_none,
113
-
{color: '#ff9696ff', letterSpacing: -0.5},
114
]}>
115
Witchsky
116
</Text>
···
129
gtMobile ? a.text_4xl : a.text_3xl,
130
a.font_semi_bold,
131
a.text_center,
132
-
{color: '#583535ff'},
133
web({
134
backgroundImage:
135
-
'linear-gradient(180deg, #ffd8d8ff 0%, #eca8a8ff 83.65%, rgba(233, 165, 165, 0.47) 100%)',
136
backgroundClip: 'text',
137
WebkitBackgroundClip: 'text',
138
WebkitTextFillColor: 'transparent',
···
157
color="primary"
158
style={{
159
width: 200,
160
-
backgroundColor: '#BB6868',
161
}}>
162
<ButtonText>
163
<Trans>Create account</Trans>
···
173
hoverStyle={[a.bg_transparent]}>
174
{({hovered}) => (
175
<ButtonText
176
-
style={[hovered && [a.underline], {color: '#ff9191'}]}>
177
<Trans>Explore the app</Trans>
178
</ButtonText>
179
)}
···
184
style={[
185
a.text_md,
186
a.text_center,
187
-
{color: '#ffe3e3ff', lineHeight: 24},
188
]}>
189
<Trans>Already have an account?</Trans>{' '}
190
<Pressable
···
197
style={[
198
a.font_medium,
199
{
200
-
color: '#ff9191',
201
fontSize: undefined,
202
},
203
signInLinkHovered && a.underline,
···
233
<XIcon
234
size="md"
235
style={{
236
-
color: '#ffe3e3ff',
237
opacity: hovered || pressed || focused ? 1 : 0.7,
238
}}
239
/>
···
8
import {logger} from '#/logger'
9
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
10
import {Logo} from '#/view/icons/Logo'
11
+
import {atoms as a, flatten, useBreakpoints, web, useTheme} from '#/alf'
12
import {Button, ButtonText} from '#/components/Button'
13
import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'
14
import {Text} from '#/components/Typography'
15
16
+
const welcomeModalBg = require('../../assets/images/welcome-modal-bg.webp')
17
18
interface WelcomeModalProps {
19
control: {
···
29
const {gtMobile} = useBreakpoints()
30
const [isExiting, setIsExiting] = useState(false)
31
const [signInLinkHovered, setSignInLinkHovered] = useState(false)
32
+
const t = useTheme()
33
34
const fadeOutAndClose = (callback?: () => void) => {
35
setIsExiting(true)
···
85
maxHeight: 600,
86
width: '90%',
87
height: '90%',
88
+
backgroundColor: '#c0cdec',
89
},
90
a.rounded_lg,
91
a.overflow_hidden,
···
111
a.text_2xl,
112
a.font_semi_bold,
113
a.user_select_none,
114
+
{color: 'rgb(42, 40, 40)', letterSpacing: -0.5},
115
]}>
116
Witchsky
117
</Text>
···
130
gtMobile ? a.text_4xl : a.text_3xl,
131
a.font_semi_bold,
132
a.text_center,
133
+
{color: 'rgb(55, 45, 45)'},
134
web({
135
backgroundImage:
136
+
'linear-gradient(180deg, rgb(87, 77, 77) 0%, rgb(95, 68, 68) 83.65%, rgba(107, 68, 68, 0.47) 100%)',
137
backgroundClip: 'text',
138
WebkitBackgroundClip: 'text',
139
WebkitTextFillColor: 'transparent',
···
158
color="primary"
159
style={{
160
width: 200,
161
+
backgroundColor: t.palette.primary_500,
162
}}>
163
<ButtonText>
164
<Trans>Create account</Trans>
···
174
hoverStyle={[a.bg_transparent]}>
175
{({hovered}) => (
176
<ButtonText
177
+
style={[hovered && [a.underline], {color: t.palette.primary_500}]}>
178
<Trans>Explore the app</Trans>
179
</ButtonText>
180
)}
···
185
style={[
186
a.text_md,
187
a.text_center,
188
+
{color: 'rgb(58, 50, 50)', lineHeight: 24},
189
]}>
190
<Trans>Already have an account?</Trans>{' '}
191
<Pressable
···
198
style={[
199
a.font_medium,
200
{
201
+
color: t.palette.primary_500,
202
fontSize: undefined,
203
},
204
signInLinkHovered && a.underline,
···
234
<XIcon
235
size="md"
236
style={{
237
+
color: 'rgb(77, 47, 47)',
238
opacity: hovered || pressed || focused ? 1 : 0.7,
239
}}
240
/>
+5
-5
src/screens/Signup/StepInfo/index.tsx
+5
-5
src/screens/Signup/StepInfo/index.tsx
···
201
Witchsky is part of the{' '}
202
{
203
<InlineLinkText
204
-
label={_(msg`ATmosphere`)}
205
to="https://atproto.com/">
206
-
<Trans>ATmosphere</Trans>
207
</InlineLinkText>
208
}
209
—the network of apps, services, and accounts built on the AT
···
219
<Button
220
testID="signInButton"
221
onPress={onPressSignIn}
222
-
label={_(msg`Sign in with ATmosphere`)}
223
accessibilityHint={_(
224
-
msg`Opens flow to sign in to your existing ATmosphere account`,
225
)}
226
size="large"
227
variant="solid"
228
color="primary">
229
<ButtonText>
230
-
<Trans>Sign in with ATmosphere</Trans>
231
</ButtonText>
232
</Button>
233
</View>
···
201
Witchsky is part of the{' '}
202
{
203
<InlineLinkText
204
+
label={_(msg`Atmosphere`)}
205
to="https://atproto.com/">
206
+
<Trans>Atmosphere</Trans>
207
</InlineLinkText>
208
}
209
—the network of apps, services, and accounts built on the AT
···
219
<Button
220
testID="signInButton"
221
onPress={onPressSignIn}
222
+
label={_(msg`Sign in with an Atmosphere account`)}
223
accessibilityHint={_(
224
+
msg`Opens flow to sign in to your existing Atmosphere account`,
225
)}
226
size="large"
227
variant="solid"
228
color="primary">
229
<ButtonText>
230
+
<Trans>Sign in with an Atmosphere account</Trans>
231
</ButtonText>
232
</Button>
233
</View>
+2
-2
src/screens/Signup/index.tsx
+2
-2
src/screens/Signup/index.tsx
···
128
<LoggedOutLayout
129
leadin=""
130
title={_(msg`Create Account`)}
131
-
description={_(msg`Welcome to the ATmosphere!`)}
132
scrollable>
133
<View testID="createAccount" style={a.flex_1}>
134
{showStarterPackCard &&
···
182
</Text>
183
<Text style={[a.text_3xl, a.font_semi_bold]}>
184
{state.activeStep === SignupStep.INFO ? (
185
-
<Trans>The ATmosphere ✨</Trans>
186
) : state.activeStep === SignupStep.HANDLE ? (
187
<Trans>Choose your username</Trans>
188
) : (
···
128
<LoggedOutLayout
129
leadin=""
130
title={_(msg`Create Account`)}
131
+
description={_(msg`Welcome to the Atmosphere!`)}
132
scrollable>
133
<View testID="createAccount" style={a.flex_1}>
134
{showStarterPackCard &&
···
182
</Text>
183
<Text style={[a.text_3xl, a.font_semi_bold]}>
184
{state.activeStep === SignupStep.INFO ? (
185
+
<Trans>The Atmosphere ✨</Trans>
186
) : state.activeStep === SignupStep.HANDLE ? (
187
<Trans>Choose your username</Trans>
188
) : (