diff options
Diffstat (limited to 'src/view/com/profile/ProfileHeader.tsx')
| -rw-r--r-- | src/view/com/profile/ProfileHeader.tsx | 168 |
1 files changed, 103 insertions, 65 deletions
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index e1b46f4c9..d492aa1f3 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -102,24 +102,11 @@ export const ProfileHeader = observer(function ProfileHeader({ /> </View> <View style={styles.content}> - <View style={[styles.displayNameLine]}> - <Text style={styles.displayName}>{view.displayName}</Text> - </View> - { - undefined /*<View style={styles.badgesLine}> - <FontAwesomeIcon icon="shield" style={s.mr5} size={12} /> - <Link href="/" title="Badge TODO"> - <Text style={[s.f12, s.bold]}> - Employee <Text style={[s.blue3]}>@blueskyweb.xyz</Text> - </Text> - </Link> - </View>*/ - } <View style={[styles.buttonsLine]}> {isMe ? ( <TouchableOpacity onPress={onPressEditProfile} - style={[styles.mainBtn, styles.btn]}> + style={[styles.btn, styles.mainBtn]}> <Text style={[s.fw400, s.f14]}>Edit Profile</Text> </TouchableOpacity> ) : ( @@ -127,28 +114,22 @@ export const ProfileHeader = observer(function ProfileHeader({ {view.myState.follow ? ( <TouchableOpacity onPress={onPressToggleFollow} - style={[styles.mainBtn, styles.btn]}> + style={[styles.btn, styles.mainBtn]}> <FontAwesomeIcon icon="check" style={[s.mr5]} size={14} /> <Text style={[s.fw400, s.f14]}>Following</Text> </TouchableOpacity> ) : ( - <TouchableOpacity - onPress={onPressToggleFollow} - style={[styles.mainBtn, styles.btn]}> - <FontAwesomeIcon icon="rss" style={[s.mr5]} size={13} /> - <Text style={[s.fw400, s.f14]}>Follow</Text> + <TouchableOpacity onPress={onPressToggleFollow}> + <LinearGradient + colors={[gradients.primary.start, gradients.primary.end]} + start={{x: 0, y: 0}} + end={{x: 1, y: 1}} + style={[styles.btn, styles.gradientBtn]}> + <FontAwesomeIcon icon="plus" style={[s.white, s.mr5]} /> + <Text style={[s.white, s.fw600, s.f16]}>Follow</Text> + </LinearGradient> </TouchableOpacity> )} - <TouchableOpacity - onPress={onPressMenu} - style={[styles.btn, styles.secondaryBtn, s.mr5]}> - <FontAwesomeIcon icon="user-plus" style={[s.gray5]} /> - </TouchableOpacity> - <TouchableOpacity - onPress={onPressMenu} - style={[styles.btn, styles.secondaryBtn, s.mr5]}> - <FontAwesomeIcon icon="note-sticky" style={[s.gray5]} /> - </TouchableOpacity> </> )} <TouchableOpacity @@ -157,7 +138,18 @@ export const ProfileHeader = observer(function ProfileHeader({ <FontAwesomeIcon icon="ellipsis" style={[s.gray5]} /> </TouchableOpacity> </View> - <View style={[s.flexRow]}> + <View style={styles.displayNameLine}> + <Text style={styles.displayName}>{view.displayName}</Text> + </View> + <View style={styles.handleLine}> + {view.isScene ? ( + <View style={styles.typeLabelWrapper}> + <Text style={styles.typeLabel}>Scene</Text> + </View> + ) : undefined} + <Text style={styles.handle}>@{view.handle}</Text> + </View> + <View style={styles.metricsLine}> <TouchableOpacity style={[s.flexRow, s.mr10]} onPress={onPressFollowers}> @@ -166,20 +158,42 @@ export const ProfileHeader = observer(function ProfileHeader({ {pluralize(view.followersCount, 'follower')} </Text> </TouchableOpacity> - <TouchableOpacity - style={[s.flexRow, s.mr10]} - onPress={onPressFollows}> - <Text style={[s.bold, s.mr2]}>{view.followsCount}</Text> - <Text style={s.gray5}>following</Text> - </TouchableOpacity> + {view.isUser ? ( + <TouchableOpacity + style={[s.flexRow, s.mr10]} + onPress={onPressFollows}> + <Text style={[s.bold, s.mr2]}>{view.followsCount}</Text> + <Text style={s.gray5}>following</Text> + </TouchableOpacity> + ) : undefined} + {view.isScene ? ( + <TouchableOpacity + style={[s.flexRow, s.mr10]} + onPress={onPressFollows}> + <Text style={[s.bold, s.mr2]}>{view.followsCount}</Text> + <Text style={s.gray5}> + {pluralize(view.followsCount, 'member')} + </Text> + </TouchableOpacity> + ) : undefined} <View style={[s.flexRow, s.mr10]}> <Text style={[s.bold, s.mr2]}>{view.postsCount}</Text> <Text style={s.gray5}>{pluralize(view.postsCount, 'post')}</Text> </View> </View> {view.description && ( - <Text style={[s.mt10, s.f15, s['lh15-1.3']]}>{view.description}</Text> + <Text style={[s.mb5, s.f15, s['lh15-1.3']]}>{view.description}</Text> )} + { + undefined /*<View style={styles.badgesLine}> + <FontAwesomeIcon icon="shield" style={s.mr5} size={12} /> + <Link href="/" title="Badge TODO"> + <Text style={[s.f12, s.bold]}> + Employee <Text style={[s.blue3]}>@blueskyweb.xyz</Text> + </Text> + </Link> + </View>*/ + } </View> </View> ) @@ -222,46 +236,70 @@ const styles = StyleSheet.create({ paddingHorizontal: 14, paddingBottom: 4, }, - displayNameLine: { - paddingLeft: 86, - marginBottom: 14, - }, - displayName: { - fontSize: 24, - fontWeight: 'bold', - }, - badgesLine: { - flexDirection: 'row', - alignItems: 'center', - marginBottom: 10, - }, + buttonsLine: { flexDirection: 'row', + marginLeft: 'auto', marginBottom: 12, }, - followBtn: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', + gradientBtn: { + paddingHorizontal: 24, paddingVertical: 6, - borderRadius: 6, - marginRight: 6, + }, + mainBtn: { + paddingHorizontal: 24, + }, + secondaryBtn: { + paddingHorizontal: 14, }, btn: { - flex: 1, + flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingVertical: 7, - borderRadius: 4, + borderRadius: 50, backgroundColor: colors.gray1, - marginRight: 6, + marginLeft: 6, }, - mainBtn: { + + displayNameLine: { + // paddingLeft: 86, + // marginBottom: 14, + }, + displayName: { + fontSize: 24, + fontWeight: 'bold', + }, + + handleLine: { flexDirection: 'row', + marginBottom: 8, }, - secondaryBtn: { - flex: 0, - paddingHorizontal: 14, - marginRight: 0, + handle: { + fontSize: 14, + fontWeight: 'bold', + color: colors.gray5, + }, + typeLabelWrapper: { + backgroundColor: colors.gray1, + paddingHorizontal: 4, + borderRadius: 4, + marginRight: 5, + }, + typeLabel: { + fontSize: 14, + fontWeight: 'bold', + color: colors.gray5, + }, + + metricsLine: { + flexDirection: 'row', + marginBottom: 8, + }, + + badgesLine: { + flexDirection: 'row', + alignItems: 'center', + marginBottom: 10, }, }) |