sign/login ui tweaks

components/pages/main/SignInPage.tsx

@@ -1,170 +1,218 @@
-import {Button, ButtonSize, Dialog, Text, TextField, View} from "react-native-ui-lib";
-import React, {useState} from "react";
-import {useSignIn} from "@/hooks/firebase/useSignIn";
-import {StyleSheet} from "react-native";
-import Toast from 'react-native-toast-message';
-import {useLoginWithQrCode} from "@/hooks/firebase/useLoginWithQrCode";
-import {Camera, CameraView} from 'expo-camera';
+import {
+  Button,
+  ButtonSize,
+  Dialog,
+  Text,
+  TextField,
+  TextFieldRef,
+  View,
+} from "react-native-ui-lib";
+import React, { useRef, useState } from "react";
+import { useSignIn } from "@/hooks/firebase/useSignIn";
+import { StyleSheet } from "react-native";
+import Toast from "react-native-toast-message";
+import { useLoginWithQrCode } from "@/hooks/firebase/useLoginWithQrCode";
+import { Camera, CameraView } from "expo-camera";
 
-const SignInPage = ({setTab}: {
-    setTab: React.Dispatch<React.SetStateAction<"register" | "login" | "reset-password">>
+const SignInPage = ({
+  setTab,
+}: {
+  setTab: React.Dispatch<
+    React.SetStateAction<"register" | "login" | "reset-password">
+  >;
 }) => {
-    const [email, setEmail] = useState<string>("");
-    const [password, setPassword] = useState<string>("");
-    const [hasPermission, setHasPermission] = useState<boolean | null>(null);
-    const [showCameraDialog, setShowCameraDialog] = useState<boolean>(false);
+  const [email, setEmail] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
+  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
+  const [showCameraDialog, setShowCameraDialog] = useState<boolean>(false);
+  const passwordRef = useRef<TextFieldRef>(null);
 
-    const {mutateAsync: signIn, error, isError} = useSignIn();
-    const {mutateAsync: signInWithQrCode} = useLoginWithQrCode()
+  const { mutateAsync: signIn, error, isError } = useSignIn();
+  const { mutateAsync: signInWithQrCode } = useLoginWithQrCode();
 
-    const handleSignIn = async () => {
-        await signIn({email, password});
-        if (!isError) {
-            Toast.show({
-                type: "success",
-                text1: "Login successful!"
-            });
-        } else {
-            Toast.show({
-                type: "error",
-                text1: "Error logging in",
-                text2: `${error}`
-            });
-        }
-    };
+  const handleSignIn = async () => {
+    await signIn({ email, password });
+    if (!isError) {
+      Toast.show({
+        type: "success",
+        text1: "Login successful!",
+      });
+    } else {
+      Toast.show({
+        type: "error",
+        text1: "Error logging in",
+        text2: `${error}`,
+      });
+    }
+  };
 
-    const handleQrCodeScanned = async ({data}: { data: string }) => {
-        setShowCameraDialog(false);
-        try {
-            await signInWithQrCode({userId: data});
-            Toast.show({
-                type: "success",
-                text1: "Login successful with QR code!"
-            });
-        } catch (err) {
-            Toast.show({
-                type: "error",
-                text1: "Error logging in with QR code",
-                text2: `${err}`
-            });
-        }
-    };
+  const handleQrCodeScanned = async ({ data }: { data: string }) => {
+    setShowCameraDialog(false);
+    try {
+      await signInWithQrCode({ userId: data });
+      Toast.show({
+        type: "success",
+        text1: "Login successful with QR code!",
+      });
+    } catch (err) {
+      Toast.show({
+        type: "error",
+        text1: "Error logging in with QR code",
+        text2: `${err}`,
+      });
+    }
+  };
 
-    const getCameraPermissions = async (callback: () => void) => {
-        const {status} = await Camera.requestCameraPermissionsAsync();
-        setHasPermission(status === 'granted');
-        if (status === 'granted') {
-            callback();
-        }
-    };
+  const getCameraPermissions = async (callback: () => void) => {
+    const { status } = await Camera.requestCameraPermissionsAsync();
+    setHasPermission(status === "granted");
+    if (status === "granted") {
+      callback();
+    }
+  };
 
-    return (
-        <View padding-10 centerV height={"100%"}>
-            <TextField
-                placeholder="Email"
-                value={email}
-                onChangeText={setEmail}
-                style={styles.textfield}
-            />
-            <TextField
-                placeholder="Password"
-                value={password}
-                onChangeText={setPassword}
-                secureTextEntry
-                style={styles.textfield}
-            />
-            <Button
-                label="Login"
-                onPress={handleSignIn}
-                style={{marginBottom: 20}}
-                backgroundColor="#fd1775"
-            />
-            <Button
-                label="Login with a QR Code"
-                onPress={() => {
-                    getCameraPermissions(() => setShowCameraDialog(true));
-                }
-                }
-                style={{marginBottom: 20}}
-                backgroundColor="#fd1775"
-            />
-            {isError && <Text center style={{marginBottom: 20}}>{`${error?.toString()?.split("]")?.[1]}`}</Text>}
+  return (
+    <View padding-10 centerV height={"100%"}>
+      <TextField
+        placeholder="Email"
+        value={email}
+        
+        onChangeText={setEmail}
+        style={styles.textfield}
+        onSubmitEditing={() => {
+          // Move focus to the description field
+          passwordRef.current?.focus();
+        }}
+      />
+      <TextField
+      ref={passwordRef}
+        placeholder="Password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry
+        style={styles.textfield}
+      />
+      <Button
+        label="Log in"
+        marginT-50
+        labelStyle={{
+          fontFamily: "PlusJakartaSans_600SemiBold",
+          fontSize: 16,
+        }}
+        onPress={handleSignIn}
+        style={{ marginBottom: 20, height: 50 }}
+        backgroundColor="#fd1775"
+      />
+      <Button
+        label="Log in with a QR Code"
+        labelStyle={{
+          fontFamily: "PlusJakartaSans_600SemiBold",
+          fontSize: 16,
+        }}
+        onPress={() => {
+          getCameraPermissions(() => setShowCameraDialog(true));
+        }}
+        style={{ marginBottom: 20, height: 50 }}
+        backgroundColor="#fd1775"
+      />
+      {isError && (
+        <Text center style={{ marginBottom: 20 }}>{`${
+          error?.toString()?.split("]")?.[1]
+        }`}</Text>
+      )}
 
-            <View row centerH marginB-5 gap-5>
-                <Text text70>
-                    Don't have an account?
-                </Text>
-                <Button
-                    onPress={() => setTab("register")}
-                    label="Sign Up"
-                    link
-                    size={ButtonSize.xSmall}
-                    padding-0
-                    margin-0
-                    text70
-                    left
-                    color="#fd1775"
-                />
-            </View>
+      <View row centerH marginB-5 gap-5>
+        <Text style={styles.jakartaLight}>Don't have an account?</Text>
+        <Button
+          onPress={() => setTab("register")}
+          label="Sign Up"
+          labelStyle={[
+            styles.jakartaMedium,
+            { textDecorationLine: "none", color: "#fd1575" },
+          ]}
+          link
+          size={ButtonSize.xSmall}
+          padding-0
+          margin-0
+          text70
+          left
+          color="#fd1775"
+        />
+      </View>
 
-            <View row centerH marginB-5 gap-5>
-                <Text text70>
-                    Forgot your password?
-                </Text>
-                <Button
-                    onPress={() => setTab("reset-password")}
-                    label="Reset password"
-                    link
-                    size={ButtonSize.xSmall}
-                    padding-0
-                    margin-0
-                    text70
-                    left
-                    color="#fd1775"
-                />
-            </View>
+      <View row centerH marginB-5 gap-5>
+        <Text text70>Forgot your password?</Text>
+        <Button
+          onPress={() => setTab("reset-password")}
+          label="Reset password"
+          labelStyle={[
+            styles.jakartaMedium,
+            { textDecorationLine: "none", color: "#fd1575" },
+          ]}
+          link
+          size={ButtonSize.xSmall}
+          padding-0
+          margin-0
+          text70
+          left
+          avoidInnerPadding
+          color="#fd1775"
+        />
+      </View>
 
-            {/* Camera Dialog */}
-            <Dialog
-                visible={showCameraDialog}
-                onDismiss={() => setShowCameraDialog(false)}
-                bottom
-                width="100%"
-                height="70%"
-                containerStyle={{padding: 0}}
-            >
-                {hasPermission === null ? (
-                    <Text>Requesting camera permissions...</Text>
-                ) : !hasPermission ? (
-                    <Text>No access to camera</Text>
-                ) : (
-                    <CameraView
-                        style={{flex: 1}}
-                        onBarcodeScanned={handleQrCodeScanned}
-                        barcodeScannerSettings={{
-                            barcodeTypes: ["qr"],
-                        }}
-                    />
-                )}
-                <Button
-                    label="Cancel"
-                    onPress={() => setShowCameraDialog(false)}
-                    backgroundColor="#fd1775"
-                    style={{margin: 10}}
-                />
-            </Dialog>
-        </View>
-    );
+      {/* Camera Dialog */}
+      <Dialog
+        visible={showCameraDialog}
+        onDismiss={() => setShowCameraDialog(false)}
+        bottom
+        width="100%"
+        height="70%"
+        containerStyle={{ padding: 0 }}
+      >
+        {hasPermission === null ? (
+          <Text>Requesting camera permissions...</Text>
+        ) : !hasPermission ? (
+          <Text>No access to camera</Text>
+        ) : (
+          <CameraView
+            style={{ flex: 1 }}
+            onBarcodeScanned={handleQrCodeScanned}
+            barcodeScannerSettings={{
+              barcodeTypes: ["qr"],
+            }}
+          />
+        )}
+        <Button
+          label="Cancel"
+          onPress={() => setShowCameraDialog(false)}
+          backgroundColor="#fd1775"
+          style={{ margin: 10 }}
+        />
+      </Dialog>
+    </View>
+  );
 };
 
 const styles = StyleSheet.create({
-    textfield: {
-        backgroundColor: "white",
-        marginVertical: 10,
-        padding: 30,
-        height: 45,
-        borderRadius: 50,
-    },
+  textfield: {
+    backgroundColor: "white",
+    marginVertical: 10,
+    padding: 30,
+    height: 45,
+    borderRadius: 50,
+    fontFamily: "PlusJakartaSans_300Light",
+  },
+  jakartaLight: {
+    fontFamily: "PlusJakartaSans_300Light",
+    fontSize: 16,
+    color: "#484848",
+  },
+  jakartaMedium: {
+    fontFamily: "PlusJakartaSans_500Medium",
+    fontSize: 16,
+    color: "#919191",
+    textDecorationLine: "underline",
+  },
 });
 
 export default SignInPage;