ui fixes and tweaks

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,
+          left: isTablet ? "15%" : "0",
-          right: Device.deviceType === DeviceType.TABLET ? "25%" : 0,
+          height: isTablet ? "9%" : "4%",
-          height: Device.deviceType === DeviceType.TABLET ? "9%" : "12%",
+          width: isTablet ? "62%" : "100%",
-          width: Device.deviceType === DeviceType.TABLET ? "62%" : "100%",
+          zIndex: 50,
-          zIndex: 100,
           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}

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}
                   />
                 ) : (

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}
             />
           ) : (

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>
   );

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",

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}
             >

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);
     }

components/pages/grocery/GroceryItem.tsx

@@ -190,6 +190,8 @@ const GroceryItem = ({
                   aspectRatio: 1,
                   borderRadius: 22,
                   overflow: "hidden",
+                  borderWidth: 2,
+                  borderColor: profileData.eventColor
                 }}
               />
             ) : (

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 }}
                     />

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}
               />
             ) : (

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

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>

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
+                  <TouchableOpacity onPress={handlePfpPress}>
-                    onPress={handlePfpPress}
-                  >
                     <View
                       style={[
                         styles.childrenPfp,
@@ -143,12 +150,60 @@ const HeaderTemplate = (props: {
           )}
         </View>
       ) : (
-        <View style={styles.pfp} center>
+        <>
-          <Text style={styles.pfpTxt}>
+          <TouchableOpacity onPress={handlePfpPress}>
-            {profileData?.firstName?.at(0)}
+            <View style={[styles.pfp, { zIndex: 200 }]} center>
-            {profileData?.lastName?.at(0)}
+              <Text style={styles.pfpTxt}>
-          </Text>
+                {profileData?.firstName?.at(0)}
-        </View>
+                {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 && (