ui tweaks and fixes

app/(auth)/_layout.tsx

@@ -23,8 +23,9 @@ import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
 import NavBrainDumpIcon from "@/assets/svgs/NavBrainDumpIcon";
 import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
 import NavSettingsIcon from "@/assets/svgs/NavSettingsIcon";
-import {useAtom, useSetAtom} from "jotai";
+import { useAtom, useSetAtom } from "jotai";
 import {
+  isFamilyViewAtom,
   settingsPageIndex,
   toDosPageIndex,
   userSettingsView,
@@ -32,6 +33,7 @@ import {
 
 export default function TabLayout() {
   const { mutateAsync: signOut } = useSignOut();
+  const setIsFamilyView = useSetAtom(isFamilyViewAtom);
   const setPageIndex = useSetAtom(settingsPageIndex);
   const setUserView = useSetAtom(userSettingsView);
   const setToDosIndex = useSetAtom(toDosPageIndex);
@@ -79,6 +81,7 @@ export default function TabLayout() {
                     setPageIndex(0);
                     setToDosIndex(0);
                     setUserView(true);
+                    setIsFamilyView(false);
                   }}
                   icon={<NavCalendarIcon />}
                 />
@@ -91,6 +94,7 @@ export default function TabLayout() {
                     setPageIndex(0);
                     setToDosIndex(0);
                     setUserView(true);
+                    setIsFamilyView(false);
                   }}
                   icon={<NavGroceryIcon />}
                 />
@@ -118,6 +122,7 @@ export default function TabLayout() {
                     setPageIndex(0);
                     setToDosIndex(0);
                     setUserView(true);
+                    setIsFamilyView(false);
                   }}
                   icon={<NavToDosIcon />}
                 />
@@ -130,6 +135,7 @@ export default function TabLayout() {
                     setPageIndex(0);
                     setToDosIndex(0);
                     setUserView(true);
+                    setIsFamilyView(false);
                   }}
                   icon={<NavBrainDumpIcon />}
                 />
@@ -142,6 +148,7 @@ export default function TabLayout() {
                 setPageIndex(0);
                 setToDosIndex(0);
                 setUserView(true);
+                setIsFamilyView(false);
               }}
               label={"Manage Settings"}
               labelStyle={styles.label}

assets/svgs/CloseXIcon.tsx

@@ -5,13 +5,14 @@ const CloseXIcon: React.FC<SvgProps> = (props) => (
     width={15}
     height={15}
     fill="none"
+    viewBox="0 0 15 15"
     {...props}
   >
     <Path
       stroke="#AAA"
       strokeLinecap="round"
       strokeLinejoin="round"
-      strokeWidth={1.394}
+      strokeWidth={props.strokeWidth || 1.394}
       d="m1.573 1.543 12.544 12.544M1.573 14.087 14.117 1.543"
     />
   </Svg>

assets/svgs/PlusIcon.tsx

@@ -4,6 +4,7 @@ const PlusIcon = (props: SvgProps) => (
   <Svg
     width={props.width || 14}
     height={props.height || 15}
+    viewBox="0 0 14 15"
     fill="none"
     {...props}
   >

components/pages/brain_dump/AddBrainDump.tsx

@@ -9,13 +9,12 @@ import {
 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 { Dimensions, Keyboard, Platform, StyleSheet } from "react-native";
 
 import DropModalIcon from "@/assets/svgs/DropModalIcon";
 import { useBrainDumpContext } from "@/contexts/DumpContext";
 import KeyboardManager from "react-native-keyboard-manager";
 
-
 interface IAddBrainDumpProps {
   isVisible: boolean;
   setIsVisible: (value: boolean) => void;
@@ -31,7 +30,6 @@ const AddBrainDump = ({
   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);
@@ -43,13 +41,13 @@ const AddBrainDump = ({
 
   useEffect(() => {
     setTimeout(() => {
-      titleRef?.current?.focus()
+      titleRef?.current?.focus();
-    }, 500)
+    }, 500);
   }, []);
 
   useEffect(() => {
-    KeyboardManager.setEnableAutoToolbar(false);
+    if (Platform.OS === "ios") KeyboardManager.setEnableAutoToolbar(false);
-  },[])
+  }, []);
 
   return (
     <Dialog
@@ -78,7 +76,11 @@ const AddBrainDump = ({
           label="Save"
           style={styles.topBtn}
           onPress={() => {
-            addBrainDump({ id: 99, title: dumpTitle.trimEnd().trimStart(), description: dumpDesc.trimEnd().trimStart() });
+            addBrainDump({
+              id: 99,
+              title: dumpTitle.trimEnd().trimStart(),
+              description: dumpDesc.trimEnd().trimStart(),
+            });
             addBrainDumpProps.setIsVisible(false);
           }}
         />
@@ -144,7 +146,7 @@ const styles = StyleSheet.create({
   description: {
     fontFamily: "Manrope_400Regular",
     fontSize: 14,
-    textAlignVertical: 'top'
+    textAlignVertical: "top",
   },
 });
 

components/pages/calendar/CalendarPage.tsx

@@ -13,6 +13,7 @@ export default function CalendarPage() {
             <HeaderTemplate
                 message={"Let's get your week started!"}
                 isWelcome
+                isCalendar={true}
             />
             <InnerCalendar/>
         </View>

components/pages/calendar/CalendarViewSwitch.tsx

@@ -1,90 +1,92 @@
-import {Text, TouchableOpacity, View} from "react-native-ui-lib";
+import { Text, TouchableOpacity, View } from "react-native-ui-lib";
-import React, {useState} from "react";
+import React from "react";
-import {StyleSheet} from "react-native";
+import { StyleSheet } from "react-native";
-import {useSetAtom} from "jotai";
+import { useAtom } from "jotai";
-import {isFamilyViewAtom} from "@/components/pages/calendar/atoms";
+import { isFamilyViewAtom } from "@/components/pages/calendar/atoms";
-
 
 const CalendarViewSwitch = () => {
-    const [calView, setCalView] = useState<boolean>(false);
+  const [isFamilyView, setIsFamilyView] = useAtom(isFamilyViewAtom);
-    const viewSwitch = useSetAtom(isFamilyViewAtom)
 
-    return (
+  return (
+    <View
+      row
+      spread
+      style={{
+        position: "absolute",
+        bottom: 20,
+        left: 20,
+        borderRadius: 30,
+        backgroundColor: "white",
+        alignItems: "center",
+        justifyContent: "center",
+        // iOS shadow
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        // Android shadow (elevation)
+        elevation: 6,
+      }}
+      centerV
+    >
+      <TouchableOpacity
+        onPress={() => {
+          setIsFamilyView(true);
+        }}
+      >
         <View
-            row
+          centerV
-            spread
+          centerH
-            style={{
+          height={40}
-                position: "absolute",
+          paddingH-15
-                bottom: 20,
+          style={isFamilyView ? styles.switchBtnActive : styles.switchBtn}
-                left: 20,
-                borderRadius: 30,
-                backgroundColor: "white",
-                alignItems: "center",
-                justifyContent: "center",
-                // iOS shadow
-                shadowColor: "#000",
-                shadowOffset: {width: 0, height: 2},
-                shadowOpacity: 0.25,
-                shadowRadius: 3.84,
-                // Android shadow (elevation)
-                elevation: 6,
-            }}
-            centerV
         >
-            <TouchableOpacity
+          <Text
-                onPress={() => {
+            color={isFamilyView ? "white" : "#a1a1a1"}
-                    setCalView(true);
+            style={styles.switchTxt}
-                    viewSwitch(true);
+          >
-                }}
+            Family View
-            >
+          </Text>
-                <View
-                    centerV
-                    centerH
-                    height={40}
-                    paddingH-15
-                    style={calView ? styles.switchBtnActive : styles.switchBtn}
-                >
-                    <Text color={calView ? "white" : "#a1a1a1"} style={styles.switchTxt}>
-                        Family View
-                    </Text>
-                </View>
-            </TouchableOpacity>
-
-            <TouchableOpacity
-                onPress={() => {
-                    setCalView(false);
-                    viewSwitch(false);
-                }}
-            >
-                <View
-                    centerV
-                    centerH
-                    height={40}
-                    paddingH-15
-                    style={!calView ? styles.switchBtnActive : styles.switchBtn}
-                >
-                    <Text color={!calView ? "white" : "#a1a1a1"} style={styles.switchTxt}>
-                        My View
-                    </Text>
-                </View>
-            </TouchableOpacity>
         </View>
-    );
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        onPress={() => {
+          setIsFamilyView(false);
+        }}
+      >
+        <View
+          centerV
+          centerH
+          height={40}
+          paddingH-15
+          style={!isFamilyView ? styles.switchBtnActive : styles.switchBtn}
+        >
+          <Text
+            color={!isFamilyView ? "white" : "#a1a1a1"}
+            style={styles.switchTxt}
+          >
+            My View
+          </Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
 };
 
 export default CalendarViewSwitch;
 
 const styles = StyleSheet.create({
-    switchBtnActive: {
+  switchBtnActive: {
-        backgroundColor: "#a1a1a1",
+    backgroundColor: "#a1a1a1",
-        borderRadius: 50,
+    borderRadius: 50,
-    },
+  },
-    switchBtn: {
+  switchBtn: {
-        backgroundColor: "white",
+    backgroundColor: "white",
-        borderRadius: 50,
+    borderRadius: 50,
-    },
+  },
-    switchTxt: {
+  switchTxt: {
-        fontSize: 16,
+    fontSize: 16,
-        fontFamily: 'Manrope_600SemiBold'
+    fontFamily: "Manrope_600SemiBold",
-    }
+  },
 });

components/pages/grocery/GroceryItem.tsx

@@ -73,6 +73,8 @@ const GroceryItem = ({
         marginVertical: 5,
         paddingHorizontal: isEditingTitle ? 0 : 13,
         paddingVertical: isEditingTitle ? 0 : 10,
+        height: 44.64,
+        backgroundColor: item.bought ? "#cbcbcb" : "white",
       }}
       backgroundColor="white"
       centerV
@@ -103,12 +105,25 @@ const GroceryItem = ({
           <View>
             {isParent ? (
               <TouchableOpacity onPress={() => setIsEditingTitle(true)}>
-                <Text text70T black style={styles.title}>
+                <Text
+                  text70T
+                  black
+                  style={[
+                    styles.title,
+                    {
+                      textDecorationLine: item.bought ? "line-through" : "none",
+                    },
+                  ]}
+                >
                   {item.title}
                 </Text>
               </TouchableOpacity>
             ) : (
-              <Text text70T black style={styles.title}>
+              <Text
+                text70T
+                black
+                style={[styles.title, { color: item.bought ? "red" : "black" }]}
+              >
                 {item.title}
               </Text>
             )}

components/pages/grocery/GroceryList.tsx

@@ -78,6 +78,7 @@ const GroceryList = ({onInputFocus}: {onInputFocus: (y: number) => void}) => {
             <HeaderTemplate
                 message={"Welcome to your grocery list"}
                 isWelcome={false}
+                isGroceries={true}
             >
                 <View row centerV>
                     <View

components/pages/settings/UserSettings.tsx

@@ -1,4 +1,9 @@
-import { Text, TouchableOpacity, View } from "react-native-ui-lib";
+import {
+  FloatingButton,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native-ui-lib";
 import React, { useState } from "react";
 import { Ionicons } from "@expo/vector-icons";
 import { ScrollView, StyleSheet } from "react-native";
@@ -7,10 +12,12 @@ import MyGroup from "./user_settings_views/MyGroup";
 import { useAtom } from "jotai";
 import { settingsPageIndex, userSettingsView } from "../calendar/atoms";
 import { AuthContextProvider } from "@/contexts/AuthContext";
+import PlusIcon from "@/assets/svgs/PlusIcon";
 
 const UserSettings = () => {
   const [pageIndex, setPageIndex] = useAtom(settingsPageIndex);
   const [userView, setUserView] = useAtom(userSettingsView);
+  const [onNewUserClick, setOnNewUserClick] = useState<(boolean)>(false);
   return (
     <AuthContextProvider>
       <View flexG>
@@ -73,14 +80,22 @@ const UserSettings = () => {
               </TouchableOpacity>
             </View>
             {userView && <MyProfile />}
-            {!userView && <MyGroup />}
+            {!userView && <MyGroup onNewUserClick={onNewUserClick} setOnNewUserClick={setOnNewUserClick}/>}
           </View>
         </ScrollView>
-
         {!userView && (
-          <View>
+          <FloatingButton
-            <Text>selview</Text>
+            fullWidth
-          </View>
+            hideBackgroundOverlay
+            visible
+            button={{
+              label: " Add a user device",
+              iconSource: () => <PlusIcon height={13} width={14} />,
+              onPress: () => setOnNewUserClick(true),
+              style: styles.bottomButton,
+              labelStyle: { fontFamily: "Manrope_600SemiBold", fontSize: 15 },
+            }}
+          />
         )}
       </View>
     </AuthContextProvider>
@@ -88,6 +103,14 @@ const UserSettings = () => {
 };
 
 const styles = StyleSheet.create({
+  bottomButton: {
+    position: "absolute",
+    bottom: 15,
+    marginHorizontal: 28,
+    width: 337,
+    backgroundColor: "#e8156c",
+    height: 53.26,
+  },
   buttonSwitch: {
     borderRadius: 50,
     width: "100%",

components/pages/settings/user_settings_views/MyGroup.tsx

@@ -15,7 +15,7 @@ import {
   View,
 } from "react-native-ui-lib";
 import React, { useEffect, useRef, useState } from "react";
-import { ImageBackground, ScrollView, StyleSheet } from "react-native";
+import { ImageBackground, Platform, StyleSheet } from "react-native";
 import { PickerSingleValue } from "react-native-ui-lib/src/components/picker/types";
 import { useCreateSubUser } from "@/hooks/firebase/useCreateSubUser";
 import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
@@ -28,11 +28,18 @@ import CircledXIcon from "@/assets/svgs/CircledXIcon";
 import ProfileIcon from "@/assets/svgs/ProfileIcon";
 import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
 import Ionicons from "@expo/vector-icons/Ionicons";
-import KeyboardManager, { PreviousNextView } from "react-native-keyboard-manager";
+import KeyboardManager, {
+  PreviousNextView,
+} from "react-native-keyboard-manager";
+import { ScrollView } from "react-native-gesture-handler";
 
-const MyGroup = () => {
+type MyGroupProps = {
+  onNewUserClick: boolean;
+  setOnNewUserClick: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const MyGroup: React.FC<MyGroupProps> = ({ onNewUserClick, setOnNewUserClick }) => {
   const [showAddUserDialog, setShowAddUserDialog] = useState(false);
-  const [showNewUserInfoDialog, setShowNewUserInfoDialog] = useState(false);
   const [selectedStatus, setSelectedStatus] = useState<
     string | PickerSingleValue
   >(ProfileType.CHILD);
@@ -90,7 +97,7 @@ const MyGroup = () => {
     console.log(res);
 
     if (!isError) {
-      setShowNewUserInfoDialog(false);
+      setOnNewUserClick(false);
 
       if (res?.data?.userId) {
         setTimeout(() => {
@@ -101,8 +108,8 @@ const MyGroup = () => {
   };
 
   useEffect(() => {
-    KeyboardManager.setEnableAutoToolbar(true);
+    if (Platform.OS === "ios") KeyboardManager.setEnableAutoToolbar(true);
-  },[])
+  }, []);
 
   useEffect(() => {
     setFirstName("");
@@ -110,12 +117,11 @@ const MyGroup = () => {
     setEmail("");
   }, []);
 
-
   // @ts-ignore
   return (
-    <View style={{ flex: 1, minHeight: 500 }}>
+    <View marginB-70>
-      <View>
+      <ScrollView>
-        <ScrollView style={styles.card}>
+        <View>
           {!parents.length && !children.length && !caregivers.length && (
             <Text text70 marginV-10>
               {isLoading ? "Loading...." : "No user devices added"}
@@ -123,7 +129,7 @@ const MyGroup = () => {
           )}
 
           {(!!parents.length || !!children.length) && (
-            <>
+            <View style={styles.card}>
               <Text style={styles.subTit} marginB-10>
                 Family
               </Text>
@@ -144,7 +150,9 @@ const MyGroup = () => {
                       source={{ uri: member.pfp || undefined }}
                     />
                   ) : (
-                    <View style={[styles.pfp, {backgroundColor: "#ea156d"}]} />
+                    <View
+                      style={[styles.pfp, { backgroundColor: "#ea156d" }]}
+                    />
                   )}
                   <View row marginL-10 centerV>
                     <Text style={styles.name}>
@@ -155,9 +163,7 @@ const MyGroup = () => {
                   <View row centerV gap-10>
                     <Text style={styles.userType}>
                       {member.userType === ProfileType.PARENT
-                        ? `Admin${
+                        ? `Admin${member.uid === user?.uid ? " (You)" : ""}`
-                            member.uid === user?.uid ? " (You)" : ""
-                          }`
                         : "Child"}
                     </Text>
                     <UserMenu
@@ -168,11 +174,11 @@ const MyGroup = () => {
                   </View>
                 </Card>
               ))}
-            </>
+            </View>
           )}
 
           {!!caregivers.length && (
-            <>
+            <View style={styles.card}>
               <Text style={styles.subTit} marginB-10 marginT-15>
                 Caregivers
               </Text>
@@ -209,7 +215,7 @@ const MyGroup = () => {
                   />
                 </Card>
               ))}
-            </>
+            </View>
           )}
 
           {!!familyDevices.length && (
@@ -250,19 +256,8 @@ const MyGroup = () => {
               ))}
             </>
           )}
-        </ScrollView>
+        </View>
-      </View>
+      </ScrollView>
-
-      <FloatingButton
-        fullWidth
-        hideBackgroundOverlay
-        visible
-        button={{
-          label: "+ Add a user device",
-          onPress: () => setShowNewUserInfoDialog(true),
-          style: styles.bottomButton,
-        }}
-      />
 
       <Dialog
         visible={showAddUserDialog}
@@ -315,8 +310,8 @@ const MyGroup = () => {
 
       <Dialog
         panDirection={PanningProvider.Directions.DOWN}
-        visible={showNewUserInfoDialog}
+        visible={onNewUserClick}
-        onDismiss={() => setShowNewUserInfoDialog(false)}
+        onDismiss={() => setOnNewUserClick(false)}
       >
         <PreviousNextView>
           <KeyboardAwareScrollView>
@@ -327,7 +322,7 @@ const MyGroup = () => {
                 </Text>
                 <TouchableOpacity
                   onPress={() => {
-                    setShowNewUserInfoDialog(false);
+                    setOnNewUserClick(false);
                   }}
                 >
                   <CircledXIcon />
@@ -498,7 +493,8 @@ const styles = StyleSheet.create({
   },
   bottomButton: {
     position: "absolute",
-    bottom: 80,
+    bottom: 50,
+    backgroundColor: "#e8156c",
     width: "100%",
   },
   familyCard: {

components/pages/todos/ToDoItem.tsx

@@ -1,12 +1,13 @@
 import {
   View,
   Text,
-  Checkbox,
   TouchableOpacity,
   Dialog,
   Button,
   ButtonSize,
+  Checkbox,
 } from "react-native-ui-lib";
+
 import React, { useState } from "react";
 import { useToDosContext } from "@/contexts/ToDosContext";
 import { Ionicons } from "@expo/vector-icons";
@@ -60,15 +61,14 @@ const ToDoItem = (props: {
 
   return (
     <View
-    key={props.item.id}
+      key={props.item.id}
       centerV
       paddingV-10
       paddingH-13
       marginV-10
       style={{
         borderRadius: 17,
-        backgroundColor: props.item.done ? "#e0e0e0" : "white",
+        backgroundColor: "white",
-        opacity: props.item.done ? 0.3 : 1,
       }}
     >
       {visible && (
@@ -84,6 +84,7 @@ const ToDoItem = (props: {
           style={{
             textDecorationLine: props.item.done ? "line-through" : "none",
             fontFamily: "Manrope_500Medium",
+            color: props.item.done? "#a09f9f": "black",
             fontSize: 15,
           }}
           onPress={() => {
@@ -96,6 +97,7 @@ const ToDoItem = (props: {
           value={props.item.done}
           containerStyle={[styles.checkbox, { borderRadius: 50 }]}
           style={styles.checked}
+          size={26.64}
           borderRadius={50}
           color="#fd1575"
           onValueChange={(value) => {

components/pages/todos/ToDosPage.tsx

@@ -42,6 +42,7 @@ const ToDosPage = () => {
                   message="Here are your To Do's"
                   isWelcome={true}
                   link={profileData?.userType == ProfileType.PARENT && pageLink}
+                  isToDos={true}
                 />
                 {profileData?.userType == ProfileType.CHILD && (
                   <View marginB-25>

components/pages/todos/family-chores/FamilyChoresProgress.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { ImageBackground, StyleSheet } from "react-native";
 import FamilyChart from "./FamilyChart";
 import { TouchableOpacity } from "react-native-ui-lib/src/incubator";
+import { Ionicons } from "@expo/vector-icons";
 
 const FamilyChoresProgress = ({
   setPageIndex,
@@ -12,7 +13,20 @@ const FamilyChoresProgress = ({
   return (
     <View marginT-20 marginH-5>
       <TouchableOpacity onPress={() => setPageIndex(0)}>
-        <Text style={{ fontFamily: "Manrope_200", fontSize: 12 }}>Back to ToDos</Text>
+        <View row marginT-4 marginB-10 centerV>
+          <Ionicons
+            name="chevron-back"
+            size={14}
+            color="#979797"
+            style={{ paddingBottom: 3 }}
+          />
+          <Text
+            style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
+            color="#979797"
+          >
+            Return to To Do's
+          </Text>
+        </View>
       </TouchableOpacity>
       <View centerH>
         <Text style={{ fontFamily: "Manrope_700Bold", fontSize: 19 }}>

components/pages/todos/user-chores/UserChoresProgress.tsx

@@ -30,8 +30,21 @@ const UserChoresProgress = ({
         showsHorizontalScrollIndicator={false}
       >
         <TouchableOpacity onPress={() => setPageIndex(0)}>
-          <Text style={{ fontSize: 14 }}>Back to ToDos</Text>
+        <View row marginT-4 marginB-10 centerV>
-        </TouchableOpacity>
+          <Ionicons
+            name="chevron-back"
+            size={14}
+            color="#979797"
+            style={{ paddingBottom: 3 }}
+          />
+          <Text
+            style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
+            color="#979797"
+          >
+            Return to To Do's
+          </Text>
+        </View>
+      </TouchableOpacity>
         <View>
           <Text style={{ fontFamily: "Manrope_700Bold", fontSize: 20 }}>
             Your To Do's Progress Report

components/shared/HeaderTemplate.tsx

@@ -1,18 +1,36 @@
 import { Image, Text, View } from "react-native-ui-lib";
-import React from "react";
+import React, { useEffect, useState } from "react";
-import { useAuthContext } from "@/contexts/AuthContext";
+import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
 import { StyleSheet } from "react-native";
 import { colorMap } from "@/constants/colorMap";
+import { useAtom } from "jotai";
+import { isFamilyViewAtom } 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";
 
 const HeaderTemplate = (props: {
   message: string;
   isWelcome: boolean;
   children?: React.ReactNode;
   link?: React.ReactNode;
+  isCalendar?: boolean;
+  isToDos?: boolean;
+  isBrainDump?: boolean;
+  isGroceries?: boolean;
 }) => {
   const { user, profileData } = useAuthContext();
 
-  const headerHeight: number = 72;
+  const { data: members } = useGetFamilyMembers();
+  const [children, setChildren] = useState<UserProfile[]>([]);
+  const [isFamilyView] = useAtom(isFamilyViewAtom);
+
+  const headerHeight: number =
+    (props.isCalendar && 65.54) ||
+    (props.isToDos && 84) ||
+    (props.isGroceries && 72.09) ||
+    65.54;
 
   const styles = StyleSheet.create({
     pfp: {
@@ -26,14 +44,71 @@ const HeaderTemplate = (props: {
     pfpTxt: {
       fontFamily: "Manrope_500Medium",
       fontSize: 30,
-      color: 'white',
+      color: "white",
+    },
+    childrenPfpArr: {
+      width: 65.54,
+      position: "absolute",
+      bottom: -12.44,
+      left: (children.length > 3 && -9) || 0,
+      height: 27.32,
+    },
+    childrenPfp: {
+      aspectRatio: 1,
+      width: 27.32,
+      backgroundColor: "#fd1575",
+      borderRadius: 50,
+      position: "absolute",
+      borderWidth: 2,
+      borderColor: "#f2f2f2",
+    },
+    bottomMarg: {
+      marginBottom: isFamilyView ? 30 : 15,
     },
   });
 
+  useEffect(() => {
+    if (members) {
+      const childrenMembers = members.filter(
+        (member) => member.userType === ProfileType.CHILD
+      );
+      setChildren(childrenMembers);
+    }
+  }, []);
+
   return (
-    <View row centerV marginV-15>
+    <View row centerV marginV-15 style={styles.bottomMarg}>
       {profileData?.pfp ? (
-        <Image source={{ uri: profileData.pfp }} style={styles.pfp} />
+        <View>
+          <Image source={{ uri: profileData.pfp }} style={styles.pfp} />
+          {isFamilyView && props.isCalendar && (
+            <View style={styles.childrenPfpArr} row>
+              {children?.slice(0, 3).map((child, index) => {
+                return child.pfp ? (
+                  <Image
+                    source={{ uri: child.pfp }}
+                    style={[styles.childrenPfp, { left: index * 19 }]}
+                  />
+                ) : (
+                  <View
+                    style={[styles.childrenPfp, { left: index * 19 }]}
+                    center
+                  >
+                    <Text style={{ color: "white" }}>
+                      {child?.firstName?.at(0)}
+                      {child?.firstName?.at(1)}
+                    </Text>
+                  </View>
+                );
+              })}
+              {children?.length > 3 && (
+                <View style={[styles.childrenPfp, { left: 3 * 19 }]} center>
+                  <Text style={{ color: "white", fontFamily: "Manrope_600SemiBold", fontSize: 12 }}>+{children.length - 3}</Text>
+                </View>
+              )}
+            </View>
+          )}
+        </View>
       ) : (
         <View style={styles.pfp} center>
           <Text style={styles.pfpTxt}>

components/shared/RemoveAssigneeBtn.tsx

@@ -6,7 +6,7 @@ import { View } from "react-native-ui-lib";
 const RemoveAssigneeBtn = () => {
   return (
     <View style={styles.removeBtn} center>
-      <CloseXIcon />
+      <CloseXIcon width={9} height={9} strokeWidth={2} />
     </View>
   );
 };