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

Shrink the header back down but use bolder title text

zio/stable
Paul Frazee 2023-01-17 10:32:40 -06:00
parent bf1092ad86
commit 4e312d1d24
2 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/view/com/util/PostCtrls.tsx
View File

@ -115,7 +115,6 @@ export function PostCtrls(opts: PostCtrlsOpts) {
<View style={[styles.ctrls, opts.style]}> <View style={[styles.ctrls, opts.style]}>
<View style={s.flex1}> <View style={s.flex1}>
<TouchableOpacity <TouchableOpacity
testID="postCtrlsReplyButton"
style={styles.ctrl} style={styles.ctrl}
hitSlop={HITSLOP} hitSlop={HITSLOP}
onPress={opts.onPressReply}> onPress={opts.onPressReply}>
@ -131,7 +130,6 @@ export function PostCtrls(opts: PostCtrlsOpts) {
</View> </View>
<View style={s.flex1}> <View style={s.flex1}>
<TouchableOpacity <TouchableOpacity
testID="postCtrlsToggleRepostButton"
hitSlop={HITSLOP} hitSlop={HITSLOP}
onPress={onPressToggleRepostWrapper} onPress={onPressToggleRepostWrapper}
style={styles.ctrl}> style={styles.ctrl}>
@ -158,7 +156,6 @@ export function PostCtrls(opts: PostCtrlsOpts) {
</View> </View>
<View style={s.flex1}> <View style={s.flex1}>
<TouchableOpacity <TouchableOpacity
testID="postCtrlsToggleUpvoteButton"
style={styles.ctrl} style={styles.ctrl}
hitSlop={HITSLOP} hitSlop={HITSLOP}
onPress={onPressToggleUpvoteWrapper}> onPress={onPressToggleUpvoteWrapper}>

35
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={24} size={18}
icon="angle-left" icon="angle-left"
style={[{marginTop: 8}, pal.text]} style={[{marginTop: 6}, pal.text]}
/> />
) : ( ) : (
<UserAvatar <UserAvatar
size={40} size={30}
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,13 +68,13 @@ export const ViewHeader = observer(function ViewHeader({
)} )}
</TouchableOpacity> </TouchableOpacity>
<View style={styles.titleContainer} pointerEvents="none"> <View style={styles.titleContainer} pointerEvents="none">
<Text type="h3" style={pal.text}> <Text type="h4" style={[pal.text, styles.title]}>
{title} {title}
</Text> </Text>
{subtitle ? ( {subtitle ? (
<Text <Text
type="h4" type="h5"
style={[styles.subtitle, pal.textLight, {fontWeight: 'normal'}]} style={[styles.subtitle, pal.textLight]}
numberOfLines={1}> numberOfLines={1}>
{subtitle} {subtitle}
</Text> </Text>
@ -83,28 +83,26 @@ export const ViewHeader = observer(function ViewHeader({
<TouchableOpacity <TouchableOpacity
onPress={onPressSearch} onPress={onPressSearch}
hitSlop={HITSLOP} hitSlop={HITSLOP}
style={[styles.btn, {marginLeft: 4}]}> style={styles.btn}>
<MagnifyingGlassIcon size={26} strokeWidth={3} style={pal.text} /> <MagnifyingGlassIcon size={21} strokeWidth={3} style={pal.text} />
</TouchableOpacity> </TouchableOpacity>
{!store.session.online ? ( {!store.session.online ? (
<TouchableOpacity <TouchableOpacity style={styles.btn} onPress={onPressReconnect}>
style={[styles.btn, {marginLeft: 4}]}
onPress={onPressReconnect}>
{store.session.attemptingConnect ? ( {store.session.attemptingConnect ? (
<ActivityIndicator /> <ActivityIndicator />
) : ( ) : (
<> <>
<FontAwesomeIcon icon="signal" style={pal.text} size={23} /> <FontAwesomeIcon icon="signal" style={pal.text} size={16} />
<FontAwesomeIcon <FontAwesomeIcon
icon="x" icon="x"
style={{ style={{
backgroundColor: pal.colors.background, backgroundColor: pal.colors.background,
color: theme.palette.error.background, color: theme.palette.error.background,
position: 'absolute', position: 'absolute',
right: 0, right: 7,
bottom: 7, bottom: 7,
}} }}
size={10} size={8}
/> />
</> </>
)} )}
@ -128,13 +126,17 @@ const styles = StyleSheet.create({
alignItems: 'baseline', alignItems: 'baseline',
marginRight: 'auto', marginRight: 'auto',
}, },
title: {
fontWeight: 'bold',
},
subtitle: { subtitle: {
marginLeft: 4, marginLeft: 4,
maxWidth: 200, maxWidth: 200,
fontWeight: 'normal',
}, },
backIcon: {width: 40, height: 40}, backIcon: {width: 30, height: 30},
backIconWide: {width: 50, height: 40}, backIconWide: {width: 40, height: 30},
btn: { btn: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
@ -142,5 +144,6 @@ const styles = StyleSheet.create({
width: 36, width: 36,
height: 36, height: 36,
borderRadius: 20, borderRadius: 20,
marginLeft: 4,
}, },
}) })