zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Enlarge the view header

zio/stable
Paul Frazee 2023-01-16 17:21:35 -06:00
parent 46a8dbdee1
commit dac9bc24d1
1 changed files with 14 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/view/com/util/ViewHeader.tsx
View File

@ -54,13 +54,13 @@ export const ViewHeader = observer(function ViewHeader({
style={canGoBack ? styles.backIcon : styles.backIconWide}> style={canGoBack ? styles.backIcon : styles.backIconWide}>
{canGoBack ? ( {canGoBack ? (
<FontAwesomeIcon <FontAwesomeIcon
size={18} size={24}
icon="angle-left" icon="angle-left"
style={[{marginTop: 6}, pal.text]} style={[{marginTop: 8}, pal.text]}
/> />
) : ( ) : (
<UserAvatar <UserAvatar
size={30} size={40}
handle={store.me.handle} handle={store.me.handle}
displayName={store.me.displayName} displayName={store.me.displayName}
avatar={store.me.avatar} avatar={store.me.avatar}
@ -68,12 +68,12 @@ export const ViewHeader = observer(function ViewHeader({
)} )}
</TouchableOpacity> </TouchableOpacity>
<View style={styles.titleContainer} pointerEvents="none"> <View style={styles.titleContainer} pointerEvents="none">
<Text type="h4" style={pal.text}> <Text type="h3" style={pal.text}>
{title} {title}
</Text> </Text>
{subtitle ? ( {subtitle ? (
<Text <Text
type="h5" type="h4"
style={[styles.subtitle, pal.textLight, {fontWeight: 'normal'}]} style={[styles.subtitle, pal.textLight, {fontWeight: 'normal'}]}
numberOfLines={1}> numberOfLines={1}>
{subtitle} {subtitle}
@ -83,34 +83,28 @@ export const ViewHeader = observer(function ViewHeader({
<TouchableOpacity <TouchableOpacity
onPress={onPressSearch} onPress={onPressSearch}
hitSlop={HITSLOP} hitSlop={HITSLOP}
style={[ style={[styles.btn, {marginLeft: 4}]}>
styles.btn, <MagnifyingGlassIcon size={26} strokeWidth={3} style={pal.text} />
{backgroundColor: pal.colors.backgroundLight, marginLeft: 4},
]}>
<MagnifyingGlassIcon size={18} strokeWidth={3} style={pal.text} />
</TouchableOpacity> </TouchableOpacity>
{!store.session.online ? ( {!store.session.online ? (
<TouchableOpacity <TouchableOpacity
style={[ style={[styles.btn, {marginLeft: 4}]}
styles.btn,
{backgroundColor: pal.colors.backgroundLight, marginLeft: 4},
]}
onPress={onPressReconnect}> onPress={onPressReconnect}>
{store.session.attemptingConnect ? ( {store.session.attemptingConnect ? (
<ActivityIndicator /> <ActivityIndicator />
) : ( ) : (
<> <>
<FontAwesomeIcon icon="signal" style={pal.text} size={16} /> <FontAwesomeIcon icon="signal" style={pal.text} size={23} />
<FontAwesomeIcon <FontAwesomeIcon
icon="x" icon="x"
style={{ style={{
backgroundColor: pal.colors.backgroundLight, backgroundColor: pal.colors.background,
color: theme.palette.error.background, color: theme.palette.error.background,
position: 'absolute', position: 'absolute',
right: 7, right: 0,
bottom: 7, bottom: 7,
}} }}
size={8} size={10}
/> />
</> </>
)} )}
@ -139,8 +133,8 @@ const styles = StyleSheet.create({
maxWidth: 200, maxWidth: 200,
}, },
backIcon: {width: 30, height: 30}, backIcon: {width: 40, height: 40},
backIconWide: {width: 40, height: 30}, backIconWide: {width: 50, height: 40},
btn: { btn: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',