From da0ed7e002c926f2a3a342d8d420304b10aa8663 Mon Sep 17 00:00:00 2001 From: Jaz Date: Tue, 16 May 2023 21:36:43 -0700 Subject: [PATCH 1/7] Feat: Use system default color mode, but allow user override --- src/App.native.tsx | 2 +- src/App.web.tsx | 2 +- src/lib/ThemeContext.tsx | 7 +++-- src/state/models/ui/shell.ts | 12 ++++----- src/view/shell/Drawer.tsx | 29 +++++++++++++------- src/view/shell/desktop/RightNav.tsx | 42 ++++++++++++++++++----------- 6 files changed, 59 insertions(+), 35 deletions(-) diff --git a/src/App.native.tsx b/src/App.native.tsx index 66722dc1..afab8236 100644 --- a/src/App.native.tsx +++ b/src/App.native.tsx @@ -51,7 +51,7 @@ const App = observer(() => { return null } return ( - + diff --git a/src/App.web.tsx b/src/App.web.tsx index 42932827..7570db44 100644 --- a/src/App.web.tsx +++ b/src/App.web.tsx @@ -30,7 +30,7 @@ const App = observer(() => { } return ( - + diff --git a/src/lib/ThemeContext.tsx b/src/lib/ThemeContext.tsx index ef17c1e7..251e04e5 100644 --- a/src/lib/ThemeContext.tsx +++ b/src/lib/ThemeContext.tsx @@ -89,10 +89,13 @@ export const ThemeProvider: React.FC = ({ theme, children, }) => { - const colorScheme = useColorScheme() + const colorSchemeFromRN = useColorScheme() + + // if theme is 'system', use the device's configured color scheme + let colorScheme = theme === 'system' ? colorSchemeFromRN : theme const value = useMemo( - () => ((theme || colorScheme) === 'dark' ? darkTheme : defaultTheme), + () => (colorScheme === 'dark' ? darkTheme : defaultTheme), [colorScheme, theme], ) diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts index 9b9a176b..187342ec 100644 --- a/src/state/models/ui/shell.ts +++ b/src/state/models/ui/shell.ts @@ -189,7 +189,7 @@ export interface ComposerOpts { } export class ShellUiModel { - darkMode = false + colorMode = 'system' minimalShellMode = false isDrawerOpen = false isDrawerSwipeDisabled = false @@ -210,20 +210,20 @@ export class ShellUiModel { serialize(): unknown { return { - darkMode: this.darkMode, + colorMode: this.colorMode, } } hydrate(v: unknown) { if (isObj(v)) { - if (hasProp(v, 'darkMode') && typeof v.darkMode === 'boolean') { - this.darkMode = v.darkMode + if (hasProp(v, 'colorMode') && typeof v.colorMode === 'string') { + this.colorMode = v.colorMode } } } - setDarkMode(v: boolean) { - this.darkMode = v + setColorMode(mode: string) { + this.colorMode = mode } setMinimalShellMode(v: boolean) { diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index d595bc52..ea215378 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -53,6 +53,19 @@ 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 // = @@ -112,9 +125,9 @@ export const DrawerContent = observer(() => { Linking.openURL(FEEDBACK_FORM_URL) }, [track]) - const onDarkmodePress = React.useCallback(() => { - track('Menu:ItemClicked', {url: '#darkmode'}) - store.shell.setDarkMode(!store.shell.darkMode) + const onColorModePress = React.useCallback(() => { + track('Menu:ItemClicked', {url: '#cycleColorMode'}) + store.shell.setColorMode(nextColorMode()) }, [track, store]) // rendering @@ -280,13 +293,9 @@ export const DrawerContent = observer(() => { {!isWeb && ( { - store.shell.setDarkMode(!store.shell.darkMode) + const nextColorMode = () => { + return colorModes[ + (colorModes.indexOf(store.shell.colorMode) + 1) % colorModes.length + ] + } + + const onModePress = React.useCallback(() => { + store.shell.setColorMode(nextColorMode()) }, [store]) return ( @@ -61,20 +77,16 @@ export const DesktopRightNav = observer(function DesktopRightNav() { - + accessibilityLabel="Cycle color mode" + accessibilityHint={modeAccessibilityText[nextColorMode()]}> + - {mode} mode + {modeHelpText[store.shell.colorMode]} @@ -148,13 +160,13 @@ const styles = StyleSheet.create({ marginRight: 6, }, - darkModeToggle: { + cycleColorModeToggle: { flexDirection: 'row', alignItems: 'center', gap: 8, marginHorizontal: 12, }, - darkModeToggleIcon: { + cycleColorModeToggleIcon: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', From 85dfef87ab8be42016fb146b4cc2fe0589a83fb1 Mon Sep 17 00:00:00 2001 From: Jaz Date: Tue, 16 May 2023 23:06:08 -0700 Subject: [PATCH 2/7] Use a three-state radio button for color mode --- src/view/com/util/Link.tsx | 9 +- src/view/shell/Drawer.tsx | 135 ++++++++++++++++++++++---- src/view/shell/desktop/RightNav.tsx | 144 ++++++++++++++++++++-------- 3 files changed, 227 insertions(+), 61 deletions(-) diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx index f753f01c..e4735442 100644 --- a/src/view/com/util/Link.tsx +++ b/src/view/com/util/Link.tsx @@ -229,14 +229,19 @@ function onPressInner( } else if ( !e.defaultPrevented && // onPress prevented default // @ts-ignore Web only -prf - !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys + !(e.metaKey || e.altKey || e.shiftKey) && // ignore clicks with modifier keys // @ts-ignore Web only -prf (e.button == null || e.button === 0) && // ignore everything but left clicks // @ts-ignore Web only -prf [undefined, null, '', 'self'].includes(e.currentTarget?.target) // let browser handle "target=_blank" etc. ) { e.preventDefault() - shouldHandle = true + if (e.ctrlKey && Platform.OS === 'web') { + shouldHandle = false + window.open(href, '_blank') + } else { + shouldHandle = true + } } if (shouldHandle) { diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index ea215378..2c7c6524 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -1,6 +1,7 @@ import React, {ComponentProps} from 'react' import { Linking, + Pressable, SafeAreaView, StyleProp, StyleSheet, @@ -125,10 +126,13 @@ export const DrawerContent = observer(() => { Linking.openURL(FEEDBACK_FORM_URL) }, [track]) - const onColorModePress = React.useCallback(() => { - track('Menu:ItemClicked', {url: '#cycleColorMode'}) - store.shell.setColorMode(nextColorMode()) - }, [track, store]) + const onColorModePress = React.useCallback( + (mode: string) => { + track('Menu:ItemClicked', {url: '#cycleColorMode'}) + store.shell.setColorMode(mode) + }, + [track, store], + ) // rendering // = @@ -291,23 +295,33 @@ export const DrawerContent = observer(() => { {!isWeb && ( - - } - strokeWidth={2} - /> - + + + 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, @@ -502,6 +555,46 @@ 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: 'row', justifyContent: 'space-between', diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index 084e9560..f81c218c 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -1,43 +1,20 @@ import React from 'react' import {observer} from 'mobx-react-lite' -import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {Pressable, StyleSheet, TouchableOpacity, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {usePalette} from 'lib/hooks/usePalette' import {DesktopSearch} from './Search' import {Text} from 'view/com/util/text/Text' import {TextLink} from 'view/com/util/Link' import {FEEDBACK_FORM_URL} from 'lib/constants' -import {s} from 'lib/styles' +import {colors, s} from 'lib/styles' import {useStores} from 'state/index' import {pluralize} from 'lib/strings/helpers' -import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' -import {MoonIcon} 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 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 modeHelpText = { - light: 'Light Theme', - dark: 'Dark Theme', - system: 'System Default Theme', - } - - const nextColorMode = () => { - return colorModes[ - (colorModes.indexOf(store.shell.colorMode) + 1) % colorModes.length - ] - } - - const onModePress = React.useCallback(() => { - store.shell.setColorMode(nextColorMode()) - }, [store]) return ( @@ -76,19 +53,31 @@ export const DesktopRightNav = observer(function DesktopRightNav() { - - - - - - {modeHelpText[store.shell.colorMode]} - - + + Set color theme + + + store.shell.setColorMode(v)} + /> + store.shell.setColorMode(v)} + /> + store.shell.setColorMode(v)} + /> + ) @@ -132,6 +121,45 @@ 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', @@ -174,4 +202,44 @@ const styles = StyleSheet.create({ 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, + }, }) From f4327aff69acbe8a6af744efb083df8b34e2de9d Mon Sep 17 00:00:00 2001 From: Jaz Date: Tue, 16 May 2023 23:11:29 -0700 Subject: [PATCH 3/7] Fix mobile layout at least for mobile web --- src/view/shell/Drawer.tsx | 57 +++++++++++++++++++-------------------- 1 file changed, 28 insertions(+), 29 deletions(-) diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index 2c7c6524..aad38212 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -294,35 +294,33 @@ export const DrawerContent = observer(() => { - {!isWeb && ( - - - Set color theme - - - - - - + + + Set color theme + + + + + - )} + Date: Tue, 16 May 2023 23:22:18 -0700 Subject: [PATCH 4/7] Unstage open post in new tab changes, oops --- src/view/com/util/Link.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx index e4735442..f753f01c 100644 --- a/src/view/com/util/Link.tsx +++ b/src/view/com/util/Link.tsx @@ -229,19 +229,14 @@ function onPressInner( } else if ( !e.defaultPrevented && // onPress prevented default // @ts-ignore Web only -prf - !(e.metaKey || e.altKey || e.shiftKey) && // ignore clicks with modifier keys + !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys // @ts-ignore Web only -prf (e.button == null || e.button === 0) && // ignore everything but left clicks // @ts-ignore Web only -prf [undefined, null, '', 'self'].includes(e.currentTarget?.target) // let browser handle "target=_blank" etc. ) { e.preventDefault() - if (e.ctrlKey && Platform.OS === 'web') { - shouldHandle = false - window.open(href, '_blank') - } else { - shouldHandle = true - } + shouldHandle = true } if (shouldHandle) { From 3c15f6ba024aff5a3b25a7925fe2edcb66640a56 Mon Sep 17 00:00:00 2001 From: Jaz Date: Wed, 17 May 2023 21:14:26 -0700 Subject: [PATCH 5/7] 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, - }, }) From ac3a95dc7228ad3d1d1cb7c5e7e26968009173bb Mon Sep 17 00:00:00 2001 From: Jaz Date: Wed, 17 May 2023 21:15:37 -0700 Subject: [PATCH 6/7] Remove unused imports --- src/view/shell/Drawer.tsx | 1 - src/view/shell/desktop/RightNav.tsx | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index e193ded7..680b60ba 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -26,7 +26,6 @@ import { CogIcon, MagnifyingGlassIcon2, MagnifyingGlassIcon2Solid, - MoonIcon, UserIconSolid, HandIcon, } from 'lib/icons' diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index 9d87c58a..c1544713 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -1,13 +1,13 @@ import React from 'react' import {observer} from 'mobx-react-lite' -import {Pressable, StyleSheet, TouchableOpacity, View} from 'react-native' +import {StyleSheet, TouchableOpacity, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {usePalette} from 'lib/hooks/usePalette' import {DesktopSearch} from './Search' import {Text} from 'view/com/util/text/Text' import {TextLink} from 'view/com/util/Link' import {FEEDBACK_FORM_URL} from 'lib/constants' -import {colors, s} from 'lib/styles' +import {s} from 'lib/styles' import {useStores} from 'state/index' import {pluralize} from 'lib/strings/helpers' import {formatCount} from 'view/com/util/numeric/format' From 2413549fa5ae77c1d0ca3d91cf43c2ef41c35d63 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Tue, 30 May 2023 21:13:18 -0500 Subject: [PATCH 7/7] Tune sizing of appearance control --- src/view/screens/Settings.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx index 3f6fa84d..42882233 100644 --- a/src/view/screens/Settings.tsx +++ b/src/view/screens/Settings.tsx @@ -571,6 +571,8 @@ const styles = StyleSheet.create({ flexDirection: 'row', }, selectableBtn: { + flex: isDesktopWeb ? undefined : 1, + width: isDesktopWeb ? 100 : undefined, flexDirection: 'row', justifyContent: 'center', borderWidth: 1,