From d18469abc49e5e5d0b8ae2de0f8974e74d7c4a6c Mon Sep 17 00:00:00 2001
From: Aditya Pawar <apawar@berkeley.edu>
Date: Thu, 4 Apr 2024 17:57:15 -0700
Subject: [PATCH] Small style changes

---
 src/app/(tabs)/home/index.tsx             |  1 +
 src/app/(tabs)/search/index.tsx           | 11 +++++------
 src/app/(tabs)/search/styles.ts           |  6 +-----
 src/components/PreviewCard/styles.ts      |  4 ++--
 src/components/RecentSearchCard/styles.ts |  9 ++++-----
 src/styles/colors.ts                      |  1 +
 6 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/app/(tabs)/home/index.tsx b/src/app/(tabs)/home/index.tsx
index 81ffc8db..a584572e 100644
--- a/src/app/(tabs)/home/index.tsx
+++ b/src/app/(tabs)/home/index.tsx
@@ -77,6 +77,7 @@ function HomeScreen() {
             </View>
           </Pressable>
         </View>
+
         {featuredStories.length > 0 && (
           <View>
             <Text style={globalStyles.h3}>Featured Stories</Text>
diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx
index 3f256ff9..ccdb2afc 100644
--- a/src/app/(tabs)/search/index.tsx
+++ b/src/app/(tabs)/search/index.tsx
@@ -227,9 +227,8 @@ function SearchScreen() {
         {showRecents &&
           (search && searchResults.length > 0 ? (
             <View style={styles.default}>
-              <Text style={[styles.searchText, styles.numDisplay]}>
-                {searchResults.length}{' '}
-                {searchResults.length === 1 ? 'Story' : 'Stories'}
+              <Text style={[globalStyles.subHeading1Bold, styles.numDisplay]}>
+                Showing results 1-{searchResults.length}
               </Text>
             </View>
           ) : search && searchResults.length === 0 ? (
@@ -239,7 +238,7 @@ function SearchScreen() {
                   There are no stories
                 </Text>
                 <Text style={[globalStyles.h3, { textAlign: 'center' }]}>
-                  for {search}.
+                  for "{search}".
                 </Text>
               </View>
               <Text style={[globalStyles.subHeading2, { textAlign: 'center' }]}>
@@ -252,7 +251,7 @@ function SearchScreen() {
           ) : recentSearches.length > 0 || recentlyViewed.length > 0 ? (
             <ScrollView showsVerticalScrollIndicator={false} bounces={false}>
               <View style={styles.recentSpacing}>
-                <Text style={styles.searchText}>Recent Searches</Text>
+                <Text style={globalStyles.subHeading1Bold}>Recent Searches</Text>
                 <Pressable onPress={clearRecentSearches}>
                   <Text
                     style={[
@@ -279,7 +278,7 @@ function SearchScreen() {
               </View>
 
               <View style={styles.recentSpacing}>
-                <Text style={styles.searchText}>Recently Viewed</Text>
+                <Text style={globalStyles.subHeading1Bold}>Recently Viewed</Text>
                 <Pressable onPress={clearRecentlyViewed}>
                   <Text
                     style={[
diff --git a/src/app/(tabs)/search/styles.ts b/src/app/(tabs)/search/styles.ts
index a9c55555..c1d184be 100644
--- a/src/app/(tabs)/search/styles.ts
+++ b/src/app/(tabs)/search/styles.ts
@@ -22,7 +22,7 @@ const styles = StyleSheet.create({
   inputContainer: {
     backgroundColor: 'transparent',
     borderRadius: 10,
-    borderColor: 'grey',
+    borderColor: colors.grey2,
     borderWidth: 1,
     borderBottomWidth: 1,
   },
@@ -54,10 +54,6 @@ const styles = StyleSheet.create({
     marginBottom: 8,
     marginHorizontal: 8,
   },
-  searchText: {
-    fontWeight: '500',
-    fontSize: 14,
-  },
   numDisplay: {
     marginTop: 24,
     marginBottom: 8,
diff --git a/src/components/PreviewCard/styles.ts b/src/components/PreviewCard/styles.ts
index d69aae26..e8af8f2c 100644
--- a/src/components/PreviewCard/styles.ts
+++ b/src/components/PreviewCard/styles.ts
@@ -11,8 +11,8 @@ const styles = StyleSheet.create({
     marginTop: 8,
     marginBottom: 8,
     shadowColor: 'black',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.5,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.2,
     elevation: 4,
   },
   image: {
diff --git a/src/components/RecentSearchCard/styles.ts b/src/components/RecentSearchCard/styles.ts
index 6e4a684b..b0cb9012 100644
--- a/src/components/RecentSearchCard/styles.ts
+++ b/src/components/RecentSearchCard/styles.ts
@@ -14,10 +14,11 @@ const styles = StyleSheet.create({
     paddingRight: 12,
     paddingBottom: 10,
     paddingTop: 10,
+
     shadowColor: 'black',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.5,
-    elevation: 4,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.3,
+    elevation: 7,
   },
   leftItems: {
     gap: 8,
@@ -31,8 +32,6 @@ const styles = StyleSheet.create({
   },
   searchValueText: {
     justifyContent: 'center',
-    color: colors.grey,
-    fontSize: 10,
   },
   numResultsText: {
     color: '#A7A5A5',
diff --git a/src/styles/colors.ts b/src/styles/colors.ts
index 73d10142..af1f15f4 100644
--- a/src/styles/colors.ts
+++ b/src/styles/colors.ts
@@ -14,6 +14,7 @@ const colors = {
   fadedBlack: '#2D2D2D',
   white: '#FBFBFB',
   grey: '#A7A5A5',
+  grey2: '#D9D9D9',
   darkGrey: '#797979',
 
   textPrimary: '#000000', // black