From adcd097136600e6551e8199080de01222aec65ce Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Wed, 20 Mar 2024 17:11:41 +0000
Subject: [PATCH] use alf for splashscreen (native)
---
src/view/com/auth/SplashScreen.tsx | 147 +++++++++++------------------
1 file changed, 56 insertions(+), 91 deletions(-)
diff --git a/src/view/com/auth/SplashScreen.tsx b/src/view/com/auth/SplashScreen.tsx
index f3d78347..fe0d4ee4 100644
--- a/src/view/com/auth/SplashScreen.tsx
+++ b/src/view/com/auth/SplashScreen.tsx
@@ -1,23 +1,21 @@
import React from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {View} from 'react-native'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {Text} from 'view/com/util/text/Text'
+
import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
-import {s, colors} from 'lib/styles'
-import {usePalette} from 'lib/hooks/usePalette'
import {CenteredView} from '../util/Views'
import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {Logo} from '#/view/icons/Logo'
import {Logotype} from '#/view/icons/Logotype'
-import {
- FontAwesomeIcon,
- FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select'
import {sanitizeAppLanguageSetting} from '#/locale/helpers'
import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
import {APP_LANGUAGES} from '#/locale/languages'
+import {atoms as a, useTheme} from '#/alf'
+import {Text} from '#/components/Typography'
+import {Button, ButtonText} from '#/components/Button'
+import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
export const SplashScreen = ({
onPressSignin,
@@ -26,7 +24,7 @@ export const SplashScreen = ({
onPressSignin: () => void
onPressCreateAccount: () => void
}) => {
- const pal = usePalette('default')
+ const t = useTheme()
const {_} = useLingui()
const langPrefs = useLanguagePrefs()
@@ -46,49 +44,62 @@ export const SplashScreen = ({
)
return (
- <CenteredView style={[styles.container, pal.view]}>
+ <CenteredView style={[a.h_full, a.flex_1]}>
<ErrorBoundary>
- <View style={styles.hero}>
+ <View style={[{flex: 1}, a.justify_center, a.align_center]}>
<Logo width={92} fill="sky" />
- <View style={{paddingTop: 40, paddingBottom: 6}}>
- <Logotype width={161} fill={pal.text.color} />
+ <View style={[a.pb_sm, a.pt_5xl]}>
+ <Logotype width={161} fill={t.atoms.text.color} />
</View>
- <Text type="lg-medium" style={[pal.textLight]}>
+ <Text
+ style={[a.text_md, a.font_semibold, t.atoms.text_contrast_medium]}>
<Trans>What's up?</Trans>
</Text>
</View>
- <View testID="signinOrCreateAccount" style={styles.btns}>
- <TouchableOpacity
+ <View testID="signinOrCreateAccount">
+ <Button
testID="createAccountButton"
- style={[styles.btn, {backgroundColor: colors.blue3}]}
onPress={onPressCreateAccount}
accessibilityRole="button"
- accessibilityLabel={_(msg`Create new account`)}
+ label={_(msg`Create new account`)}
accessibilityHint={_(
msg`Opens flow to create a new Bluesky account`,
- )}>
- <Text style={[s.white, styles.btnLabel]}>
+ )}
+ style={[a.mx_xl, a.mb_xl]}
+ size="large"
+ variant="solid"
+ color="primary">
+ <ButtonText>
<Trans>Create a new account</Trans>
- </Text>
- </TouchableOpacity>
- <TouchableOpacity
+ </ButtonText>
+ </Button>
+ <Button
testID="signInButton"
- style={[styles.btn, pal.btn]}
onPress={onPressSignin}
- accessibilityRole="button"
- accessibilityLabel={_(msg`Sign in`)}
+ label={_(msg`Sign in`)}
accessibilityHint={_(
msg`Opens flow to sign into your existing Bluesky account`,
- )}>
- <Text style={[pal.text, styles.btnLabel]}>
+ )}
+ style={[a.mx_xl, a.mb_xl]}
+ size="large"
+ variant="solid"
+ color="secondary">
+ <ButtonText>
<Trans>Sign In</Trans>
- </Text>
- </TouchableOpacity>
+ </ButtonText>
+ </Button>
</View>
- <View style={styles.footer}>
- <View style={{position: 'relative'}}>
+ <View
+ style={[
+ a.px_lg,
+ a.pt_md,
+ a.pb_2xl,
+ a.justify_center,
+ a.align_center,
+ ]}>
+ <View style={a.relative}>
<RNPickerSelect
placeholder={{}}
value={sanitizedLang}
@@ -101,33 +112,28 @@ export const SplashScreen = ({
useNativeAndroidPickerStyle={false}
style={{
inputAndroid: {
- color: pal.textLight.color,
+ color: t.atoms.text_contrast_medium.color,
fontSize: 16,
- paddingRight: 10 + 4,
+ paddingRight: 12 + 4,
},
inputIOS: {
- color: pal.text.color,
+ color: t.atoms.text.color,
fontSize: 16,
- paddingRight: 10 + 4,
+ paddingRight: 12 + 4,
},
}}
/>
<View
- style={{
- position: 'absolute',
- top: 0,
- right: 0,
- bottom: 0,
- pointerEvents: 'none',
- alignItems: 'center',
- justifyContent: 'center',
- }}>
- <FontAwesomeIcon
- icon="chevron-down"
- size={10}
- style={pal.textLight as FontAwesomeIconStyle}
- />
+ style={[
+ a.absolute,
+ a.inset_0,
+ {left: 'auto'},
+ {pointerEvents: 'none'},
+ a.align_center,
+ a.justify_center,
+ ]}>
+ <ChevronDown fill={t.atoms.text.color} size="xs" />
</View>
</View>
</View>
@@ -136,44 +142,3 @@ export const SplashScreen = ({
</CenteredView>
)
}
-
-const styles = StyleSheet.create({
- container: {
- height: '100%',
- },
- hero: {
- flex: 2,
- justifyContent: 'center',
- alignItems: 'center',
- },
- btns: {
- paddingBottom: 0,
- },
- title: {
- textAlign: 'center',
- fontSize: 68,
- fontWeight: 'bold',
- },
- subtitle: {
- textAlign: 'center',
- fontSize: 42,
- fontWeight: 'bold',
- },
- btn: {
- borderRadius: 32,
- paddingVertical: 16,
- marginBottom: 20,
- marginHorizontal: 20,
- },
- btnLabel: {
- textAlign: 'center',
- fontSize: 21,
- },
- footer: {
- paddingHorizontal: 16,
- paddingTop: 12,
- paddingBottom: 24,
- justifyContent: 'center',
- alignItems: 'center',
- },
-})