diff options
Diffstat (limited to 'src/view/screens/Settings/index.tsx')
| -rw-r--r-- | src/view/screens/Settings/index.tsx | 95 |
1 files changed, 27 insertions, 68 deletions
diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx index db74d5c0d..c33be7d54 100644 --- a/src/view/screens/Settings/index.tsx +++ b/src/view/screens/Settings/index.tsx @@ -31,12 +31,7 @@ import {useClearPreferencesMutation} from '#/state/queries/preferences' import {RQKEY as RQKEY_PROFILE} from '#/state/queries/profile' import {useProfileQuery} from '#/state/queries/profile' import {SessionAccount, useSession, useSessionApi} from '#/state/session' -import { - useOnboardingDispatch, - useSetMinimalShellMode, - useSetThemePrefs, - useThemePrefs, -} from '#/state/shell' +import {useOnboardingDispatch, useSetMinimalShellMode} from '#/state/shell' import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useCloseAllActiveElements} from '#/state/util' import {useAnalytics} from 'lib/analytics/analytics' @@ -52,7 +47,6 @@ import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import {NavigationProp} from 'lib/routes/types' import {colors, s} from 'lib/styles' import {AccountDropdownBtn} from 'view/com/util/AccountDropdownBtn' -import {SelectableBtn} from 'view/com/util/forms/SelectableBtn' import {ToggleButton} from 'view/com/util/forms/ToggleButton' import {Link, TextLink} from 'view/com/util/Link' import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' @@ -61,8 +55,7 @@ import * as Toast from 'view/com/util/Toast' import {UserAvatar} from 'view/com/util/UserAvatar' import {ScrollView} from 'view/com/util/Views' import {DeactivateAccountDialog} from '#/screens/Settings/components/DeactivateAccountDialog' -import {useTheme} from '#/alf' -import {atoms as a} from '#/alf' +import {atoms as a, useTheme} from '#/alf' import {useDialogControl} from '#/components/Dialog' import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings' import {navigate, resetToTab} from '#/Navigation' @@ -168,8 +161,6 @@ function SettingsAccountCard({ type Props = NativeStackScreenProps<CommonNavigatorParams, 'Settings'> export function SettingsScreen({}: Props) { const queryClient = useQueryClient() - const {colorMode, darkTheme} = useThemePrefs() - const {setColorMode, setDarkTheme} = useSetThemePrefs() const pal = usePalette('default') const {_} = useLingui() const setMinimalShellMode = useSetMinimalShellMode() @@ -296,6 +287,10 @@ export function SettingsScreen({}: Props) { navigation.navigate('AccessibilitySettings') }, [navigation]) + const onPressAppearanceSettings = React.useCallback(() => { + navigation.navigate('AppearanceSettings') + }, [navigation]) + const onPressBirthday = React.useCallback(() => { birthdayControl.open() }, [birthdayControl]) @@ -437,63 +432,6 @@ export function SettingsScreen({}: Props) { <View style={styles.spacer20} /> <Text type="xl-bold" style={[pal.text, styles.heading]}> - <Trans>Appearance</Trans> - </Text> - <View> - <View style={[styles.linkCard, pal.view, styles.selectableBtns]}> - <SelectableBtn - selected={colorMode === 'system'} - label={_(msg`System`)} - left - onSelect={() => setColorMode('system')} - accessibilityHint={_(msg`Sets color theme to system setting`)} - /> - <SelectableBtn - selected={colorMode === 'light'} - label={_(msg`Light`)} - onSelect={() => setColorMode('light')} - accessibilityHint={_(msg`Sets color theme to light`)} - /> - <SelectableBtn - selected={colorMode === 'dark'} - label={_(msg`Dark`)} - right - onSelect={() => setColorMode('dark')} - accessibilityHint={_(msg`Sets color theme to dark`)} - /> - </View> - </View> - - <View style={styles.spacer20} /> - - {colorMode !== 'light' && ( - <> - <Text type="xl-bold" style={[pal.text, styles.heading]}> - <Trans>Dark Theme</Trans> - </Text> - <View> - <View style={[styles.linkCard, pal.view, styles.selectableBtns]}> - <SelectableBtn - selected={!darkTheme || darkTheme === 'dim'} - label={_(msg`Dim`)} - left - onSelect={() => setDarkTheme('dim')} - accessibilityHint={_(msg`Sets dark theme to the dim theme`)} - /> - <SelectableBtn - selected={darkTheme === 'dark'} - label={_(msg`Dark`)} - right - onSelect={() => setDarkTheme('dark')} - accessibilityHint={_(msg`Sets dark theme to the dark theme`)} - /> - </View> - </View> - <View style={styles.spacer20} /> - </> - )} - - <Text type="xl-bold" style={[pal.text, styles.heading]}> <Trans>Basics</Trans> </Text> <TouchableOpacity @@ -520,6 +458,27 @@ export function SettingsScreen({}: Props) { </Text> </TouchableOpacity> <TouchableOpacity + testID="appearanceSettingsBtn" + style={[ + styles.linkCard, + pal.view, + isSwitchingAccounts && styles.dimmed, + ]} + onPress={isSwitchingAccounts ? undefined : onPressAppearanceSettings} + accessibilityRole="button" + accessibilityLabel={_(msg`Appearance settings`)} + accessibilityHint={_(msg`Opens appearance settings`)}> + <View style={[styles.iconContainer, pal.btn]}> + <FontAwesomeIcon + icon="paint-roller" + style={pal.text as FontAwesomeIconStyle} + /> + </View> + <Text type="lg" style={pal.text}> + <Trans>Appearance</Trans> + </Text> + </TouchableOpacity> + <TouchableOpacity testID="languageSettingsBtn" style={[ styles.linkCard, |