Merge remote-tracking branch 'origin/dev' into dev

2025-07-17 02:25:10 +00:00 · 2024-11-20 23:58:21 +01:00
parent 4f80525f13 830c1bf8ea
commit edea14b32c
13 changed files with 137 additions and 33 deletions
--- a/app/(auth)/calendar/index.tsx
+++ b/app/(auth)/calendar/index.tsx
@ -14,6 +14,8 @@ export default function Screen() {
  const [refreshing, setRefreshing] = useState(false);
  const [shouldRefresh, setShouldRefresh] = useAtom(refreshTriggerAtom);

+  const isTablet: boolean = Device.deviceType === DeviceType.TABLET;
+
  const {
    isConnectedToGoogle,
    isConnectedToMicrosoft,
@ -48,7 +50,7 @@ export default function Screen() {

  return (
    <View style={{ flex: 1 }}>
-      <View style={{ flex: 1, zIndex: -2 }}>
+      <View style={{ flex: 1, zIndex: 0 }}>
        {Device.deviceType === DeviceType.TABLET ? (
          <TabletCalendarPage />
        ) : (
@ -60,14 +62,17 @@ export default function Screen() {
        style={{
          position: "absolute",
          top: 0,
-          left: Device.deviceType === DeviceType.TABLET ? "15%" : 0,
-          right: Device.deviceType === DeviceType.TABLET ? "25%" : 0,
-          height: Device.deviceType === DeviceType.TABLET ? "9%" : "12%",
-          width: Device.deviceType === DeviceType.TABLET ? "62%" : "100%",
-          zIndex: 100,
+          left: isTablet ? "15%" : "0",
+          height: isTablet ? "9%" : "4%",
+          width: isTablet ? "62%" : "100%",
+          zIndex: 50,
          backgroundColor: "transparent",
        }}
-        contentContainerStyle={{ flex: 1 }}
+        contentContainerStyle={{
+          flex: 1,
+          justifyContent: "center",
+          paddingRight: 200,
+        }}
        refreshControl={
          <RefreshControl
            colors={[
@ -81,6 +86,14 @@ export default function Screen() {
            progressBackgroundColor={"white"}
            refreshing={refreshing || isSyncing}
            onRefresh={onRefresh}
+            style={{
+              position: "absolute",
+              left: "50%", // Position at screen center
+              transform: [
+                // Offset by half its own width
+                { translateX: -20 }, // Assuming the refresh control is ~40px wide
+              ],
+            }}
          />
        }
        bounces={true}
--- a/components/pages/(tablet_pages)/chores/TabletChoresPage.tsx
+++ b/components/pages/(tablet_pages)/chores/TabletChoresPage.tsx
@ -38,7 +38,14 @@ const TabletChoresPage = () => {
                {user.pfp ? (
                  <ImageBackground
                    source={{ uri: user.pfp }}
-                    style={styles.pfp}
+                    style={[
+                      styles.pfp,
+                      (user.eventColor && {
+                        borderWidth: 2,
+                        borderColor: user.eventColor,
+                      }) ||
+                        undefined,
+                    ]}
                    borderRadius={13.33}
                  />
                ) : (
--- a/components/pages/(tablet_pages)/tablet_components/UsersList.tsx
+++ b/components/pages/(tablet_pages)/tablet_components/UsersList.tsx
@ -20,7 +20,14 @@ const UsersList = () => {
            <ImageBackground
              key={index}
              source={{ uri: member.pfp }}
-              style={styles.pfp}
+              style={[
+                styles.pfp,
+                (member.eventColor && {
+                  borderWidth: 2,
+                  borderColor: member.eventColor,
+                }) ||
+                  undefined,
+              ]}
              borderRadius={100}
            />
          ) : (
--- a/components/pages/calendar/CalendarPage.tsx
+++ b/components/pages/calendar/CalendarPage.tsx
@ -8,13 +8,13 @@ export default function CalendarPage() {
    <View
      style={{ flex: 1, height: "100%", padding: 10 }}
      paddingH-22
-      paddingT-0
+      paddingT-22
    >
-      <HeaderTemplate
+      {/*<HeaderTemplate
        message={"Let's get your week started !"}
        isWelcome
        isCalendar={true}
-      />
+      />*/}
      <InnerCalendar />
    </View>
  );
--- a/components/pages/calendar/EventCalendar.tsx
+++ b/components/pages/calendar/EventCalendar.tsx
@ -324,6 +324,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
                    ampm
                    // renderCustomDateForMonth={renderCustomDateForMonth}
                />
+                <View style={{backgroundColor: 'white', height: 50, width: '100%'}} />
            </>

        );
@ -337,6 +338,7 @@ const styles = StyleSheet.create({
    },
    calHeader: {
        borderWidth: 0,
+        paddingBottom: 60,
    },
    dayModeHeader: {
        alignSelf: "flex-start",
--- a/components/pages/calendar/InnerCalendar.tsx
+++ b/components/pages/calendar/InnerCalendar.tsx
@ -25,7 +25,7 @@ export const InnerCalendar = () => {
    return (
        <>
            <View
-                style={{flex: 1, backgroundColor: "#fff", borderRadius: 30, marginBottom: 60, overflow: "hidden"}}
+                style={{flex: 1, backgroundColor: "#fff", borderRadius: 30, marginBottom: 10, overflow: "hidden"}}
                ref={calendarContainerRef}
                onLayout={onLayout}
            >
--- a/components/pages/grocery/EditGroceryItem.tsx
+++ b/components/pages/grocery/EditGroceryItem.tsx
@ -59,7 +59,6 @@ const EditGroceryItem = ({

  const handleSubmit = () => {
    inputRef?.current?.blur();
-    console.log("CALLLLLL");
    if (editGrocery.setSubmit) {
      editGrocery.setSubmit(true);
    }
--- a/components/pages/grocery/GroceryItem.tsx
+++ b/components/pages/grocery/GroceryItem.tsx
@ -190,6 +190,8 @@ const GroceryItem = ({
                  aspectRatio: 1,
                  borderRadius: 22,
                  overflow: "hidden",
+                  borderWidth: 2,
+                  borderColor: profileData.eventColor
                }}
              />
            ) : (
--- a/components/pages/settings/user_settings_views/MyGroup.tsx
+++ b/components/pages/settings/user_settings_views/MyGroup.tsx
@ -170,7 +170,14 @@ const MyGroup: React.FC<MyGroupProps> = ({
                >
                  {member.pfp ? (
                    <ImageBackground
-                      style={styles.pfp}
+                    style={[
+                      styles.pfp,
+                      (member.eventColor && {
+                        borderWidth: 2,
+                        borderColor: member.eventColor,
+                      }) ||
+                        undefined,
+                    ]}
                      borderRadius={10.56}
                      source={{ uri: member.pfp || undefined }}
                    />
--- a/components/pages/settings/user_settings_views/MyProfile.tsx
+++ b/components/pages/settings/user_settings_views/MyProfile.tsx
@ -173,7 +173,14 @@ const MyProfile = () => {
            {pfpUri ? (
              <Image
                key={pfpUri}
-                style={styles.pfp}
+                style={[
+                  styles.pfp,
+                  (profileData?.eventColor && {
+                    borderWidth: 2,
+                    borderColor: profileData.eventColor,
+                  }) ||
+                    undefined,
+                ]}
                source={pfpUri ? { uri: pfpUri } : null}
              />
            ) : (
--- a/components/pages/todos/ToDoItem.tsx
+++ b/components/pages/todos/ToDoItem.tsx
@ -179,6 +179,8 @@ const ToDoItem = (props: {
                  aspectRatio: 1,
                  borderRadius: 22,
                  overflow: "hidden",
+                  borderWidth: 2,
+                  borderColor: member.eventColor || 'transparent'
                }}
              />
            ) : (
@ -187,6 +189,9 @@ const ToDoItem = (props: {
                  position: "relative",
                  width: 24.64,
                  aspectRatio: 1,
+                  borderWidth: 2,
+                  borderRadius: 100,
+                  borderColor: member.eventColor || 'transparent'
                }}
              >
                <View
--- a/components/shared/AssigneesDisplay.tsx
+++ b/components/shared/AssigneesDisplay.tsx
@ -28,11 +28,11 @@ const AssigneesDisplay = ({selectedAttendees, setSelectedAttendees}: {
                    {member?.pfp ? (
                        <Image
                            source={{uri: member?.pfp}}
-                            style={styles.image}
+                            style={[styles.image, {borderWidth: 2, borderColor: member.eventColor || 'transparent'}]}
                            children={<RemoveAssigneeBtn/>}
                        />
                    ) : (
-                        <View style={styles.initialsCircle}>
+                        <View style={[styles.initialsCircle, {borderWidth: 2, borderColor: member.eventColor || 'transparent'}]}>
                            <Text style={styles.initialsText}>
                                {getInitials(member.firstName, member.lastName)}
                            </Text>
--- a/components/shared/HeaderTemplate.tsx
+++ b/components/shared/HeaderTemplate.tsx
@ -5,10 +5,8 @@ import { StyleSheet } from "react-native";
 import { colorMap } from "@/constants/colorMap";
 import { useAtom, useSetAtom } from "jotai";
 import { isFamilyViewAtom, settingsPageIndex } 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";
 import CachedImage from "expo-cached-image";
 import { router } from "expo-router";

@ -24,7 +22,7 @@ const HeaderTemplate = (props: {
 }) => {
  const { user, profileData } = useAuthContext();

-  const { data: members } = useGetFamilyMembers();
+  const { data: members, refetch } = useGetFamilyMembers();
  const [children, setChildren] = useState<UserProfile[]>([]);
  const [isFamilyView] = useAtom(isFamilyViewAtom);
  const setSettingsPageIndexAtom = useSetAtom(settingsPageIndex);
@ -48,6 +46,7 @@ const HeaderTemplate = (props: {
      overflow: "hidden",
      marginRight: 20,
      backgroundColor: profileData?.eventColor ?? colorMap.pink,
+      zIndex: 100,
    },
    pfpTxt: {
      fontFamily: "Manrope_500Medium",
@ -94,13 +93,23 @@ const HeaderTemplate = (props: {
          <TouchableOpacity onPress={handlePfpPress}>
            <CachedImage
              source={{ uri: profileData.pfp }}
-              style={styles.pfp}
+              style={[
+                styles.pfp,
+                (profileData.eventColor && {
+                  borderWidth: 2,
+                  borderColor: profileData.eventColor,
+                }) ||
+                  undefined,
+              ]}
              cacheKey={profileData.pfp}
            />
          </TouchableOpacity>
-          {isFamilyView && props.isCalendar && (
+          {isFamilyView && props.isCalendar && children.length > 0 && (
            <View style={styles.childrenPfpArr} row>
-              {children?.slice(0, 3).map((child, index) => {
+              {children.slice(0, 3).map((child, index) => {
+                {
+                  console.log("yeaaaah");
+                }
                const bgColor: string = child.eventColor || colorMap.pink;
                return child.pfp ? (
                  <Image
@ -108,9 +117,7 @@ const HeaderTemplate = (props: {
                    style={[styles.childrenPfp, { left: index * 19 }]}
                  />
                ) : (
-                  <TouchableOpacity
-                    onPress={handlePfpPress}
-                  >
+                  <TouchableOpacity onPress={handlePfpPress}>
                    <View
                      style={[
                        styles.childrenPfp,
@ -143,12 +150,60 @@ const HeaderTemplate = (props: {
          )}
        </View>
      ) : (
-        <View style={styles.pfp} center>
-          <Text style={styles.pfpTxt}>
-            {profileData?.firstName?.at(0)}
-            {profileData?.lastName?.at(0)}
-          </Text>
-        </View>
+        <>
+          <TouchableOpacity onPress={handlePfpPress}>
+            <View style={[styles.pfp, { zIndex: 200 }]} center>
+              <Text style={styles.pfpTxt}>
+                {profileData?.firstName?.at(0)}
+                {profileData?.lastName?.at(0)}
+              </Text>
+            </View>
+          </TouchableOpacity>
+          {isFamilyView && props.isCalendar && children.length > 0 && (
+            <View style={styles.childrenPfpArr} row>
+              {children.slice(0, 3).map((child, index) => {
+                {
+                  console.log("yeaaaah");
+                }
+                const bgColor: string = child.eventColor || colorMap.pink;
+                return child.pfp ? (
+                  <Image
+                    source={{ uri: child.pfp }}
+                    style={[styles.childrenPfp, { left: index * 19 }]}
+                  />
+                ) : (
+                  <TouchableOpacity onPress={handlePfpPress}>
+                    <View
+                      style={[
+                        styles.childrenPfp,
+                        { left: index * 19, backgroundColor: bgColor },
+                      ]}
+                      center
+                    >
+                      <Text style={{ color: "white" }}>
+                        {child?.firstName?.at(0)}
+                        {child?.firstName?.at(1)}
+                      </Text>
+                    </View>
+                  </TouchableOpacity>
+                );
+              })}
+              {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 gap-3>
        {props.isWelcome && (