From 33a5b5a595154aeb9f8412c4152f4d8025107d3b Mon Sep 17 00:00:00 2001
From: ivic00 <102467664+ivic00@users.noreply.github.com>
Date: Sun, 27 Oct 2024 20:51:38 +0100
Subject: [PATCH] sign/login ui tweaks

---
 components/pages/main/SignInPage.tsx | 356 +++++++++++++++------------
 components/pages/main/SignUpPage.tsx | 129 +++++++---
 2 files changed, 290 insertions(+), 195 deletions(-)

diff --git a/components/pages/main/SignInPage.tsx b/components/pages/main/SignInPage.tsx
index ac2b640..216d420 100644
--- a/components/pages/main/SignInPage.tsx
+++ b/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;
diff --git a/components/pages/main/SignUpPage.tsx b/components/pages/main/SignUpPage.tsx
index e48e351..b2dc9ac 100644
--- a/components/pages/main/SignUpPage.tsx
+++ b/components/pages/main/SignUpPage.tsx
@@ -11,7 +11,7 @@ import {
 } from "react-native-ui-lib";
 import { useSignUp } from "@/hooks/firebase/useSignUp";
 import { ProfileType } from "@/contexts/AuthContext";
-import { StyleSheet } from "react-native";
+import { Dimensions, StyleSheet } from "react-native";
 import { AntDesign } from "@expo/vector-icons";
 
 const SignUpPage = ({
@@ -40,19 +40,21 @@ const SignUpPage = ({
   };
 
   return (
-    <View padding-10 height={"100%"} flexG>
-      <Text text30 center>
-        Get started with Cally
+    <View padding-15 marginT-30 height={Dimensions.get("window").height} flexG>
+      <Text style={styles.title}>Get started with Cally</Text>
+      <Text style={styles.subtitle} marginT-15 color="#919191">
+        Please enter your details.
       </Text>
-      <Text center>Please enter your details.</Text>
       <TextField
-        marginT-60
+        marginT-30
         autoFocus
         placeholder="First name"
         value={firstName}
         onChangeText={setFirstName}
         style={styles.textfield}
-        onSubmitEditing={() => {lnameRef.current?.focus()}}
+        onSubmitEditing={() => {
+          lnameRef.current?.focus();
+        }}
         blurOnSubmit={false}
       />
       <TextField
@@ -61,7 +63,9 @@ const SignUpPage = ({
         value={lastName}
         onChangeText={setLastName}
         style={styles.textfield}
-        onSubmitEditing={() => {emailRef.current?.focus()}}
+        onSubmitEditing={() => {
+          emailRef.current?.focus();
+        }}
         blurOnSubmit={false}
       />
       <TextField
@@ -70,58 +74,69 @@ const SignUpPage = ({
         value={email}
         onChangeText={setEmail}
         style={styles.textfield}
-        onSubmitEditing={() => {passwordRef.current?.focus()}}
+        onSubmitEditing={() => {
+          passwordRef.current?.focus();
+        }}
         blurOnSubmit={false}
       />
-      <TextField
-        ref={passwordRef}
-        placeholder="Password"
-        value={password}
-        onChangeText={setPassword}
-        secureTextEntry={!isPasswordVisible}
-        style={styles.textfield}
-        trailingAccessory={
-          <TouchableOpacity
-            onPress={() => setIsPasswordVisible(!isPasswordVisible)}
-          >
-            <AntDesign
-              name={isPasswordVisible ? "eye" : "eyeo"}
-              size={24}
-              color="gray"
-            />
-          </TouchableOpacity>
-        }
-      />
-      <View gap-10 marginH-10>
+      <View
+        centerV
+        style={[styles.textfield, { padding: 0, paddingHorizontal: 30 }]}
+      >
+        <TextField
+          ref={passwordRef}
+          placeholder="Password"
+          style={styles.jakartaLight}
+          value={password}
+          onChangeText={setPassword}
+          secureTextEntry={!isPasswordVisible}
+          trailingAccessory={
+            <TouchableOpacity
+              onPress={() => setIsPasswordVisible(!isPasswordVisible)}
+            >
+              <AntDesign
+                name={isPasswordVisible ? "eye" : "eyeo"}
+                size={24}
+                color="gray"
+              />
+            </TouchableOpacity>
+          }
+        />
+      </View>
+      <View gap-5 marginT-15>
         <View row centerV>
           <Checkbox
+            style={[styles.check]}
+            color="#919191"
             value={allowFaceID}
             onValueChange={(value) => {
               setAllowFaceID(value);
             }}
           />
-          <Text text90R marginL-10>
+          <Text style={styles.jakartaLight} marginL-10>
             Allow FaceID for login in future
           </Text>
         </View>
         <View row centerV>
           <Checkbox
+            style={styles.check}
+            color="#919191"
             value={acceptTerms}
             onValueChange={(value) => setAcceptTerms(value)}
           />
           <View row>
-            <Text text90R marginL-10>
+            <Text style={styles.jakartaLight} marginL-10>
               I accept the
             </Text>
             <TouchableOpacity>
-              <Text text90 style={{ textDecorationLine: "underline" }}>
+              <Text text90 style={styles.jakartaMedium}>
                 {" "}
                 terms and conditions
               </Text>
             </TouchableOpacity>
-            <Text text90R> and </Text>
+            <Text style={styles.jakartaLight}> and </Text>
             <TouchableOpacity>
-              <Text text90 style={{ textDecorationLine: "underline" }}>
+              <Text text90 style={styles.jakartaMedium}>
                 {" "}
                 privacy policy
               </Text>
@@ -132,16 +147,24 @@ const SignUpPage = ({
       <View style={styles.bottomView}>
         <Button
           label="Register"
+          labelStyle={{
+            fontFamily: "PlusJakartaSans_600SemiBold",
+            fontSize: 16,
+          }}
           onPress={handleSignUp}
-          style={{ marginBottom: 10, backgroundColor: "#fd1775" }}
+          style={{ marginBottom: 0, backgroundColor: "#fd1775", height: 50 }}
         />
-        <View row centerH marginT-10 marginB-5 gap-5>
-          <Text text70 center>
+        <View row centerH marginT-10 marginB-2 gap-5>
+          <Text style={[styles.jakartaLight, { fontSize: 16, color: "#484848" }]} center>
             Already have an account?
           </Text>
 
           <Button
-            label="Sign In"
+            label="Log in"
+            labelStyle={[
+              styles.jakartaMedium,
+              { fontSize: 16, textDecorationLine: "none", color: "#fd1775" },
+            ]}
             flexS
             margin-0
             link
@@ -161,11 +184,35 @@ export default SignUpPage;
 const styles = StyleSheet.create({
   textfield: {
     backgroundColor: "white",
-    marginVertical: 10,
+    marginVertical: 8,
     padding: 30,
-    height: 45,
+    height: 44,
     borderRadius: 50,
+    fontFamily: "PlusJakartaSans_300Light",
+    fontSize: 13,
+    color: "#919191",
   },
   //mora da se izmeni kako treba
-  bottomView: { marginTop: 150 },
+  bottomView: { marginTop: "auto", marginBottom: 30 },
+  jakartaLight: {
+    fontFamily: "PlusJakartaSans_300Light",
+    fontSize: 13,
+    color: "#919191",
+  },
+  jakartaMedium: {
+    fontFamily: "PlusJakartaSans_500Medium",
+    fontSize: 13,
+    color: "#919191",
+    textDecorationLine: "underline",
+  },
+  title: { fontFamily: "Manrope_600SemiBold", fontSize: 34, marginTop: 50 },
+  subtitle: { fontFamily: "PlusJakartaSans_400Regular", fontSize: 16 },
+  check: {
+    borderRadius: 3,
+    aspectRatio: 1,
+    width: 18,
+    color: "#919191",
+    borderColor: "#919191",
+    borderWidth: 1,
+  },
 });