diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/view/com/profile/ProfileHeader.tsx | 124 | ||||
| -rw-r--r-- | src/view/lib/hooks/usePalette.ts | 4 |
2 files changed, 70 insertions, 58 deletions
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index 131c82b75..32fe86909 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -14,7 +14,7 @@ import { ProfileImageLightbox, } from '../../../state/models/shell-ui' import {pluralize} from '../../../lib/strings' -import {s, colors} from '../../lib/styles' +import {s} from '../../lib/styles' import {getGradient} from '../../lib/asset-gen' import {DropdownButton, DropdownItem} from '../util/forms/DropdownButton' import * as Toast from '../util/Toast' @@ -24,6 +24,7 @@ import {RichText} from '../util/text/RichText' import {UserAvatar} from '../util/UserAvatar' import {UserBanner} from '../util/UserBanner' import {UserInfoText} from '../util/UserInfoText' +import {usePalette} from '../../lib/hooks/usePalette' export const ProfileHeader = observer(function ProfileHeader({ view, @@ -32,6 +33,7 @@ export const ProfileHeader = observer(function ProfileHeader({ view: ProfileViewModel onRefreshAll: () => void }) { + const pal = usePalette('default') const store = useStores() const isMember = useMemo( () => view.isScene && view.myState.member, @@ -95,9 +97,10 @@ export const ProfileHeader = observer(function ProfileHeader({ // = if (!view || !view.hasLoaded) { return ( - <View style={styles.outer}> + <View style={pal.view}> <LoadingPlaceholder width="100%" height={120} /> - <View style={styles.avi}> + <View + style={[pal.view, {borderColor: pal.colors.background}, styles.avi]}> <LoadingPlaceholder width={80} height={80} @@ -113,7 +116,7 @@ export const ProfileHeader = observer(function ProfileHeader({ /> </View> <View style={styles.displayNameLine}> - <Text style={styles.displayName}> + <Text type="h2" style={[pal.text, {lineHeight: 38}]}> {view.displayName || view.handle} </Text> </View> @@ -161,24 +164,32 @@ export const ProfileHeader = observer(function ProfileHeader({ } } return ( - <View style={styles.outer}> + <View style={pal.view}> <UserBanner handle={view.handle} banner={view.banner} /> <View style={styles.content}> <View style={[styles.buttonsLine]}> {isMe ? ( <TouchableOpacity onPress={onPressEditProfile} - style={[styles.btn, styles.mainBtn]}> - <Text style={[s.fw400, s.f14, s.black]}>Edit Profile</Text> + style={[styles.btn, styles.mainBtn, pal.btn]}> + <Text type="button" style={pal.text}> + Edit Profile + </Text> </TouchableOpacity> ) : ( <> {view.myState.follow ? ( <TouchableOpacity onPress={onPressToggleFollow} - style={[styles.btn, styles.mainBtn]}> - <FontAwesomeIcon icon="check" style={[s.mr5]} size={14} /> - <Text style={[s.fw400, s.f14, s.black]}>Following</Text> + style={[styles.btn, styles.mainBtn, pal.btn]}> + <FontAwesomeIcon + icon="check" + style={[pal.text, s.mr5]} + size={14} + /> + <Text type="button" style={pal.text}> + Following + </Text> </TouchableOpacity> ) : ( <TouchableOpacity onPress={onPressToggleFollow}> @@ -188,7 +199,9 @@ export const ProfileHeader = observer(function ProfileHeader({ 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> + <Text type="button" style={[s.white, s.bold]}> + Follow + </Text> </LinearGradient> </TouchableOpacity> )} @@ -196,33 +209,38 @@ export const ProfileHeader = observer(function ProfileHeader({ )} {dropdownItems?.length ? ( <DropdownButton + type="bare" items={dropdownItems} - style={[styles.btn, styles.secondaryBtn]}> - <FontAwesomeIcon icon="ellipsis" style={[s.gray5]} /> + style={[styles.btn, styles.secondaryBtn, pal.btn]}> + <FontAwesomeIcon icon="ellipsis" style={[pal.text]} /> </DropdownButton> ) : undefined} </View> <View style={styles.displayNameLine}> - <Text style={[styles.displayName, s.black]}> + <Text type="h2" style={[pal.text, {lineHeight: 38}]}> {view.displayName || view.handle} </Text> </View> <View style={styles.handleLine}> {view.isScene ? ( - <View style={styles.typeLabelWrapper}> - <Text style={styles.typeLabel}>Scene</Text> + <View + style={[ + styles.typeLabelWrapper, + {backgroundColor: pal.colors.backgroundLight}, + ]}> + <Text style={[styles.typeLabel, pal.textLight]}>Scene</Text> </View> ) : undefined} - <Text style={styles.handle}>@{view.handle}</Text> + <Text style={pal.textLight}>@{view.handle}</Text> </View> <View style={styles.metricsLine}> <TouchableOpacity style={[s.flexRow, s.mr10]} onPress={onPressFollowers}> - <Text style={[s.bold, s.mr2, styles.metricsText, s.black]}> + <Text type="body2" style={[s.bold, s.mr2, pal.text]}> {view.followersCount} </Text> - <Text style={[s.gray5, styles.metricsText]}> + <Text type="body2" style={[pal.textLight]}> {pluralize(view.followersCount, 'follower')} </Text> </TouchableOpacity> @@ -230,36 +248,38 @@ export const ProfileHeader = observer(function ProfileHeader({ <TouchableOpacity style={[s.flexRow, s.mr10]} onPress={onPressFollows}> - <Text style={[s.bold, s.mr2, styles.metricsText, s.black]}> + <Text type="body2" style={[s.bold, s.mr2, pal.text]}> {view.followsCount} </Text> - <Text style={[s.gray5, styles.metricsText]}>following</Text> + <Text type="body2" style={[pal.textLight]}> + following + </Text> </TouchableOpacity> ) : undefined} {view.isScene ? ( <TouchableOpacity style={[s.flexRow, s.mr10]} onPress={onPressMembers}> - <Text style={[s.bold, s.mr2, styles.metricsText, s.black]}> + <Text type="body2" style={[s.bold, s.mr2, pal.text]}> {view.membersCount} </Text> - <Text style={[s.gray5, styles.metricsText]}> + <Text type="body2" style={[pal.textLight]}> {pluralize(view.membersCount, 'member')} </Text> </TouchableOpacity> ) : undefined} <View style={[s.flexRow, s.mr10]}> - <Text style={[s.bold, s.mr2, styles.metricsText, s.black]}> + <Text type="body2" style={[s.bold, s.mr2, pal.text]}> {view.postsCount} </Text> - <Text style={[s.gray5, styles.metricsText]}> + <Text type="body2" style={[pal.textLight]}> {pluralize(view.postsCount, 'post')} </Text> </View> </View> {view.description ? ( <RichText - style={styles.description} + style={[styles.description, pal.text]} numberOfLines={3} text={view.description} entities={view.descriptionEntities} @@ -267,10 +287,16 @@ export const ProfileHeader = observer(function ProfileHeader({ ) : undefined} {view.isScene && view.creator ? ( <View style={styles.relationshipsLine}> - <FontAwesomeIcon icon={['far', 'user']} style={[s.gray5, s.mr5]} /> - <Text style={[s.mr2, s.gray5, s.f15]}>Created by</Text> + <FontAwesomeIcon + icon={['far', 'user']} + style={[pal.textLight, s.mr5]} + /> + <Text type="body2" style={[s.mr2, pal.textLight]}> + Created by + </Text> <UserInfoText - style={[s.blue3, s.f15]} + type="body2" + style={[pal.link]} did={view.creator} prefix="@" asLink @@ -281,14 +307,16 @@ export const ProfileHeader = observer(function ProfileHeader({ <View style={styles.relationshipsLine}> <FontAwesomeIcon icon={['far', 'circle-check']} - style={[s.gray5, s.mr5]} + style={[pal.textLight, s.mr5]} /> - <Text style={[s.mr2, s.gray5, s.f15]}>You are a member</Text> + <Text type="body2" style={[s.mr2, pal.textLight]}> + You are a member + </Text> </View> ) : undefined} </View> {view.isScene && view.creator === store.me.did ? ( - <View style={styles.sceneAdminContainer}> + <View style={[styles.sceneAdminContainer, pal.border]}> <TouchableOpacity onPress={onPressInviteMembers}> <LinearGradient colors={[gradient[1], gradient[0]]} @@ -300,12 +328,16 @@ export const ProfileHeader = observer(function ProfileHeader({ style={[s.mr5, s.white]} size={15} /> - <Text style={[s.bold, s.f15, s.white]}>Invite Members</Text> + <Text type="button" style={[s.bold, s.white]}> + Invite Members + </Text> </LinearGradient> </TouchableOpacity> </View> ) : undefined} - <TouchableOpacity style={styles.avi} onPress={onPressAvi}> + <TouchableOpacity + style={[pal.view, {borderColor: pal.colors.background}, styles.avi]} + onPress={onPressAvi}> <UserAvatar size={80} handle={view.handle} @@ -318,9 +350,6 @@ export const ProfileHeader = observer(function ProfileHeader({ }) const styles = StyleSheet.create({ - outer: { - backgroundColor: colors.white, - }, banner: { width: '100%', height: 120, @@ -333,8 +362,6 @@ const styles = StyleSheet.create({ height: 84, borderRadius: 42, borderWidth: 2, - borderColor: colors.white, - backgroundColor: colors.white, }, content: { paddingTop: 8, @@ -363,7 +390,6 @@ const styles = StyleSheet.create({ justifyContent: 'center', paddingVertical: 7, borderRadius: 50, - backgroundColor: colors.gray1, marginLeft: 6, }, @@ -371,22 +397,12 @@ const styles = StyleSheet.create({ // paddingLeft: 86, // marginBottom: 14, }, - displayName: { - fontSize: 28, - fontWeight: 'bold', - }, handleLine: { flexDirection: 'row', marginBottom: 8, }, - handle: { - fontSize: 15, - fontWeight: 'bold', - color: colors.gray5, - }, typeLabelWrapper: { - backgroundColor: colors.gray1, paddingHorizontal: 4, borderRadius: 4, marginRight: 5, @@ -394,22 +410,15 @@ const styles = StyleSheet.create({ typeLabel: { fontSize: 15, fontWeight: 'bold', - color: colors.gray5, }, metricsLine: { flexDirection: 'row', marginBottom: 8, }, - metricsText: { - fontSize: 15, - }, description: { marginBottom: 8, - fontSize: 16, - lineHeight: 20.8, // 1.3 of 16px - color: colors.black, }, relationshipsLine: { @@ -419,7 +428,6 @@ const styles = StyleSheet.create({ }, sceneAdminContainer: { - borderColor: colors.gray1, borderTopWidth: 1, borderBottomWidth: 1, paddingVertical: 12, diff --git a/src/view/lib/hooks/usePalette.ts b/src/view/lib/hooks/usePalette.ts index 94389d64d..9eb3e41a7 100644 --- a/src/view/lib/hooks/usePalette.ts +++ b/src/view/lib/hooks/usePalette.ts @@ -4,6 +4,7 @@ import {useTheme, PaletteColorName, PaletteColor} from '../ThemeContext' export interface UsePaletteValue { colors: PaletteColor view: ViewStyle + btn: ViewStyle border: ViewStyle text: TextStyle textLight: TextStyle @@ -17,6 +18,9 @@ export function usePalette(color: PaletteColorName): UsePaletteValue { view: { backgroundColor: palette.background, }, + btn: { + backgroundColor: palette.backgroundLight, + }, border: { borderColor: palette.border, }, |