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