fixed tablet view / spelling

app/(auth)/_layout.tsx

@@ -50,7 +50,7 @@ export default function TabLayout() {
         },
         headerStyle: { height: Device.deviceType === DeviceType.TABLET ? 100 : undefined},
         drawerStyle: {
-          width: "90%",
+          width:  Device.deviceType === DeviceType.TABLET ? "50%" : "90%",
           backgroundColor: "#f9f8f7",
           height: "100%",
         },

app/(unauth)/get_started.tsx

@@ -1,169 +1,229 @@
-import {SafeAreaView} from "react-native-safe-area-context";
-import {Button, Colors, Dialog, LoaderScreen, Text, View} from "react-native-ui-lib";
-import React, {useCallback, useState} from "react";
-import {useRouter} from "expo-router";
+import { SafeAreaView } from "react-native-safe-area-context";
+import {
+  Button,
+  Colors,
+  Dialog,
+  LoaderScreen,
+  Text,
+  View,
+} from "react-native-ui-lib";
+import React, { useCallback, useEffect, useState } from "react";
+import { useRouter } from "expo-router";
 import QRIcon from "@/assets/svgs/QRIcon";
-import {Camera, CameraView} from "expo-camera";
-import {useLoginWithQrCode} from "@/hooks/firebase/useLoginWithQrCode";
-import {useAuthContext} from "@/contexts/AuthContext";
+import { Camera, CameraView } from "expo-camera";
+import { useLoginWithQrCode } from "@/hooks/firebase/useLoginWithQrCode";
+import { useAuthContext } from "@/contexts/AuthContext";
 import debounce from "debounce";
+import * as Device from "expo-device";
+import { DeviceType } from "expo-device";
+import { Dimensions } from "react-native";
 
 export default function Screen() {
-    const router = useRouter()
-    const {setRedirectOverride} = useAuthContext()
-    const [hasPermission, setHasPermission] = useState<boolean | null>(null);
-    const [showCameraDialog, setShowCameraDialog] = useState<boolean>(false);
+  const router = useRouter();
+  const { setRedirectOverride } = useAuthContext();
+  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
+  const [showCameraDialog, setShowCameraDialog] = useState<boolean>(false);
 
-    const {mutateAsync: signInWithQrCode, isLoading} = useLoginWithQrCode();
+  const isTablet: boolean = Device.deviceType === DeviceType.TABLET;
+  const [isPortrait, setIsPortrait] = useState(() => {
+    const dim = Dimensions.get('screen');
+    return dim.height >= dim.width;
+   });
    
-    const debouncedRouterReplace = useCallback(
-        debounce(() => {
-            router.push("/(unauth)/cal_sync");
-        }, 300),
-        []
-    );
+   useEffect(() => {
+    const subscription = Dimensions.addEventListener('change', ({ screen }) => {
+      setIsPortrait(screen.height >= screen.width);
+    });
    
-    const handleQrCodeScanned = async ({data}: { data: string }) => {
-        setShowCameraDialog(false);
-        setRedirectOverride(true);
-        try {
-            await signInWithQrCode({userId: data});
-            debouncedRouterReplace()
-        } catch (err) {
-            console.log(err)
-        }
-    };
+    return () => subscription.remove();
+   }, []);
 
-    const getCameraPermissions = async (callback: () => void) => {
-        const {status} = await Camera.requestCameraPermissionsAsync();
-        setHasPermission(status === "granted");
-        if (status === "granted") {
-            callback();
-        }
-    };
-
-    const handleOpenQrCodeDialog = () => {
-        getCameraPermissions(() => setShowCameraDialog(true));
+   const getTopPadding = () => {
+    if (Device.deviceType === DeviceType.TABLET) {
+      return isPortrait ? "50%" : "15%";
     }
+    return "20%"; // non-tablet case, regardless of orientation
+   };
 
-    return (
-        <SafeAreaView style={{flex: 1}}>
-            <View style={{flex: 1, padding: 21, paddingBottom: 45, paddingTop: "20%", alignItems: "center"}}>
-                <View center>
-                    <Text style={{fontSize: 30, fontFamily: 'Manrope_600SemiBold'}}>
-                        Get started with Cally
-                    </Text>
-                </View>
+  const { mutateAsync: signInWithQrCode, isLoading } = useLoginWithQrCode();
 
-                <View width={"100%"} gap-30>
-                    <View>
-                        <Button
-                            label="Scan QR Code"
-                            marginT-50
-                            labelStyle={{
-                                fontFamily: "PlusJakartaSans_400Regular",
-                                fontSize: 16,
-                                marginLeft: 10
-                            }}
-                            iconSource={() => <QRIcon color={"#07B8C7"}/>}
-                            onPress={handleOpenQrCodeDialog}
-                            style={{height: 50}}
-                            color={Colors.black}
-                            backgroundColor={Colors.white}
-                        />
-                        {/*    GOOGLE LOGIN HERE   */}
-                    </View>
+  const debouncedRouterReplace = useCallback(
+    debounce(() => {
+      router.push("/(unauth)/cal_sync");
+    }, 300),
+    []
+  );
 
-                    <View row center gap-20>
-                        <View flexG style={{backgroundColor: "#E2E2E2", height: 2}}/>
-                        <Text style={{fontSize: 16, fontFamily: 'PlusJakartaSans_300Light', color: "#7A7A7A"}}>
-                            or
-                        </Text>
-                        <View flexG style={{backgroundColor: "#E2E2E2", height: 2}}/>
-                    </View>
+  const handleQrCodeScanned = async ({ data }: { data: string }) => {
+    setShowCameraDialog(false);
+    setRedirectOverride(true);
+    try {
+      await signInWithQrCode({ userId: data });
+      debouncedRouterReplace();
+    } catch (err) {
+      console.log(err);
+    }
+  };
 
-                    <View>
-                        <Button
-                            label="Contine with Email"
-                            labelStyle={{
-                                fontFamily: "PlusJakartaSans_400Regular",
-                                fontSize: 16,
-                                marginLeft: 10
-                            }}
-                            onPress={() => router.push("/(unauth)/sign_up")}
-                            style={{height: 50, borderStyle: "solid", borderColor: "#E2E2E2", borderWidth: 2}}
-                            color={Colors.black}
-                            backgroundColor={"transparent"}
-                        />
-                    </View>
-                </View>
+  const getCameraPermissions = async (callback: () => void) => {
+    const { status } = await Camera.requestCameraPermissionsAsync();
+    setHasPermission(status === "granted");
+    if (status === "granted") {
+      callback();
+    }
+  };
 
+  const handleOpenQrCodeDialog = () => {
+    getCameraPermissions(() => setShowCameraDialog(true));
+  };
 
-                <View flexG/>
+  return (
+    <SafeAreaView style={{ flex: 1, alignItems: "center" }}>
+      <View
+        style={{
+          flex: 1,
+          padding: 21,
+          paddingBottom: 45,
+          paddingTop: isLoading ? "20%" : getTopPadding(),
+          width: isTablet ? 629 : '100%'
+        }}
+      >
+        <View center>
+          <Text style={{ fontSize: 30, fontFamily: "Manrope_600SemiBold" }}>
+            Get started with Cally
+          </Text>
+        </View>
 
-                <View row centerH gap-5>
-                    <Text style={{
-                        fontFamily: "PlusJakartaSans_300Light",
-                        fontSize: 16,
-                        color: "#484848"
-                    }} center>
-                        Already have an account?
-                    </Text>
+        <View width={"100%"} gap-30>
+          <View>
+            <Button
+              label="Scan QR Code"
+              marginT-50
+              labelStyle={{
+                fontFamily: "PlusJakartaSans_400Regular",
+                fontSize: 16,
+                marginLeft: 10,
+              }}
+              iconSource={() => <QRIcon color={"#07B8C7"} />}
+              onPress={handleOpenQrCodeDialog}
+              style={{ height: 50 }}
+              color={Colors.black}
+              backgroundColor={Colors.white}
+            />
+            {/*    GOOGLE LOGIN HERE   */}
+          </View>
 
-                    <Button
-                        label="Log in"
-                        link
-                        onPress={() => router.push("/(unauth)/sign_in")}
-                        labelStyle={[
-                            {
-                                fontFamily: "PlusJakartaSans_500Medium",
-                                fontSize: 16,
-                                color: "#919191",
-                            },
-                            {fontSize: 16, textDecorationLine: "none", color: "#fd1775"},
-                        ]}
-                    />
-                </View>
-            </View>
-
-            {/*    Legacy, move into separate component   */}
-            {/* Camera Dialog */}
-            <Dialog
-                visible={showCameraDialog}
-                onDismiss={() => setShowCameraDialog(false)}
-                bottom
-                width="100%"
-                height="70%"
-                containerStyle={{padding: 15, backgroundColor: "white"}}
+          <View row center gap-20>
+            <View flexG style={{ backgroundColor: "#E2E2E2", height: 2 }} />
+            <Text
+              style={{
+                fontSize: 16,
+                fontFamily: "PlusJakartaSans_300Light",
+                color: "#7A7A7A",
+              }}
             >
-                <Text center style={{fontSize: 16}} marginB-15>
-                    Scan a QR code presented from your family member of provider.
-                </Text>
-                {hasPermission === null ? (
-                    <Text>Requesting camera permissions...</Text>
-                ) : !hasPermission ? (
-                    <Text>No access to camera</Text>
-                ) : (
-                    <CameraView
-                        style={{flex: 1, borderRadius: 15}}
-                        onBarcodeScanned={handleQrCodeScanned}
-                        barcodeScannerSettings={{
-                            barcodeTypes: ["qr"],
-                        }}
-                    />
-                )}
-                <Button
-                    label="Cancel"
-                    onPress={() => setShowCameraDialog(false)}
-                    backgroundColor="#fd1775"
-                    style={{margin: 10, marginBottom: 30}}
-                />
-            </Dialog>
+              or
+            </Text>
+            <View flexG style={{ backgroundColor: "#E2E2E2", height: 2 }} />
+          </View>
 
+          <View>
+            <Button
+              label="Continue with Email"
+              labelStyle={{
+                fontFamily: "PlusJakartaSans_400Regular",
+                fontSize: 16,
+                marginLeft: 10,
+              }}
+              onPress={() => router.push("/(unauth)/sign_up")}
+              style={{
+                height: 50,
+                borderStyle: "solid",
+                borderColor: "#E2E2E2",
+                borderWidth: 2,
+              }}
+              color={Colors.black}
+              backgroundColor={"transparent"}
+            />
+          </View>
+        </View>
 
-            {isLoading && (
-                <LoaderScreen overlay message={"Signing in..."} backgroundColor={Colors.white} color={Colors.grey40}/>
-            )}
-        </SafeAreaView>
-    )
+        {isTablet ? (
+          <View marginT-30 />
+        ) : (
+          <View flexG />
+        )}
+
+        <View row centerH gap-5>
+          <Text
+            style={{
+              fontFamily: "PlusJakartaSans_300Light",
+              fontSize: 16,
+              color: "#484848",
+            }}
+            center
+          >
+            Already have an account?
+          </Text>
+
+          <Button
+            label="Log in"
+            link
+            onPress={() => router.push("/(unauth)/sign_in")}
+            labelStyle={[
+              {
+                fontFamily: "PlusJakartaSans_500Medium",
+                fontSize: 16,
+                color: "#919191",
+              },
+              { fontSize: 16, textDecorationLine: "none", color: "#fd1775" },
+            ]}
+          />
+        </View>
+      </View>
+
+      {/*    Legacy, move into separate component   */}
+      {/* Camera Dialog */}
+      <Dialog
+        visible={showCameraDialog}
+        onDismiss={() => setShowCameraDialog(false)}
+        bottom
+        width="100%"
+        height="70%"
+        containerStyle={{ padding: 15, backgroundColor: "white" }}
+      >
+        <Text center style={{ fontSize: 16 }} marginB-15>
+          Scan a QR code presented from your family member of provider.
+        </Text>
+        {hasPermission === null ? (
+          <Text>Requesting camera permissions...</Text>
+        ) : !hasPermission ? (
+          <Text>No access to camera</Text>
+        ) : (
+          <CameraView
+            style={{ flex: 1, borderRadius: 15 }}
+            onBarcodeScanned={handleQrCodeScanned}
+            barcodeScannerSettings={{
+              barcodeTypes: ["qr"],
+            }}
+          />
+        )}
+        <Button
+          label="Cancel"
+          onPress={() => setShowCameraDialog(false)}
+          backgroundColor="#fd1775"
+          style={{ margin: 10, marginBottom: 30 }}
+        />
+      </Dialog>
+
+      {isLoading && (
+        <LoaderScreen
+          overlay
+          message={"Signing in..."}
+          backgroundColor={Colors.white}
+          color={Colors.grey40}
+        />
+      )}
+    </SafeAreaView>
+  );
 }

components/pages/(tablet_pages)/chores/SingleUserChoreList.tsx

@@ -12,6 +12,7 @@ import { AntDesign } from "@expo/vector-icons";
 import { IToDo } from "@/hooks/firebase/types/todoData";
 import ToDoItem from "../../todos/ToDoItem";
 import { UserProfile } from "@/hooks/firebase/types/profileTypes";
+import { ScrollView } from "react-native-gesture-handler";
 
 const groupToDosByDate = (toDos: IToDo[]) => {
   let sortedTodos = toDos.sort((a, b) => a.date - b.date);
@@ -77,9 +78,7 @@ const groupToDosByDate = (toDos: IToDo[]) => {
 
 const filterToDosByUser = (toDos: IToDo[], uid: string | undefined) => {
   if (!uid) return [];
-  return toDos.filter((todo) =>
-    todo.assignees?.includes(uid)
-  );
+  return toDos.filter((todo) => todo.assignees?.includes(uid));
 };
 
 const SingleUserChoreList = ({ user }: { user: UserProfile }) => {
@@ -236,34 +235,36 @@ const SingleUserChoreList = ({ user }: { user: UserProfile }) => {
       style={{ minHeight: 800, borderRadius: 9.11 }}
       width={355}
     >
-      {noDateToDos.length > 0 && (
-        <View key="No Date">
-          <View row spread paddingH-19 marginB-12>
-            <Text
-              text70
-              style={{
-                fontWeight: "bold",
-              }}
-            >
-              Unscheduled
-            </Text>
-            <AntDesign
-              name={expandNoDate ? "caretdown" : "caretright"}
-              size={24}
-              color="#fd1575"
-              onPress={() => {
-                setExpandNoDate(!expandNoDate);
-              }}
-            />
+      <ScrollView>
+        {noDateToDos.length > 0 && (
+          <View key="No Date">
+            <View row spread paddingH-19 marginB-12>
+              <Text
+                text70
+                style={{
+                  fontWeight: "bold",
+                }}
+              >
+                Unscheduled
+              </Text>
+              <AntDesign
+                name={expandNoDate ? "caretdown" : "caretright"}
+                size={24}
+                color="#fd1575"
+                onPress={() => {
+                  setExpandNoDate(!expandNoDate);
+                }}
+              />
+            </View>
+            {expandNoDate &&
+              noDateToDos
+                .sort((a, b) => Number(a.done) - Number(b.done))
+                .map((item) => <ToDoItem key={item.id} item={item} />)}
           </View>
-          {expandNoDate &&
-            noDateToDos
-              .sort((a, b) => Number(a.done) - Number(b.done))
-              .map((item) => <ToDoItem key={item.id} item={item} />)}
-        </View>
-      )}
+        )}
 
-      {datedToDos.map(renderTodoGroup)}
+        {datedToDos.map(renderTodoGroup)}
+      </ScrollView>
     </View>
   );
 };

components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx

@@ -34,6 +34,7 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     borderTopColor: "#a9a9a9",
+    width: '80%',
     borderTopWidth: 1,
   },
   calendarContainer: {

components/pages/main/SignInPage.tsx

@@ -9,13 +9,15 @@ import {
   TextFieldRef,
   View,
 } from "react-native-ui-lib";
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useSignIn } from "@/hooks/firebase/useSignIn";
-import { KeyboardAvoidingView, Platform, StyleSheet } from "react-native";
+import { Dimensions, KeyboardAvoidingView, Platform, StyleSheet } from "react-native";
 import Toast from "react-native-toast-message";
 import KeyboardManager from "react-native-keyboard-manager";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useRouter } from "expo-router";
+import * as Device from "expo-device";
+import { DeviceType } from "expo-device";
 
 if (Platform.OS === "ios") KeyboardManager.setEnableAutoToolbar(true);
 
@@ -24,6 +26,27 @@ const SignInPage = () => {
   const [password, setPassword] = useState<string>("");
   const passwordRef = useRef<TextFieldRef>(null);
 
+  const isTablet: boolean = Device.deviceType === DeviceType.TABLET;
+  const [isPortrait, setIsPortrait] = useState(() => {
+    const dim = Dimensions.get('screen');
+    return dim.height >= dim.width;
+   });
+   
+   useEffect(() => {
+    const subscription = Dimensions.addEventListener('change', ({ screen }) => {
+      setIsPortrait(screen.height >= screen.width);
+    });
+   
+    return () => subscription.remove();
+   }, []);
+
+   const getTopPadding = () => {
+    if (Device.deviceType === DeviceType.TABLET) {
+      return isPortrait ? "50%" : "15%";
+    }
+    return "20%"; // non-tablet case, regardless of orientation
+   };
+
   const { mutateAsync: signIn, error, isError, isLoading } = useSignIn();
 
   const router = useRouter();
@@ -45,13 +68,19 @@ const SignInPage = () => {
   };
 
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <SafeAreaView style={{ flex: 1, alignItems: isTablet ? "center" : undefined}}>
       <KeyboardAwareScrollView
         contentContainerStyle={{ flexGrow: 1 }}
         enableOnAndroid
       >
         <View
-          style={{ flex: 1, padding: 21, paddingBottom: 45, paddingTop: "20%" }}
+          style={{
+            flex: 1,
+            padding: 21,
+            paddingBottom: 45,
+            paddingTop: isLoading ? "20%" : getTopPadding(),
+            width: isLoading ? '100%' : (isTablet ? 629 : undefined),
+          }}
         >
           <View gap-13 width={"100%"} marginB-20>
             <Text style={{ fontSize: 40, fontFamily: "Manrope_600SemiBold" }}>
@@ -95,7 +124,7 @@ const SignInPage = () => {
             />
           </KeyboardAvoidingView>
 
-          <View flexG />
+          {isTablet ? <View /> : <View flexG />}
 
           <Button
             label="Log in"

components/pages/main/SignUpPage.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
   Button,
   ButtonSize,
@@ -13,11 +13,18 @@ import {
   View,
 } from "react-native-ui-lib";
 import { useSignUp } from "@/hooks/firebase/useSignUp";
-import { KeyboardAvoidingView, Platform, StyleSheet } from "react-native";
+import {
+  Dimensions,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+} from "react-native";
 import { AntDesign } from "@expo/vector-icons";
 import KeyboardManager from "react-native-keyboard-manager";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useRouter } from "expo-router";
+import * as Device from "expo-device";
+import { DeviceType } from "expo-device";
 
 if (Platform.OS === "ios") KeyboardManager.setEnableAutoToolbar(true);
 
@@ -36,6 +43,27 @@ const SignUpPage = () => {
   const emailRef = useRef<TextFieldRef>(null);
   const passwordRef = useRef<TextFieldRef>(null);
 
+  const isTablet: boolean = Device.deviceType === DeviceType.TABLET;
+  const [isPortrait, setIsPortrait] = useState(() => {
+    const dim = Dimensions.get("screen");
+    return dim.height >= dim.width;
+  });
+
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener("change", ({ screen }) => {
+      setIsPortrait(screen.height >= screen.width);
+    });
+
+    return () => subscription.remove();
+  }, []);
+
+  const getTopPadding = () => {
+    if (Device.deviceType === DeviceType.TABLET) {
+      return isPortrait ? "50%" : "15%";
+    }
+    return "20%"; // non-tablet case, regardless of orientation
+  };
+
   const router = useRouter();
 
   const handleSignUp = async () => {
@@ -44,13 +72,25 @@ const SignUpPage = () => {
   };
 
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <SafeAreaView
+      style={{
+        flex: 1,
+        alignItems: isTablet ? "center" : undefined,
+        width: "100%",
+      }}
+    >
       <KeyboardAwareScrollView
         contentContainerStyle={{ flexGrow: 1 }}
         enableOnAndroid
       >
         <View
-          style={{ flex: 1, padding: 21, paddingBottom: 45, paddingTop: "20%" }}
+          style={{
+            flex: 1,
+            padding: 21,
+            paddingBottom: 45,
+            paddingTop: isLoading ? "20%" : getTopPadding(),
+            width: isLoading ? undefined : (isTablet ? 629 : undefined),
+          }}
         >
           <View gap-13 width={"100%"} marginB-20>
             <Text style={{ fontSize: 40, fontFamily: "Manrope_600SemiBold" }}>
@@ -150,7 +190,7 @@ const SignUpPage = () => {
                 size={18}
                 borderRadius={3}
                 value={allowFaceID}
-                containerStyle={{borderRadius: 3, width: 18, height: 18}}
+                containerStyle={{ borderRadius: 3, width: 18, height: 18 }}
                 onValueChange={(value) => {
                   setAllowFaceID(value);
                 }}
@@ -167,7 +207,7 @@ const SignUpPage = () => {
                 ]}
                 color="#919191"
                 size={18}
-                containerStyle={{borderRadius: 3, width: 18, height: 18}}
+                containerStyle={{ borderRadius: 3, width: 18, height: 18 }}
                 borderRadius={3}
                 value={acceptTerms}
                 onValueChange={(value) => setAcceptTerms(value)}
@@ -191,7 +231,11 @@ const SignUpPage = () => {
             </View>
           </View>
 
-          <View flexG style={{ minHeight: 50 }} />
+          {isTablet ? (
+            <View height={50} />
+          ) : (
+            <View flexG style={{ minHeight: 50 }} />
+          )}
 
           <View>
             <Button

components/shared/DrawerButton.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { StyleSheet } from "react-native";
 import { Button, View, Text } from "react-native-ui-lib";
+import * as Device from "expo-device";
+import { DeviceType } from "expo-device";
 
 interface IDrawerButtonProps {
   bgColor: string;
@@ -11,6 +13,17 @@ interface IDrawerButtonProps {
 }
 
 const DrawerButton = (props: IDrawerButtonProps) => {
+  const isTablet: boolean = Device.deviceType === DeviceType.TABLET;
+
+  const styles = StyleSheet.create({
+    iconContainer: {
+      width: "70%",
+      aspectRatio: 1,
+      borderRadius: 50,
+    },
+    labelStyle: { fontSize: 15, fontFamily: "Poppins_400Regular" },
+  });
+
   return (
     <Button
       onPress={props.pressFunc}
@@ -40,12 +53,3 @@ const DrawerButton = (props: IDrawerButtonProps) => {
   );
 };
 export default DrawerButton;
-
-const styles = StyleSheet.create({
-  iconContainer: {
-    width: "70%",
-    aspectRatio: 1,
-    borderRadius: 50,
-  },
-  labelStyle: { fontSize: 15, fontFamily: "Poppins_400Regular" },
-});