Move theme controls to its own screen (#4866)
parent
388c157c36
commit
c78e9e3147
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12.097 2.53a1 1 0 0 1-.041 1.07 6 6 0 0 0 8.345 8.344 1 1 0 0 1 1.563.908c-.434 5.122-4.728 9.144-9.962 9.144-5.522 0-9.998-4.476-9.998-9.998 0-5.234 4.021-9.528 9.144-9.962a1 1 0 0 1 .949.494ZM9.424 4.424a7.998 7.998 0 1 0 10.152 10.152A8 8 0 0 1 9.424 4.424Z" clip-rule="evenodd"/></svg>
|
After Width: | Height: | Size: 403 B |
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M5 4a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V4Zm3-1a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H8Zm2 2a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>
|
After Width: | Height: | Size: 334 B |
|
@ -211,6 +211,7 @@ func serve(cctx *cli.Context) error {
|
||||||
e.GET("/settings/threads", server.WebGeneric)
|
e.GET("/settings/threads", server.WebGeneric)
|
||||||
e.GET("/settings/external-embeds", server.WebGeneric)
|
e.GET("/settings/external-embeds", server.WebGeneric)
|
||||||
e.GET("/settings/accessibility", server.WebGeneric)
|
e.GET("/settings/accessibility", server.WebGeneric)
|
||||||
|
e.GET("/settings/appearance", server.WebGeneric)
|
||||||
e.GET("/sys/debug", server.WebGeneric)
|
e.GET("/sys/debug", server.WebGeneric)
|
||||||
e.GET("/sys/debug-mod", server.WebGeneric)
|
e.GET("/sys/debug-mod", server.WebGeneric)
|
||||||
e.GET("/sys/log", server.WebGeneric)
|
e.GET("/sys/log", server.WebGeneric)
|
||||||
|
|
|
@ -44,6 +44,7 @@ import HashtagScreen from '#/screens/Hashtag'
|
||||||
import {ModerationScreen} from '#/screens/Moderation'
|
import {ModerationScreen} from '#/screens/Moderation'
|
||||||
import {ProfileKnownFollowersScreen} from '#/screens/Profile/KnownFollowers'
|
import {ProfileKnownFollowersScreen} from '#/screens/Profile/KnownFollowers'
|
||||||
import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy'
|
import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy'
|
||||||
|
import {AppearanceSettingsScreen} from '#/screens/Settings/AppearanceSettings'
|
||||||
import {
|
import {
|
||||||
StarterPackScreen,
|
StarterPackScreen,
|
||||||
StarterPackScreenShort,
|
StarterPackScreenShort,
|
||||||
|
@ -310,6 +311,14 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
|
||||||
requireAuth: true,
|
requireAuth: true,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
<Stack.Screen
|
||||||
|
name="AppearanceSettings"
|
||||||
|
getComponent={() => AppearanceSettingsScreen}
|
||||||
|
options={{
|
||||||
|
title: title(msg`Appearance Settings`),
|
||||||
|
requireAuth: true,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
name="Hashtag"
|
name="Hashtag"
|
||||||
getComponent={() => HashtagScreen}
|
getComponent={() => HashtagScreen}
|
||||||
|
|
|
@ -23,10 +23,10 @@ export function Group({children, multiple, ...props}: GroupProps) {
|
||||||
style={[
|
style={[
|
||||||
a.w_full,
|
a.w_full,
|
||||||
a.flex_row,
|
a.flex_row,
|
||||||
a.border,
|
|
||||||
a.rounded_sm,
|
a.rounded_sm,
|
||||||
a.overflow_hidden,
|
a.overflow_hidden,
|
||||||
t.atoms.border_contrast_low,
|
t.atoms.border_contrast_low,
|
||||||
|
{borderWidth: 1},
|
||||||
]}>
|
]}>
|
||||||
{children}
|
{children}
|
||||||
</View>
|
</View>
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
import {createSinglePathSVG} from './TEMPLATE'
|
||||||
|
|
||||||
|
export const Moon_Stroke2_Corner0_Rounded = createSinglePathSVG({
|
||||||
|
path: 'M12.097 2.53a1 1 0 0 1-.041 1.07 6 6 0 0 0 8.345 8.344 1 1 0 0 1 1.563.908c-.434 5.122-4.728 9.144-9.962 9.144-5.522 0-9.998-4.476-9.998-9.998 0-5.234 4.021-9.528 9.144-9.962a1 1 0 0 1 .949.494ZM9.424 4.424a7.998 7.998 0 1 0 10.152 10.152A8 8 0 0 1 9.424 4.424Z',
|
||||||
|
})
|
|
@ -0,0 +1,5 @@
|
||||||
|
import {createSinglePathSVG} from './TEMPLATE'
|
||||||
|
|
||||||
|
export const Phone_Stroke2_Corner0_Rounded = createSinglePathSVG({
|
||||||
|
path: 'M5 4a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V4Zm3-1a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H8Zm2 2a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1Z',
|
||||||
|
})
|
|
@ -38,6 +38,7 @@ export type CommonNavigatorParams = {
|
||||||
PreferencesThreads: undefined
|
PreferencesThreads: undefined
|
||||||
PreferencesExternalEmbeds: undefined
|
PreferencesExternalEmbeds: undefined
|
||||||
AccessibilitySettings: undefined
|
AccessibilitySettings: undefined
|
||||||
|
AppearanceSettings: undefined
|
||||||
Search: {q?: string}
|
Search: {q?: string}
|
||||||
Hashtag: {tag: string; author?: string}
|
Hashtag: {tag: string; author?: string}
|
||||||
MessagesConversation: {conversation: string; embed?: string}
|
MessagesConversation: {conversation: string; embed?: string}
|
||||||
|
|
|
@ -32,6 +32,7 @@ export const router = new Router({
|
||||||
PreferencesThreads: '/settings/threads',
|
PreferencesThreads: '/settings/threads',
|
||||||
PreferencesExternalEmbeds: '/settings/external-embeds',
|
PreferencesExternalEmbeds: '/settings/external-embeds',
|
||||||
AccessibilitySettings: '/settings/accessibility',
|
AccessibilitySettings: '/settings/accessibility',
|
||||||
|
AppearanceSettings: '/settings/appearance',
|
||||||
SavedFeeds: '/settings/saved-feeds',
|
SavedFeeds: '/settings/saved-feeds',
|
||||||
Support: '/support',
|
Support: '/support',
|
||||||
PrivacyPolicy: '/support/privacy',
|
PrivacyPolicy: '/support/privacy',
|
||||||
|
|
|
@ -0,0 +1,135 @@
|
||||||
|
import React, {useCallback} from 'react'
|
||||||
|
import {View} from 'react-native'
|
||||||
|
import Animated, {
|
||||||
|
FadeInDown,
|
||||||
|
FadeOutDown,
|
||||||
|
LayoutAnimationConfig,
|
||||||
|
} from 'react-native-reanimated'
|
||||||
|
import {msg, Trans} from '@lingui/macro'
|
||||||
|
import {useLingui} from '@lingui/react'
|
||||||
|
|
||||||
|
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
|
||||||
|
import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
|
||||||
|
import {s} from '#/lib/styles'
|
||||||
|
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, useTheme} from '#/alf'
|
||||||
|
import * as ToggleButton from '#/components/forms/ToggleButton'
|
||||||
|
import {Moon_Stroke2_Corner0_Rounded as MoonIcon} from '#/components/icons/Moon'
|
||||||
|
import {Phone_Stroke2_Corner0_Rounded as PhoneIcon} from '#/components/icons/Phone'
|
||||||
|
import {Text} from '#/components/Typography'
|
||||||
|
|
||||||
|
type Props = NativeStackScreenProps<CommonNavigatorParams, 'AppearanceSettings'>
|
||||||
|
export function AppearanceSettingsScreen({}: Props) {
|
||||||
|
const {_} = useLingui()
|
||||||
|
const t = useTheme()
|
||||||
|
const {isTabletOrMobile} = useWebMediaQueries()
|
||||||
|
|
||||||
|
const {colorMode, darkTheme} = useThemePrefs()
|
||||||
|
const {setColorMode, setDarkTheme} = useSetThemePrefs()
|
||||||
|
|
||||||
|
const onChangeAppearance = useCallback(
|
||||||
|
(keys: string[]) => {
|
||||||
|
const appearance = keys.find(key => key !== colorMode) as
|
||||||
|
| 'system'
|
||||||
|
| 'light'
|
||||||
|
| 'dark'
|
||||||
|
| undefined
|
||||||
|
if (!appearance) return
|
||||||
|
setColorMode(appearance)
|
||||||
|
},
|
||||||
|
[setColorMode, colorMode],
|
||||||
|
)
|
||||||
|
|
||||||
|
const onChangeDarkTheme = useCallback(
|
||||||
|
(keys: string[]) => {
|
||||||
|
const theme = keys.find(key => key !== darkTheme) as
|
||||||
|
| 'dim'
|
||||||
|
| 'dark'
|
||||||
|
| undefined
|
||||||
|
if (!theme) return
|
||||||
|
setDarkTheme(theme)
|
||||||
|
},
|
||||||
|
[setDarkTheme, darkTheme],
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LayoutAnimationConfig skipExiting skipEntering>
|
||||||
|
<View testID="preferencesThreadsScreen" style={s.hContentRegion}>
|
||||||
|
<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.p_xl, a.gap_lg]}>
|
||||||
|
<View style={[a.flex_row, a.align_center, a.gap_md]}>
|
||||||
|
<PhoneIcon style={t.atoms.text} />
|
||||||
|
<Text style={a.text_md}>
|
||||||
|
<Trans>Mode</Trans>
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<ToggleButton.Group
|
||||||
|
label={_(msg`Dark mode`)}
|
||||||
|
values={[colorMode]}
|
||||||
|
onChange={onChangeAppearance}>
|
||||||
|
<ToggleButton.Button label={_(msg`System`)} name="system">
|
||||||
|
<ToggleButton.ButtonText>
|
||||||
|
<Trans>System</Trans>
|
||||||
|
</ToggleButton.ButtonText>
|
||||||
|
</ToggleButton.Button>
|
||||||
|
<ToggleButton.Button label={_(msg`Light`)} name="light">
|
||||||
|
<ToggleButton.ButtonText>
|
||||||
|
<Trans>Light</Trans>
|
||||||
|
</ToggleButton.ButtonText>
|
||||||
|
</ToggleButton.Button>
|
||||||
|
<ToggleButton.Button label={_(msg`Dark`)} name="dark">
|
||||||
|
<ToggleButton.ButtonText>
|
||||||
|
<Trans>Dark</Trans>
|
||||||
|
</ToggleButton.ButtonText>
|
||||||
|
</ToggleButton.Button>
|
||||||
|
</ToggleButton.Group>
|
||||||
|
{colorMode !== 'light' && (
|
||||||
|
<Animated.View
|
||||||
|
entering={native(FadeInDown)}
|
||||||
|
exiting={native(FadeOutDown)}
|
||||||
|
style={[a.mt_md, a.gap_lg]}>
|
||||||
|
<View style={[a.flex_row, a.align_center, a.gap_md]}>
|
||||||
|
<MoonIcon style={t.atoms.text} />
|
||||||
|
<Text style={a.text_md}>
|
||||||
|
<Trans>Dark theme</Trans>
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<ToggleButton.Group
|
||||||
|
label={_(msg`Dark theme`)}
|
||||||
|
values={[darkTheme ?? 'dim']}
|
||||||
|
onChange={onChangeDarkTheme}>
|
||||||
|
<ToggleButton.Button label={_(msg`Dim`)} name="dim">
|
||||||
|
<ToggleButton.ButtonText>
|
||||||
|
<Trans>Dim</Trans>
|
||||||
|
</ToggleButton.ButtonText>
|
||||||
|
</ToggleButton.Button>
|
||||||
|
<ToggleButton.Button label={_(msg`Dark`)} name="dark">
|
||||||
|
<ToggleButton.ButtonText>
|
||||||
|
<Trans>Dark</Trans>
|
||||||
|
</ToggleButton.ButtonText>
|
||||||
|
</ToggleButton.Button>
|
||||||
|
</ToggleButton.Group>
|
||||||
|
</Animated.View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
</View>
|
||||||
|
</LayoutAnimationConfig>
|
||||||
|
)
|
||||||
|
}
|
|
@ -77,6 +77,7 @@ import {faListUl} from '@fortawesome/free-solid-svg-icons/faListUl'
|
||||||
import {faLock} from '@fortawesome/free-solid-svg-icons/faLock'
|
import {faLock} from '@fortawesome/free-solid-svg-icons/faLock'
|
||||||
import {faMagnifyingGlass} from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass'
|
import {faMagnifyingGlass} from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass'
|
||||||
import {faNoteSticky} from '@fortawesome/free-solid-svg-icons/faNoteSticky'
|
import {faNoteSticky} from '@fortawesome/free-solid-svg-icons/faNoteSticky'
|
||||||
|
import {faPaintRoller} from '@fortawesome/free-solid-svg-icons/faPaintRoller'
|
||||||
import {faPause} from '@fortawesome/free-solid-svg-icons/faPause'
|
import {faPause} from '@fortawesome/free-solid-svg-icons/faPause'
|
||||||
import {faPen} from '@fortawesome/free-solid-svg-icons/faPen'
|
import {faPen} from '@fortawesome/free-solid-svg-icons/faPen'
|
||||||
import {faPenNib} from '@fortawesome/free-solid-svg-icons/faPenNib'
|
import {faPenNib} from '@fortawesome/free-solid-svg-icons/faPenNib'
|
||||||
|
@ -178,6 +179,7 @@ library.add(
|
||||||
faMagnifyingGlass,
|
faMagnifyingGlass,
|
||||||
faMessage,
|
faMessage,
|
||||||
faNoteSticky,
|
faNoteSticky,
|
||||||
|
faPaintRoller,
|
||||||
faPaste,
|
faPaste,
|
||||||
faPause,
|
faPause,
|
||||||
faPen,
|
faPen,
|
||||||
|
|
|
@ -27,6 +27,7 @@ import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
|
||||||
import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
|
import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
|
||||||
import {Text} from '#/view/com/util/text/Text'
|
import {Text} from '#/view/com/util/text/Text'
|
||||||
import {ScrollView} from '#/view/com/util/Views'
|
import {ScrollView} from '#/view/com/util/Views'
|
||||||
|
import {atoms as a} from '#/alf'
|
||||||
|
|
||||||
type Props = NativeStackScreenProps<
|
type Props = NativeStackScreenProps<
|
||||||
CommonNavigatorParams,
|
CommonNavigatorParams,
|
||||||
|
@ -61,10 +62,13 @@ export function AccessibilitySettingsScreen({}: Props) {
|
||||||
showBackButton={isTabletOrMobile}
|
showBackButton={isTabletOrMobile}
|
||||||
style={[
|
style={[
|
||||||
pal.border,
|
pal.border,
|
||||||
{borderBottomWidth: 1},
|
a.border_b,
|
||||||
!isMobile && {borderLeftWidth: 1, borderRightWidth: 1},
|
!isMobile && {
|
||||||
|
borderLeftWidth: StyleSheet.hairlineWidth,
|
||||||
|
borderRightWidth: StyleSheet.hairlineWidth,
|
||||||
|
},
|
||||||
]}>
|
]}>
|
||||||
<View style={{flex: 1}}>
|
<View style={a.flex_1}>
|
||||||
<Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
|
<Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
|
||||||
<Trans>Accessibility Settings</Trans>
|
<Trans>Accessibility Settings</Trans>
|
||||||
</Text>
|
</Text>
|
||||||
|
|
|
@ -18,6 +18,7 @@ import {
|
||||||
useSetExternalEmbedPref,
|
useSetExternalEmbedPref,
|
||||||
} from 'state/preferences'
|
} from 'state/preferences'
|
||||||
import {ToggleButton} from 'view/com/util/forms/ToggleButton'
|
import {ToggleButton} from 'view/com/util/forms/ToggleButton'
|
||||||
|
import {atoms as a} from '#/alf'
|
||||||
import {SimpleViewHeader} from '../com/util/SimpleViewHeader'
|
import {SimpleViewHeader} from '../com/util/SimpleViewHeader'
|
||||||
import {Text} from '../com/util/text/Text'
|
import {Text} from '../com/util/text/Text'
|
||||||
import {ScrollView} from '../com/util/Views'
|
import {ScrollView} from '../com/util/Views'
|
||||||
|
@ -47,8 +48,8 @@ export function PreferencesExternalEmbeds({}: Props) {
|
||||||
contentContainerStyle={[pal.viewLight, {paddingBottom: 75}]}>
|
contentContainerStyle={[pal.viewLight, {paddingBottom: 75}]}>
|
||||||
<SimpleViewHeader
|
<SimpleViewHeader
|
||||||
showBackButton={isTabletOrMobile}
|
showBackButton={isTabletOrMobile}
|
||||||
style={[pal.border, {borderBottomWidth: 1}]}>
|
style={[pal.border, a.border_b]}>
|
||||||
<View style={{flex: 1}}>
|
<View style={a.flex_1}>
|
||||||
<Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
|
<Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
|
||||||
<Trans>External Media Preferences</Trans>
|
<Trans>External Media Preferences</Trans>
|
||||||
</Text>
|
</Text>
|
||||||
|
|
|
@ -19,6 +19,7 @@ import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
|
||||||
import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
|
import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
|
||||||
import {Text} from '#/view/com/util/text/Text'
|
import {Text} from '#/view/com/util/text/Text'
|
||||||
import {ScrollView} from '#/view/com/util/Views'
|
import {ScrollView} from '#/view/com/util/Views'
|
||||||
|
import {atoms as a} from '#/alf'
|
||||||
|
|
||||||
function RepliesThresholdInput({
|
function RepliesThresholdInput({
|
||||||
enabled,
|
enabled,
|
||||||
|
@ -99,8 +100,8 @@ export function PreferencesFollowingFeed({}: Props) {
|
||||||
contentContainerStyle={{paddingBottom: 75}}>
|
contentContainerStyle={{paddingBottom: 75}}>
|
||||||
<SimpleViewHeader
|
<SimpleViewHeader
|
||||||
showBackButton={isTabletOrMobile}
|
showBackButton={isTabletOrMobile}
|
||||||
style={[pal.border, {borderBottomWidth: 1}]}>
|
style={[pal.border, a.border_b]}>
|
||||||
<View style={{flex: 1}}>
|
<View style={a.flex_1}>
|
||||||
<Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
|
<Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
|
||||||
<Trans>Following Feed Preferences</Trans>
|
<Trans>Following Feed Preferences</Trans>
|
||||||
</Text>
|
</Text>
|
||||||
|
|
|
@ -45,8 +45,8 @@ export function PreferencesThreads({}: Props) {
|
||||||
contentContainerStyle={{paddingBottom: 75}}>
|
contentContainerStyle={{paddingBottom: 75}}>
|
||||||
<SimpleViewHeader
|
<SimpleViewHeader
|
||||||
showBackButton={isTabletOrMobile}
|
showBackButton={isTabletOrMobile}
|
||||||
style={[pal.border, {borderBottomWidth: 1}]}>
|
style={[pal.border, a.border_b]}>
|
||||||
<View style={{flex: 1}}>
|
<View style={a.flex_1}>
|
||||||
<Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
|
<Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
|
||||||
<Trans>Thread Preferences</Trans>
|
<Trans>Thread Preferences</Trans>
|
||||||
</Text>
|
</Text>
|
||||||
|
|
|
@ -31,12 +31,7 @@ import {useClearPreferencesMutation} from '#/state/queries/preferences'
|
||||||
import {RQKEY as RQKEY_PROFILE} from '#/state/queries/profile'
|
import {RQKEY as RQKEY_PROFILE} from '#/state/queries/profile'
|
||||||
import {useProfileQuery} from '#/state/queries/profile'
|
import {useProfileQuery} from '#/state/queries/profile'
|
||||||
import {SessionAccount, useSession, useSessionApi} from '#/state/session'
|
import {SessionAccount, useSession, useSessionApi} from '#/state/session'
|
||||||
import {
|
import {useOnboardingDispatch, useSetMinimalShellMode} from '#/state/shell'
|
||||||
useOnboardingDispatch,
|
|
||||||
useSetMinimalShellMode,
|
|
||||||
useSetThemePrefs,
|
|
||||||
useThemePrefs,
|
|
||||||
} from '#/state/shell'
|
|
||||||
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
|
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
|
||||||
import {useCloseAllActiveElements} from '#/state/util'
|
import {useCloseAllActiveElements} from '#/state/util'
|
||||||
import {useAnalytics} from 'lib/analytics/analytics'
|
import {useAnalytics} from 'lib/analytics/analytics'
|
||||||
|
@ -52,7 +47,6 @@ import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
|
||||||
import {NavigationProp} from 'lib/routes/types'
|
import {NavigationProp} from 'lib/routes/types'
|
||||||
import {colors, s} from 'lib/styles'
|
import {colors, s} from 'lib/styles'
|
||||||
import {AccountDropdownBtn} from 'view/com/util/AccountDropdownBtn'
|
import {AccountDropdownBtn} from 'view/com/util/AccountDropdownBtn'
|
||||||
import {SelectableBtn} from 'view/com/util/forms/SelectableBtn'
|
|
||||||
import {ToggleButton} from 'view/com/util/forms/ToggleButton'
|
import {ToggleButton} from 'view/com/util/forms/ToggleButton'
|
||||||
import {Link, TextLink} from 'view/com/util/Link'
|
import {Link, TextLink} from 'view/com/util/Link'
|
||||||
import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader'
|
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 {UserAvatar} from 'view/com/util/UserAvatar'
|
||||||
import {ScrollView} from 'view/com/util/Views'
|
import {ScrollView} from 'view/com/util/Views'
|
||||||
import {DeactivateAccountDialog} from '#/screens/Settings/components/DeactivateAccountDialog'
|
import {DeactivateAccountDialog} from '#/screens/Settings/components/DeactivateAccountDialog'
|
||||||
import {useTheme} from '#/alf'
|
import {atoms as a, useTheme} from '#/alf'
|
||||||
import {atoms as a} from '#/alf'
|
|
||||||
import {useDialogControl} from '#/components/Dialog'
|
import {useDialogControl} from '#/components/Dialog'
|
||||||
import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
|
import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
|
||||||
import {navigate, resetToTab} from '#/Navigation'
|
import {navigate, resetToTab} from '#/Navigation'
|
||||||
|
@ -168,8 +161,6 @@ function SettingsAccountCard({
|
||||||
type Props = NativeStackScreenProps<CommonNavigatorParams, 'Settings'>
|
type Props = NativeStackScreenProps<CommonNavigatorParams, 'Settings'>
|
||||||
export function SettingsScreen({}: Props) {
|
export function SettingsScreen({}: Props) {
|
||||||
const queryClient = useQueryClient()
|
const queryClient = useQueryClient()
|
||||||
const {colorMode, darkTheme} = useThemePrefs()
|
|
||||||
const {setColorMode, setDarkTheme} = useSetThemePrefs()
|
|
||||||
const pal = usePalette('default')
|
const pal = usePalette('default')
|
||||||
const {_} = useLingui()
|
const {_} = useLingui()
|
||||||
const setMinimalShellMode = useSetMinimalShellMode()
|
const setMinimalShellMode = useSetMinimalShellMode()
|
||||||
|
@ -296,6 +287,10 @@ export function SettingsScreen({}: Props) {
|
||||||
navigation.navigate('AccessibilitySettings')
|
navigation.navigate('AccessibilitySettings')
|
||||||
}, [navigation])
|
}, [navigation])
|
||||||
|
|
||||||
|
const onPressAppearanceSettings = React.useCallback(() => {
|
||||||
|
navigation.navigate('AppearanceSettings')
|
||||||
|
}, [navigation])
|
||||||
|
|
||||||
const onPressBirthday = React.useCallback(() => {
|
const onPressBirthday = React.useCallback(() => {
|
||||||
birthdayControl.open()
|
birthdayControl.open()
|
||||||
}, [birthdayControl])
|
}, [birthdayControl])
|
||||||
|
@ -436,63 +431,6 @@ export function SettingsScreen({}: Props) {
|
||||||
|
|
||||||
<View style={styles.spacer20} />
|
<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]}>
|
<Text type="xl-bold" style={[pal.text, styles.heading]}>
|
||||||
<Trans>Basics</Trans>
|
<Trans>Basics</Trans>
|
||||||
</Text>
|
</Text>
|
||||||
|
@ -519,6 +457,27 @@ export function SettingsScreen({}: Props) {
|
||||||
<Trans>Accessibility</Trans>
|
<Trans>Accessibility</Trans>
|
||||||
</Text>
|
</Text>
|
||||||
</TouchableOpacity>
|
</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
|
<TouchableOpacity
|
||||||
testID="languageSettingsBtn"
|
testID="languageSettingsBtn"
|
||||||
style={[
|
style={[
|
||||||
|
|
Loading…
Reference in New Issue