styling done

calblueprint · Nov 21, 2023 · 8f23328 · 8f23328
1 parent 8edcaf4
commit 8f23328
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 17 deletions.
diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx
@@ -25,7 +25,7 @@ function SearchScreen() {
   const searchFunction = (text: string) => {
     if (text === '') {
       setSearch(text);
-      setSearchResults(allStories);
+      setSearchResults([]);
       return;
     }
     const updatedData = allStories.filter((item: StoryPreview) => {
@@ -124,21 +124,20 @@ function SearchScreen() {
         onPress={() => setFilterVisible(true)}
       />
       {search ? (
-        <Text>Showing Results {searchResults.length}</Text>
+        <Text style={styles.searchText}>
+          Showing Results {searchResults.length}
+        </Text>
       ) : (
         <>
-          <View
-            style={{ justifyContent: 'space-between', flexDirection: 'row' }}
-          >
-            <Text>Recent Searches</Text>
+          <View style={styles.recentSpacing}>
+            <Text style={styles.searchText}>Recent Searches</Text>
             <Button
               onPress={clearRecentSearches}
               title="Clear All"
               color="#EB563B"
             />
           </View>
           <FlatList
-            style={{ paddingBottom: 200 }}
             showsVerticalScrollIndicator={false}
             data={recentSearches}
             renderItem={({ item }) => (

diff --git a/src/app/(tabs)/search/styles.ts b/src/app/(tabs)/search/styles.ts
@@ -43,6 +43,16 @@ const styles = StyleSheet.create({
     width,
     height,
   },
+  recentSpacing: {
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    alignContent: 'space-between',
+  },
+  searchText: {
+    fontWeight: '300',
+    fontSize: 20,
+    paddingTop: 5,
+  },
 });
 
 export default styles;
diff --git a/src/components/RecentSearchCard/RecentSearchCard.tsx b/src/components/RecentSearchCard/RecentSearchCard.tsx
@@ -19,9 +19,11 @@ function RecentSearchCard({
   return (
     <Pressable onPress={pressFunction}>
       <View style={styles.card}>
-        <View style={styles.textContainer}>
+        <View style={styles.leftItems}>
           <Icon name="search1" size={16} color="#A7A5A5" />
           <Text style={styles.searchValueText}>{value}</Text>
+        </View>
+        <View style={styles.rightItems}>
           <Text style={styles.numResultsText}>{numResults} Results</Text>
           <Icon name="caretright" size={12} color="black" />
         </View>

diff --git a/src/components/RecentSearchCard/styles.ts b/src/components/RecentSearchCard/styles.ts
@@ -1,24 +1,33 @@
 import { StyleSheet } from 'react-native';
 
-import colors from '../../styles/colors';
-
 const styles = StyleSheet.create({
   card: {
     flexDirection: 'row',
-    justifyContent: 'flex-start',
+    justifyContent: 'space-between',
     alignItems: 'center',
-    backgroundColor: colors.lightGrey,
+    backgroundColor: 'white',
     borderRadius: 4,
-    marginBottom: 16,
+    marginTop: 8,
+    marginBottom: 8,
     maxHeight: 100,
     paddingLeft: 12,
     paddingRight: 12,
-    paddingBottom: 4,
-    paddingTop: 4,
+    paddingBottom: 10,
+    paddingTop: 10,
+    shadowColor: 'black',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.5,
+    elevation: 4,
   },
-  textContainer: {
+  leftItems: {
+    gap: 8,
     flexDirection: 'row',
-    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  rightItems: {
+    gap: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
   },
   searchValueText: {
     color: 'black',