Integrate profile listings into design system

src/view/com/profile/ProfileCard.tsx

@@ -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,
   },
 })

src/view/com/profile/ProfileFollowers.tsx

@@ -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',

src/view/com/profile/ProfileFollows.tsx

@@ -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',

src/view/com/util/ViewHeader.tsx

@@ -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,
   },