3 files changed, 106 insertions, 43 deletions
diff --git a/src/components/common/GradientBorderButton.tsx b/src/components/common/GradientBorderButton.tsx
new file mode 100644
index 00000000..0402c44b
--- /dev/null
+++ b/src/components/common/GradientBorderButton.tsx
@@ -0,0 +1,66 @@
+import MaskedView from '@react-native-community/masked-view';
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import {TAGG_LIGHT_BLUE_2, TAGG_PURPLE} from '../../constants';
+import {normalize} from '../../utils';
+
+interface GradientBorderButtonProps {
+  text: string;
+  darkStyle: boolean;
+  onPress: () => void;
+}
+
+const GradientBorderButton: React.FC<GradientBorderButtonProps> = ({
+  text,
+  darkStyle,
+  onPress,
+}) => {
+  const labelColor = darkStyle ? 'white' : '#828282';
+  const borderWidth = darkStyle ? 2 : 1;
+  return (
+    <TouchableOpacity style={styles.container} onPress={onPress}>
+      <MaskedView
+        maskElement={
+          <View
+            style={[styles.gradientContainer, styles.maskBorder, {borderWidth}]}
+          />
+        }>
+        <LinearGradient
+          colors={[TAGG_PURPLE, TAGG_LIGHT_BLUE_2]}
+          start={{x: 0.0, y: 1.0}}
+          end={{x: 1.0, y: 1.0}}
+          style={styles.gradientContainer}
+        />
+      </MaskedView>
+      <View style={styles.textContainer}>
+        <Text style={[styles.label, {color: labelColor}]}>{text}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 15,
+  },
+  gradientContainer: {
+    width: 159,
+    height: 38,
+  },
+  label: {
+    fontWeight: '500',
+    fontSize: normalize(15),
+  },
+  maskBorder: {
+    borderRadius: 20,
+  },
+  textContainer: {
+    position: 'absolute',
+    width: 159,
+    height: 38,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+export default GradientBorderButton;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index e1543cd8..8499dbfa 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -22,3 +22,4 @@ export {default as TaggPrompt} from './TaggPrompt';
 export {default as AcceptDeclineButtons} from './AcceptDeclineButtons';
 export {default as FriendsButton} from './FriendsButton';
 export {default as TaggSquareButton} from './TaggSquareButton';
+export {default as GradientBorderButton} from './GradientBorderButton';
diff --git a/src/components/search/SearchCategories.tsx b/src/components/search/SearchCategories.tsx
index c3c4c518..f00debb5 100644
--- a/src/components/search/SearchCategories.tsx
+++ b/src/components/search/SearchCategories.tsx
@@ -1,47 +1,55 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
-import {StyleSheet, Text, View} from 'react-native';
-import {TouchableOpacity} from 'react-native-gesture-handler';
-import LinearGradient from 'react-native-linear-gradient';
+import {StyleSheet, View} from 'react-native';
+import {GradientBorderButton} from '..';
 import {getButtons} from '../../services/ExploreService';
 import {SearchCategoryType} from '../../types';
-import {TAGG_LIGHT_BLUE_2, TAGG_PURPLE} from '../../constants';
 import {SCREEN_WIDTH} from '../../utils';
 
-const SearchCategories: React.FC = () => {
-  const [buttons, setButtons] = useState<SearchCategoryType[]>([]);
+interface SearchCategoriesProps {
+  darkStyle?: boolean;
+}
+
+const SearchCategories: React.FC<SearchCategoriesProps> = ({
+  darkStyle = false,
+}) => {
+  const navigation = useNavigation();
+  const mtSearchCategory: (key: number) => SearchCategoryType = (key) => ({
+    id: key,
+    name: '...',
+    category: '...',
+  });
+  const [buttons, setButtons] = useState<SearchCategoryType[]>([
+    mtSearchCategory(1),
+    mtSearchCategory(2),
+    mtSearchCategory(3),
+    mtSearchCategory(4),
+  ]);
   useEffect(() => {
     const loadButtons = async () => {
       const localButtons = await getButtons();
-      console.log('localButtons: ', localButtons);
-      await setButtons(localButtons);
+      setButtons([]);
+      setButtons(localButtons);
     };
     loadButtons();
   }, []);
 
-  const navigation = useNavigation();
   return (
     <View style={styles.container}>
-      {buttons &&
-        buttons.map((searchCategory) => (
-          <LinearGradient
-            key={searchCategory.id}
-            colors={[TAGG_PURPLE, TAGG_LIGHT_BLUE_2]}
-            start={{x: 0.0, y: 1.0}}
-            end={{x: 1.0, y: 1.0}}
-            style={styles.gradientContainer}>
-            <TouchableOpacity
-              style={styles.buttonContainer}
-              key={searchCategory.id}
-              onPress={() => {
-                navigation.navigate('DiscoverUsers', {
-                  searchCategory,
-                });
-              }}>
-              <Text style={styles.buttonText}>{searchCategory.name}</Text>
-            </TouchableOpacity>
-          </LinearGradient>
-        ))}
+      {buttons.map((searchCategory) => (
+        <GradientBorderButton
+          key={searchCategory.id}
+          text={searchCategory.name}
+          darkStyle={darkStyle}
+          onPress={() => {
+            if (searchCategory.name !== '...') {
+              navigation.push('DiscoverUsers', {
+                searchCategory,
+              });
+            }
+          }}
+        />
+      ))}
     </View>
   );
 };
@@ -56,20 +64,8 @@ const styles = StyleSheet.create({
     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',
+    backgroundColor: 'transparent',
     width: 158,
     height: 37,
     borderRadius: 20,
@@ -84,7 +80,7 @@ const styles = StyleSheet.create({
     fontSize: 15,
     lineHeight: 17.9,
     alignSelf: 'center',
-    color: '#828282',
+    color: 'white',
   },
 });
 export default SearchCategories;