feat: add basic visual feedback on Button interactions (#708)
* feat: add basic visual feedback on Button interaction * Use a more efficient approach to providing visual feedback * Fix some lint issues left over from another PR --------- Co-authored-by: Simek <gosimek@gmail.com>zio/stable
parent
41f3a05515
commit
562faa76cc
|
@ -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"
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue