diff options
Diffstat (limited to 'src/view/com/auth/SplashScreen.tsx')
| -rw-r--r-- | src/view/com/auth/SplashScreen.tsx | 174 |
1 files changed, 110 insertions, 64 deletions
diff --git a/src/view/com/auth/SplashScreen.tsx b/src/view/com/auth/SplashScreen.tsx index ffd07d945..763b01dfa 100644 --- a/src/view/com/auth/SplashScreen.tsx +++ b/src/view/com/auth/SplashScreen.tsx @@ -1,14 +1,21 @@ import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' -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 {View} from 'react-native' +import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select' +import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' + +import {sanitizeAppLanguageSetting} from '#/locale/helpers' +import {APP_LANGUAGES} from '#/locale/languages' +import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' import {Logo} from '#/view/icons/Logo' import {Logotype} from '#/view/icons/Logotype' +import {ErrorBoundary} from 'view/com/util/ErrorBoundary' +import {atoms as a, useTheme} from '#/alf' +import {Button, ButtonText} from '#/components/Button' +import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron' +import {Text} from '#/components/Typography' +import {CenteredView} from '../util/Views' export const SplashScreen = ({ onPressSignin, @@ -17,82 +24,121 @@ export const SplashScreen = ({ onPressSignin: () => void onPressCreateAccount: () => void }) => { - const pal = usePalette('default') + const t = useTheme() const {_} = useLingui() + const langPrefs = useLanguagePrefs() + const setLangPrefs = useLanguagePrefsApi() + const insets = useSafeAreaInsets() + + const sanitizedLang = sanitizeAppLanguageSetting(langPrefs.appLanguage) + + const onChangeAppLanguage = React.useCallback( + (value: Parameters<PickerSelectProps['onValueChange']>[0]) => { + if (!value) return + if (sanitizedLang !== value) { + setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value)) + } + }, + [sanitizedLang, setLangPrefs], + ) + 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`)} - accessibilityHint="Opens flow to create a new Bluesky account"> - <Text style={[s.white, styles.btnLabel]}> + label={_(msg`Create new account`)} + accessibilityHint={_( + msg`Opens flow to create a new Bluesky account`, + )} + 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`)} - accessibilityHint="Opens flow to sign into your existing Bluesky account"> - <Text style={[pal.text, styles.btnLabel]}> - <Trans>Sign In</Trans> - </Text> - </TouchableOpacity> + label={_(msg`Sign in`)} + accessibilityHint={_( + msg`Opens flow to sign into your existing Bluesky account`, + )} + style={[a.mx_xl, a.mb_xl]} + size="large" + variant="solid" + color="secondary"> + <ButtonText> + <Trans>Sign in</Trans> + </ButtonText> + </Button> </View> + <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} + onValueChange={onChangeAppLanguage} + items={APP_LANGUAGES.filter(l => Boolean(l.code2)).map(l => ({ + label: l.name, + value: l.code2, + key: l.code2, + }))} + useNativeAndroidPickerStyle={false} + style={{ + inputAndroid: { + color: t.atoms.text_contrast_medium.color, + fontSize: 16, + paddingRight: 12 + 4, + }, + inputIOS: { + color: t.atoms.text.color, + fontSize: 16, + paddingRight: 12 + 4, + }, + }} + /> + + <View + 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> + <View style={{height: insets.bottom}} /> </ErrorBoundary> </CenteredView> ) } - -const styles = StyleSheet.create({ - container: { - height: '100%', - }, - hero: { - flex: 2, - justifyContent: 'center', - alignItems: 'center', - }, - btns: { - paddingBottom: 40, - }, - 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, - }, -}) |