From 3c15f6ba024aff5a3b25a7925fe2edcb66640a56 Mon Sep 17 00:00:00 2001 From: Jaz Date: Wed, 17 May 2023 21:14:26 -0700 Subject: [PATCH] Move appearance settings to settings page --- src/view/screens/Settings.tsx | 107 ++++++++++++++++++++++ src/view/shell/Drawer.tsx | 135 +--------------------------- src/view/shell/desktop/RightNav.tsx | 121 ------------------------- 3 files changed, 108 insertions(+), 255 deletions(-) diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx index 1571a614..b222d7db 100644 --- a/src/view/screens/Settings.tsx +++ b/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( + + + Appearance + + + + store.shell.setColorMode(v)} + /> + store.shell.setColorMode(v)} + /> + store.shell.setColorMode(v)} + /> + + @@ -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 ( + onChange(value)} + accessibilityRole="button" + accessibilityLabel={value} + accessibilityHint={`Set color theme to ${value}`}> + + {label} + + + ) +} + 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, + }, }) diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index aad38212..e193ded7 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(() => { - - - Set color theme - - - - - - - { ) }) -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 ( - onChange(value)} - accessibilityRole="button" - accessibilityLabel={value} - accessibilityHint={`Set color theme to ${value}`}> - - {label} - - - ) -} - 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 f81c218c..9d87c58a 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() { - - - Set color theme - - - store.shell.setColorMode(v)} - /> - store.shell.setColorMode(v)} - /> - store.shell.setColorMode(v)} - /> - - ) }) @@ -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 ( - onChange(value)} - accessibilityRole="button" - accessibilityLabel={value} - accessibilityHint={`Set color theme to ${value}`}> - - {label} - - - ) -} - 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, - }, })