Added new button and resytles existing buttons

3 files changed, 80 insertions, 2 deletions

diff --git a/src/components/common/BasicButton.tsx b/src/components/common/BasicButton.tsx
new file mode 100644
index 00000000..0822c66e
--- /dev/null
+++ b/src/components/common/BasicButton.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {normalize} from '../../utils';
+
+interface BasicButtonProps {
+  title: string;
+  onPress: () => void;
+  solid?: boolean;
+  externalStyles?: Record<string, StyleProp<ViewStyle>>;
+}
+const BasicButton: React.FC<BasicButtonProps> = ({
+  title,
+  onPress,
+  solid,
+  externalStyles,
+}) => {
+  return (
+    <View style={[styles.container, externalStyles?.container]}>
+      <TouchableOpacity
+        style={[
+          styles.genericButtonStyle,
+          solid ? styles.solidButton : styles.outlineButton,
+        ]}
+        onPress={onPress}>
+        <Text
+          style={[
+            styles.buttonTitle,
+            solid
+              ? styles.solidButtonTitleColor
+              : styles.outlineButtonTitleColor,
+          ]}>
+          {title}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+    flexDirection: 'column',
+    justifyContent: 'space-around',
+  },
+  genericButtonStyle: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 2,
+    padding: 0,
+    width: '100%',
+    height: '100%',
+  },
+  solidButton: {
+    padding: 0,
+    backgroundColor: TAGG_LIGHT_BLUE,
+  },
+  outlineButton: {
+    borderWidth: 1,
+    backgroundColor: 'white',
+    borderColor: TAGG_LIGHT_BLUE,
+  },
+  solidButtonTitleColor: {
+    color: 'white',
+  },
+  outlineButtonTitleColor: {
+    color: TAGG_LIGHT_BLUE,
+  },
+  buttonTitle: {
+    fontSize: normalize(15),
+    fontWeight: '700',
+    letterSpacing: 1,
+  },
+});
+
+export default BasicButton;
diff --git a/src/components/common/FriendsButton.tsx b/src/components/common/FriendsButton.tsx
index 46421bd1..1bb39e57 100644
--- a/src/components/common/FriendsButton.tsx
+++ b/src/components/common/FriendsButton.tsx
@@ -100,11 +100,11 @@ const styles = StyleSheet.create({
   button: {
     justifyContent: 'center',
     alignItems: 'center',
-    width: SCREEN_WIDTH * 0.4,
+    width: SCREEN_WIDTH * 0.42,
     aspectRatio: 154 / 33,
     borderWidth: 2,
     borderColor: TAGG_LIGHT_BLUE,
-    borderRadius: 3,
+    borderRadius: 2,
     marginRight: '2%',
     marginLeft: '1%',
   },
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 8499dbfa..b5fd0542 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -23,3 +23,4 @@ export {default as AcceptDeclineButtons} from './AcceptDeclineButtons';
 export {default as FriendsButton} from './FriendsButton';
 export {default as TaggSquareButton} from './TaggSquareButton';
 export {default as GradientBorderButton} from './GradientBorderButton';
+export {default as BasicButton} from './BasicButton';