fix calendar overflow, todo repeat

assets/svgs/RepeatIcon.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+import Svg, { SvgProps, Path } from "react-native-svg"
+const RepeatIcon = (props: SvgProps) => (
+  <Svg
+    width={props.height || 13}
+    height={props.height || 13}
+    fill="none"
+    {...props}
+  >
+    <Path
+      stroke={props.color || "#858585"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M1.158 7.197a5.42 5.42 0 0 1 9.58-4.103m0 0V1.099m0 1.995v.037H8.705m3.21 2.71a5.42 5.42 0 0 1-9.444 4.263m0 .001v-.198h2.033m-2.033.198v1.835"
+    />
+  </Svg>
+)
+export default RepeatIcon

components/pages/calendar/InnerCalendar.tsx

@@ -21,7 +21,7 @@ export const InnerCalendar = () => {
     return (
         <>
             <View
-                style={{flex: 1, backgroundColor: "#fff", borderRadius: 30, marginBottom: 60}}
+                style={{flex: 1, backgroundColor: "#fff", borderRadius: 30, marginBottom: 60, overflow: "hidden"}}
                 ref={calendarContainerRef}
                 onLayout={onLayout}
             >

components/pages/settings/user_settings_views/MyProfile.tsx

@@ -2,7 +2,14 @@ import React, {useEffect, useRef, useState} from "react";
 import { StyleSheet, TouchableOpacity } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
 import * as ImagePicker from "expo-image-picker";
-import {Colors, Image, Picker, Text, TextField, View} from "react-native-ui-lib";
+import {
+  Colors,
+  Image,
+  Picker,
+  Text,
+  TextField,
+  View,
+} from "react-native-ui-lib";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import * as tz from "tzdata";
 import * as Localization from "expo-localization";
@@ -10,6 +17,7 @@ import debounce from "debounce";
 import { useAuthContext } from "@/contexts/AuthContext";
 import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
 import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture";
+import { colorMap } from "@/constants/colorMap";
 
 const MyProfile = () => {
   const { user, profileData } = useAuthContext();
@@ -20,7 +28,9 @@ const MyProfile = () => {
   const [firstName, setFirstName] = useState<string>(
     profileData?.firstName || ""
   );
-    const [profileImage, setProfileImage] = useState<string | ImagePicker.ImagePickerAsset | null>(profileData?.pfp || null);
+  const [profileImage, setProfileImage] = useState<
+    string | ImagePicker.ImagePickerAsset | null
+  >(profileData?.pfp || null);
 
   const { mutateAsync: updateUserData } = useUpdateUserData();
   const { mutateAsync: changeProfilePicture } = useChangeProfilePicture();
@@ -45,12 +55,15 @@ const MyProfile = () => {
       setFirstName(profileData.firstName || "");
       setLastName(profileData.lastName || "");
       // setProfileImage(profileData.pfp || null);
-            setTimeZone(profileData.timeZone || Localization.getCalendars()[0].timeZone!);
+      setTimeZone(
+        profileData.timeZone || Localization.getCalendars()[0].timeZone!
+      );
     }
   }, [profileData]);
 
   const pickImage = async () => {
-        const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    const permissionResult =
+      await ImagePicker.requestMediaLibraryPermissionsAsync();
     if (!permissionResult.granted) {
       alert("Permission to access camera roll is required!");
       return;
@@ -65,16 +78,19 @@ const MyProfile = () => {
 
     if (!result.canceled) {
       setProfileImage(result.assets[0].uri);
-            changeProfilePicture(result.assets[0])
+      changeProfilePicture(result.assets[0]);
     }
   };
 
   const handleClearImage = async () => {
     await updateUserData({ newUserData: { pfp: null } });
-        setProfileImage(null)
+    setProfileImage(null);
-    }
+  };
 
-    const pfpUri = profileImage && typeof profileImage === 'object' && 'uri' in profileImage ? profileImage.uri : profileImage;
+  const pfpUri =
+    profileImage && typeof profileImage === "object" && "uri" in profileImage
+      ? profileImage.uri
+      : profileImage;
 
   return (
     <ScrollView style={{ paddingBottom: 100, flex: 1 }}>
@@ -82,11 +98,28 @@ const MyProfile = () => {
         <Text style={styles.subTit}>Your Profile</Text>
         <View row spread paddingH-15 centerV marginV-15>
           <TouchableOpacity onPress={pickImage}>
+            {pfpUri ? (
               <Image
                 key={pfpUri}
                 style={styles.pfp}
                 source={pfpUri ? { uri: pfpUri } : null}
               />
+            ) : (
+              <View
+                center
+                style={{
+                  aspectRatio: 1,
+                  width: 65.54,
+                  backgroundColor: profileData?.eventColor ?? colorMap.pink,
+                  borderRadius: 20,
+                }}
+              >
+                <Text style={styles.pfpTxt}>
+                  {user?.email?.at(0)}
+                  {user?.email?.at(1)}
+                </Text>
+              </View>
+            )}
           </TouchableOpacity>
 
           <TouchableOpacity onPress={pickImage}>
@@ -179,7 +212,11 @@ const MyProfile = () => {
 const timeZoneItems = Object.keys(tz.zones)
   .sort()
   .map((zone) => (
-        <Picker.Item key={zone} label={zone.replace("/", " / ").replace("_", " ")} value={zone}/>
+    <Picker.Item
+      key={zone}
+      label={zone.replace("/", " / ").replace("_", " ")}
+      value={zone}
+    />
   ));
 
 const styles = StyleSheet.create({
@@ -191,6 +228,11 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingVertical: 21,
   },
+  pfpTxt: {
+    fontFamily: "Manrope_500Medium",
+    fontSize: 30,
+    color: "white",
+  },
   pfp: {
     aspectRatio: 1,
     width: 65.54,

components/pages/todos/RepeatFreq.tsx

@@ -5,12 +5,10 @@ const RepeatFreq = () => {
   const [weeks, setWeeks] = useState<number>(1);
   const weekOptions: number[] = Array.from({ length: 52 }, (_, i) => i + 1);
 
-  useEffect(() => {
+  useEffect(() => {}, [weeks]);
-  }, [weeks]);
 
   return (
-    <View row centerV>
+    <View row centerV spread marginR-30>
-      <View row centerV>
       <RepeatOption value={"Monday"} />
       <RepeatOption value={"Tuesday"} />
       <RepeatOption value={"Wednesday"} />
@@ -19,48 +17,6 @@ const RepeatFreq = () => {
       <RepeatOption value={"Saturday"} />
       <RepeatOption value={"Sunday"} />
     </View>
-      <View row gap-5 centerV>
-        <Picker
-          centered
-          marginL-10
-          marginR-0
-          paddingR-0
-          textAlign="right"
-          trailingAccessory={
-            <Text
-              style={{ fontFamily: "Manrope_600SemiBold", color: "#fd1575" }}
-            >
-              {weeks == 1 ? "Week" : "Weeks"}
-            </Text>
-          }
-          value={weeks}
-          onChange={(value) => {
-            if (typeof value === "number") {
-              setWeeks(value);
-            }
-          }}
-          placeholder={"Select number of weeks"}
-          useWheelPicker
-          color={"#fd1575"}
-          style={{
-            maxWidth: 18,
-            fontFamily: "Manrope_700Bold",
-          }}
-          containerStyle={{
-            borderWidth: 1,
-            borderRadius: 6,
-            paddingRight: 5,
-            paddingLeft: 3,
-            borderColor: "#fd1575",
-            backgroundColor: "#ffe8f1",
-          }}
-        >
-          {weekOptions.map((num) => (
-            <Picker.Item key={num} value={num} label={`${num}`} />
-          ))}
-        </Picker>
-      </View>
-    </View>
   );
 };
 
@@ -69,15 +25,27 @@ export default RepeatFreq;
 const RepeatOption = ({ value }: { value: string }) => {
   const [isSet, setisSet] = useState(false);
   return (
-    <TouchableOpacity padding-10 center onPress={() => setisSet(!isSet)}>
+    <TouchableOpacity onPress={() => setisSet(!isSet)}>
+      <View
+        center
+        marginT-8
+        marginB-4
+        width={28}
+        height={28}
+        style={{
+          backgroundColor: isSet ? "#fd1575" : "white",
+          borderRadius: 100,
+        }}
+      >
         <Text
           style={{
             fontFamily: !isSet ? "Manrope_400Regular" : "Manrope_700Bold",
-          color: isSet ? "#fd1575" : "gray",
+            color: isSet ? "white" : "gray",
           }}
         >
           {value.at(0)}
         </Text>
+      </View>
     </TouchableOpacity>
   );
 };

components/pages/todos/ToDoItem.tsx

@@ -5,7 +5,7 @@ import {
   TouchableOpacity,
   Dialog,
   Button,
-    ButtonSize
+  ButtonSize,
 } from "react-native-ui-lib";
 import React, { useState } from "react";
 import { useToDosContext } from "@/contexts/ToDosContext";
@@ -15,6 +15,7 @@ import { IToDo } from "@/hooks/firebase/types/todoData";
 import { ImageBackground } from "react-native";
 import AddChoreDialog from "@/components/pages/todos/AddChoreDialog";
 import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
+import RepeatIcon from "@/assets/svgs/RepeatIcon";
 
 const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
   const { updateToDo } = useToDosContext();
@@ -37,7 +38,9 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
     return `${firstName.charAt(0)}${lastName.charAt(0)}`;
   };
 
-    const selectedMembers = members?.filter((x) => props?.item?.assignees?.includes(x?.uid!));
+  const selectedMembers = members?.filter((x) =>
+    props?.item?.assignees?.includes(x?.uid!)
+  );
   return (
     <View
       centerV
@@ -50,7 +53,13 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
         opacity: props.item.done ? 0.3 : 1,
       }}
     >
-        {visible && <AddChoreDialog isVisible={visible} setIsVisible={setVisible} selectedTodo={props.item}/>}
+      {visible && (
+        <AddChoreDialog
+          isVisible={visible}
+          setIsVisible={setVisible}
+          selectedTodo={props.item}
+        />
+      )}
       <View paddingB-8 row spread>
         <Text
           text70
@@ -67,7 +76,13 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
         </Text>
         <Checkbox
           value={props.item.done}
-          containerStyle={{borderWidth: 0.7, borderRadius: 50, borderColor: 'gray', height: 24.64, width: 24.64}}
+          containerStyle={{
+            borderWidth: 0.7,
+            borderRadius: 50,
+            borderColor: "gray",
+            height: 24.64,
+            width: 24.64,
+          }}
           color="#fd1575"
           onValueChange={(value) => {
             updateToDo({ id: props.item.id, done: !props.item.done });
@@ -86,6 +101,7 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
         />
       </View>
       <View centerV centerH marginT-8 row spread>
+        <View row>
           {props.item.points && props.item.points > 0 ? (
             <TouchableOpacity
               onPress={() => {
@@ -96,7 +112,10 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
             >
               <View centerV row gap-3>
                 <Ionicons name="gift-outline" size={20} color="#46a80a" />
-              <Text color="#46a80a" style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}>
+                <Text
+                  color="#46a80a"
+                  style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}
+                >
                   {props.item.points} points
                 </Text>
               </View>
@@ -104,11 +123,38 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
           ) : (
             <View />
           )}
+
+          {!(props.item.repeatType == "None") && (
+            <View row centerV marginL-8>
+              <RepeatIcon style={{ marginRight: 4 }} />
+              <Text
+                style={{
+                  fontSize: 12,
+                  fontFamily: "Manrope_500Medium",
+                  color: "#858585",
+                }}
+              >
+                {(() => {
+                  switch (props.item.repeatType) {
+                    case "Once a month":
+                      return "Monthly";
+                    case "Every week":
+                      return "Weekly";
+                    case "Once a year":
+                      return "Yearly";
+                    default:
+                      return props.item.repeatType;
+                  }
+                })()}
+              </Text>
+            </View>
+          )}  
+        </View>
         <View row style={{ gap: 3 }}>
           {selectedMembers?.map((member) => {
             return member?.pfp ? (
               <ImageBackground
-                              source={require("../../../assets/images/child-picture.png")}
+                source={{ uri: member.pfp }}
                 style={{
                   height: 24.64,
                   aspectRatio: 1,
@@ -117,30 +163,36 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
                 }}
               />
             ) : (
-                          <View style={{
+              <View
-                              position: 'relative',
+                style={{
+                  position: "relative",
                   width: 24.64,
-                              aspectRatio: 1
+                  aspectRatio: 1,
-                          }}>
+                }}
-                              <View style={{
+              >
-                                  backgroundColor: '#ccc',
+                <View
-                                  justifyContent: 'center',
+                  style={{
-                                  alignItems: 'center',
+                    backgroundColor: "#ccc",
+                    justifyContent: "center",
+                    alignItems: "center",
                     borderRadius: 100, // Circular shape
-                                  width: '100%',
+                    width: "100%",
-                                  height: '100%'
+                    height: "100%",
-                              }}>
+                  }}
-                                  <Text style={{
+                >
-                                      color: '#fff',
+                  <Text
+                    style={{
+                      color: "#fff",
                       fontSize: 12,
-                                      fontWeight: 'bold'
+                      fontWeight: "bold",
-                                  }}>
+                    }}
+                  >
                     {getInitials(member.firstName, member.lastName ?? "")}
                   </Text>
                 </View>
               </View>
-                      )}
+            );
-              )}
+          })}
         </View>
       </View>
       <Dialog

components/shared/HeaderTemplate.tsx

@@ -1,6 +1,8 @@
 import { Image, Text, View } from "react-native-ui-lib";
 import React from "react";
 import { useAuthContext } from "@/contexts/AuthContext";
+import { StyleSheet } from "react-native";
+import { colorMap } from "@/constants/colorMap";
 
 const HeaderTemplate = (props: {
   message: string;
@@ -11,26 +13,51 @@ const HeaderTemplate = (props: {
   const { user, profileData } = useAuthContext();
 
   const headerHeight: number = 72;
-    return (
+
-        <View row centerV marginV-15>
+  const styles = StyleSheet.create({
-            <Image
+    pfp: {
-                source={{uri: profileData?.pfp}}
-                style={{
       height: headerHeight,
       aspectRatio: 1,
       borderRadius: 22,
       overflow: "hidden",
       marginRight: 20,
-                }}
+      backgroundColor: profileData?.eventColor ?? colorMap.pink,
-            />
+    },
+    pfpTxt: {
+      fontFamily: "Manrope_500Medium",
+      fontSize: 30,
+      color: 'white',
+    },
+  });
+
+  return (
+    <View row centerV marginV-15>
+      {profileData?.pfp ? (
+        <Image source={{ uri: profileData.pfp }} style={styles.pfp} />
+      ) : (
+        <View style={styles.pfp} center>
+          <Text style={styles.pfpTxt}>
+            {user?.email?.at(0)}
+            {user?.email?.at(1)}
+          </Text>
+        </View>
+      )}
       <View gap-3>
         {props.isWelcome && (
-                    <Text text70L style={{
+          <Text
+            text70L
+            style={{
               fontSize: 19,
-                        fontFamily: "Manrope_400Regular"
+              fontFamily: "Manrope_400Regular",
-                    }}>Welcome, {profileData?.firstName}!</Text>
+            }}
+          >
+            Welcome, {profileData?.firstName}!
+          </Text>
         )}
-                <Text text70B style={{fontSize: 18, fontFamily: "Manrope_600SemiBold"}}>
+        <Text
+          text70B
+          style={{ fontSize: 18, fontFamily: "Manrope_600SemiBold" }}
+        >
           {props.message}
         </Text>
         {props.children && <View>{props.children}</View>}