diff options
Diffstat (limited to 'src/view')
-rw-r--r-- | src/view/screens/Settings.tsx | 109 | ||||
-rw-r--r-- | src/view/shell/Drawer.tsx | 33 | ||||
-rw-r--r-- | src/view/shell/desktop/RightNav.tsx | 47 |
3 files changed, 109 insertions, 80 deletions
diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx index 1b90cbb8a..428822339 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, @@ -288,6 +289,34 @@ export const SettingsScreen = withAuthRequired( </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]}> Advanced @@ -442,6 +471,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, @@ -493,4 +561,45 @@ const styles = StyleSheet.create({ paddingVertical: 8, paddingHorizontal: 18, }, + + colorModeText: { + marginLeft: 10, + marginBottom: 6, + }, + + selectableBtns: { + flexDirection: 'row', + }, + selectableBtn: { + flex: isDesktopWeb ? undefined : 1, + width: isDesktopWeb ? 100 : undefined, + 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 57f4ee696..cf8639338 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -27,7 +27,6 @@ import { CogIcon, MagnifyingGlassIcon2, MagnifyingGlassIcon2Solid, - MoonIcon, UserIconSolid, SatelliteDishIcon, SatelliteDishIconSolid, @@ -119,12 +118,6 @@ export const DrawerContent = observer(() => { track('Menu:FeedbackClicked') Linking.openURL(FEEDBACK_FORM_URL) }, [track]) - - const onDarkmodePress = React.useCallback(() => { - track('Menu:ItemClicked', {url: '#darkmode'}) - store.shell.setDarkMode(!store.shell.darkMode) - }, [track, store]) - // rendering // = @@ -303,29 +296,6 @@ export const DrawerContent = observer(() => { <View style={styles.smallSpacer} /> </ScrollView> <View style={styles.footer}> - {!isWeb && ( - <TouchableOpacity - accessibilityRole="button" - accessibilityLabel="Toggle dark mode" - accessibilityHint={ - theme.colorScheme === 'dark' - ? 'Sets display to light mode' - : 'Sets display to dark mode' - } - onPress={onDarkmodePress} - style={[ - styles.footerBtn, - theme.colorScheme === 'light' - ? pal.btn - : styles.footerBtnDarkMode, - ]}> - <MoonIcon - size={22} - style={pal.text as StyleProp<ViewStyle>} - strokeWidth={2} - /> - </TouchableOpacity> - )} <TouchableOpacity accessibilityRole="link" accessibilityLabel="Send feedback" @@ -536,9 +506,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 02165d3c6..c15447133 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -10,19 +10,11 @@ import {FEEDBACK_FORM_URL} from 'lib/constants' import {s} from 'lib/styles' import {useStores} from 'state/index' import {pluralize} from 'lib/strings/helpers' -import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' -import {MoonIcon, SunIcon} from 'lib/icons' import {formatCount} from 'view/com/util/numeric/format' export const DesktopRightNav = observer(function DesktopRightNav() { const store = useStores() const pal = usePalette('default') - const mode = useColorSchemeStyle('Light', 'Dark') - const otherMode = mode === 'Dark' ? 'Light' : 'Dark' - - const onDarkmodePress = React.useCallback(() => { - store.shell.setDarkMode(!store.shell.darkMode) - }, [store]) return ( <View style={[styles.rightNav, pal.view]}> @@ -60,29 +52,6 @@ export const DesktopRightNav = observer(function DesktopRightNav() { </View> </View> <InviteCodes /> - <View> - <TouchableOpacity - style={[styles.darkModeToggle]} - onPress={onDarkmodePress} - accessibilityRole="button" - accessibilityLabel="Toggle dark mode" - accessibilityHint={ - mode === 'Dark' - ? 'Sets display to light mode' - : 'Sets display to dark mode' - }> - <View style={[pal.viewLight, styles.darkModeToggleIcon]}> - {mode === 'Dark' ? ( - <SunIcon size={18} style={pal.textLight} /> - ) : ( - <MoonIcon size={18} style={pal.textLight} /> - )} - </View> - <Text type="sm" style={pal.textLight}> - {otherMode} mode - </Text> - </TouchableOpacity> - </View> </View> ) }) @@ -152,20 +121,4 @@ const styles = StyleSheet.create({ inviteCodesIcon: { marginRight: 6, }, - - darkModeToggle: { - flexDirection: 'row', - alignItems: 'center', - gap: 8, - marginHorizontal: 12, - marginTop: 8, - }, - darkModeToggleIcon: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - width: 26, - height: 26, - borderRadius: 15, - }, }) |