ui fixes

components/pages/settings/user_settings_views/MyGroup.tsx

@@ -178,7 +178,7 @@ const MyGroup: React.FC<MyGroupProps> = ({onNewUserClick, setOnNewUserClick}) =>
                                         <UserMenu
                                             setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
                                             showQRCodeDialog={showQRCodeDialog === member?.uid}
-                                            userId={member?.uid!}
+                                            user={member}
                                         />
                                     </View>
                                 </Card>
@@ -220,7 +220,7 @@ const MyGroup: React.FC<MyGroupProps> = ({onNewUserClick, setOnNewUserClick}) =>
                                     <UserMenu
                                         setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
                                         showQRCodeDialog={showQRCodeDialog === member?.uid}
-                                        userId={member?.uid!}
+                                        user={member}
                                     />
                                 </Card>
                             ))}
@@ -259,7 +259,7 @@ const MyGroup: React.FC<MyGroupProps> = ({onNewUserClick, setOnNewUserClick}) =>
                                     <UserMenu
                                         setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
                                         showQRCodeDialog={showQRCodeDialog === member?.uid}
-                                        userId={member?.uid!}
+                                        user={member}
                                     />
                                 </Card>
                             ))}

components/pages/settings/user_settings_views/UserMenu.tsx

@@ -1,29 +1,36 @@
-import React from 'react';
+import React from "react";
-import {Button, Card, Dialog, Text, TouchableOpacity} from 'react-native-ui-lib';
+import {
-import QRCode from 'react-native-qrcode-svg';
+  Button,
-import {PanningDirectionsEnum} from "react-native-ui-lib/src/components/panningViews/panningProvider";
+  Card,
+  Dialog,
+  Text,
+  TouchableOpacity,
+} from "react-native-ui-lib";
+import QRCode from "react-native-qrcode-svg";
+import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/panningViews/panningProvider";
 import Ionicons from "@expo/vector-icons/Ionicons";
+import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
+import { UserProfile } from "@/hooks/firebase/types/profileTypes";
+import { StyleSheet } from "react-native";
+import { ProfileType } from "@/contexts/AuthContext";
 
 const UserMenu = ({
-                      userId,
+  user,
   showQRCodeDialog,
-                      setShowQRCodeDialog
+  setShowQRCodeDialog,
-                  }: {
+}: {
-    userId: string,
+  user: UserProfile;
-    showQRCodeDialog: boolean,
+  showQRCodeDialog: boolean;
-    setShowQRCodeDialog: (value: string | boolean) => void
+  setShowQRCodeDialog: (value: string | boolean) => void;
 }) => {
   const handleShowQRCode = () => {
-        setShowQRCodeDialog(userId);
+    setShowQRCodeDialog(user.uid!);
   };
 
-
   return (
     <>
-            <TouchableOpacity
+      <TouchableOpacity onPress={handleShowQRCode}>
-                onPress={handleShowQRCode}
+        <Ionicons name="qr-code-outline" size={24} color="black" />
-            >
-                <Ionicons name="qr-code-outline" size={24} color="black"/>
       </TouchableOpacity>
 
       <Dialog
@@ -32,14 +39,26 @@ const UserMenu = ({
         panDirection={PanningDirectionsEnum.DOWN}
       >
         <Card padding-20 center>
-                    <Text center marginB-10 style={{fontSize: 16, maxWidth: "80%"}}>Ask your family to download the app
+          <Text
-                        and then scan the
+            center
-                        QR Code to join the family group:
+            marginT-15
+            marginH-15
+            marginB-25
+            style={{ fontSize: 18, fontFamily: "Manrope_500Medium" }}
+          >
+            {user.userType !== ProfileType.FAMILY_DEVICE
+              ? `Open Cally on ${user.firstName}'s device and scan the code to link it to your family group`
+              : "Open Cally on the family device and scan the code to link it to your family group"}
           </Text>
-                    <QRCode value={userId} size={150}/>
+          <QRCode value={user.uid!} size={150} />
           <Button
             marginT-20
+            style={styles.button}
             label="Close"
+            labelStyle={{
+              fontFamily: "PlusJakartaSans_500Medium",
+              fontSize: 15,
+            }}
             onPress={() => setShowQRCodeDialog(false)}
           />
         </Card>
@@ -48,4 +67,12 @@ const UserMenu = ({
   );
 };
 
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "#d9d9d9",
+    width: 117,
+    height: 47,
+  },
+});
+
 export default UserMenu;

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>