settings for other users, fixed event time

components/pages/calendar/ManuallyAddEventModal.tsx

@@ -447,6 +447,12 @@ export const ManuallyAddEventModal = () => {
                   value={startDate}
                   onChange={(date) => {
                     setStartDate(date);
+                    
+                    if (date > endDate) {
+                      const newEndDate = new Date(date);
+                      newEndDate.setDate(date.getDate() + 1);
+                      setEndDate(newEndDate);
+                    }
                   }}
                   //maximumDate={endDate}
                   style={{
@@ -459,10 +465,15 @@ export const ManuallyAddEventModal = () => {
               <DateTimePicker
                 value={startTime}
                 onChange={(time) => {
-                  if (time <= endTime) {
+                  if (
+                    endDate.getDate() === startDate.getDate() &&
+                    time.getHours() < endTime.getHours()
+                  ){
                     setStartTime(time);
+                    console.log('should happen')
                   }
                 }}
+                maximumDate={endTime}
                 minuteInterval={5}
                 dateTimeFormatter={(date, mode) =>
                   date.toLocaleTimeString("en-us", {
@@ -508,6 +519,8 @@ export const ManuallyAddEventModal = () => {
                       const newEndDate = new Date(endDate);
                       newEndDate.setDate(newEndDate.getDate() + 1);
                       setEndDate(newEndDate);
+
+                      console.log('new day');
                     }
                   }}
                   minuteInterval={5}

components/pages/settings/SettingsPage.tsx

@@ -43,7 +43,7 @@ const SettingsPage = () => {
       {pageIndex == 0 && (
         <View flexG centerH marginH-30 marginT-30>
           <Button
-            disabled={isntParent}
+            disabled={false}
             backgroundColor="white"
             style={styles.mainBtn}
             children={
@@ -63,7 +63,7 @@ const SettingsPage = () => {
             onPress={() => setPageIndex(1)}
           />
           <Button
-            disabled={isntParent}
+            disabled={false}
             backgroundColor="white"
             style={styles.mainBtn}
             children={

components/pages/settings/user_settings_views/MyGroup.tsx

@@ -177,12 +177,14 @@ const MyGroup: React.FC<MyGroupProps> = ({
                         }) ||
                           undefined,
                       ]}
-                      borderRadius={10.56}
                       source={{ uri: member.pfp || undefined }}
                     />
                   ) : (
                     <View
-                      style={[styles.pfp, { backgroundColor: member.eventColor || colorMap.pink }]}
+                      style={[
+                        styles.pfp,
+                        { backgroundColor: member.eventColor || colorMap.pink },
+                      ]}
                     />
                   )}
                   <View row marginL-10 centerV>
@@ -212,7 +214,7 @@ const MyGroup: React.FC<MyGroupProps> = ({
 
           {!!caregivers.length && (
             <View style={styles.card}>
-              <Text style={styles.subTit} marginB-10 marginT-15>
+              <Text style={styles.subTit} marginB-10>
                 Caregivers
               </Text>
               {caregivers?.map((member) => (
@@ -223,71 +225,104 @@ const MyGroup: React.FC<MyGroupProps> = ({
                   style={styles.familyCard}
                   row
                   centerV
-                  padding-10
+                  paddingT-10
                 >
-                  <Avatar
+                  {member.pfp ? (
-                    source={{ uri: member?.pfp ?? undefined }}
+                    <ImageBackground
-                    size={40}
+                      style={[
-                    backgroundColor={Colors.grey60}
+                        styles.pfp,
+                        (member.eventColor && {
+                          borderWidth: 2,
+                          borderColor: member.eventColor,
+                        }) ||
+                          undefined,
+                      ]}
+                      source={{ uri: member.pfp || undefined }}
                     />
-                  <View marginL-10>
+                  ) : (
-                    <Text text70M>
+                    <View
+                      style={[
+                        styles.pfp,
+                        { backgroundColor: member.eventColor || colorMap.pink },
+                      ]}
+                    />
+                  )}
+                  <View row marginL-10 centerV>
+                    <Text style={styles.name}>
                       {member.firstName} {member.lastName}
                     </Text>
-                    <Text text90 grey40>
-                      Caregiver
-                    </Text>
                   </View>
-
+                  <View flexG />
-                  <View flex-1 />
+                  <View row centerV gap-10>
-
+                    <Text style={styles.userType}>Caregiver</Text>
                     <UserMenu
                       setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
                       showQRCodeDialog={showQRCodeDialog === member?.uid}
                       user={member}
                     />
+                    {profileData?.userType === ProfileType.PARENT && (
+                      <UserOptions user={member} />
+                    )}
+                  </View>
                 </Card>
               ))}
             </View>
           )}
 
           {!!familyDevices.length && (
-            <>
+            <View style={styles.card}>
-              <Text text70 marginB-10 marginT-15>
+              <Text style={styles.subTit} marginB-10>
                 Family Devices
               </Text>
               {familyDevices?.map((member, index) => (
                 <Card
                   enableShadow={false}
                   elevation={0}
-                  key={`${member.firstName}_${member.lastName}_${index}`}
+                  key={`${member.firstName}_${index}`}
                   style={styles.familyCard}
                   row
                   centerV
-                  padding-10
+                  paddingT-10
                 >
-                  <Avatar
+                  {member.pfp ? (
-                    source={{ uri: member?.pfp ?? undefined }}
+                    <ImageBackground
-                    size={40}
+                      style={[
-                    backgroundColor={Colors.grey60}
+                        styles.pfp,
+                        (member.eventColor && {
+                          borderWidth: 2,
+                          borderColor: member.eventColor,
+                        }) ||
+                          undefined,
+                      ]}
+                      imageStyle={{ borderRadius: 10.56 }}
+                      source={{ uri: member.pfp || undefined }}
                     />
-                  <View marginL-10>
+                  ) : (
-                    <Text text70M>{member.firstName}</Text>
+                    <View
-                    <Text text90 grey40>
+                      style={[
-                      Family Device
+                        styles.pfp,
-                    </Text>
+                        { backgroundColor: member.eventColor || colorMap.pink },
+                      ]}
+                    />
+                  )}
+                  <View row marginL-10 centerV>
+                    <Text style={styles.name}>{member.firstName}</Text>
                   </View>
-
+                  <View flexG />
-                  <View flex-1 />
+                  <View row centerV gap-10>
-
+                    <Text style={styles.userType}>Family Device</Text>
                     <UserMenu
                       setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
                       showQRCodeDialog={showQRCodeDialog === member?.uid}
                       user={member}
                     />
+                    {profileData?.userType === ProfileType.PARENT && (
+                      <UserOptions user={member} />
+                    )}
+                  </View>
                 </Card>
               ))}
-            </>
+            </View>
           )}
         </View>
       </ScrollView>
@@ -630,7 +665,12 @@ const styles = StyleSheet.create({
     fontFamily: "PlusJakartaSans_500Medium",
     fontSize: 13,
   },
-  pfp: { aspectRatio: 1, width: 37.03, borderRadius: 10.56 },
+  pfp: {
+    aspectRatio: 1,
+    width: 37.03,
+    borderRadius: 10.56,
+    overflow: "hidden",
+  },
   userType: {
     fontFamily: "Manrope_500Medium",
     fontSize: 12,

components/pages/settings/user_settings_views/MyProfile.tsx

@@ -15,7 +15,7 @@ import Ionicons from "@expo/vector-icons/Ionicons";
 import * as tz from "tzdata";
 import * as Localization from "expo-localization";
 import debounce from "debounce";
-import { useAuthContext } from "@/contexts/AuthContext";
+import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
 import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
 import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture";
 import { colorMap } from "@/constants/colorMap";
@@ -24,9 +24,13 @@ import { AntDesign } from "@expo/vector-icons";
 import { useDeleteUser } from "@/hooks/firebase/useDeleteUser";
 import { useUpdateHouseholdName } from "@/hooks/firebase/useUpdateHouseholdName";
 import { useGetHouseholdName } from "@/hooks/firebase/useGetHouseholdName";
+import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
 
 const MyProfile = () => {
   const { user, profileData } = useAuthContext();
+  const { data: familyMembers } = useGetFamilyMembers();
+  const [takenColors, setTakenColors] = useState<string[]>([]);
+
   const { data: hhName, refetch: refetchHHName } = useGetHouseholdName(
     profileData.familyId
   );
@@ -91,6 +95,15 @@ const MyProfile = () => {
     handleUpdateHouseholdName();
   }, [householdName]);
 
+  useEffect(() => {
+    if (familyMembers) {
+      const colors = familyMembers
+        .filter(member => member?.eventColor && member.uid !== user?.uid)
+        .map(member => member.eventColor!);
+      setTakenColors(colors);
+    }
+   }, [familyMembers]);
+
   useEffect(() => {
     if (profileData) {
       setFirstName(profileData.firstName || "");
@@ -214,6 +227,8 @@ const MyProfile = () => {
           )}
         </View>
         <View paddingH-15>
+          {profileData?.userType == ProfileType.PARENT && (
+            <>
               <Text text80 marginT-10 marginB-7 style={styles.label}>
                 Household
               </Text>
@@ -226,6 +241,8 @@ const MyProfile = () => {
                   setHouseholdName(value);
                 }}
               />
+            </>
+          )}
           <Text text80 marginT-10 marginB-7 style={styles.label}>
             First name
           </Text>
@@ -267,36 +284,36 @@ const MyProfile = () => {
           Color Preference
         </Text>
         <View row spread>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)} disabled={takenColors.includes(colorMap.pink)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.pink}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.pink) ? 0.1 : 1}]} backgroundColor={colorMap.pink}>
               {selectedColor == colorMap.pink && (
                 <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.orange)}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.orange)} disabled={takenColors.includes(colorMap.orange)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.orange}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.orange) ? 0.1 : 1}]} backgroundColor={colorMap.orange}>
               {selectedColor == colorMap.orange && (
                 <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.green)}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.green)} disabled={takenColors.includes(colorMap.green)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.green}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.green) ? 0.1 : 1}]} backgroundColor={colorMap.green}>
               {selectedColor == colorMap.green && (
                 <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)} disabled={takenColors.includes(colorMap.teal)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.teal}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.teal) ? 0.1 : 1}]} backgroundColor={colorMap.teal}>
               {selectedColor == colorMap.teal && (
                 <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.purple)}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.purple)}disabled={takenColors.includes(colorMap.purple)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.purple}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.purple) ? 0.1 : 1}]} backgroundColor={colorMap.purple}>
               {selectedColor == colorMap.purple && (
                 <AntDesign name="check" size={30} color="white" />
               )}
@@ -304,36 +321,36 @@ const MyProfile = () => {
           </TouchableOpacity>
         </View>
         <View row spread marginT-10>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.navy)}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.navy)} disabled={takenColors.includes(colorMap.navy)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.navy}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.navy) ? 0.1 : 1}]} backgroundColor={colorMap.navy}>
               {selectedColor == colorMap.navy && (
                 <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.red)}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.red)} disabled={takenColors.includes(colorMap.red)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.red}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.red) ? 0.1 : 1}]} backgroundColor={colorMap.red}>
               {selectedColor == colorMap.red && (
                 <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.indigo)}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.indigo)} disabled={takenColors.includes(colorMap.indigo)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.indigo}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.indigo) ? 0.1 : 1}]} backgroundColor={colorMap.indigo}>
               {selectedColor == colorMap.indigo && (
                 <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.emerald)}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.emerald)} disabled={takenColors.includes(colorMap.emerald)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.emerald}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.emerald) ? 0.1 : 1}]} backgroundColor={colorMap.emerald}>
               {selectedColor == colorMap.emerald && (
                 <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.violet)}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.violet)} disabled={takenColors.includes(colorMap.violet)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.violet}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.violet) ? 0.1 : 1}]} backgroundColor={colorMap.violet}>
               {selectedColor == colorMap.violet && (
                 <AntDesign name="check" size={30} color="white" />
               )}