Created new search screen

4 files changed, 150 insertions, 102 deletions

diff --git a/src/components/search/Explore.tsx b/src/components/search/Explore.tsx
index 2a3bc749..54bbe4b5 100644
--- a/src/components/search/Explore.tsx
+++ b/src/components/search/Explore.tsx
@@ -1,20 +1,30 @@
 import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
-import {useSelector} from 'react-redux';
-import {EXPLORE_SECTION_TITLES} from '../../constants';
-import {RootState} from '../../store/rootReducer';
-import {ExploreSectionType} from '../../types';
-import {normalize} from '../../utils';
-import ExploreSection from './ExploreSection';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import {SCREEN_WIDTH} from '../../utils';
 
 const Explore: React.FC = () => {
-  const {explores} = useSelector((state: RootState) => state.taggUsers);
+  // Get categories from backend
+  const categories = ['Brown 21', 'Brown 22', 'Brown 23', 'Brown 24'];
+
   return (
     <View style={styles.container}>
-      <Text style={styles.header}>Search Profiles</Text>
-      {explores &&
-        EXPLORE_SECTION_TITLES.map((title: ExploreSectionType) => (
-          <ExploreSection key={title} title={title} users={explores[title]} />
+      {categories &&
+        categories.map((category) => (
+          <LinearGradient
+            colors={['#8000FF', '#00FFFF']}
+            start={{x: 0.0, y: 1.0}}
+            end={{x: 1.0, y: 1.0}}
+            style={styles.gradientContainer}>
+            <TouchableOpacity
+              style={styles.buttonContainer}
+              onPress={() => {
+                console.log('Navigate to Discover Users!');
+              }}>
+              <Text style={styles.buttonText}>{category}</Text>
+            </TouchableOpacity>
+          </LinearGradient>
         ))}
     </View>
   );
@@ -23,13 +33,42 @@ const Explore: React.FC = () => {
 const styles = StyleSheet.create({
   container: {
     zIndex: 0,
+    top: '3%',
+    alignSelf: 'center',
+    flexDirection: 'row',
+    width: SCREEN_WIDTH * 0.9,
+    flexWrap: 'wrap',
+    justifyContent: 'space-evenly',
+  },
+  gradientContainer: {
+    width: 159,
+    height: 38,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: '2.5%',
+    flexDirection: 'row',
+    alignContent: 'center',
+    borderRadius: 20,
+    borderColor: 'transparent',
+    borderWidth: 1,
+  },
+  buttonContainer: {
+    backgroundColor: 'white',
+    width: 158,
+    height: 37,
+    borderRadius: 20,
+    borderColor: 'transparent',
+    borderWidth: 1,
+    flexDirection: 'row',
+    alignContent: 'center',
+    justifyContent: 'center',
   },
-  header: {
-    fontWeight: '700',
-    fontSize: normalize(22),
-    color: '#fff',
-    marginBottom: '2%',
-    margin: '5%',
+  buttonText: {
+    fontWeight: '400',
+    fontSize: 15,
+    lineHeight: 17.9,
+    alignSelf: 'center',
+    color: '#828282',
   },
 });
 export default Explore;
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index 3f666ef0..dce1b40c 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -10,14 +10,9 @@ import {
   NativeSyntheticEvent,
   TextInputSubmitEditingEventData,
 } from 'react-native';
-import Animated, {
-  interpolate,
-  interpolateColors,
-} from 'react-native-reanimated';
-import {SCREEN_HEIGHT} from '../../utils';
+import Animated from 'react-native-reanimated';
 import Icon from 'react-native-vector-icons/Feather';
-
-const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+import {normalize} from 'react-native-elements';
 
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 
@@ -31,21 +26,8 @@ const SearchBar: React.FC<SearchBarProps> = ({
   onChangeText,
   value,
   onCancel,
-  top,
   style,
 }) => {
-  const opacity: Animated.Node<number> = interpolate(top, {
-    inputRange: [-SCREEN_HEIGHT, 0],
-    outputRange: [0, 1],
-  });
-  const marginRight: Animated.Node<number> = interpolate(top, {
-    inputRange: [-SCREEN_HEIGHT, 0],
-    outputRange: [0, 57],
-  });
-  const color: Animated.Node<number> = interpolateColors(top, {
-    inputRange: [-SCREEN_HEIGHT, 0],
-    outputColorRange: ['#fff', '#000'],
-  });
   const handleSubmit = (
     e: NativeSyntheticEvent<TextInputSubmitEditingEventData>,
   ) => {
@@ -55,17 +37,17 @@ const SearchBar: React.FC<SearchBarProps> = ({
 
   return (
     <View style={[styles.container, style]}>
-      <Animated.View style={[styles.inputContainer, {borderColor: color}]}>
+      <Animated.View style={[styles.inputContainer]}>
         <AnimatedIcon
           name="search"
-          color={color}
+          color={'#7E7E7E'}
           size={25}
           style={styles.searchIcon}
         />
-        <AnimatedTextInput
-          style={[styles.input, {color}]}
-          placeholder={'Search...'}
-          placeholderTextColor={'#fff'}
+        <TextInput
+          style={[styles.input]}
+          placeholder={'Search'}
+          placeholderTextColor={'#828282'}
           onSubmitEditing={handleSubmit}
           clearButtonMode="while-editing"
           autoCapitalize="none"
@@ -73,11 +55,11 @@ const SearchBar: React.FC<SearchBarProps> = ({
           {...{value, onChangeText, onFocus, onBlur}}
         />
       </Animated.View>
-      <Animated.View style={{opacity, marginRight}}>
+      <View style={styles.cancelButtonView}>
         <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
           <Text style={styles.cancelText}>Cancel</Text>
         </TouchableOpacity>
-      </Animated.View>
+      </View>
     </View>
   );
 };
@@ -86,6 +68,7 @@ const styles = StyleSheet.create({
   container: {
     height: 40,
     flexDirection: 'row',
+    justifyContent: 'center',
     alignItems: 'stretch',
     zIndex: 2,
   },
@@ -94,9 +77,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     paddingHorizontal: 8,
-    borderWidth: 1.5,
     borderRadius: 20,
-    backgroundColor: '#fff3',
+    backgroundColor: '#F0F0F0',
   },
   searchIcon: {
     marginRight: 8,
@@ -104,8 +86,10 @@ const styles = StyleSheet.create({
   input: {
     flex: 1,
     fontSize: 16,
-    color: '#fff',
+    color: '#828282',
+    letterSpacing: normalize(0.5),
   },
+  cancelButtonView: {width: 70, flexDirection: 'row', justifyContent: 'center'},
   cancelButton: {
     position: 'absolute',
     height: '100%',
diff --git a/src/components/search/SearchHeader.tsx b/src/components/search/SearchHeader.tsx
index 2a022f50..0d9f5973 100644
--- a/src/components/search/SearchHeader.tsx
+++ b/src/components/search/SearchHeader.tsx
@@ -25,17 +25,17 @@ const SearchHeader: React.FC<SearchHeaderProps> = ({top, style}) => {
   });
   return (
     <View style={[styles.container, style]}>
-      <View style={styles.headerContainer}>
+      {/* <View style={styles.headerContainer}>
         <Animated.Text
           style={[styles.header, {opacity: exploreOpacity, color}]}>
           Explore
         </Animated.Text>
-      </View>
-      <View style={styles.headerContainer}>
+      </View> */}
+      {/* <View style={styles.headerContainer}>
         <Animated.Text style={[styles.header, {opacity: searchOpacity, color}]}>
           Search
         </Animated.Text>
-      </View>
+      </View> */}
     </View>
   );
 };
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;