diff options
| author | Ollie Hsieh <renahlee@outlook.com> | 2023-04-19 18:05:10 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-04-19 20:05:10 -0500 |
| commit | b24ba3adc93cf940eb936309ae73a2c205eaef24 (patch) | |
| tree | 373337a5f364fd1d83010c33bae3d878437d4ca7 /src/view/com/pager | |
| parent | 1472bd4f173a483e5f1a91514244fecaec23808f (diff) | |
| download | voidsky-b24ba3adc93cf940eb936309ae73a2c205eaef24.tar.zst | |
Add cursor to clickable elements (#491)
* Add cursor to clickable elements * Add cursor to clickable elements * Update per comments * Fix word wrap in notifications * Center the web login-load screen * Add hover states on web * Fix lint --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com>
Diffstat (limited to 'src/view/com/pager')
| -rw-r--r-- | src/view/com/pager/TabBar.tsx | 40 |
1 files changed, 19 insertions, 21 deletions
diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx index 8f3951e7b..628128e8f 100644 --- a/src/view/com/pager/TabBar.tsx +++ b/src/view/com/pager/TabBar.tsx @@ -1,11 +1,7 @@ import React, {createRef, useState, useMemo, useRef} from 'react' -import { - Animated, - StyleSheet, - TouchableWithoutFeedback, - View, -} from 'react-native' +import {Animated, StyleSheet, View} from 'react-native' import {Text} from '../util/text/Text' +import {PressableWithHover} from '../util/PressableWithHover' import {usePalette} from 'lib/hooks/usePalette' import {isDesktopWeb} from 'platform/detection' @@ -109,20 +105,21 @@ export function TabBar({ {items.map((item, i) => { const selected = i === selectedPage return ( - <TouchableWithoutFeedback - key={i} - testID={testID ? `${testID}-${item}` : undefined} + <PressableWithHover + ref={itemRefs[i]} + key={item} + style={ + indicatorPosition === 'top' ? styles.itemTop : styles.itemBottom + } + hoverStyle={pal.viewLight} onPress={() => onPressItem(i)}> - <View - style={ - indicatorPosition === 'top' ? styles.itemTop : styles.itemBottom - } - ref={itemRefs[i]}> - <Text type="xl-bold" style={selected ? pal.text : pal.textLight}> - {item} - </Text> - </View> - </TouchableWithoutFeedback> + <Text + type="xl-bold" + testID={testID ? `${testID}-${item}` : undefined} + style={selected ? pal.text : pal.textLight}> + {item} + </Text> + </PressableWithHover> ) })} </View> @@ -138,18 +135,19 @@ const styles = isDesktopWeb itemTop: { paddingTop: 16, paddingBottom: 14, - marginRight: 24, + paddingHorizontal: 12, }, itemBottom: { paddingTop: 14, paddingBottom: 16, - marginRight: 24, + paddingHorizontal: 12, }, indicator: { position: 'absolute', left: 0, width: 1, height: 3, + zIndex: 1, }, }) : StyleSheet.create({ |