use alf for splashscreen (web)
Samuel Newman
parent
adcd097136
commit
eacd1cbe2a
|
|
@ -1,13 +1,9 @@
|
|||
import React from 'react'
|
||||
import {StyleSheet, TouchableOpacity, View, Pressable} from 'react-native'
|
||||
import {View, Pressable} 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 {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||
import {Trans, msg} from '@lingui/macro'
|
||||
import {Logo} from '#/view/icons/Logo'
|
||||
|
|
@ -16,6 +12,10 @@ import {useLingui} from '@lingui/react'
|
|||
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 {Button, ButtonText} from '#/components/Button'
|
||||
import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
export const SplashScreen = ({
|
||||
onDismiss,
|
||||
|
|
@ -26,10 +26,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 (
|
||||
<>
|
||||
|
|
@ -48,61 +47,89 @@ 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>
|
||||
<View style={[a.justify_center, a.align_center]}>
|
||||
<Logo width={92} fill="sky" />
|
||||
|
||||
<View style={{paddingTop: 40, paddingBottom: 20}}>
|
||||
<Logotype width={161} fill={pal.text.color} />
|
||||
<View style={[a.pb_sm, a.pt_5xl]}>
|
||||
<Logotype width={161} fill={t.atoms.text.color} />
|
||||
</View>
|
||||
|
||||
<View testID="signinOrCreateAccount" style={styles.btns}>
|
||||
<TouchableOpacity
|
||||
<Text
|
||||
style={[
|
||||
a.text_md,
|
||||
a.font_semibold,
|
||||
t.atoms.text_contrast_medium,
|
||||
]}>
|
||||
<Trans>What's up?</Trans>
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<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]}>
|
||||
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>
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</ButtonText>
|
||||
</Button>
|
||||
</View>
|
||||
</ErrorBoundary>
|
||||
</View>
|
||||
<Footer styles={styles} />
|
||||
<Footer />
|
||||
</CenteredView>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function Footer({styles}: {styles: ReturnType<typeof useStyles>}) {
|
||||
const pal = usePalette('default')
|
||||
function Footer() {
|
||||
const {_} = useLingui()
|
||||
const t = useTheme()
|
||||
|
||||
const langPrefs = useLanguagePrefs()
|
||||
const setLangPrefs = useLanguagePrefsApi()
|
||||
|
|
@ -122,39 +149,45 @@ function Footer({styles}: {styles: ReturnType<typeof useStyles>}) {
|
|||
)
|
||||
|
||||
return (
|
||||
<View style={[styles.footer, pal.view, pal.border]}>
|
||||
<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,
|
||||
]}>
|
||||
<TextLink
|
||||
href="https://bsky.social"
|
||||
text={_(msg`Business`)}
|
||||
style={[styles.footerLink, pal.link]}
|
||||
style={{color: t.palette.primary_500}}
|
||||
/>
|
||||
<TextLink
|
||||
href="https://bsky.social/about/blog"
|
||||
text={_(msg`Blog`)}
|
||||
style={[styles.footerLink, pal.link]}
|
||||
style={{color: t.palette.primary_500}}
|
||||
/>
|
||||
<TextLink
|
||||
href="https://bsky.social/about/join"
|
||||
text={_(msg`Jobs`)}
|
||||
style={[styles.footerLink, pal.link]}
|
||||
style={{color: t.palette.primary_500}}
|
||||
/>
|
||||
|
||||
<View style={styles.footerDivider} />
|
||||
<View style={a.flex_1} />
|
||||
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
alignItems: 'center',
|
||||
flexShrink: 1,
|
||||
}}>
|
||||
<Text aria-hidden={true} style={[pal.textLight]}>
|
||||
<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>
|
||||
<FontAwesomeIcon
|
||||
icon="chevron-down"
|
||||
size={12}
|
||||
style={[pal.textLight, {flexShrink: 0}]}
|
||||
<ChevronDown
|
||||
fill={t.atoms.text.color}
|
||||
size="xs"
|
||||
style={a.flex_shrink}
|
||||
/>
|
||||
|
||||
<select
|
||||
|
|
@ -183,79 +216,3 @@ function Footer({styles}: {styles: ReturnType<typeof useStyles>}) {
|
|||
</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',
|
||||
flexWrap: 'wrap',
|
||||
gap: 20,
|
||||
},
|
||||
footerDivider: {flexGrow: 1},
|
||||
footerLink: {},
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue