add LargeTextButton

client/app/components/auth/LargeTextButton.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity, Dimensions } from "react-native";
+
+import { LargeTextButtonProps } from "../../types/Props";
+
+const LargeTextButton: React.FC<LargeTextButtonProps> = ({ onPress, buttonText }) => {
+  return (
+    <TouchableOpacity style={styles.button} onPress={onPress}>
+      <Text style={styles.button_text}>{buttonText}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "#5dbea3",
+    width: Dimensions.get("window").width * 0.5,
+    height: Dimensions.get("window").height * 0.05,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 10,
+  },
+
+  button_text: {
+    color: "white",
+    fontFamily: "Gilroy-ExtraBold",
+    fontSize: Dimensions.get("window").height * 0.03,
+  },
+});
+
+export default LargeTextButton;

client/app/components/auth/LogInButton.tsx

@@ -1,32 +1,12 @@
 import React from "react";
-import { StyleSheet, Text, TouchableOpacity, Dimensions } from "react-native";
 
 import { LogInButtonProps } from "../../types/Props";
+import LargeTextButton from "./LargeTextButton"
 
 const LogInButton: React.FC<LogInButtonProps> = ({ onPress }) => {
   return (
-    <TouchableOpacity style={styles.button} onPress={onPress}>
-      <Text style={styles.button_text}>Log In</Text>
-    </TouchableOpacity>
+    <LargeTextButton onPress={onPress} buttonText="Log In" />
   );
 };
 
-const styles = StyleSheet.create({
-  button: {
-    backgroundColor: "#5dbea3",
-    width: Dimensions.get("window").width * 0.5,
-    height: Dimensions.get("window").height * 0.05,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: 10,
-  },
-
-  button_text: {
-    color: "white",
-    fontFamily: "Gilroy-ExtraBold",
-    fontSize: Dimensions.get("window").height * 0.03,
-  },
-});
-
 export default LogInButton;

client/app/components/auth/SignUpButton.tsx

@@ -1,32 +1,12 @@
 import React from "react";
-import { StyleSheet, Text, TouchableOpacity, Dimensions } from "react-native";
+import LargeTextButton from "./LargeTextButton";
 
 import { SignUpButtonProps } from "../../types/Props";
 
 const SignUpButton: React.FC<SignUpButtonProps> = ({ onPress }) => {
   return (
-    <TouchableOpacity style={styles.button} onPress={onPress}>
-      <Text style={styles.button_text}>Sign Up</Text>
-    </TouchableOpacity>
+    <LargeTextButton onPress={onPress} buttonText="Sign Up"/>
   );
 };
 
-const styles = StyleSheet.create({
-  button: {
-    backgroundColor: "#5dbea3",
-    width: Dimensions.get("window").width * 0.5,
-    height: Dimensions.get("window").height * 0.05,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: 10,
-  },
-
-  button_text: {
-    color: "white",
-    fontFamily: "Gilroy-ExtraBold",
-    fontSize: Dimensions.get("window").height * 0.03,
-  },
-});
-
 export default SignUpButton;

client/app/types/Props.ts

@@ -3,6 +3,11 @@ import React from "react";
 import { Message } from "./Message";
 
 /* button props */
+export type LargeTextButtonProps = {
+  onPress?: () => void;
+  buttonText: string;
+}
+
 export type LogInButtonProps = {
   onPress?: () => void;
 };