2 files changed, 25 insertions, 48 deletions

diff --git a/src/view/com/discover/SuggestedFollows.tsx b/src/view/com/discover/SuggestedFollows.tsx
index 77bd94d5a..5d01a300d 100644
--- a/src/view/com/discover/SuggestedFollows.tsx
+++ b/src/view/com/discover/SuggestedFollows.tsx
@@ -21,7 +21,8 @@ import {
   SuggestedActorsViewModel,
   SuggestedActor,
 } from '../../../state/models/suggested-actors-view'
-import {s, colors, gradients} from '../../lib/styles'
+import {s, gradients} from '../../lib/styles'
+import {usePalette} from '../../lib/hooks/usePalette'
 
 export const SuggestedFollows = observer(
   ({
@@ -31,6 +32,7 @@ export const SuggestedFollows = observer(
     onNoSuggestions?: () => void
     asLinks?: boolean
   }) => {
+    const pal = usePalette('default')
     const store = useStores()
     const [follows, setFollows] = useState<Record<string, string>>({})
 
@@ -116,7 +118,7 @@ export const SuggestedFollows = observer(
         ) : view.isEmpty ? (
           <View />
         ) : (
-          <View style={styles.suggestionsContainer}>
+          <View style={[styles.suggestionsContainer, pal.view]}>
             <FlatList
               data={view.suggestions}
               keyExtractor={item => item._reactKey}
@@ -141,8 +143,9 @@ const User = ({
   onPressFollow: (item: SuggestedActor) => void
   onPressUnfollow: (item: SuggestedActor) => void
 }) => {
+  const pal = usePalette('default')
   return (
-    <View style={styles.actor}>
+    <View style={[styles.actor, pal.view, pal.border]}>
       <View style={styles.actorMeta}>
         <View style={styles.actorAvi}>
           <UserAvatar
@@ -153,17 +156,17 @@ const User = ({
           />
         </View>
         <View style={styles.actorContent}>
-          <Text style={[s.f17, s.bold]} numberOfLines={1}>
+          <Text type="h5" style={pal.text} numberOfLines={1}>
             {item.displayName || item.handle}
           </Text>
-          <Text style={[s.f14, s.gray5]} numberOfLines={1}>
+          <Text style={pal.textLight} numberOfLines={1}>
             @{item.handle}
           </Text>
         </View>
         <View style={styles.actorBtn}>
           {follow ? (
             <TouchableOpacity onPress={() => onPressUnfollow(item)}>
-              <View style={[styles.btn, styles.secondaryBtn]}>
+              <View style={[styles.btn, styles.secondaryBtn, pal.btn]}>
                 <Text style={[s.gray5, s.fw600, s.f15]}>Unfollow</Text>
               </View>
             </TouchableOpacity>
@@ -187,7 +190,7 @@ const User = ({
       </View>
       {item.description ? (
         <View style={styles.actorDetails}>
-          <Text style={[s.f15]} numberOfLines={4}>
+          <Text style={pal.text} numberOfLines={4}>
             {item.description}
           </Text>
         </View>
@@ -203,22 +206,10 @@ const styles = StyleSheet.create({
 
   suggestionsContainer: {
     flex: 1,
-    backgroundColor: colors.gray1,
-  },
-
-  emptyContainer: {
-    backgroundColor: colors.gray1,
-    marginHorizontal: 14,
-    paddingHorizontal: 8,
-    paddingVertical: 14,
-    borderRadius: 6,
   },
 
   actor: {
-    backgroundColor: colors.white,
-    borderRadius: 6,
-    margin: 2,
-    marginBottom: 0,
+    borderTopWidth: 1,
   },
   actorMeta: {
     flexDirection: 'row',
@@ -257,7 +248,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     paddingVertical: 7,
     borderRadius: 50,
-    backgroundColor: colors.gray1,
     marginLeft: 6,
   },
 })
diff --git a/src/view/screens/Search.tsx b/src/view/screens/Search.tsx
index 5d171c79a..995d05861 100644
--- a/src/view/screens/Search.tsx
+++ b/src/view/screens/Search.tsx
@@ -14,10 +14,12 @@ import {Text} from '../com/util/text/Text'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
 import {UserAutocompleteViewModel} from '../../state/models/user-autocomplete-view'
-import {s, colors} from '../lib/styles'
+import {s} from '../lib/styles'
 import {MagnifyingGlassIcon} from '../lib/icons'
+import {usePalette} from '../lib/hooks/usePalette'
 
 export const Search = ({navIdx, visible, params}: ScreenParams) => {
+  const pal = usePalette('default')
   const store = useStores()
   const textInput = useRef<TextInput>(null)
   const [query, setQuery] = useState<string>('')
@@ -50,17 +52,17 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
   }
 
   return (
-    <View style={styles.container}>
+    <View style={[pal.view, styles.container]}>
       <ViewHeader title="Search" />
-      <View style={styles.inputContainer}>
-        <MagnifyingGlassIcon style={styles.inputIcon} />
+      <View style={[pal.view, pal.border, styles.inputContainer]}>
+        <MagnifyingGlassIcon style={[pal.text, styles.inputIcon]} />
         <TextInput
           ref={textInput}
           placeholder="Type your query here..."
-          placeholderTextColor={colors.gray4}
+          placeholderTextColor={pal.textLight}
           selectTextOnFocus
           returnKeyType="search"
-          style={styles.input}
+          style={[pal.text, styles.input]}
           onChangeText={onChangeQuery}
         />
       </View>
@@ -70,7 +72,7 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
             {autocompleteView.searchRes.map((item, i) => (
               <TouchableOpacity
                 key={i}
-                style={styles.searchResult}
+                style={[pal.view, pal.border, styles.searchResult]}
                 onPress={() => onSelect(item.handle)}>
                 <UserAvatar
                   handle={item.handle}
@@ -79,10 +81,10 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
                   size={36}
                 />
                 <View style={[s.ml10]}>
-                  <Text style={styles.searchResultDisplayName}>
+                  <Text type="h5" style={pal.text}>
                     {item.displayName || item.handle}
                   </Text>
-                  <Text style={styles.searchResultHandle}>@{item.handle}</Text>
+                  <Text style={pal.textLight}>@{item.handle}</Text>
                 </View>
               </TouchableOpacity>
             ))}
@@ -98,46 +100,31 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: colors.white,
   },
 
   inputContainer: {
     flexDirection: 'row',
     paddingVertical: 16,
     paddingHorizontal: 16,
-    borderBottomColor: colors.gray1,
-    borderBottomWidth: 1,
+    borderTopWidth: 1,
   },
   inputIcon: {
     marginRight: 10,
-    color: colors.gray3,
     alignSelf: 'center',
   },
   input: {
     flex: 1,
     fontSize: 16,
-    color: colors.black,
   },
 
   outputContainer: {
     flex: 1,
-    backgroundColor: colors.gray1,
   },
 
   searchResult: {
     flexDirection: 'row',
-    backgroundColor: colors.white,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.gray1,
-    paddingVertical: 16,
+    borderTopWidth: 1,
+    paddingVertical: 12,
     paddingHorizontal: 16,
   },
-  searchResultDisplayName: {
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-  searchResultHandle: {
-    fontSize: 14,
-    color: colors.gray5,
-  },
 })