diff options
Diffstat (limited to 'src/screens/Settings/AppearanceSettings.tsx')
| -rw-r--r-- | src/screens/Settings/AppearanceSettings.tsx | 165 |
1 files changed, 76 insertions, 89 deletions
diff --git a/src/screens/Settings/AppearanceSettings.tsx b/src/screens/Settings/AppearanceSettings.tsx index c317c930f..d0beb7d50 100644 --- a/src/screens/Settings/AppearanceSettings.tsx +++ b/src/screens/Settings/AppearanceSettings.tsx @@ -1,18 +1,15 @@ import React, {useCallback} from 'react' -import {View} from 'react-native' import Animated, { - FadeInDown, - FadeOutDown, + FadeInUp, + FadeOutUp, LayoutAnimationConfig, + LinearTransition, } from 'react-native-reanimated' -import {msg, Trans} from '@lingui/macro' +import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' import {useSetThemePrefs, useThemePrefs} from '#/state/shell' -import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader' -import {ScrollView} from '#/view/com/util/Views' import {atoms as a, native, useAlf, useTheme} from '#/alf' import * as ToggleButton from '#/components/forms/ToggleButton' import {Props as SVGIconProps} from '#/components/icons/common' @@ -22,12 +19,11 @@ import {TextSize_Stroke2_Corner0_Rounded as TextSize} from '#/components/icons/T import {TitleCase_Stroke2_Corner0_Rounded as Aa} from '#/components/icons/TitleCase' import * as Layout from '#/components/Layout' import {Text} from '#/components/Typography' +import * as SettingsList from './components/SettingsList' type Props = NativeStackScreenProps<CommonNavigatorParams, 'AppearanceSettings'> export function AppearanceSettingsScreen({}: Props) { - const t = useTheme() const {_} = useLingui() - const {isTabletOrMobile} = useWebMediaQueries() const {fonts} = useAlf() const {colorMode, darkTheme} = useThemePrefs() @@ -77,66 +73,54 @@ export function AppearanceSettingsScreen({}: Props) { return ( <LayoutAnimationConfig skipExiting skipEntering> <Layout.Screen testID="preferencesThreadsScreen"> - <ScrollView - // @ts-ignore web only -prf - dataSet={{'stable-gutters': 1}} - contentContainerStyle={{paddingBottom: 75}}> - <SimpleViewHeader - showBackButton={isTabletOrMobile} - style={[t.atoms.border_contrast_medium, a.border_b]}> - <View style={a.flex_1}> - <Text style={[a.text_2xl, a.font_bold]}> - <Trans>Appearance</Trans> - </Text> - </View> - </SimpleViewHeader> - - <View style={[a.gap_3xl, a.pt_xl, a.px_xl]}> - <View style={[a.gap_lg]}> - <AppearanceToggleButtonGroup - title={_(msg`Color mode`)} - icon={PhoneIcon} - items={[ - { - label: _(msg`System`), - name: 'system', - }, - { - label: _(msg`Light`), - name: 'light', - }, - { - label: _(msg`Dark`), - name: 'dark', - }, - ]} - values={[colorMode]} - onChange={onChangeAppearance} - /> + <Layout.Header title={_(msg`Appearance`)} /> + <Layout.Content> + <SettingsList.Container> + <AppearanceToggleButtonGroup + title={_(msg`Color mode`)} + icon={PhoneIcon} + items={[ + { + label: _(msg`System`), + name: 'system', + }, + { + label: _(msg`Light`), + name: 'light', + }, + { + label: _(msg`Dark`), + name: 'dark', + }, + ]} + values={[colorMode]} + onChange={onChangeAppearance} + /> - {colorMode !== 'light' && ( - <Animated.View - entering={native(FadeInDown)} - exiting={native(FadeOutDown)}> - <AppearanceToggleButtonGroup - title={_(msg`Dark theme`)} - icon={MoonIcon} - items={[ - { - label: _(msg`Dim`), - name: 'dim', - }, - { - label: _(msg`Dark`), - name: 'dark', - }, - ]} - values={[darkTheme ?? 'dim']} - onChange={onChangeDarkTheme} - /> - </Animated.View> - )} + {colorMode !== 'light' && ( + <Animated.View + entering={native(FadeInUp)} + exiting={native(FadeOutUp)}> + <AppearanceToggleButtonGroup + title={_(msg`Dark theme`)} + icon={MoonIcon} + items={[ + { + label: _(msg`Dim`), + name: 'dim', + }, + { + label: _(msg`Dark`), + name: 'dark', + }, + ]} + values={[darkTheme ?? 'dim']} + onChange={onChangeDarkTheme} + /> + </Animated.View> + )} + <Animated.View layout={native(LinearTransition)}> <AppearanceToggleButtonGroup title={_(msg`Font`)} description={_( @@ -177,9 +161,9 @@ export function AppearanceSettingsScreen({}: Props) { values={[fonts.scale]} onChange={onChangeFontScale} /> - </View> - </View> - </ScrollView> + </Animated.View> + </SettingsList.Container> + </Layout.Content> </Layout.Screen> </LayoutAnimationConfig> ) @@ -205,29 +189,32 @@ export function AppearanceToggleButtonGroup({ }) { const t = useTheme() return ( - <View style={[a.gap_sm]}> - <View style={[a.gap_xs]}> - <View style={[a.flex_row, a.align_center, a.gap_md]}> - <Icon style={t.atoms.text} /> - <Text style={[a.text_md, a.font_bold]}>{title}</Text> - </View> + <> + <SettingsList.Group contentContainerStyle={[a.gap_sm]} iconInset={false}> + <SettingsList.ItemIcon icon={Icon} /> + <SettingsList.ItemText>{title}</SettingsList.ItemText> {description && ( <Text - style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}> + style={[ + a.text_sm, + a.leading_snug, + t.atoms.text_contrast_medium, + a.w_full, + ]}> {description} </Text> )} - </View> - <ToggleButton.Group label={title} values={values} onChange={onChange}> - {items.map(item => ( - <ToggleButton.Button - key={item.name} - label={item.label} - name={item.name}> - <ToggleButton.ButtonText>{item.label}</ToggleButton.ButtonText> - </ToggleButton.Button> - ))} - </ToggleButton.Group> - </View> + <ToggleButton.Group label={title} values={values} onChange={onChange}> + {items.map(item => ( + <ToggleButton.Button + key={item.name} + label={item.label} + name={item.name}> + <ToggleButton.ButtonText>{item.label}</ToggleButton.ButtonText> + </ToggleButton.Button> + ))} + </ToggleButton.Group> + </SettingsList.Group> + </> ) } |