ui tweaks and fixes

components/shared/HeaderTemplate.tsx

@@ -1,18 +1,36 @@
 import { Image, Text, View } from "react-native-ui-lib";
-import React from "react";
-import { useAuthContext } from "@/contexts/AuthContext";
+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 { 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}>