From dac3f3c0a33e8677199af87b3e49ebbcb39060cf Mon Sep 17 00:00:00 2001
From: ivic00 <102467664+ivic00@users.noreply.github.com>
Date: Tue, 5 Nov 2024 22:00:16 +0100
Subject: [PATCH] ui fixes

---
 .../settings/user_settings_views/MyGroup.tsx  |   6 +-
 .../settings/user_settings_views/UserMenu.tsx | 111 +++++++++++-------
 components/shared/HeaderTemplate.tsx          |  29 ++++-
 3 files changed, 96 insertions(+), 50 deletions(-)

diff --git a/components/pages/settings/user_settings_views/MyGroup.tsx b/components/pages/settings/user_settings_views/MyGroup.tsx
index c1d6867..2d7b0d8 100644
--- a/components/pages/settings/user_settings_views/MyGroup.tsx
+++ b/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>
                             ))}
diff --git a/components/pages/settings/user_settings_views/UserMenu.tsx b/components/pages/settings/user_settings_views/UserMenu.tsx
index 6b6cfd5..4ef81ed 100644
--- a/components/pages/settings/user_settings_views/UserMenu.tsx
+++ b/components/pages/settings/user_settings_views/UserMenu.tsx
@@ -1,51 +1,78 @@
-import React from 'react';
-import {Button, 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 React from "react";
+import {
+  Button,
+  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,
-                      showQRCodeDialog,
-                      setShowQRCodeDialog
-                  }: {
-    userId: string,
-    showQRCodeDialog: boolean,
-    setShowQRCodeDialog: (value: string | boolean) => void
+  user,
+  showQRCodeDialog,
+  setShowQRCodeDialog,
+}: {
+  user: UserProfile;
+  showQRCodeDialog: boolean;
+  setShowQRCodeDialog: (value: string | boolean) => void;
 }) => {
-    const handleShowQRCode = () => {
-        setShowQRCodeDialog(userId);
-    };
+  const handleShowQRCode = () => {
+    setShowQRCodeDialog(user.uid!);
+  };
 
+  return (
+    <>
+      <TouchableOpacity onPress={handleShowQRCode}>
+        <Ionicons name="qr-code-outline" size={24} color="black" />
+      </TouchableOpacity>
 
-    return (
-        <>
-            <TouchableOpacity
-                onPress={handleShowQRCode}
-            >
-                <Ionicons name="qr-code-outline" size={24} color="black"/>
-            </TouchableOpacity>
-
-            <Dialog
-                visible={showQRCodeDialog}
-                onDismiss={() => setShowQRCodeDialog(false)}
-                panDirection={PanningDirectionsEnum.DOWN}
-            >
-                <Card padding-20 center>
-                    <Text center marginB-10 style={{fontSize: 16, maxWidth: "80%"}}>Ask your family to download the app
-                        and then scan the
-                        QR Code to join the family group:
-                    </Text>
-                    <QRCode value={userId} size={150}/>
-                    <Button
-                        marginT-20
-                        label="Close"
-                        onPress={() => setShowQRCodeDialog(false)}
-                    />
-                </Card>
-            </Dialog>
-        </>
-    );
+      <Dialog
+        visible={showQRCodeDialog}
+        onDismiss={() => setShowQRCodeDialog(false)}
+        panDirection={PanningDirectionsEnum.DOWN}
+      >
+        <Card padding-20 center>
+          <Text
+            center
+            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={user.uid!} size={150} />
+          <Button
+            marginT-20
+            style={styles.button}
+            label="Close"
+            labelStyle={{
+              fontFamily: "PlusJakartaSans_500Medium",
+              fontSize: 15,
+            }}
+            onPress={() => setShowQRCodeDialog(false)}
+          />
+        </Card>
+      </Dialog>
+    </>
+  );
 };
 
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "#d9d9d9",
+    width: 117,
+    height: 47,
+  },
+});
+
 export default UserMenu;
diff --git a/components/shared/HeaderTemplate.tsx b/components/shared/HeaderTemplate.tsx
index 8f9d994..4e77148 100644
--- a/components/shared/HeaderTemplate.tsx
+++ b/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>