Small fixes

components/pages/brain_dump/AddBrainDump.tsx

@@ -1,151 +1,149 @@
-import {
-  View,
-  Text,
-  Button,
-  TextField,
-  TextFieldRef,
-  TouchableOpacity,
-} from "react-native-ui-lib";
-import React, { useEffect, useState, useRef } from "react";
-import { Dialog } from "react-native-ui-lib";
-import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
-import { Dimensions, Keyboard, StyleSheet } from "react-native";
+import {Button, Dialog, TextField, TextFieldRef, TouchableOpacity, View,} from "react-native-ui-lib";
+import React, {useEffect, useRef, useState} from "react";
+import {PanningDirectionsEnum} from "react-native-ui-lib/src/incubator/panView";
+import {Dimensions, StyleSheet} from "react-native";
 
 import DropModalIcon from "@/assets/svgs/DropModalIcon";
-import { useBrainDumpContext } from "@/contexts/DumpContext";
+import {useBrainDumpContext} from "@/contexts/DumpContext";
 import KeyboardManager from "react-native-keyboard-manager";
 
 
 interface IAddBrainDumpProps {
-  isVisible: boolean;
-  setIsVisible: (value: boolean) => void;
+    isVisible: boolean;
+    setIsVisible: (value: boolean) => void;
 }
 
 const AddBrainDump = ({
-  addBrainDumpProps,
-}: {
-  addBrainDumpProps: IAddBrainDumpProps;
+                          addBrainDumpProps,
+                      }: {
+    addBrainDumpProps: IAddBrainDumpProps;
 }) => {
-  const { addBrainDump } = useBrainDumpContext();
-  const [dumpTitle, setDumpTitle] = useState<string>("");
-  const [dumpDesc, setDumpDesc] = useState<string>("");
-  const { width } = Dimensions.get("screen");
+    const {addBrainDump} = useBrainDumpContext();
+    const [dumpTitle, setDumpTitle] = useState<string>("");
+    const [dumpDesc, setDumpDesc] = useState<string>("");
+    const {width} = Dimensions.get("screen");
 
 
-  // Refs for the two TextFields
-  const descriptionRef = useRef<TextFieldRef>(null);
-  const titleRef = useRef<TextFieldRef>(null);
+    // Refs for the two TextFields
+    const descriptionRef = useRef<TextFieldRef>(null);
+    const titleRef = useRef<TextFieldRef>(null);
 
-  useEffect(() => {
-    setDumpDesc("");
-    setDumpTitle("");
-  }, [addBrainDumpProps.isVisible]);
+    useEffect(() => {
+        setDumpDesc("");
+        setDumpTitle("");
+    }, [addBrainDumpProps.isVisible]);
 
-  useEffect(() => {
-    setTimeout(() => {
-      titleRef?.current?.focus()
-    }, 500)
-  }, []);
+    useEffect(() => {
+        if (addBrainDumpProps.isVisible) {
+            setTimeout(() => {
+                titleRef?.current?.focus()
+            }, 500)
+        }
+    }, [addBrainDumpProps.isVisible]);
 
-  useEffect(() => {
-    KeyboardManager.setEnableAutoToolbar(false);
-  },[])
+    useEffect(() => {
+        KeyboardManager.setEnableAutoToolbar(false);
+    }, [])
 
-  return (
-    <Dialog
-      bottom={true}
-      height={"90%"}
-      width={width}
-      panDirection={PanningDirectionsEnum.DOWN}
-      onDismiss={() => addBrainDumpProps.setIsVisible(false)}
-      containerStyle={styles.dialogContainer}
-      visible={addBrainDumpProps.isVisible}
-    >
-      <View row spread style={styles.topBtns} marginB-20>
-        <Button
-          color="#05a8b6"
-          label="Cancel"
-          style={styles.topBtn}
-          onPress={() => {
-            addBrainDumpProps.setIsVisible(false);
-          }}
-        />
-        <TouchableOpacity onPress={() => addBrainDumpProps.setIsVisible(false)}>
-          <DropModalIcon style={{ marginTop: 15 }} />
-        </TouchableOpacity>
-        <Button
-          color="#05a8b6"
-          label="Save"
-          style={styles.topBtn}
-          onPress={() => {
-            addBrainDump({ id: 99, title: dumpTitle.trimEnd().trimStart(), description: dumpDesc.trimEnd().trimStart() });
-            addBrainDumpProps.setIsVisible(false);
-          }}
-        />
-      </View>
-      <View marginH-20>
-        <TextField
-          value={dumpTitle}
-          ref={titleRef}
-          placeholder="Set Title"
-          text60R
-          onChangeText={(text) => {
-            setDumpTitle(text);
-          }}
-          onSubmitEditing={() => {
-            // Move focus to the description field
-            descriptionRef.current?.focus();
-          }}
-          style={styles.title}
-          blurOnSubmit={false} // Keep the keyboard open when moving focus
-          returnKeyType="next"
-        />
-        <View height={2} backgroundColor="#b3b3b3" width={"100%"} marginB-20 />
-        <TextField
-          ref={descriptionRef}
-          value={dumpDesc}
-          placeholder="Write Description"
-          text70
-          onChangeText={(text) => {
-            setDumpDesc(text);
-          }}
-          style={styles.description}
-          multiline
-          numberOfLines={4}
-          maxLength={255}
-          onEndEditing={() => {
-            descriptionRef.current?.blur();
-          }}
-          returnKeyType="done"
-        />
-      </View>
-    </Dialog>
-  );
+    return (
+        <Dialog
+            bottom={true}
+            height={"90%"}
+            width={width}
+            panDirection={PanningDirectionsEnum.DOWN}
+            onDismiss={() => addBrainDumpProps.setIsVisible(false)}
+            containerStyle={styles.dialogContainer}
+            visible={addBrainDumpProps.isVisible}
+        >
+            <View row spread style={styles.topBtns} marginB-20>
+                <Button
+                    color="#05a8b6"
+                    label="Cancel"
+                    style={styles.topBtn}
+                    onPress={() => {
+                        addBrainDumpProps.setIsVisible(false);
+                    }}
+                />
+                <TouchableOpacity onPress={() => addBrainDumpProps.setIsVisible(false)}>
+                    <DropModalIcon style={{marginTop: 15}}/>
+                </TouchableOpacity>
+                <Button
+                    color="#05a8b6"
+                    label="Save"
+                    style={styles.topBtn}
+                    onPress={() => {
+                        addBrainDump({
+                            id: 99,
+                            title: dumpTitle.trimEnd().trimStart(),
+                            description: dumpDesc.trimEnd().trimStart()
+                        });
+                        addBrainDumpProps.setIsVisible(false);
+                    }}
+                />
+            </View>
+            <View marginH-20>
+                <TextField
+                    value={dumpTitle}
+                    ref={titleRef}
+                    placeholder="Set Title"
+                    text60R
+                    onChangeText={(text) => {
+                        setDumpTitle(text);
+                    }}
+                    onSubmitEditing={() => {
+                        // Move focus to the description field
+                        descriptionRef.current?.focus();
+                    }}
+                    style={styles.title}
+                    blurOnSubmit={false} // Keep the keyboard open when moving focus
+                    returnKeyType="next"
+                />
+                <View height={2} backgroundColor="#b3b3b3" width={"100%"} marginB-20/>
+                <TextField
+                    ref={descriptionRef}
+                    value={dumpDesc}
+                    placeholder="Write Description"
+                    text70
+                    onChangeText={(text) => {
+                        setDumpDesc(text);
+                    }}
+                    style={styles.description}
+                    multiline
+                    numberOfLines={4}
+                    maxLength={255}
+                    onEndEditing={() => {
+                        descriptionRef.current?.blur();
+                    }}
+                    returnKeyType="done"
+                />
+            </View>
+        </Dialog>
+    );
 };
 
 const styles = StyleSheet.create({
-  dialogContainer: {
-    borderTopRightRadius: 15,
-    borderTopLeftRadius: 15,
-    backgroundColor: "white",
-    padding: 0,
-    paddingTop: 3,
-    margin: 0,
-  },
-  topBtns: {},
-  topBtn: {
-    backgroundColor: "white",
-    color: "#05a8b6",
-  },
-  title: {
-    fontSize: 22,
-    fontFamily: "Manrope_500Medium",
-  },
-  description: {
-    fontFamily: "Manrope_400Regular",
-    fontSize: 14,
-    textAlignVertical: 'top'
-  },
+    dialogContainer: {
+        borderTopRightRadius: 15,
+        borderTopLeftRadius: 15,
+        backgroundColor: "white",
+        padding: 0,
+        paddingTop: 3,
+        margin: 0,
+    },
+    topBtns: {},
+    topBtn: {
+        backgroundColor: "white",
+        color: "#05a8b6",
+    },
+    title: {
+        fontSize: 22,
+        fontFamily: "Manrope_500Medium",
+    },
+    description: {
+        fontFamily: "Manrope_400Regular",
+        fontSize: 14,
+        textAlignVertical: 'top'
+    },
 });
 
 export default AddBrainDump;

components/pages/brain_dump/MoveBrainDump.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React, {useEffect, useRef, useState} from "react";
 import {
   Button,
   Dialog,
   View,
   Text,
   TextField,
-  TouchableOpacity,
+  TouchableOpacity, TextFieldRef,
 } from "react-native-ui-lib";
 import { Dimensions, StyleSheet } from "react-native";
 import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
@@ -30,6 +30,7 @@ const MoveBrainDump = (props: {
     props.item.description
   );
   const [modalVisible, setModalVisible] = useState<boolean>(false);
+  const descriptionRef = useRef<TextFieldRef>(null)
 
   const { width } = Dimensions.get("screen");
 
@@ -37,6 +38,14 @@ const MoveBrainDump = (props: {
     updateBrainDumpItem(props.item.id, { description: description });
   }, [description]);
 
+  useEffect(() => {
+    if (props.isVisible) {
+      setTimeout(() => {
+        descriptionRef?.current?.focus()
+      }, 500)
+    }
+  }, [props.isVisible]);
+
   const showConfirmationDialog = () => {
     setModalVisible(true);
   };
@@ -112,7 +121,6 @@ const MoveBrainDump = (props: {
         <TextField
           textAlignVertical="top"
           multiline
-          autoFocus
           fieldStyle={{
             width: "94%",
           }}
@@ -123,6 +131,7 @@ const MoveBrainDump = (props: {
           onChangeText={(value) => {
             setDescription(value);
           }}
+          ref={descriptionRef}
           returnKeyType="default"
         />
       </View>

components/pages/main/SignInPage.tsx

@@ -1,7 +1,16 @@
-import {Button, ButtonSize, Dialog, Text, TextField, TextFieldRef, View,} from "react-native-ui-lib";
+import {
+    Button,
+    ButtonSize, Colors,
+    Dialog,
+    KeyboardAwareScrollView, LoaderScreen, Modal,
+    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 {KeyboardAvoidingView, Platform, StyleSheet} from "react-native";
 import Toast from "react-native-toast-message";
 import {useLoginWithQrCode} from "@/hooks/firebase/useLoginWithQrCode";
 import {Camera, CameraView} from "expo-camera";
@@ -19,8 +28,10 @@ const SignInPage = ({
     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, isLoading: isSigninIn} = useSignIn();
+    const {mutateAsync: signInWithQrCode, isLoading: isQRCodeLoggingIn} = useLoginWithQrCode();
+
+    const isLoading = isSigninIn || isQRCodeLoggingIn
 
     const handleSignIn = async () => {
         await signIn({email, password});
@@ -64,8 +75,13 @@ const SignInPage = ({
     };
 
     return (
-        <View padding-10 centerV height={"100%"}>
-            <TextField
+        <View padding-10 centerV height={"100%%"} style={{justifyContent: "center"}}>
+            <KeyboardAvoidingView
+                contentContainerStyle={{ justifyContent:"center"}}
+                keyboardVerticalOffset={50}
+                behavior={Platform.OS === "ios" ? "padding" : "height"}
+            >
+                <TextField
                 placeholder="Email"
                 keyboardType={"email-address"}
                 returnKeyType={"next"}
@@ -73,6 +89,8 @@ const SignInPage = ({
                 defaultValue={email}
                 onChangeText={setEmail}
                 style={styles.textfield}
+                autoComplete={"email"}
+                autoCorrect={false}
                 onSubmitEditing={() => {
                     // Move focus to the description field
                     passwordRef.current?.focus();
@@ -99,62 +117,64 @@ const SignInPage = ({
                 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 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"
+                    label="Log in with a QR Code"
+                    labelStyle={{
+                        fontFamily: "PlusJakartaSans_600SemiBold",
+                        fontSize: 16,
+                    }}
+                    onPress={() => {
+                        getCameraPermissions(() => setShowCameraDialog(true));
+                    }}
+                    style={{marginBottom: 20, height: 50}}
+                    backgroundColor="#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>
+                {isError && (
+                    <Text center style={{marginBottom: 20}}>{`${
+                        error?.toString()?.split("]")?.[1]
+                    }`}</Text>
+                )}
+
+                <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"
+                        labelStyle={[
+                            styles.jakartaMedium,
+                            {textDecorationLine: "none", color: "#fd1575"},
+                        ]}
+                        link
+                        size={ButtonSize.xSmall}
+                        padding-0
+                        margin-0
+                        text70
+                        left
+                        avoidInnerPadding
+                        color="#fd1775"
+                    />
+                </View>
+            </KeyboardAvoidingView>
 
             {/* Camera Dialog */}
             <Dialog
@@ -185,6 +205,12 @@ const SignInPage = ({
                     style={{margin: 10, marginBottom: 30}}
                 />
             </Dialog>
+
+
+            {isLoading && (
+                <LoaderScreen overlay message={"Signing in..."} backgroundColor={Colors.white} color={Colors.grey40}/>
+            )}
+
         </View>
     );
 };

components/pages/main/SignUpPage.tsx

@@ -55,6 +55,12 @@ const SignUpPage = ({
                     lnameRef.current?.focus();
                 }}
                 blurOnSubmit={false}
+                accessibilityLabel="First name input"
+                accessibilityHint="Enter your first name"
+                accessible
+                returnKeyType="next"
+                textContentType="givenName"
+                importantForAccessibility="yes"
             />
             <TextField
                 ref={lnameRef}
@@ -66,17 +72,27 @@ const SignUpPage = ({
                     emailRef.current?.focus();
                 }}
                 blurOnSubmit={false}
+                accessibilityLabel="Last name input"
+                accessibilityHint="Enter your last name"
+                accessible
+                returnKeyType="next"
+                textContentType="familyName"
+                importantForAccessibility="yes"
             />
             <TextField
-                ref={emailRef}
                 placeholder="Email"
-                value={email}
+                keyboardType={"email-address"}
+                returnKeyType={"next"}
+                textContentType={"emailAddress"}
+                defaultValue={email}
                 onChangeText={setEmail}
                 style={styles.textfield}
+                autoComplete={"email"}
+                autoCorrect={false}
+                ref={emailRef}
                 onSubmitEditing={() => {
                     passwordRef.current?.focus();
                 }}
-                blurOnSubmit={false}
             />
             <View
                 centerV

components/pages/todos/AddChore.tsx

@@ -22,7 +22,7 @@ const AddChore = () => {
     >
       <View style={styles.buttonContainer}>
         <Button
-          marginH-20
+          marginB-30
           size={ButtonSize.large}
           style={styles.button}
           onPress={() => setIsVisible(!isVisible)}