Move appearance settings to settings page

src/view/screens/Settings.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {
   ActivityIndicator,
+  Pressable,
   StyleSheet,
   TextStyle,
   TouchableOpacity,
@@ -282,6 +283,34 @@ export const SettingsScreen = withAuthRequired(
             </Text>
           </TouchableOpacity>
 
+          <View style={styles.spacer20} />
+          <Text type="xl-bold" style={[pal.text, styles.heading]}>
+            Appearance
+          </Text>
+          <View>
+            <View style={[styles.linkCard, pal.view, styles.selectableBtns]}>
+              <SelectableBtn
+                current={store.shell.colorMode}
+                value="system"
+                label="System"
+                left
+                onChange={(v: string) => store.shell.setColorMode(v)}
+              />
+              <SelectableBtn
+                current={store.shell.colorMode}
+                value="light"
+                label="Light"
+                onChange={(v: string) => store.shell.setColorMode(v)}
+              />
+              <SelectableBtn
+                current={store.shell.colorMode}
+                value="dark"
+                label="Dark"
+                right
+                onChange={(v: string) => store.shell.setColorMode(v)}
+              />
+            </View>
+          </View>
           <View style={styles.spacer20} />
 
           <Text type="xl-bold" style={[pal.text, styles.heading]}>
@@ -411,6 +440,45 @@ function AccountDropdownBtn({handle}: {handle: string}) {
   )
 }
 
+interface SelectableBtnProps {
+  current: string
+  value: string
+  label: string
+  left?: boolean
+  right?: boolean
+  onChange: (v: string) => void
+}
+
+function SelectableBtn({
+  current,
+  value,
+  label,
+  left,
+  right,
+  onChange,
+}: SelectableBtnProps) {
+  const pal = usePalette('default')
+  const palPrimary = usePalette('inverted')
+  return (
+    <Pressable
+      style={[
+        styles.selectableBtn,
+        left && styles.selectableBtnLeft,
+        right && styles.selectableBtnRight,
+        pal.border,
+        current === value ? palPrimary.view : pal.view,
+      ]}
+      onPress={() => onChange(value)}
+      accessibilityRole="button"
+      accessibilityLabel={value}
+      accessibilityHint={`Set color theme to  ${value}`}>
+      <Text style={current === value ? palPrimary.text : pal.text}>
+        {label}
+      </Text>
+    </Pressable>
+  )
+}
+
 const styles = StyleSheet.create({
   dimmed: {
     opacity: 0.5,
@@ -462,4 +530,43 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 18,
   },
+
+  colorModeText: {
+    marginLeft: 10,
+    marginBottom: 6,
+  },
+
+  selectableBtns: {
+    flexDirection: 'row',
+  },
+  selectableBtn: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderLeftWidth: 0,
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+  },
+  selectableBtnLeft: {
+    borderTopLeftRadius: 8,
+    borderBottomLeftRadius: 8,
+    borderLeftWidth: 1,
+  },
+  selectableBtnRight: {
+    borderTopRightRadius: 8,
+    borderBottomRightRadius: 8,
+  },
+
+  btn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    borderRadius: 32,
+    padding: 14,
+    backgroundColor: colors.gray1,
+  },
+  toggleBtn: {
+    paddingHorizontal: 0,
+  },
 })

src/view/shell/Drawer.tsx

@@ -1,7 +1,6 @@
 import React, {ComponentProps} from 'react'
 import {
   Linking,
-  Pressable,
   SafeAreaView,
   StyleProp,
   StyleSheet,
@@ -54,19 +53,6 @@ export const DrawerContent = observer(() => {
 
   const {notifications} = store.me
 
-  const colorModes = ['light', 'dark', 'system']
-  const modeAccessibilityText = {
-    light: 'Sets display to light mode',
-    dark: 'Sets display to dark mode',
-    system: 'Sets display to system default',
-  }
-
-  const nextColorMode = () => {
-    return colorModes[
-      (colorModes.indexOf(store.shell.colorMode) + 1) % colorModes.length
-    ]
-  }
-
   // events
   // =
 
@@ -125,15 +111,6 @@ export const DrawerContent = observer(() => {
     track('Menu:FeedbackClicked')
     Linking.openURL(FEEDBACK_FORM_URL)
   }, [track])
-
-  const onColorModePress = React.useCallback(
-    (mode: string) => {
-      track('Menu:ItemClicked', {url: '#cycleColorMode'})
-      store.shell.setColorMode(mode)
-    },
-    [track, store],
-  )
-
   // rendering
   // =
 
@@ -294,33 +271,6 @@ export const DrawerContent = observer(() => {
         </View>
         <View style={s.flex1} />
         <View style={styles.footer}>
-          <View>
-            <Text type="sm" style={[pal.textLight, styles.colorModeText]}>
-              Set color theme
-            </Text>
-            <View style={styles.selectableBtns}>
-              <SelectableBtn
-                current={store.shell.colorMode}
-                value="system"
-                label="System"
-                left
-                onChange={onColorModePress}
-              />
-              <SelectableBtn
-                current={store.shell.colorMode}
-                value="light"
-                label="Light"
-                onChange={onColorModePress}
-              />
-              <SelectableBtn
-                current={store.shell.colorMode}
-                value="dark"
-                label="Dark"
-                right
-                onChange={onColorModePress}
-              />
-            </View>
-          </View>
           <TouchableOpacity
             accessibilityRole="link"
             accessibilityLabel="Send feedback"
@@ -440,45 +390,6 @@ const InviteCodes = observer(() => {
   )
 })
 
-interface SelectableBtnProps {
-  current: string
-  value: string
-  label: string
-  left?: boolean
-  right?: boolean
-  onChange: (v: string) => void
-}
-
-function SelectableBtn({
-  current,
-  value,
-  label,
-  left,
-  right,
-  onChange,
-}: SelectableBtnProps) {
-  const pal = usePalette('default')
-  const palPrimary = usePalette('inverted')
-  return (
-    <Pressable
-      style={[
-        styles.selectableBtn,
-        left && styles.selectableBtnLeft,
-        right && styles.selectableBtnRight,
-        pal.border,
-        current === value ? palPrimary.view : pal.view,
-      ]}
-      onPress={() => onChange(value)}
-      accessibilityRole="button"
-      accessibilityLabel={value}
-      accessibilityHint={`Set color theme to  ${value}`}>
-      <Text style={current === value ? palPrimary.text : pal.text}>
-        {label}
-      </Text>
-    </Pressable>
-  )
-}
-
 const styles = StyleSheet.create({
   view: {
     flex: 1,
@@ -553,49 +464,8 @@ const styles = StyleSheet.create({
     marginRight: 6,
   },
 
-  colorModeText: {
-    marginLeft: 10,
-    marginBottom: 6,
-  },
-
-  selectableBtns: {
-    flexDirection: 'row',
-    marginLeft: 10,
-  },
-  selectableBtn: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    borderWidth: 1,
-    borderLeftWidth: 0,
-    paddingHorizontal: 10,
-    paddingVertical: 10,
-  },
-  selectableBtnLeft: {
-    borderTopLeftRadius: 8,
-    borderBottomLeftRadius: 8,
-    borderLeftWidth: 1,
-  },
-  selectableBtnRight: {
-    borderTopRightRadius: 8,
-    borderBottomRightRadius: 8,
-  },
-
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    borderRadius: 32,
-    padding: 14,
-    backgroundColor: colors.gray1,
-  },
-  toggleBtn: {
-    paddingHorizontal: 0,
-  },
-
   footer: {
-    flexDirection: 'column',
+    flexDirection: 'row',
-    rowGap: 10,
     justifyContent: 'space-between',
     paddingRight: 30,
     paddingTop: 20,
@@ -607,9 +477,6 @@ const styles = StyleSheet.create({
     padding: 10,
     borderRadius: 25,
   },
-  footerBtnDarkMode: {
-    backgroundColor: colors.black,
-  },
   footerBtnFeedback: {
     paddingHorizontal: 24,
   },

src/view/shell/desktop/RightNav.tsx

@@ -52,33 +52,6 @@ export const DesktopRightNav = observer(function DesktopRightNav() {
         </View>
       </View>
       <InviteCodes />
-      <View>
-        <Text type="sm" style={[pal.textLight, styles.colorModeText]}>
-          Set color theme
-        </Text>
-        <View style={styles.selectableBtns}>
-          <SelectableBtn
-            current={store.shell.colorMode}
-            value="system"
-            label="System"
-            left
-            onChange={(v: string) => store.shell.setColorMode(v)}
-          />
-          <SelectableBtn
-            current={store.shell.colorMode}
-            value="light"
-            label="Light"
-            onChange={(v: string) => store.shell.setColorMode(v)}
-          />
-          <SelectableBtn
-            current={store.shell.colorMode}
-            value="dark"
-            label="Dark"
-            right
-            onChange={(v: string) => store.shell.setColorMode(v)}
-          />
-        </View>
-      </View>
     </View>
   )
 })
@@ -121,45 +94,6 @@ const InviteCodes = observer(() => {
   )
 })
 
-interface SelectableBtnProps {
-  current: string
-  value: string
-  label: string
-  left?: boolean
-  right?: boolean
-  onChange: (v: string) => void
-}
-
-function SelectableBtn({
-  current,
-  value,
-  label,
-  left,
-  right,
-  onChange,
-}: SelectableBtnProps) {
-  const pal = usePalette('default')
-  const palPrimary = usePalette('inverted')
-  return (
-    <Pressable
-      style={[
-        styles.selectableBtn,
-        left && styles.selectableBtnLeft,
-        right && styles.selectableBtnRight,
-        pal.border,
-        current === value ? palPrimary.view : pal.view,
-      ]}
-      onPress={() => onChange(value)}
-      accessibilityRole="button"
-      accessibilityLabel={value}
-      accessibilityHint={`Set color theme to  ${value}`}>
-      <Text style={current === value ? palPrimary.text : pal.text}>
-        {label}
-      </Text>
-    </Pressable>
-  )
-}
-
 const styles = StyleSheet.create({
   rightNav: {
     position: 'absolute',
@@ -187,59 +121,4 @@ const styles = StyleSheet.create({
   inviteCodesIcon: {
     marginRight: 6,
   },
-
-  cycleColorModeToggle: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    marginHorizontal: 12,
-  },
-  cycleColorModeToggleIcon: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 26,
-    height: 26,
-    borderRadius: 15,
-  },
-
-  colorModeText: {
-    marginLeft: 10,
-    marginBottom: 6,
-  },
-
-  selectableBtns: {
-    flexDirection: 'row',
-    marginLeft: 10,
-  },
-  selectableBtn: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    borderWidth: 1,
-    borderLeftWidth: 0,
-    paddingHorizontal: 10,
-    paddingVertical: 10,
-  },
-  selectableBtnLeft: {
-    borderTopLeftRadius: 8,
-    borderBottomLeftRadius: 8,
-    borderLeftWidth: 1,
-  },
-  selectableBtnRight: {
-    borderTopRightRadius: 8,
-    borderBottomRightRadius: 8,
-  },
-
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    borderRadius: 32,
-    padding: 14,
-    backgroundColor: colors.gray1,
-  },
-  toggleBtn: {
-    paddingHorizontal: 0,
-  },
 })