From b5aac0af2a1d3899b3e79c3179f439543a7e461d Mon Sep 17 00:00:00 2001 From: ivic00 <102467664+ivic00@users.noreply.github.com> Date: Wed, 20 Nov 2024 21:09:44 +0100 Subject: [PATCH] ui fixes and tweaks --- app/(auth)/calendar/index.tsx | 27 ++++-- .../chores/TabletChoresPage.tsx | 9 +- .../tablet_components/UsersList.tsx | 9 +- components/pages/calendar/CalendarPage.tsx | 6 +- components/pages/calendar/EventCalendar.tsx | 2 + components/pages/calendar/InnerCalendar.tsx | 2 +- components/pages/grocery/EditGroceryItem.tsx | 1 - components/pages/grocery/GroceryItem.tsx | 2 + .../settings/user_settings_views/MyGroup.tsx | 9 +- .../user_settings_views/MyProfile.tsx | 9 +- components/pages/todos/ToDoItem.tsx | 5 ++ components/shared/AssigneesDisplay.tsx | 4 +- components/shared/HeaderTemplate.tsx | 85 +++++++++++++++---- 13 files changed, 137 insertions(+), 33 deletions(-) diff --git a/app/(auth)/calendar/index.tsx b/app/(auth)/calendar/index.tsx index 7943eb0..5a8d5c4 100644 --- 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 ( - + {Device.deviceType === DeviceType.TABLET ? ( ) : ( @@ -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={ } bounces={true} diff --git a/components/pages/(tablet_pages)/chores/TabletChoresPage.tsx b/components/pages/(tablet_pages)/chores/TabletChoresPage.tsx index f5f2559..56beca6 100644 --- a/components/pages/(tablet_pages)/chores/TabletChoresPage.tsx +++ b/components/pages/(tablet_pages)/chores/TabletChoresPage.tsx @@ -38,7 +38,14 @@ const TabletChoresPage = () => { {user.pfp ? ( ) : ( diff --git a/components/pages/(tablet_pages)/tablet_components/UsersList.tsx b/components/pages/(tablet_pages)/tablet_components/UsersList.tsx index 82b488d..f62f0c7 100644 --- a/components/pages/(tablet_pages)/tablet_components/UsersList.tsx +++ b/components/pages/(tablet_pages)/tablet_components/UsersList.tsx @@ -20,7 +20,14 @@ const UsersList = () => { ) : ( diff --git a/components/pages/calendar/CalendarPage.tsx b/components/pages/calendar/CalendarPage.tsx index d6d2d7e..005dbbe 100644 --- a/components/pages/calendar/CalendarPage.tsx +++ b/components/pages/calendar/CalendarPage.tsx @@ -8,13 +8,13 @@ export default function CalendarPage() { - + />*/} ); diff --git a/components/pages/calendar/EventCalendar.tsx b/components/pages/calendar/EventCalendar.tsx index af143af..a2bb06f 100644 --- a/components/pages/calendar/EventCalendar.tsx +++ b/components/pages/calendar/EventCalendar.tsx @@ -324,6 +324,7 @@ export const EventCalendar: React.FC = React.memo( ampm // renderCustomDateForMonth={renderCustomDateForMonth} /> + ); @@ -337,6 +338,7 @@ const styles = StyleSheet.create({ }, calHeader: { borderWidth: 0, + paddingBottom: 60, }, dayModeHeader: { alignSelf: "flex-start", diff --git a/components/pages/calendar/InnerCalendar.tsx b/components/pages/calendar/InnerCalendar.tsx index 5744bdc..269682c 100644 --- a/components/pages/calendar/InnerCalendar.tsx +++ b/components/pages/calendar/InnerCalendar.tsx @@ -25,7 +25,7 @@ export const InnerCalendar = () => { return ( <> diff --git a/components/pages/grocery/EditGroceryItem.tsx b/components/pages/grocery/EditGroceryItem.tsx index 812e98d..4f8e559 100644 --- 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); } diff --git a/components/pages/grocery/GroceryItem.tsx b/components/pages/grocery/GroceryItem.tsx index 1e8faea..246375a 100644 --- 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 }} /> ) : ( diff --git a/components/pages/settings/user_settings_views/MyGroup.tsx b/components/pages/settings/user_settings_views/MyGroup.tsx index 613b334..77856e3 100644 --- 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 = ({ > {member.pfp ? ( diff --git a/components/pages/settings/user_settings_views/MyProfile.tsx b/components/pages/settings/user_settings_views/MyProfile.tsx index e0ecc2e..cabb58c 100644 --- 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 ? ( ) : ( diff --git a/components/pages/todos/ToDoItem.tsx b/components/pages/todos/ToDoItem.tsx index 81fd8bf..4eff2c7 100644 --- 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' }} > } /> ) : ( - + {getInitials(member.firstName, member.lastName)} diff --git a/components/shared/HeaderTemplate.tsx b/components/shared/HeaderTemplate.tsx index adbf51b..6005fd4 100644 --- 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([]); 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: { - {isFamilyView && props.isCalendar && ( + {isFamilyView && props.isCalendar && children.length > 0 && ( - {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 ? ( ) : ( - + ) : ( - - - {profileData?.firstName?.at(0)} - {profileData?.lastName?.at(0)} - - + <> + + + + {profileData?.firstName?.at(0)} + {profileData?.lastName?.at(0)} + + + + {isFamilyView && props.isCalendar && children.length > 0 && ( + + {children.slice(0, 3).map((child, index) => { + { + console.log("yeaaaah"); + } + const bgColor: string = child.eventColor || colorMap.pink; + return child.pfp ? ( + + ) : ( + + + + {child?.firstName?.at(0)} + {child?.firstName?.at(1)} + + + + ); + })} + {children?.length > 3 && ( + + + +{children.length - 3} + + + )} + + )} + )} {props.isWelcome && (