[search] Update search styling

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

@@ -190,18 +190,21 @@ function SearchScreen() {
             setShowRecents(true);
             setShowGenreCarousals(false);
           }}
-          searchIcon={false}
-          clearIcon
+          searchIcon
+          clearIcon={false}
+          cancelButtonProps={{
+            buttonTextStyle: [globalStyles.body1Bold, styles.cancelButton],
+          }}
           containerStyle={[
             styles.searchContainer,
             showGenreCarousals && { marginRight: 24 },
           ]}
           inputContainerStyle={styles.inputContainer}
-          inputStyle={{ color: 'black' }}
+          inputStyle={globalStyles.body1Bold}
           leftIconContainerStyle={{}}
           rightIconContainerStyle={{}}
-          placeholder="Search"
-          placeholderTextColor="black"
+          placeholder="What do you want to read?"
+          placeholderTextColor="grey"
           onChangeText={text => searchFunction(text)}
           value={search}
           onSubmitEditing={searchString => {
@@ -222,19 +225,42 @@ function SearchScreen() {
         )}
 
         {showRecents &&
-          (search ? (
+          (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 ? (
+            <View style={styles.emptySearch}>
+              <View style={{ paddingBottom: 16 }}>
+                <Text style={[globalStyles.h3, { textAlign: 'center' }]}>
+                  There are no stories
+                </Text>
+                <Text style={[globalStyles.h3, { textAlign: 'center' }]}>
+                  for "{search}".
+                </Text>
+              </View>
+              <Text style={[globalStyles.subHeading2, { textAlign: 'center' }]}>
+                Try searching by title or author, or
+              </Text>
+              <Text style={[globalStyles.subHeading2, { textAlign: 'center' }]}>
+                check if your spelling is correct.
+              </Text>
+            </View>
+          ) : 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={styles.clearAll}>Clear All</Text>
+                  <Text
+                    style={[
+                      globalStyles.subHeading2Bold,
+                      { color: colors.gwnOrange },
+                    ]}
+                  >
+                    Clear All
+                  </Text>
                 </Pressable>
               </View>
               <View style={styles.contentContainerRecents}>
@@ -252,9 +278,16 @@ 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={styles.clearAll}>Clear All</Text>
+                  <Text
+                    style={[
+                      globalStyles.subHeading2Bold,
+                      { color: colors.gwnOrange },
+                    ]}
+                  >
+                    Clear All
+                  </Text>
                 </Pressable>
               </View>
               <View style={styles.contentContainerRecents}>
@@ -278,6 +311,17 @@ function SearchScreen() {
                 ))}
               </View>
             </ScrollView>
+          ) : (
+            <View style={styles.emptySearch}>
+              <View style={{ paddingBottom: 16 }}>
+                <Text style={globalStyles.h3}>
+                  Find stories from young creators.
+                </Text>
+              </View>
+              <Text style={globalStyles.subHeading2}>
+                Search for stories, authors, or collections.
+              </Text>
+            </View>
           ))}
 
         {showGenreCarousals ? (

src/app/(tabs)/search/styles.ts

@@ -16,12 +16,15 @@ const styles = StyleSheet.create({
   searchContainer: {
     backgroundColor: 'transparent',
     borderRadius: 10,
-    borderColor: 'transparent',
     marginBottom: 8,
+    borderColor: colors.grey,
   },
   inputContainer: {
-    backgroundColor: '#D9D9D9',
+    backgroundColor: 'transparent',
     borderRadius: 10,
+    borderColor: colors.grey2,
+    borderWidth: 1,
+    borderBottomWidth: 1,
   },
   greyOverlay: {
     flex: 1,
@@ -51,19 +54,10 @@ const styles = StyleSheet.create({
     marginBottom: 8,
     marginHorizontal: 8,
   },
-  searchText: {
-    fontWeight: '500',
-    fontSize: 14,
-  },
   numDisplay: {
     marginTop: 24,
     marginBottom: 8,
   },
-  clearAll: {
-    color: colors.gwnOrange,
-    fontSize: 12,
-    fontWeight: '400',
-  },
   contentContainerRecents: {
     paddingHorizontal: 8,
     marginBottom: 8,
@@ -86,6 +80,16 @@ const styles = StyleSheet.create({
     fontSize: 12,
     textDecorationLine: 'underline',
   },
+  emptySearch: {
+    display: 'flex',
+    flexDirection: 'column',
+    textAlign: 'center',
+    alignItems: 'center',
+    marginTop: '60%',
+  },
+  cancelButton: {
+    color: colors.grey,
+  },
 });
 
 export default styles;

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/RecentSearchCard.tsx

@@ -21,10 +21,14 @@ function RecentSearchCard({
       <View style={styles.card}>
         <View style={styles.leftItems}>
           <Icon name="search1" size={16} color="#A7A5A5" />
-          <Text style={styles.searchValueText}>{value}</Text>
+          <Text style={[globalStyles.body1, styles.searchValueText]}>
+            {value}
+          </Text>
         </View>
         <View style={styles.rightItems}>
-          <Text style={styles.numResultsText}>{numResults} Results</Text>
+          <Text style={[globalStyles.body1, styles.numResultsText]}>
+            {numResults} Results
+          </Text>
           <Icon name="caretright" size={12} color="black" />
         </View>
       </View>

src/components/RecentSearchCard/styles.ts

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import colors from '../../styles/colors';
 
 const styles = StyleSheet.create({
   card: {
@@ -13,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,
@@ -29,9 +31,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   searchValueText: {
-    color: 'black',
-    fontWeight: '400',
-    fontSize: 14,
     justifyContent: 'center',
   },
   numResultsText: {

src/styles/colors.ts

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