Move appearance settings to settings page

2 files changed, 1 insertions, 255 deletions

diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
index aad382121..e193ded76 100644
--- a/src/view/shell/Drawer.tsx
+++ b/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',
-    rowGap: 10,
+    flexDirection: 'row',
     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,
   },
diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx
index f81c218cd..9d87c58a5 100644
--- a/src/view/shell/desktop/RightNav.tsx
+++ b/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,
-  },
 })