Shrink the header back down but use bolder title text
parent
bf1092ad86
commit
4e312d1d24
|
@ -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}>
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue