1 files changed, 75 insertions, 50 deletions

diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 70733d7e..e4ac4c9e 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -7,15 +7,16 @@ import {
   ScrollView,
   StatusBar,
   StyleSheet,
+  Text,
+  View,
 } from 'react-native';
 import Animated, {Easing, timing} from 'react-native-reanimated';
+import {SafeAreaView} from 'react-native-safe-area-context';
 import {useDispatch, useSelector} from 'react-redux';
 import {
   Explore,
   RecentSearches,
-  SearchBackground,
   SearchBar,
-  SearchHeader,
   SearchResultList,
   SearchResultsBackground,
   TabsGradient,
@@ -25,7 +26,7 @@ import {loadSearchResults} from '../../services';
 import {loadRecentlySearched, resetScreenType} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {ProfilePreviewType, ScreenType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 /**
  * Search Screen for user recommendations and a search
@@ -148,60 +149,65 @@ const SearchScreen: React.FC = () => {
   };
 
   return (
-    <SearchBackground>
-      <StatusBar barStyle="dark-content" />
-      <ScrollView
-        scrollEnabled={!searching}
-        keyboardShouldPersistTaps={'always'}
-        stickyHeaderIndices={[4]}
-        contentContainerStyle={styles.contentContainer}
-        showsVerticalScrollIndicator={false}
-        refreshControl={
-          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-        }>
-        <SearchHeader style={styles.header} {...{top}} />
-        <SearchBar
-          style={styles.searchBar}
-          onCancel={handleBlur}
-          onChangeText={handleUpdate}
-          onBlur={Keyboard.dismiss}
-          onFocus={handleFocus}
-          value={query}
-          {...{top, searching}}
-        />
-        <Explore />
-
-        <SearchResultsBackground {...{top}}>
-          {results === undefined && recents.length !== 0 ? (
-            <RecentSearches
-              sectionTitle="Recent"
-              sectionButtonTitle="Clear all"
-              onPress={clearRecentlySearched}
-              recents={recents}
-              screenType={ScreenType.Search}
-            />
-          ) : (
-            <SearchResultList
-              {...{results}}
-              keyboardVisible={keyboardVisible === 'keyboardVisibleTrue'}
-              previewType={'Search'}
-              screenType={ScreenType.Search}
-            />
-          )}
-        </SearchResultsBackground>
-      </ScrollView>
-      <TabsGradient />
-    </SearchBackground>
+    <View style={styles.mainContainer}>
+      <SafeAreaView>
+        <StatusBar barStyle="dark-content" />
+        <ScrollView
+          scrollEnabled={!searching}
+          keyboardShouldPersistTaps={'always'}
+          stickyHeaderIndices={[4]}
+          contentContainerStyle={styles.contentContainer}
+          showsVerticalScrollIndicator={false}
+          refreshControl={
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          }>
+          <SearchBar
+            style={styles.searchBar}
+            onCancel={handleBlur}
+            onChangeText={handleUpdate}
+            onBlur={Keyboard.dismiss}
+            onFocus={handleFocus}
+            value={query}
+            {...{top, searching}}
+          />
+          <Text style={styles.helperText}>
+            Try searching for people, groups, or clubs
+          </Text>
+          <Explore />
+          <SearchResultsBackground {...{top}}>
+            {results === undefined && recents.length !== 0 ? (
+              <RecentSearches
+                sectionTitle="Recent"
+                sectionButtonTitle="Clear all"
+                onPress={clearRecentlySearched}
+                recents={recents}
+                screenType={ScreenType.Search}
+              />
+            ) : (
+              <SearchResultList
+                {...{results}}
+                keyboardVisible={keyboardVisible === 'keyboardVisibleTrue'}
+                previewType={'Search'}
+                screenType={ScreenType.Search}
+              />
+            )}
+          </SearchResultsBackground>
+        </ScrollView>
+        <TabsGradient />
+      </SafeAreaView>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
+  mainContainer: {backgroundColor: '#fff', height: SCREEN_HEIGHT * 0.9},
   contentContainer: {
-    paddingTop: StatusBarHeight,
-    paddingBottom: SCREEN_HEIGHT / 15,
+    paddingTop: '2%',
+    paddingBottom: SCREEN_HEIGHT / 3,
+    paddingHorizontal: '3%',
   },
   searchBar: {
-    paddingHorizontal: '3%',
+    paddingLeft: '3%',
   },
   header: {
     marginVertical: 20,
@@ -215,6 +221,15 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     flexGrow: 1,
   },
+  helperText: {
+    fontWeight: '400',
+    fontSize: 14,
+    lineHeight: normalize(16.71),
+    color: '#828282',
+    marginBottom: '2%',
+    margin: '2.5%',
+    textAlign: 'center',
+  },
   clear: {
     fontSize: 17,
     fontWeight: 'bold',
@@ -242,5 +257,15 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     marginHorizontal: '10%',
   },
+  cancelButton: {
+    position: 'absolute',
+    height: '100%',
+    justifyContent: 'center',
+    paddingHorizontal: 5,
+  },
+  cancelText: {
+    color: '#818181',
+    fontWeight: '600',
+  },
 });
 export default SearchScreen;