ui fixes

components/shared/HeaderTemplate.tsx

@@ -9,7 +9,7 @@ import { useGetChildrenByParentId } from "@/hooks/firebase/useGetChildrenByParen
 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 CachedImage from "expo-cached-image";
 
 const HeaderTemplate = (props: {
   message: string;
@@ -71,7 +71,10 @@ const HeaderTemplate = (props: {
   useEffect(() => {
     if (members) {
       const childrenMembers = members.filter(
-        (member) => member.userType === ProfileType.CHILD
+        (member) =>
+          member.userType === ProfileType.CHILD ||
+          member.userType === ProfileType.CAREGIVER ||
+          member.userType === ProfileType.PARENT
       );
       setChildren(childrenMembers);
     }
@@ -81,10 +84,15 @@ const HeaderTemplate = (props: {
     <View row centerV marginV-15 style={styles.bottomMarg}>
       {profileData?.pfp ? (
         <View>
-          <CachedImage source={{ uri: profileData.pfp,  }} style={styles.pfp}  cacheKey={profileData.pfp}/>
+          <CachedImage
+            source={{ uri: profileData.pfp }}
+            style={styles.pfp}
+            cacheKey={profileData.pfp}
+          />
           {isFamilyView && props.isCalendar && (
             <View style={styles.childrenPfpArr} row>
               {children?.slice(0, 3).map((child, index) => {
+                const bgColor: string = child.eventColor || colorMap.pink;
                 return child.pfp ? (
                   <Image
                     source={{ uri: child.pfp }}
@@ -92,7 +100,10 @@ const HeaderTemplate = (props: {
                   />
                 ) : (
                   <View
-                    style={[styles.childrenPfp, { left: index * 19 }]}
+                    style={[
+                      styles.childrenPfp,
+                      { left: index * 19, backgroundColor: bgColor },
+                    ]}
                     center
                   >
                     <Text style={{ color: "white" }}>
@@ -104,7 +115,15 @@ const HeaderTemplate = (props: {
               })}
               {children?.length > 3 && (
                 <View style={[styles.childrenPfp, { left: 3 * 19 }]} center>
-                  <Text style={{ color: "white", fontFamily: "Manrope_600SemiBold", fontSize: 12 }}>+{children.length - 3}</Text>
+                  <Text
+                    style={{
+                      color: "white",
+                      fontFamily: "Manrope_600SemiBold",
+                      fontSize: 12,
+                    }}
+                  >
+                    +{children.length - 3}
+                  </Text>
                 </View>
               )}
             </View>