From 3c15f6ba024aff5a3b25a7925fe2edcb66640a56 Mon Sep 17 00:00:00 2001
From: Jaz <ericvolp12@gmail.com>
Date: Wed, 17 May 2023 21:14:26 -0700
Subject: Move appearance settings to settings page

---
 src/view/shell/Drawer.tsx | 135 +---------------------------------------------
 1 file changed, 1 insertion(+), 134 deletions(-)

(limited to 'src/view/shell/Drawer.tsx')

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,
   },
-- 
cgit 1.4.1

