From 36f0adad50dd45b5a08f3b1e76bc649b032f3556 Mon Sep 17 00:00:00 2001
From: Shahbaj Sheikh <123269233+CodeReader101@users.noreply.github.com>
Date: Mon, 7 Oct 2024 20:01:21 +0530
Subject: [PATCH] add LargeTextButton (#300)

* add LargeTextButton
---
 client/app/components/auth/AuthButtons.tsx    | 45 -------------------
 .../app/components/auth/LargeTextButton.tsx   | 40 +++++++++++++++++
 client/app/components/auth/LogInButton.tsx    | 32 -------------
 client/app/components/auth/SignUpButton.tsx   | 32 -------------
 client/app/screens/auth/LoginScreen.tsx       |  5 ++-
 client/app/screens/auth/SignUpScreen.tsx      |  5 ++-
 client/app/types/Props.ts                     |  9 ++--
 7 files changed, 49 insertions(+), 119 deletions(-)
 create mode 100644 client/app/components/auth/LargeTextButton.tsx
 delete mode 100644 client/app/components/auth/LogInButton.tsx
 delete mode 100644 client/app/components/auth/SignUpButton.tsx

diff --git a/client/app/components/auth/AuthButtons.tsx b/client/app/components/auth/AuthButtons.tsx
index 1c7258339..6336e7702 100644
--- a/client/app/components/auth/AuthButtons.tsx
+++ b/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",
diff --git a/client/app/components/auth/LargeTextButton.tsx b/client/app/components/auth/LargeTextButton.tsx
new file mode 100644
index 000000000..248a9cf75
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/client/app/components/auth/LogInButton.tsx b/client/app/components/auth/LogInButton.tsx
deleted file mode 100644
index 6bdcbfbc4..000000000
--- a/client/app/components/auth/LogInButton.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-import { StyleSheet, Text, TouchableOpacity, Dimensions } from "react-native";
-
-import { LogInButtonProps } from "../../types/Props";
-
-const LogInButton: React.FC<LogInButtonProps> = ({ onPress }) => {
-  return (
-    <TouchableOpacity style={styles.button} onPress={onPress}>
-      <Text style={styles.button_text}>Log In</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 LogInButton;
diff --git a/client/app/components/auth/SignUpButton.tsx b/client/app/components/auth/SignUpButton.tsx
deleted file mode 100644
index 9d6132754..000000000
--- a/client/app/components/auth/SignUpButton.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-import { StyleSheet, Text, TouchableOpacity, Dimensions } from "react-native";
-
-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>
-  );
-};
-
-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;
diff --git a/client/app/screens/auth/LoginScreen.tsx b/client/app/screens/auth/LoginScreen.tsx
index ade1089b0..1c9e6d181 100644
--- a/client/app/screens/auth/LoginScreen.tsx
+++ b/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
diff --git a/client/app/screens/auth/SignUpScreen.tsx b/client/app/screens/auth/SignUpScreen.tsx
index bac99e642..82be10b66 100644
--- a/client/app/screens/auth/SignUpScreen.tsx
+++ b/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}>
diff --git a/client/app/types/Props.ts b/client/app/types/Props.ts
index 511236481..7c6c77098 100644
--- a/client/app/types/Props.ts
+++ b/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;