Merge pull request #294 from IvanIFChen/tma695-revamp-discover-screen

[TMA-695] Revamp Discover Screen

2 files changed, 67 insertions, 0 deletions

diff --git a/src/components/common/GradientBorderButton.tsx b/src/components/common/GradientBorderButton.tsx
new file mode 100644
index 00000000..00f46a96
--- /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, SCREEN_WIDTH} 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: SCREEN_WIDTH / 2 - 40,
+    height: 40,
+  },
+  label: {
+    fontWeight: '500',
+    fontSize: normalize(14),
+  },
+  maskBorder: {
+    borderRadius: 20,
+  },
+  textContainer: {
+    position: 'absolute',
+    width: SCREEN_WIDTH / 2 - 40,
+    height: 40,
+    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';