ui fixes and date press feature

components/pages/calendar/EventCalendar.tsx

@@ -71,12 +71,19 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
 
     const handlePressDayHeader = useCallback(
       (date: Date) => {
-        setIsAllDay(true);
+        if (mode === "day") {
-        console.log(isAllDay);
+          setIsAllDay(true);
-        setSelectedNewEndDate(date);
+          setSelectedNewEndDate(date);
-        setEditVisible(true);
+          setEditVisible(true);
+        }
+        if (mode === 'week')
+        {
+          setSelectedDate(date)
+
+          setMode("day")
+        }
       },
-      [setSelectedNewEndDate]
+      [mode, setSelectedNewEndDate]
     );
 
     const handleSwipeEnd = useCallback(

components/pages/calendar/ManuallyAddEventModal.tsx

@@ -81,11 +81,9 @@ export const ManuallyAddEventModal = () => {
   );
 
   useEffect(() => {
-    console.log(allDayAtom);
+    if(allDayAtom === true) setIsAllDay(true);
-    return () => {
+  }, [allDayAtom])
-      setAllDayAtom(false);
+  
-    };
-  }, []);
 
   const [startTime, setStartTime] = useState(() => {
     const date = initialDate ?? new Date();

components/pages/main/SignUpPage.tsx

@@ -142,9 +142,15 @@ const SignUpPage = () => {
           <View gap-5 marginT-15>
             <View row centerV>
               <Checkbox
-                style={[styles.check]}
+                style={[
+                  styles.check,
+                  { borderRadius: 3, width: 18, height: 18 },
+                ]}
                 color="#919191"
+                size={18}
+                borderRadius={3}
                 value={allowFaceID}
+                containerStyle={{borderRadius: 3, width: 18, height: 18}}
                 onValueChange={(value) => {
                   setAllowFaceID(value);
                 }}
@@ -155,8 +161,14 @@ const SignUpPage = () => {
             </View>
             <View row centerV>
               <Checkbox
-                style={styles.check}
+                style={[
+                  styles.check,
+                  { borderRadius: 3, width: 18, height: 18 },
+                ]}
                 color="#919191"
+                size={18}
+                containerStyle={{borderRadius: 3, width: 18, height: 18}}
+                borderRadius={3}
                 value={acceptTerms}
                 onValueChange={(value) => setAcceptTerms(value)}
               />

components/pages/settings/CalendarSettingsPage.tsx

@@ -115,7 +115,8 @@ const CalendarSettingsPage = () => {
                     <View row marginV-5 marginT-20>
                         <Checkbox
                             value={firstDayOfWeek === "Sundays"}
-                            style={styles.checkbox}
+                            style={[styles.checkbox, {borderRadius: 100}]}
+                            borderRadius={100}
                             color="#ea156d"
                             onValueChange={() => handleChangeFirstDayOfWeek("Sundays")}
                         />
@@ -130,8 +131,9 @@ const CalendarSettingsPage = () => {
                     <View row marginV-5>
                         <Checkbox
                             value={firstDayOfWeek === "Mondays"}
-                            style={styles.checkbox}
+                            style={[styles.checkbox, {borderRadius: 50}]}
                             color="#ea156d"
+                            borderRadius={50}
                             onValueChange={() => handleChangeFirstDayOfWeek("Mondays")}
                         />
                         <Text text70 marginL-8>
@@ -447,7 +449,7 @@ const styles = StyleSheet.create({
         borderRadius: 12,
     },
     checkbox: {
-        borderRadius: 50,
+        borderRadius: 100,
     },
     addCalLbl: {
         fontSize: 16,

components/shared/HeaderTemplate.tsx

@@ -1,15 +1,16 @@
-import { Image, Text, View } from "react-native-ui-lib";
+import { Image, Text, TouchableOpacity, View } from "react-native-ui-lib";
 import React, { useEffect, useState } from "react";
 import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
 import { StyleSheet } from "react-native";
 import { colorMap } from "@/constants/colorMap";
-import { useAtom } from "jotai";
+import { useAtom, useSetAtom } from "jotai";
-import { isFamilyViewAtom } from "../pages/calendar/atoms";
+import { isFamilyViewAtom, settingsPageIndex } from "../pages/calendar/atoms";
 import { useGetChildrenByParentId } from "@/hooks/firebase/useGetChildrenByParentId";
 import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
 import { UserProfile } from "@/hooks/firebase/types/profileTypes";
 import { child } from "@react-native-firebase/storage";
 import CachedImage from "expo-cached-image";
+import { router } from "expo-router";
 
 const HeaderTemplate = (props: {
   message: string;
@@ -26,6 +27,7 @@ const HeaderTemplate = (props: {
   const { data: members } = useGetFamilyMembers();
   const [children, setChildren] = useState<UserProfile[]>([]);
   const [isFamilyView] = useAtom(isFamilyViewAtom);
+  const setSettingsPageIndexAtom = useSetAtom(settingsPageIndex);
 
   const headerHeight: number =
     (props.isCalendar && 65.54) ||
@@ -33,6 +35,11 @@ const HeaderTemplate = (props: {
     (props.isGroceries && 72.09) ||
     65.54;
 
+  const handlePfpPress = () => {
+    setSettingsPageIndexAtom(1);
+    router.push("/settings");
+  };
+
   const styles = StyleSheet.create({
     pfp: {
       height: headerHeight,
@@ -84,11 +91,13 @@ const HeaderTemplate = (props: {
     <View row centerV marginV-15 style={styles.bottomMarg}>
       {profileData?.pfp ? (
         <View>
-          <CachedImage
+          <TouchableOpacity onPress={handlePfpPress}>
-            source={{ uri: profileData.pfp }}
+            <CachedImage
-            style={styles.pfp}
+              source={{ uri: profileData.pfp }}
-            cacheKey={profileData.pfp}
+              style={styles.pfp}
-          />
+              cacheKey={profileData.pfp}
+            />
+          </TouchableOpacity>
           {isFamilyView && props.isCalendar && (
             <View style={styles.childrenPfpArr} row>
               {children?.slice(0, 3).map((child, index) => {
@@ -99,18 +108,22 @@ const HeaderTemplate = (props: {
                     style={[styles.childrenPfp, { left: index * 19 }]}
                   />
                 ) : (
-                  <View
+                  <TouchableOpacity
-                    style={[
+                    onPress={handlePfpPress}
-                      styles.childrenPfp,
-                      { left: index * 19, backgroundColor: bgColor },
-                    ]}
-                    center
                   >
-                    <Text style={{ color: "white" }}>
+                    <View
-                      {child?.firstName?.at(0)}
+                      style={[
-                      {child?.firstName?.at(1)}
+                        styles.childrenPfp,
-                    </Text>
+                        { left: index * 19, backgroundColor: bgColor },
-                  </View>
+                      ]}
+                      center
+                    >
+                      <Text style={{ color: "white" }}>
+                        {child?.firstName?.at(0)}
+                        {child?.firstName?.at(1)}
+                      </Text>
+                    </View>
+                  </TouchableOpacity>
                 );
               })}
               {children?.length > 3 && (