Small style changes

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>

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={[

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,

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: {

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

src/styles/colors.ts

@@ -14,6 +14,7 @@ const colors = {
   fadedBlack: '#2D2D2D',
   white: '#FBFBFB',
   grey: '#A7A5A5',
+  grey2: '#D9D9D9',
   darkGrey: '#797979',
 
   textPrimary: '#000000', // black