Prettier profile headers (no standard header)

This commit is contained in:
Paul Frazee 2023-01-18 12:56:53 -06:00
parent 990c824648
commit 6a01e0529b
6 changed files with 34 additions and 9 deletions

View file

@ -8,6 +8,7 @@ import {
} from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {BlurView} from '@react-native-community/blur'
import {ProfileViewModel} from '../../../state/models/profile-view'
import {useStores} from '../../../state'
import {
@ -36,6 +37,9 @@ export const ProfileHeader = observer(function ProfileHeader({
const pal = usePalette('default')
const store = useStores()
const onPressBack = () => {
store.nav.tab.goBack()
}
const onPressAvi = () => {
if (view.avatar) {
store.shell.openLightbox(new ProfileImageLightbox(view))
@ -262,6 +266,11 @@ export const ProfileHeader = observer(function ProfileHeader({
</View>
) : undefined}
</View>
<TouchableWithoutFeedback onPress={onPressBack}>
<BlurView style={styles.backBtn} blurType="dark">
<FontAwesomeIcon size={18} icon="angle-left" style={s.white} />
</BlurView>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback
testID="profileHeaderAviButton"
onPress={onPressAvi}>
@ -284,9 +293,19 @@ const styles = StyleSheet.create({
width: '100%',
height: 120,
},
backBtn: {
position: 'absolute',
top: 10,
left: 10,
width: 30,
height: 30,
borderRadius: 15,
alignItems: 'center',
justifyContent: 'center',
},
avi: {
position: 'absolute',
top: 80,
top: 110,
left: 10,
width: 84,
height: 84,

View file

@ -61,7 +61,7 @@ export function UserBanner({
}, [onSelectNewBanner])
const renderSvg = () => (
<Svg width="100%" height="120" viewBox="50 0 200 100">
<Svg width="100%" height="150" viewBox="50 0 200 100">
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
<Stop
@ -118,6 +118,6 @@ const styles = StyleSheet.create({
},
bannerImage: {
width: '100%',
height: 120,
height: 150,
},
})