Move theme controls to its own screen (#4866)

src/view/icons/index.tsx

@@ -77,6 +77,7 @@ import {faListUl} from '@fortawesome/free-solid-svg-icons/faListUl'
 import {faLock} from '@fortawesome/free-solid-svg-icons/faLock'
 import {faMagnifyingGlass} from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass'
 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 {faPen} from '@fortawesome/free-solid-svg-icons/faPen'
 import {faPenNib} from '@fortawesome/free-solid-svg-icons/faPenNib'
@@ -178,6 +179,7 @@ library.add(
   faMagnifyingGlass,
   faMessage,
   faNoteSticky,
+  faPaintRoller,
   faPaste,
   faPause,
   faPen,

src/view/screens/AccessibilitySettings.tsx

@@ -27,6 +27,7 @@ import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
 import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
 import {Text} from '#/view/com/util/text/Text'
 import {ScrollView} from '#/view/com/util/Views'
+import {atoms as a} from '#/alf'
 
 type Props = NativeStackScreenProps<
   CommonNavigatorParams,
@@ -61,10 +62,13 @@ export function AccessibilitySettingsScreen({}: Props) {
         showBackButton={isTabletOrMobile}
         style={[
           pal.border,
-          {borderBottomWidth: 1},
-          !isMobile && {borderLeftWidth: 1, borderRightWidth: 1},
+          a.border_b,
+          !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'}]}>
             <Trans>Accessibility Settings</Trans>
           </Text>

src/view/screens/PreferencesExternalEmbeds.tsx

@@ -18,6 +18,7 @@ import {
   useSetExternalEmbedPref,
 } from 'state/preferences'
 import {ToggleButton} from 'view/com/util/forms/ToggleButton'
+import {atoms as a} from '#/alf'
 import {SimpleViewHeader} from '../com/util/SimpleViewHeader'
 import {Text} from '../com/util/text/Text'
 import {ScrollView} from '../com/util/Views'
@@ -47,8 +48,8 @@ export function PreferencesExternalEmbeds({}: Props) {
         contentContainerStyle={[pal.viewLight, {paddingBottom: 75}]}>
         <SimpleViewHeader
           showBackButton={isTabletOrMobile}
-          style={[pal.border, {borderBottomWidth: 1}]}>
-          <View style={{flex: 1}}>
+          style={[pal.border, a.border_b]}>
+          <View style={a.flex_1}>
             <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
               <Trans>External Media Preferences</Trans>
             </Text>

src/view/screens/PreferencesFollowingFeed.tsx

@@ -19,6 +19,7 @@ import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
 import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
 import {Text} from '#/view/com/util/text/Text'
 import {ScrollView} from '#/view/com/util/Views'
+import {atoms as a} from '#/alf'
 
 function RepliesThresholdInput({
   enabled,
@@ -99,8 +100,8 @@ export function PreferencesFollowingFeed({}: Props) {
         contentContainerStyle={{paddingBottom: 75}}>
         <SimpleViewHeader
           showBackButton={isTabletOrMobile}
-          style={[pal.border, {borderBottomWidth: 1}]}>
-          <View style={{flex: 1}}>
+          style={[pal.border, a.border_b]}>
+          <View style={a.flex_1}>
             <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
               <Trans>Following Feed Preferences</Trans>
             </Text>

src/view/screens/PreferencesThreads.tsx

@@ -45,8 +45,8 @@ export function PreferencesThreads({}: Props) {
         contentContainerStyle={{paddingBottom: 75}}>
         <SimpleViewHeader
           showBackButton={isTabletOrMobile}
-          style={[pal.border, {borderBottomWidth: 1}]}>
-          <View style={{flex: 1}}>
+          style={[pal.border, a.border_b]}>
+          <View style={a.flex_1}>
             <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
               <Trans>Thread Preferences</Trans>
             </Text>

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])
@@ -436,63 +431,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>
@@ -519,6 +457,27 @@ export function SettingsScreen({}: Props) {
             <Trans>Accessibility</Trans>
           </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={[