Merge remote-tracking branch 'origin/main' into eric/mods-ui-fixes
* origin/main: (60 commits) Fix missing error on `PostThread` (#3295) Fix dialogs state references, fixes Android back button (#3314) [Statsig] Protect against early logEvent call crashing (#3315) Fix android splash jump (#3316) [Statsig] Onboarding and routing events (#3302) Fix problems with `BottomSheet` and the report dialog (#3297) bump pkg json version Adjust DateField timezone offset Fix key error on choose account Move some things around Bump button size on choose account Password flow tweaks Login form tweaks Remove log StepInfo tweaks Signup shell tweaks HostingProvider tweaks fix pencil svg in asset folder sort imports for files related to this PR dismiss keyboard when opening dialog ...
This commit is contained in:
Eric Bailey
@@ -1,21 +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, msg} from '@lingui/macro'
|
||||
import {Logo} from '#/view/icons/Logo'
|
||||
import {Logotype} from '#/view/icons/Logotype'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {sanitizeAppLanguageSetting} from '#/locale/helpers'
|
||||
import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
|
||||
import {APP_LANGUAGES} from '#/locale/languages'
|
||||
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,
|
||||
@@ -26,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 (
|
||||
<>
|
||||
@@ -48,61 +48,88 @@ 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={{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>
|
||||
|
||||
<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]}>
|
||||
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')
|
||||
const {_} = useLingui()
|
||||
function Footer() {
|
||||
const t = useTheme()
|
||||
|
||||
const langPrefs = useLanguagePrefs()
|
||||
const setLangPrefs = useLanguagePrefsApi()
|
||||
@@ -122,39 +149,39 @@ function Footer({styles}: {styles: ReturnType<typeof useStyles>}) {
|
||||
)
|
||||
|
||||
return (
|
||||
<View style={[styles.footer, pal.view, pal.border]}>
|
||||
<TextLink
|
||||
href="https://bsky.social"
|
||||
text={_(msg`Business`)}
|
||||
style={[styles.footerLink, pal.link]}
|
||||
/>
|
||||
<TextLink
|
||||
href="https://bsky.social/about/blog"
|
||||
text={_(msg`Blog`)}
|
||||
style={[styles.footerLink, pal.link]}
|
||||
/>
|
||||
<TextLink
|
||||
href="https://bsky.social/about/join"
|
||||
text={_(msg`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={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 +210,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: {},
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user