wip: needs testing on physical devices

src/auth/firebase-auth.tsx

@@ -30,19 +30,20 @@ export const confirmCode = async (
 	}
 };
 
-	
-export const createOrSignInUser = (email: string, password: string, isSignUp: boolean) => {
-	console.log('isSignUp', isSignUp);
+export const createOrSignInUser = (
+	email: string,
+	password: string,
+	isSignUp: boolean,
+) => {
+	console.log("isSignUp", isSignUp);
 	try {
 		if (isSignUp) {
-			auth().createUserWithEmailAndPassword(email, password)
+			auth().createUserWithEmailAndPassword(email, password);
 		} else {
-			auth().signInWithEmailAndPassword(email, password)
+			auth().signInWithEmailAndPassword(email, password);
 		}
-	} catch (err) {
-		
-	}
-}
+	} catch (err) {}
+};
 
 export const onAuthStateChanged = (
 	// TODO: eslint not detecting ts?

src/screens/login.tsx

@@ -13,6 +13,7 @@ import {
 } from "react-native";
 import { confirmCode, handleSignInWithPhoneNumber } from "../auth";
 import { createOrSignInUser } from "../auth/firebase-auth";
+import { colors } from "../styles";
 
 export default function Login() {
 	const [isEmailLogin, setIsEmailLogin] = useState(false);
@@ -25,7 +26,7 @@ export default function Login() {
 		useState<FirebaseAuthTypes.ConfirmationResult | null>(null);
 
 	// Email
-	const [isSignUp, setIsSignUp] = useState<boolean>(false)
+	const [isSignUp, setIsSignUp] = useState<boolean>(false);
 	const [email, setEmail] = useState<string>("");
 	const [password, setPassword] = useState<string>("");
 	const toggleSignUp = () => setIsSignUp(!isSignUp);
@@ -34,10 +35,10 @@ export default function Login() {
 		<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
 			<View style={styles.container}>
 				<View style={styles.toggleRow}>
-					<Text>Use email</Text>
+					<Text style={styles.toggleText}>Use email</Text>
 					<Switch
-						trackColor={{ false: "#767577", true: "#81b0ff" }}
-						thumbColor={isEmailLogin ? "#f5dd4b" : "#f4f3f4"}
+						trackColor={{ false: colors.darkGrey, true: colors.lightGrey }}
+						thumbColor={isEmailLogin ? colors.buttonBlue : colors.panelWhite}
 						onValueChange={toggleSwitch}
 						value={isEmailLogin}
 					/>
@@ -99,13 +100,15 @@ export default function Login() {
 						/>
 						<TouchableOpacity onPress={toggleSignUp}>
 							<Text style={styles.linkText}>
-								{isSignUp ? 'Already have an account? Sign In' : "Don't have an account? Sign Up"}
+								{isSignUp
+									? "Already have an account? Sign In"
+									: "Don't have an account? Sign Up"}
 							</Text>
 						</TouchableOpacity>
 
 						<View style={styles.buttonContainer}>
 							<Button
-								title={isSignUp ? 'SignUp' : 'Sign in'}
+								title={isSignUp ? "SignUp" : "Sign in"}
 								onPress={() => createOrSignInUser(email, password, isSignUp)}
 							/>
 						</View>
@@ -138,11 +141,12 @@ const styles = StyleSheet.create({
 		alignItems: "center",
 		marginBottom: 20,
 	},
+	toggleText: { marginRight: 20, fontSize: 16 },
 	linkText: {
 		fontSize: 16,
-    color: '#007AFF',
+		color: "#007AFF",
 		paddingVertical: 10,
-    textAlign: 'center',
+		textAlign: "center",
 	},
 	buttonContainer: {
 		width: "80%",

src/screens/profile.tsx

@@ -7,14 +7,14 @@ import { useAuth } from "../context";
 // Sign out button only functional when NOT using dev env
 export default function ProfileScreen() {
 	const { user } = useAuth();
-	console.log(user)
+	console.log(user);
 
 	return (
 		<View style={styles.container}>
 			{user && (
 				<>
 					<View style={styles.userInfo}>
-						<Text>Display name: {user?.displayName ?? 'No username set'}</Text>
+						<Text>Display name: {user?.displayName ?? "No username set"}</Text>
 						<Text>Phone number/Email: {user?.phoneNumber ?? user?.email}</Text>
 					</View>
 					<View style={styles.signOutButton}>

src/styles.ts

@@ -4,6 +4,7 @@
 export const colors = {
 	bgBlack: "#121212",
 	lightGrey: "#BFC2C8",
+	darkGrey: "#767577",
 	themeBrown: "#D9AA84",
 	panelWhite: "#F2FBFE",
 	tournamentBlue: "#50a6c2",