Integrate profile listings into design system

zio/stable
Paul Frazee 2022-12-30 13:20:55 -06:00
parent 10f613475a
commit 9084e0e4a8
4 changed files with 30 additions and 25 deletions

View File

@ -3,26 +3,26 @@ import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {Link} from '../util/Link'
import {Text} from '../util/text/Text'
import {UserAvatar} from '../util/UserAvatar'
import {s, colors} from '../../lib/styles'
import {s} from '../../lib/styles'
import {usePalette} from '../../lib/hooks/usePalette'
export function ProfileCard({
did,
handle,
displayName,
avatar,
renderButton,
onPressButton,
}: {
did: string
handle: string
displayName?: string
avatar?: string
renderButton?: () => JSX.Element
onPressButton?: () => void
}) {
const pal = usePalette('default')
return (
<Link
style={styles.outer}
style={[styles.outer, pal.view, pal.border]}
href={`/profile/${handle}`}
title={handle}
noFeedback>
@ -36,16 +36,18 @@ export function ProfileCard({
/>
</View>
<View style={styles.layoutContent}>
<Text style={[s.f16, s.bold, s.black]} numberOfLines={1}>
<Text style={[s.bold, pal.text]} numberOfLines={1}>
{displayName || handle}
</Text>
<Text style={[s.f15, s.gray5]} numberOfLines={1}>
<Text type="body2" style={[pal.textLight]} numberOfLines={1}>
@{handle}
</Text>
</View>
{renderButton ? (
<View style={styles.layoutButton}>
<TouchableOpacity onPress={onPressButton} style={styles.btn}>
<TouchableOpacity
onPress={onPressButton}
style={[styles.btn, pal.btn]}>
{renderButton()}
</TouchableOpacity>
</View>
@ -57,9 +59,7 @@ export function ProfileCard({
const styles = StyleSheet.create({
outer: {
marginTop: 1,
backgroundColor: colors.white,
borderRadius: 6,
borderTopWidth: 1,
},
layout: {
flexDirection: 'row',
@ -93,7 +93,6 @@ const styles = StyleSheet.create({
paddingVertical: 7,
paddingHorizontal: 14,
borderRadius: 50,
backgroundColor: colors.gray1,
marginLeft: 6,
},
})

View File

@ -11,6 +11,7 @@ import {ErrorMessage} from '../util/error/ErrorMessage'
import {UserAvatar} from '../util/UserAvatar'
import {useStores} from '../../../state'
import {s, colors} from '../../lib/styles'
import {usePalette} from '../../lib/hooks/usePalette'
export const ProfileFollowers = observer(function ProfileFollowers({
name,
@ -80,9 +81,10 @@ export const ProfileFollowers = observer(function ProfileFollowers({
})
const User = ({item}: {item: FollowerItem}) => {
const pal = usePalette('default')
return (
<Link
style={styles.outer}
style={[styles.outer, pal.view, pal.border]}
href={`/profile/${item.handle}`}
title={item.handle}
noFeedback>
@ -96,10 +98,12 @@ const User = ({item}: {item: FollowerItem}) => {
/>
</View>
<View style={styles.layoutContent}>
<Text style={[s.f15, s.bold, s.black]}>
<Text style={[s.bold, pal.text]}>
{item.displayName || item.handle}
</Text>
<Text style={[s.f14, s.gray5]}>@{item.handle}</Text>
<Text type="body2" style={[pal.textLight]}>
@{item.handle}
</Text>
</View>
</View>
</Link>
@ -108,8 +112,7 @@ const User = ({item}: {item: FollowerItem}) => {
const styles = StyleSheet.create({
outer: {
marginTop: 1,
backgroundColor: colors.white,
borderTopWidth: 1,
},
layout: {
flexDirection: 'row',

View File

@ -11,6 +11,7 @@ import {Text} from '../util/text/Text'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {UserAvatar} from '../util/UserAvatar'
import {s, colors} from '../../lib/styles'
import {usePalette} from '../../lib/hooks/usePalette'
export const ProfileFollows = observer(function ProfileFollows({
name,
@ -80,9 +81,10 @@ export const ProfileFollows = observer(function ProfileFollows({
})
const User = ({item}: {item: FollowItem}) => {
const pal = usePalette('default')
return (
<Link
style={styles.outer}
style={[styles.outer, pal.view, pal.border]}
href={`/profile/${item.handle}`}
title={item.handle}
noFeedback>
@ -96,10 +98,12 @@ const User = ({item}: {item: FollowItem}) => {
/>
</View>
<View style={styles.layoutContent}>
<Text style={[s.f15, s.bold, s.black]}>
<Text style={[s.bold, pal.text]}>
{item.displayName || item.handle}
</Text>
<Text style={[s.f14, s.gray5]}>@{item.handle}</Text>
<Text type="body2" style={pal.textLight}>
@{item.handle}
</Text>
</View>
</View>
</Link>
@ -108,8 +112,7 @@ const User = ({item}: {item: FollowItem}) => {
const styles = StyleSheet.create({
outer: {
marginTop: 1,
backgroundColor: colors.white,
borderTopWidth: 1,
},
layout: {
flexDirection: 'row',

View File

@ -74,13 +74,13 @@ export const ViewHeader = observer(function ViewHeader({
)}
</TouchableOpacity>
<View style={styles.titleContainer} pointerEvents="none">
<Text type="h3" style={pal.text}>
<Text type="h4" style={pal.text}>
{title}
</Text>
{subtitle ? (
<Text
type="h4"
style={[styles.subtitle, pal.textLight]}
type="h5"
style={[styles.subtitle, pal.textLight, {fontWeight: 'normal'}]}
numberOfLines={1}>
{subtitle}
</Text>
@ -147,7 +147,7 @@ const styles = StyleSheet.create({
marginRight: 'auto',
},
subtitle: {
marginLeft: 6,
marginLeft: 4,
maxWidth: 200,
},