add LargeTextButton (#300)

* add LargeTextButton

client/app/components/auth/AuthButtons.tsx

@@ -60,27 +60,6 @@ import {
 //   );
 // };
 
-export const LogInButton: React.FC<{ onPress?: () => void }> = ({
-  onPress,
-}) => {
-  return (
-    <TouchableOpacity style={styles.login_button} onPress={onPress}>
-      <Text style={styles.button_text}>Login</Text>
-    </TouchableOpacity>
-  );
-};
-
-export const SignUpButton: React.FC<{ onPress?: () => void }> = ({
-  onPress,
-}) => {
-
-  return (
-    <TouchableOpacity style={styles.login_button} onPress={onPress}>
-      <Text style={styles.button_text}>Sign Up</Text>
-    </TouchableOpacity>
-  );
-};
-
 export const ExternalAuthButton: React.FC<{
   onPress?: () => void;
   companyName: string;
@@ -111,30 +90,6 @@ export const ExternalAuthButton: React.FC<{
 };
 
 const styles = StyleSheet.create({
-  login_button: {
-    backgroundColor: "#5dbea3",
-    width: Dimensions.get("window").width * 0.5,
-    height: Dimensions.get("window").height * 0.05,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: Dimensions.get("window").height / 2,
-    shadowColor: "#8E8E8E",
-    shadowRadius: 2,
-    shadowOpacity: 0.7,
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    elevation: 2,
-  },
-
-  button_text: {
-    color: "white",
-    fontFamily: "Quicksand-Medium",
-    fontSize: Dimensions.get("window").height * 0.027,
-  },
-
   sign_out_button: {
     display: "flex",
     justifyContent: "center",

client/app/components/auth/LargeTextButton.tsx

@@ -0,0 +1,40 @@
+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: Dimensions.get("window").height / 2,
+    shadowColor: "#8E8E8E",
+    shadowRadius: 2,
+    shadowOpacity: 0.7,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    elevation: 2,
+  },
+
+  button_text: {
+    color: "white",
+    fontFamily: "Quicksand-Medium",
+    fontSize: Dimensions.get("window").height * 0.027,
+  },
+});
+
+export default LargeTextButton;

client/app/screens/auth/LoginScreen.tsx

@@ -10,8 +10,9 @@ import {
 } from "react-native";
 import { ArrowLeftCircle } from "react-native-feather";
 
+import LargeTextButton from "@app/components/auth/LargeTextButton";
+
 import {
-  LogInButton,
   ExternalAuthButton,
 } from "../../components/auth/AuthButtons";
 import {
@@ -100,7 +101,7 @@ const LoginScreen = ({ route, navigation }: any) => {
             />
           </View>
           <View style={styles.button_container}>
-            <LogInButton onPress={onHandleSubmit} />
+            <LargeTextButton onPress={onHandleSubmit} buttonText="Login" />
           </View>
           <TouchableOpacity>
             <Text

client/app/screens/auth/SignUpScreen.tsx

@@ -10,8 +10,9 @@ import {
 } from "react-native";
 import { ArrowLeftCircle } from "react-native-feather";
 
+import LargeTextButton from "../../components/auth/LargeTextButton"
+
 import {
-  SignUpButton,
   ExternalAuthButton,
 } from "../../components/auth/AuthButtons";
 import {
@@ -117,7 +118,7 @@ const SignUpScreen = ({ navigation }: any) => {
             />
           </View>
           <View style={styles.button_container}>
-            <SignUpButton onPress={onHandleSubmit} />
+            <LargeTextButton onPress={onHandleSubmit} buttonText="Sign Up" />
           </View>
 
           <View style={styles.divider_container}>

client/app/types/Props.ts

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