diff options
-rw-r--r-- | src/view/com/util/forms/Button.tsx | 17 | ||||
-rw-r--r-- | src/view/shell/desktop/RightNav.tsx | 9 |
2 files changed, 20 insertions, 6 deletions
diff --git a/src/view/com/util/forms/Button.tsx b/src/view/com/util/forms/Button.tsx index a8f1f363f..6a5f19f99 100644 --- a/src/view/com/util/forms/Button.tsx +++ b/src/view/com/util/forms/Button.tsx @@ -128,6 +128,7 @@ export function Button({ }, }, ) + const onPressWrapped = React.useCallback( (event: Event) => { event.stopPropagation() @@ -136,9 +137,23 @@ export function Button({ }, [onPress], ) + + const getStyle = React.useCallback( + state => { + const arr = [typeOuterStyle, styles.outer, style] + if (state.pressed) { + arr.push({opacity: 0.6}) + } else if (state.hovered) { + arr.push({opacity: 0.8}) + } + return arr + }, + [typeOuterStyle, style], + ) + return ( <Pressable - style={[typeOuterStyle, styles.outer, style]} + style={getStyle} onPress={onPressWrapped} testID={testID} accessibilityRole="button" diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index fcdea35e8..4fae64fef 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -18,7 +18,7 @@ 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 otherMode = mode === 'Dark' ? 'Light' : 'Dark' const onDarkmodePress = React.useCallback(() => { store.shell.setDarkMode(!store.shell.darkMode) @@ -72,12 +72,11 @@ export const DesktopRightNav = observer(function DesktopRightNav() { : 'Sets display to dark mode' }> <View style={[pal.viewLight, styles.darkModeToggleIcon]}> - { - mode === 'Dark' ? + {mode === 'Dark' ? ( <SunIcon size={18} style={pal.textLight} /> - : + ) : ( <MoonIcon size={18} style={pal.textLight} /> - } + )} </View> <Text type="sm" style={pal.textLight}> {otherMode} mode |