Tune the UI layout of the feed tab header
parent
524f8b6abd
commit
f03ac9fd56
|
@ -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%',
|
||||
},
|
||||
})
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
|
|
|
@ -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'>
|
||||
|
|
Loading…
Reference in New Issue