diff options
Diffstat (limited to 'src/view/com/auth/SplashScreen.web.tsx')
| -rw-r--r-- | src/view/com/auth/SplashScreen.web.tsx | 280 |
1 files changed, 148 insertions, 132 deletions
diff --git a/src/view/com/auth/SplashScreen.web.tsx b/src/view/com/auth/SplashScreen.web.tsx index 8ef64099f..cdb72cc04 100644 --- a/src/view/com/auth/SplashScreen.web.tsx +++ b/src/view/com/auth/SplashScreen.web.tsx @@ -1,17 +1,22 @@ import React from 'react' -import {StyleSheet, TouchableOpacity, View, Pressable} from 'react-native' +import {Pressable, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {Text} from 'view/com/util/text/Text' -import {TextLink} from '../util/Link' -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 {isWeb} from 'platform/detection' +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 {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {Trans} from '@lingui/macro' 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 {InlineLink} from '#/components/Link' +import {Text} from '#/components/Typography' +import {CenteredView} from '../util/Views' export const SplashScreen = ({ onDismiss, @@ -22,10 +27,9 @@ export const SplashScreen = ({ onPressSignin: () => void onPressCreateAccount: () => void }) => { - const pal = usePalette('default') - const {isTabletOrMobile} = useWebMediaQueries() - const styles = useStyles() - const isMobileWeb = isWeb && isTabletOrMobile + const {_} = useLingui() + const t = useTheme() + const {isTabletOrMobile: isMobileWeb} = useWebMediaQueries() return ( <> @@ -44,153 +48,165 @@ export const SplashScreen = ({ icon="x" size={24} style={{ - color: String(pal.text.color), + color: String(t.atoms.text.color), }} /> </Pressable> )} - <CenteredView style={[styles.container, pal.view]}> + <CenteredView style={[a.h_full, a.flex_1]}> <View testID="noSessionView" style={[ - styles.containerInner, - isMobileWeb && styles.containerInnerMobile, - pal.border, - {alignItems: 'center'}, + a.h_full, + a.justify_center, + // @ts-ignore web only + {paddingBottom: '20vh'}, + isMobileWeb && a.pb_5xl, + t.atoms.border_contrast_medium, + a.align_center, + a.gap_5xl, ]}> <ErrorBoundary> - <Logo width={92} fill="sky" /> + <View style={[a.justify_center, a.align_center]}> + <Logo width={92} fill="sky" /> + + <View style={[a.pb_sm, a.pt_5xl]}> + <Logotype width={161} fill={t.atoms.text.color} /> + </View> - <View style={{paddingTop: 40, paddingBottom: 20}}> - <Logotype width={161} fill={pal.text.color} /> + <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" + style={[a.w_full, {maxWidth: 320}]}> + <Button testID="createAccountButton" - style={[styles.btn, {backgroundColor: colors.blue3}]} onPress={onPressCreateAccount} - // TODO: web accessibility - accessibilityRole="button"> - <Text style={[s.white, styles.btnLabel]}> + accessibilityRole="button" + 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} - // TODO: web accessibility - accessibilityRole="button"> - <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> </ErrorBoundary> </View> - <Footer styles={styles} /> + <Footer /> </CenteredView> </> ) } -function Footer({styles}: {styles: ReturnType<typeof useStyles>}) { - const pal = usePalette('default') +function Footer() { + const t = useTheme() + + const langPrefs = useLanguagePrefs() + const setLangPrefs = useLanguagePrefsApi() + + const sanitizedLang = sanitizeAppLanguageSetting(langPrefs.appLanguage) + + const onChangeAppLanguage = React.useCallback( + (ev: React.ChangeEvent<HTMLSelectElement>) => { + const value = ev.target.value + + if (!value) return + if (sanitizedLang !== value) { + setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value)) + } + }, + [sanitizedLang, setLangPrefs], + ) return ( - <View style={[styles.footer, pal.view, pal.border]}> - <TextLink - href="https://bsky.social" - text="Business" - style={[styles.footerLink, pal.link]} - /> - <TextLink - href="https://bsky.social/about/blog" - text="Blog" - style={[styles.footerLink, pal.link]} - /> - <TextLink - href="https://bsky.social/about/join" - text="Jobs" - style={[styles.footerLink, pal.link]} - /> + <View + style={[ + a.absolute, + a.inset_0, + {top: 'auto'}, + a.p_xl, + a.border_t, + a.flex_row, + a.flex_wrap, + a.gap_xl, + a.flex_1, + t.atoms.border_contrast_medium, + ]}> + <InlineLink to="https://bsky.social"> + <Trans>Business</Trans> + </InlineLink> + <InlineLink to="https://bsky.social/about/blog"> + <Trans>Blog</Trans> + </InlineLink> + <InlineLink to="https://bsky.social/about/join"> + <Trans>Jobs</Trans> + </InlineLink> + + <View style={a.flex_1} /> + + <View style={[a.flex_row, a.gap_sm, a.align_center, a.flex_shrink]}> + <Text aria-hidden={true} style={t.atoms.text_contrast_medium}> + {APP_LANGUAGES.find(l => l.code2 === sanitizedLang)?.name} + </Text> + <ChevronDown + fill={t.atoms.text.color} + size="xs" + style={a.flex_shrink} + /> + + <select + value={sanitizedLang} + onChange={onChangeAppLanguage} + style={{ + cursor: 'pointer', + MozAppearance: 'none', + WebkitAppearance: 'none', + appearance: 'none', + position: 'absolute', + inset: 0, + width: '100%', + color: 'transparent', + background: 'transparent', + border: 0, + padding: 0, + }}> + {APP_LANGUAGES.filter(l => Boolean(l.code2)).map(l => ( + <option key={l.code2} value={l.code2}> + {l.name} + </option> + ))} + </select> + </View> </View> ) } -const useStyles = () => { - return StyleSheet.create({ - container: { - height: '100%', - }, - containerInner: { - height: '100%', - justifyContent: 'center', - // @ts-ignore web only - paddingBottom: '20vh', - paddingHorizontal: 20, - }, - containerInnerMobile: { - paddingBottom: 50, - }, - title: { - textAlign: 'center', - color: colors.blue3, - fontSize: 68, - fontWeight: 'bold', - paddingBottom: 10, - }, - titleMobile: { - textAlign: 'center', - color: colors.blue3, - fontSize: 58, - fontWeight: 'bold', - }, - subtitle: { - textAlign: 'center', - color: colors.gray5, - fontSize: 52, - fontWeight: 'bold', - paddingBottom: 30, - }, - subtitleMobile: { - textAlign: 'center', - color: colors.gray5, - fontSize: 42, - fontWeight: 'bold', - paddingBottom: 30, - }, - btns: { - gap: 10, - justifyContent: 'center', - paddingBottom: 40, - }, - btn: { - borderRadius: 30, - paddingHorizontal: 24, - paddingVertical: 12, - minWidth: 220, - }, - btnLabel: { - textAlign: 'center', - fontSize: 18, - }, - notice: { - paddingHorizontal: 40, - textAlign: 'center', - }, - footer: { - position: 'absolute', - left: 0, - right: 0, - bottom: 0, - padding: 20, - borderTopWidth: 1, - flexDirection: 'row', - }, - footerLink: { - marginRight: 20, - }, - }) -} |