diff options
Diffstat (limited to 'src/view/com')
| -rw-r--r-- | src/view/com/auth/HomeLoggedOutCTA.tsx | 170 | ||||
| -rw-r--r-- | src/view/com/auth/SplashScreen.tsx | 58 | ||||
| -rw-r--r-- | src/view/com/auth/SplashScreen.web.tsx | 56 | ||||
| -rw-r--r-- | src/view/com/home/HomeHeaderLayout.web.tsx | 63 | ||||
| -rw-r--r-- | src/view/com/home/HomeHeaderLayoutMobile.tsx | 44 |
5 files changed, 62 insertions, 329 deletions
diff --git a/src/view/com/auth/HomeLoggedOutCTA.tsx b/src/view/com/auth/HomeLoggedOutCTA.tsx deleted file mode 100644 index 4c8c35da7..000000000 --- a/src/view/com/auth/HomeLoggedOutCTA.tsx +++ /dev/null @@ -1,170 +0,0 @@ -import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' - -import {usePalette} from '#/lib/hooks/usePalette' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {colors, s} from '#/lib/styles' -import {useLoggedOutViewControls} from '#/state/shell/logged-out' -import {TextLink} from '../util/Link' -import {Text} from '../util/text/Text' -import {ScrollView} from '../util/Views' - -export function HomeLoggedOutCTA() { - const pal = usePalette('default') - const {_} = useLingui() - const {isMobile} = useWebMediaQueries() - const {requestSwitchToAccount} = useLoggedOutViewControls() - - const showCreateAccount = React.useCallback(() => { - requestSwitchToAccount({requestedAccount: 'new'}) - }, [requestSwitchToAccount]) - - const showSignIn = React.useCallback(() => { - requestSwitchToAccount({requestedAccount: 'none'}) - }, [requestSwitchToAccount]) - - return ( - <ScrollView style={styles.container} testID="loggedOutCTA"> - <View style={[styles.hero, isMobile && styles.heroMobile]}> - <Text style={[styles.title, pal.link]}> - <Trans>Bluesky</Trans> - </Text> - <Text - style={[ - styles.subtitle, - isMobile && styles.subtitleMobile, - pal.textLight, - ]}> - <Trans>See what's next</Trans> - </Text> - </View> - <View - testID="signinOrCreateAccount" - style={isMobile ? undefined : styles.btnsDesktop}> - <TouchableOpacity - testID="createAccountButton" - style={[ - styles.btn, - isMobile && styles.btnMobile, - {backgroundColor: colors.blue3}, - ]} - onPress={showCreateAccount} - accessibilityRole="button" - accessibilityLabel={_(msg`Create new account`)} - accessibilityHint={_( - msg`Opens flow to create a new Bluesky account`, - )}> - <Text - style={[ - s.white, - styles.btnLabel, - isMobile && styles.btnLabelMobile, - ]}> - <Trans>Create a new account</Trans> - </Text> - </TouchableOpacity> - <TouchableOpacity - testID="signInButton" - style={[styles.btn, isMobile && styles.btnMobile, pal.btn]} - onPress={showSignIn} - accessibilityRole="button" - accessibilityLabel={_(msg`Sign in`)} - accessibilityHint={_( - msg`Opens flow to sign into your existing Bluesky account`, - )}> - <Text - style={[ - pal.text, - styles.btnLabel, - isMobile && styles.btnLabelMobile, - ]}> - <Trans>Sign in</Trans> - </Text> - </TouchableOpacity> - </View> - - <View style={[styles.footer, pal.view, pal.border]}> - <TextLink - type="2xl" - href="https://bsky.social" - text={_(msg`Business`)} - style={[styles.footerLink, pal.link]} - /> - <TextLink - type="2xl" - href="https://bsky.social/about/blog" - text={_(msg`Blog`)} - style={[styles.footerLink, pal.link]} - /> - <TextLink - type="2xl" - href="https://bsky.social/about/join" - text={_(msg`Jobs`)} - style={[styles.footerLink, pal.link]} - /> - </View> - </ScrollView> - ) -} - -const styles = StyleSheet.create({ - container: { - height: '100%', - }, - hero: { - justifyContent: 'center', - paddingTop: 100, - paddingBottom: 30, - }, - heroMobile: { - paddingBottom: 50, - }, - title: { - textAlign: 'center', - fontSize: 68, - fontWeight: 'bold', - }, - subtitle: { - textAlign: 'center', - fontSize: 48, - fontWeight: 'bold', - }, - subtitleMobile: { - fontSize: 42, - }, - btnsDesktop: { - flexDirection: 'row', - justifyContent: 'center', - gap: 20, - marginHorizontal: 20, - }, - btn: { - borderRadius: 32, - width: 230, - paddingVertical: 12, - marginBottom: 20, - }, - btnMobile: { - flex: 1, - width: 'auto', - marginHorizontal: 20, - paddingVertical: 16, - }, - btnLabel: { - textAlign: 'center', - fontSize: 18, - }, - btnLabelMobile: { - textAlign: 'center', - fontSize: 21, - }, - - footer: { - flexDirection: 'row', - gap: 20, - justifyContent: 'center', - }, - footerLink: {}, -}) diff --git a/src/view/com/auth/SplashScreen.tsx b/src/view/com/auth/SplashScreen.tsx index 763b01dfa..8eac1ab82 100644 --- a/src/view/com/auth/SplashScreen.tsx +++ b/src/view/com/auth/SplashScreen.tsx @@ -1,19 +1,15 @@ import React from 'react' 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 {AppLanguageDropdown} from '#/components/AppLanguageDropdown' 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' @@ -27,22 +23,8 @@ export const SplashScreen = ({ 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={[a.h_full, a.flex_1]}> <ErrorBoundary> @@ -99,43 +81,7 @@ export const SplashScreen = ({ 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> + <AppLanguageDropdown /> </View> <View style={{height: insets.bottom}} /> </ErrorBoundary> diff --git a/src/view/com/auth/SplashScreen.web.tsx b/src/view/com/auth/SplashScreen.web.tsx index 7a2ee16cf..f905e1e8d 100644 --- a/src/view/com/auth/SplashScreen.web.tsx +++ b/src/view/com/auth/SplashScreen.web.tsx @@ -4,16 +4,13 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 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 {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 {AppLanguageDropdown} from '#/components/AppLanguageDropdown' import {Button, ButtonText} from '#/components/Button' -import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron' import {InlineLinkText} from '#/components/Link' import {Text} from '#/components/Typography' import {CenteredView} from '../util/Views' @@ -131,23 +128,6 @@ export const SplashScreen = ({ 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={[ @@ -174,39 +154,7 @@ function Footer() { <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> + <AppLanguageDropdown /> </View> ) } diff --git a/src/view/com/home/HomeHeaderLayout.web.tsx b/src/view/com/home/HomeHeaderLayout.web.tsx index 9818b56f6..644d4cab6 100644 --- a/src/view/com/home/HomeHeaderLayout.web.tsx +++ b/src/view/com/home/HomeHeaderLayout.web.tsx @@ -1,20 +1,22 @@ import React from 'react' import {StyleSheet, View} from 'react-native' import Animated from 'react-native-reanimated' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile' -import {Logo} from '#/view/icons/Logo' -import {Link} from '../util/Link' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {useLingui} from '@lingui/react' import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' + import {CogIcon} from '#/lib/icons' -import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' +import {useSession} from '#/state/session' import {useShellLayout} from '#/state/shell/shell-layout' +import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {Logo} from '#/view/icons/Logo' +import {Link} from '../util/Link' +import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile' export function HomeHeaderLayout(props: { children: React.ReactNode @@ -38,32 +40,35 @@ function HomeHeaderLayoutDesktopAndTablet({ const pal = usePalette('default') const {headerMinimalShellTransform} = useMinimalShellMode() const {headerHeight} = useShellLayout() + const {hasSession} = useSession() const {_} = useLingui() return ( <> - <View style={[pal.view, pal.border, styles.bar, styles.topBar]}> - <Link - href="/settings/following-feed" - hitSlop={10} - accessibilityRole="button" - accessibilityLabel={_(msg`Following Feed Preferences`)} - accessibilityHint=""> - <FontAwesomeIcon - icon="sliders" - style={pal.textLight as FontAwesomeIconStyle} - /> - </Link> - <Logo width={28} /> - <Link - href="/settings/saved-feeds" - hitSlop={10} - accessibilityRole="button" - accessibilityLabel={_(msg`Edit Saved Feeds`)} - accessibilityHint={_(msg`Opens screen to edit Saved Feeds`)}> - <CogIcon size={22} strokeWidth={2} style={pal.textLight} /> - </Link> - </View> + {hasSession && ( + <View style={[pal.view, pal.border, styles.bar, styles.topBar]}> + <Link + href="/settings/following-feed" + hitSlop={10} + accessibilityRole="button" + accessibilityLabel={_(msg`Following Feed Preferences`)} + accessibilityHint=""> + <FontAwesomeIcon + icon="sliders" + style={pal.textLight as FontAwesomeIconStyle} + /> + </Link> + <Logo width={28} /> + <Link + href="/settings/saved-feeds" + hitSlop={10} + accessibilityRole="button" + accessibilityLabel={_(msg`Edit Saved Feeds`)} + accessibilityHint={_(msg`Opens screen to edit Saved Feeds`)}> + <CogIcon size={22} strokeWidth={2} style={pal.textLight} /> + </Link> + </View> + )} {tabBarAnchor} <Animated.View onLayout={e => { diff --git a/src/view/com/home/HomeHeaderLayoutMobile.tsx b/src/view/com/home/HomeHeaderLayoutMobile.tsx index d7b7231c6..78fa9af86 100644 --- a/src/view/com/home/HomeHeaderLayoutMobile.tsx +++ b/src/view/com/home/HomeHeaderLayoutMobile.tsx @@ -1,23 +1,24 @@ import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' -import {usePalette} from 'lib/hooks/usePalette' -import {Link} from '../util/Link' +import Animated from 'react-native-reanimated' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' -import {HITSLOP_10} from 'lib/constants' -import Animated from 'react-native-reanimated' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' + +import {useSession} from '#/state/session' import {useSetDrawerOpen} from '#/state/shell/drawer-open' import {useShellLayout} from '#/state/shell/shell-layout' +import {HITSLOP_10} from 'lib/constants' +import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' +import {usePalette} from 'lib/hooks/usePalette' import {isWeb} from 'platform/detection' import {Logo} from '#/view/icons/Logo' - -import {IS_DEV} from '#/env' import {atoms} from '#/alf' -import {Link as Link2} from '#/components/Link' import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette' +import {Link as Link2} from '#/components/Link' +import {IS_DEV} from '#/env' +import {Link} from '../util/Link' export function HomeHeaderLayoutMobile({ children, @@ -30,6 +31,7 @@ export function HomeHeaderLayoutMobile({ const setDrawerOpen = useSetDrawerOpen() const {headerHeight} = useShellLayout() const {headerMinimalShellTransform} = useMinimalShellMode() + const {hasSession} = useSession() const onPressAvi = React.useCallback(() => { setDrawerOpen(true) @@ -76,18 +78,20 @@ export function HomeHeaderLayoutMobile({ <ColorPalette size="md" /> </Link2> )} - <Link - testID="viewHeaderHomeFeedPrefsBtn" - href="/settings/following-feed" - hitSlop={HITSLOP_10} - accessibilityRole="button" - accessibilityLabel={_(msg`Following Feed Preferences`)} - accessibilityHint=""> - <FontAwesomeIcon - icon="sliders" - style={pal.textLight as FontAwesomeIconStyle} - /> - </Link> + {hasSession && ( + <Link + testID="viewHeaderHomeFeedPrefsBtn" + href="/settings/following-feed" + hitSlop={HITSLOP_10} + accessibilityRole="button" + accessibilityLabel={_(msg`Following Feed Preferences`)} + accessibilityHint=""> + <FontAwesomeIcon + icon="sliders" + style={pal.textLight as FontAwesomeIconStyle} + /> + </Link> + )} </View> </View> {children} |