Tune the UI layout of the feed tab header

zio/stable
Paul Frazee 2023-05-25 14:56:23 -05:00
parent 524f8b6abd
commit f03ac9fd56
3 changed files with 22 additions and 21 deletions

View File

@ -7,8 +7,9 @@ import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
import {Link} from '../util/Link'
import {Text} from '../util/text/Text'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {colors} from 'lib/styles'
import {s} from 'lib/styles'
export const FeedsTabBar = observer(
(
@ -45,20 +46,23 @@ export const FeedsTabBar = observer(
<View style={[pal.view]}>
<TouchableOpacity
testID="viewHeaderDrawerBtn"
style={styles.tabBarAvi}
onPress={onPressAvi}
accessibilityRole="button"
accessibilityLabel="Open navigation"
accessibilityHint="Access profile and other navigation links">
<FontAwesomeIcon icon="bars" size={24} color={colors.blue3} />
accessibilityHint="Access profile and other navigation links"
hitSlop={10}>
<FontAwesomeIcon icon="bars" size={18} color={pal.colors.icon} />
</TouchableOpacity>
</View>
<Text type="title" style={[pal.link, s.bold]}>
Bluesky
</Text>
<View style={[pal.view]}>
<Link href="/settings/saved-feeds">
<Link href="/settings/saved-feeds" hitSlop={10}>
<FontAwesomeIcon
icon="satellite-dish"
size={24}
color={pal.colors.link}
size={19}
color={pal.colors.icon}
/>
</Link>
</View>
@ -75,13 +79,6 @@ export const FeedsTabBar = observer(
)
const styles = StyleSheet.create({
topBar: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 18,
width: '100%',
},
tabBar: {
position: 'absolute',
zIndex: 1,
@ -92,8 +89,12 @@ const styles = StyleSheet.create({
alignItems: 'center',
borderBottomWidth: 1,
},
tabBarAvi: {
marginTop: 1,
marginRight: 18,
topBar: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 18,
paddingBottom: 2,
width: '100%',
},
})

View File

@ -92,7 +92,7 @@ export function TabBar({
hoverStyle={pal.viewLight}
onPress={() => onPressItem(i)}>
<Text
type="xl-bold"
type="lg-bold"
testID={testID ? `${testID}-${item}` : undefined}
style={selected ? pal.text : pal.textLight}>
{item}
@ -127,12 +127,12 @@ const styles = isDesktopWeb
flexDirection: 'row',
},
contentContainer: {
gap: 14,
gap: 18,
paddingHorizontal: 18,
},
item: {
paddingTop: 8,
paddingBottom: 12,
paddingBottom: 8,
borderBottomWidth: 3,
borderBottomColor: 'transparent',
},

View File

@ -23,7 +23,7 @@ import {useAnalytics} from 'lib/analytics'
import {ComposeIcon2} from 'lib/icons'
import {isDesktopWeb} from 'platform/detection'
const HEADER_OFFSET = isDesktopWeb ? 50 : 74
const HEADER_OFFSET = isDesktopWeb ? 50 : 64
const POLL_FREQ = 30e3 // 30sec
type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>