fixed issue with pfp in tablet view

components/pages/(tablet_pages)/tablet_components/UsersList.tsx

@@ -7,33 +7,43 @@ import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
 import { useAtom } from "jotai";
 import { selectedUserAtom } from "@/components/pages/calendar/atoms";
 
+type UserProfile = {
+  uid: string;
+  firstName: string;
+  lastName: string;
+  userType: string;
+  eventColor: string;
+  pfp?: string;
+};
+
 const UsersList = () => {
   const { user: currentUser } = useAuthContext();
   const { data: familyMembers, refetch: refetchFamilyMembers } =
     useGetFamilyMembers();
-  const [selectedUser, setSelectedUser] = useAtom(selectedUserAtom);
+  const [selectedUser, setSelectedUser] = useAtom<UserProfile | null>(selectedUserAtom);
 
   useEffect(() => {
     refetchFamilyMembers();
   }, []);
 
   const sortedMembers = useMemo(() => {
-    const filtered = familyMembers
+    const filtered = familyMembers?.filter(
-      ?.filter((member) => member.userType !== ProfileType.FAMILY_DEVICE);
+      (member) => member.userType !== ProfileType.FAMILY_DEVICE
+    ) || [];
     
-    const currentUserData = filtered?.find(m => m.uid === currentUser?.uid);
+    const currentUserData = filtered.find(m => m.uid === currentUser?.uid);
-    const parents = filtered?.filter(m => m.userType === ProfileType.PARENT && m.uid !== currentUser?.uid) || [];
+    const parents = filtered.filter(m => m.userType === ProfileType.PARENT && m.uid !== currentUser?.uid);
-    const children = filtered?.filter(m => m.userType === ProfileType.CHILD && m.uid !== currentUser?.uid) || [];
+    const children = filtered.filter(m => m.userType === ProfileType.CHILD && m.uid !== currentUser?.uid);
-    const caregivers = filtered?.filter(m => m.userType === ProfileType.CAREGIVER && m.uid !== currentUser?.uid) || [];
+    const caregivers = filtered.filter(m => m.userType === ProfileType.CAREGIVER && m.uid !== currentUser?.uid);
-  
+
-    const familyViewOption = {
+    const familyViewOption: UserProfile = {
       uid: 'family-view',
       firstName: 'Family',
       lastName: 'View',
       userType: 'Family View',
       eventColor: colorMap.pink
     };
-  
+
     return currentUserData 
       ? [currentUserData, ...parents, ...children, familyViewOption, ...caregivers]
       : [...parents, ...children, familyViewOption, ...caregivers];
@@ -66,8 +76,11 @@ const UsersList = () => {
               key={index}
               source={{ uri: member.pfp }}
               style={styles.pfp}
-              borderRadius={200}
+              imageStyle={{ 
-              imageStyle={{ borderWidth: 2, borderColor: "red" }}
+                borderRadius: 200,
+                borderWidth: 2, 
+                borderColor: member.eventColor || colorMap.teal 
+              }}
             />
           ) : (
             <View
@@ -77,8 +90,8 @@ const UsersList = () => {
               backgroundColor={member.eventColor || colorMap.teal}
             >
               <Text color="white">
-                {member.firstName.at(0)}
+                {member.firstName.charAt(0)}
-                {member.lastName.at(0)}
+                {member.lastName.charAt(0)}
               </Text>
             </View>
           )}
@@ -118,4 +131,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default UsersList;
+export default UsersList;

components/pages/calendar/EventCell.tsx

@@ -73,7 +73,7 @@ export const EventCell: React.FC<EventCellProps> = React.memo((
 const styles = StyleSheet.create({
     eventCell: {
         flex: 1,
-        borderRadius: 4,
+        borderRadius: 5,
         paddingHorizontal: 8,
         paddingBottom: 8,
         height: '100%',

components/pages/calendar/MonthCalendar.tsx

@@ -106,12 +106,20 @@ export const MonthCalendar: React.FC<EventCalendarProps> = React.memo(
 
         const memoizedEventCellStyle = useCallback(
             (event: CalendarEvent) => {
-                let eventColor = event.eventColor;
+                let eventColor = event.eventColor ?? colorMap.teal;
+                let textColor = getEventTextColor(eventColor);
                 if (!isFamilyView && (event.attendees?.includes(user?.uid!) || event.creatorId! === user?.uid)) {
                     eventColor = profileData?.eventColor ?? colorMap.teal;
+                    textColor = getEventTextColor(eventColor);
+                }
+                return {
+                    backgroundColor: eventColor,
+                    fontSize: 14,
+                    textColor: textColor,  // Try adding explicit textColor
+                    style: {
+                        color: textColor  // And nested style
+                    }
                 }
-
-                return {backgroundColor: eventColor, fontSize: 14, color: getEventTextColor(event?.eventColor)}
             },
             []
         );
@@ -212,6 +220,8 @@ export const MonthCalendar: React.FC<EventCalendarProps> = React.memo(
                     // renderEvent={renderEvent}
                     eventCellStyle={memoizedEventCellStyle}
                     allDayEventCellStyle={memoizedEventCellStyle}
+                   // eventCellTextColor={'#919191'}
+                    //allDayEventCellTextColor={'#919191'}
                     // enableEnrichedEvents={true}
                     // enrichedEventsByDate={enrichedEvents}
                     onPressEvent={handlePressEvent}
@@ -313,7 +323,7 @@ const styles = StyleSheet.create({
     },
     eventCell: {
         flex: 1,
-        borderRadius: 4,
+        borderRadius: 5,
         padding: 4,
         height: '100%',
         justifyContent: 'center',