ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-07-15 17:47:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed some calendar bugs

Browse Source
This commit is contained in:
ivic00
2024-11-04 20:58:18 +01:00
parent f398109d69
commit 6dc81ae653
6 changed files with 1023 additions and 942 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
components/pages/calendar/EventCalendar.tsx
View File

@ -1,19 +1,20 @@
import React, {useCallback, useEffect, useMemo, useState} from "react"; import React, { useCallback, useEffect, useMemo, useState } from "react";
import {Calendar} from "react-native-big-calendar"; import { Calendar } from "react-native-big-calendar";
import {ActivityIndicator, StyleSheet, View, ViewStyle} from "react-native"; import { ActivityIndicator, StyleSheet, View, ViewStyle } from "react-native";
import {useGetEvents} from "@/hooks/firebase/useGetEvents"; import { useGetEvents } from "@/hooks/firebase/useGetEvents";
import {useAtom, useSetAtom} from "jotai"; import { useAtom, useSetAtom } from "jotai";
import { import {
editVisibleAtom, editVisibleAtom,
eventForEditAtom, eventForEditAtom,
isAllDayAtom,
modeAtom, modeAtom,
selectedDateAtom, selectedDateAtom,
selectedNewEventDateAtom, selectedNewEventDateAtom,
} from "@/components/pages/calendar/atoms"; } from "@/components/pages/calendar/atoms";
import {useAuthContext} from "@/contexts/AuthContext"; import { useAuthContext } from "@/contexts/AuthContext";
import {CalendarEvent} from "@/components/pages/calendar/interfaces"; import { CalendarEvent } from "@/components/pages/calendar/interfaces";
import {Text} from "react-native-ui-lib"; import { Text } from "react-native-ui-lib";
import {addDays, compareAsc, isWithinInterval, subDays} from "date-fns"; import { addDays, compareAsc, isWithinInterval, subDays } from "date-fns";
interface EventCalendarProps { interface EventCalendarProps {
calendarHeight: number; calendarHeight: number;
@ -27,13 +28,14 @@ const getTotalMinutes = () => {
}; };
export const EventCalendar: React.FC<EventCalendarProps> = React.memo( export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
({calendarHeight}) => { ({ calendarHeight }) => {
const {data: events, isLoading} = useGetEvents(); const { data: events, isLoading } = useGetEvents();
const {profileData} = useAuthContext(); const { profileData } = useAuthContext();
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom); const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom); const [mode, setMode] = useAtom(modeAtom);
const setEditVisible = useSetAtom(editVisibleAtom); const setEditVisible = useSetAtom(editVisibleAtom);
const [isAllDay, setIsAllDay] = useAtom(isAllDayAtom);
const setEventForEdit = useSetAtom(eventForEditAtom); const setEventForEdit = useSetAtom(eventForEditAtom);
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom); const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
@ -45,7 +47,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
(event: CalendarEvent) => { (event: CalendarEvent) => {
if (mode === "day" || mode === "week") { if (mode === "day" || mode === "week") {
setEditVisible(true); setEditVisible(true);
console.log({event}); console.log({ event });
setEventForEdit(event); setEventForEdit(event);
} else { } else {
setMode("day"); setMode("day");
@ -67,6 +69,16 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
[mode, setSelectedNewEndDate, setSelectedDate] [mode, setSelectedNewEndDate, setSelectedDate]
); );
const handlePressDayHeader = useCallback(
(date: Date) => {
setIsAllDay(true);
console.log(isAllDay);
setSelectedNewEndDate(date);
setEditVisible(true);
},
[setSelectedNewEndDate]
);
const handleSwipeEnd = useCallback( const handleSwipeEnd = useCallback(
(date: Date) => { (date: Date) => {
setSelectedDate(date); setSelectedDate(date);
@ -75,7 +87,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
); );
const memoizedEventCellStyle = useCallback( const memoizedEventCellStyle = useCallback(
(event: CalendarEvent) => ({backgroundColor: event.eventColor}), (event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
[] []
); );
@ -84,7 +96,10 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
[profileData] [profileData]
); );
console.log({memoizedWeekStartsOn, profileData: profileData?.firstDayOfWeek}) console.log({
memoizedWeekStartsOn,
profileData: profileData?.firstDayOfWeek,
});
const isSameDate = useCallback((date1: Date, date2: Date) => { const isSameDate = useCallback((date1: Date, date2: Date) => {
return ( return (
@ -117,32 +132,34 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
} }
}, [mode]); }, [mode]);
const { enrichedEvents, filteredEvents } = useMemo(() => {
const {enrichedEvents, filteredEvents} = useMemo(() => {
const startTime = Date.now(); // Start timer const startTime = Date.now(); // Start timer
const startOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1; const startOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
const endOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1; const endOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
const filteredEvents = events?.filter(event => const filteredEvents =
event.start && event.end && events?.filter(
(event) =>
event.start &&
event.end &&
isWithinInterval(event.start, { isWithinInterval(event.start, {
start: subDays(selectedDate, startOffset), start: subDays(selectedDate, startOffset),
end: addDays(selectedDate, endOffset) end: addDays(selectedDate, endOffset),
}) && }) &&
isWithinInterval(event.end, { isWithinInterval(event.end, {
start: subDays(selectedDate, startOffset), start: subDays(selectedDate, startOffset),
end: addDays(selectedDate, endOffset) end: addDays(selectedDate, endOffset),
}) })
) ?? []; ) ?? [];
const enrichedEvents = filteredEvents.reduce((acc, event) => { const enrichedEvents = filteredEvents.reduce((acc, event) => {
const dateKey = event.start.toISOString().split('T')[0]; const dateKey = event.start.toISOString().split("T")[0];
acc[dateKey] = acc[dateKey] || []; acc[dateKey] = acc[dateKey] || [];
acc[dateKey].push({ acc[dateKey].push({
...event, ...event,
overlapPosition: false, overlapPosition: false,
overlapCount: 0 overlapCount: 0,
}); });
acc[dateKey].sort((a, b) => compareAsc(a.start, b.start)); acc[dateKey].sort((a, b) => compareAsc(a.start, b.start));
@ -151,9 +168,13 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
}, {} as Record<string, CalendarEvent[]>); }, {} as Record<string, CalendarEvent[]>);
const endTime = Date.now(); const endTime = Date.now();
console.log("memoizedEvents computation time:", endTime - startTime, "ms"); console.log(
"memoizedEvents computation time:",
endTime - startTime,
"ms"
);
return {enrichedEvents, filteredEvents}; return { enrichedEvents, filteredEvents };
}, [events, selectedDate, mode]); }, [events, selectedDate, mode]);
const renderCustomDateForMonth = (date: Date) => { const renderCustomDateForMonth = (date: Date) => {
@ -189,9 +210,9 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
const appliedStyle = isCurrentDate ? currentDateStyle : defaultStyle; const appliedStyle = isCurrentDate ? currentDateStyle : defaultStyle;
return ( return (
<View style={{alignItems: "center"}}> <View style={{ alignItems: "center" }}>
<View style={appliedStyle}> <View style={appliedStyle}>
<Text style={{color: isCurrentDate ? "white" : "black"}}> <Text style={{ color: isCurrentDate ? "white" : "black" }}>
{date.getDate()} {date.getDate()}
</Text> </Text>
</View> </View>
@ -211,7 +232,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
if (isLoading) { if (isLoading) {
return ( return (
<View style={styles.loadingContainer}> <View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#0000ff"/> <ActivityIndicator size="large" color="#0000ff" />
</View> </View>
); );
} }
@ -249,19 +270,20 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
}, },
typography: { typography: {
fontFamily: "PlusJakartaSans_500Medium", fontFamily: "PlusJakartaSans_500Medium",
sm: {fontFamily: "Manrope_600SemiBold", fontSize: 15}, sm: { fontFamily: "Manrope_600SemiBold", fontSize: 15 },
xl: { xl: {
fontFamily: "PlusJakartaSans_500Medium", fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16, fontSize: 16,
}, },
moreLabel: {}, moreLabel: {},
xs: {fontSize: 10}, xs: { fontSize: 10 },
}, },
}} }}
dayHeaderStyle={dateStyle} dayHeaderStyle={dateStyle}
dayHeaderHighlightColor={"white"} dayHeaderHighlightColor={"white"}
showAdjacentMonths showAdjacentMonths
hourStyle={styles.hourStyle} hourStyle={styles.hourStyle}
onPressDateHeader={handlePressDayHeader}
ampm ampm
// renderCustomDateForMonth={renderCustomDateForMonth} // renderCustomDateForMonth={renderCustomDateForMonth}
/> />

202
components/pages/calendar/ManuallyAddEventModal.tsx
View File

@ -14,36 +14,40 @@ import {
TouchableOpacity, TouchableOpacity,
View, View,
} from "react-native-ui-lib"; } from "react-native-ui-lib";
import {ScrollView} from "react-native-gesture-handler"; import { ScrollView } from "react-native-gesture-handler";
import {useSafeAreaInsets} from "react-native-safe-area-context"; import { useSafeAreaInsets } from "react-native-safe-area-context";
import {useEffect, useRef, useState} from "react"; import { useEffect, useRef, useState } from "react";
import {AntDesign, Feather, Ionicons} from "@expo/vector-icons"; import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
import {PickerMultiValue} from "react-native-ui-lib/src/components/picker/types"; import { PickerMultiValue } from "react-native-ui-lib/src/components/picker/types";
import {useCreateEvent} from "@/hooks/firebase/useCreateEvent"; import { useCreateEvent } from "@/hooks/firebase/useCreateEvent";
import {EventData} from "@/hooks/firebase/types/eventData"; import { EventData } from "@/hooks/firebase/types/eventData";
import {addHours} from "date-fns"; import { addHours } from "date-fns";
import DropModalIcon from "@/assets/svgs/DropModalIcon"; import DropModalIcon from "@/assets/svgs/DropModalIcon";
import {StyleSheet} from "react-native"; import { StyleSheet } from "react-native";
import ClockIcon from "@/assets/svgs/ClockIcon"; import ClockIcon from "@/assets/svgs/ClockIcon";
import LockIcon from "@/assets/svgs/LockIcon"; import LockIcon from "@/assets/svgs/LockIcon";
import MenuIcon from "@/assets/svgs/MenuIcon"; import MenuIcon from "@/assets/svgs/MenuIcon";
import CameraIcon from "@/assets/svgs/CameraIcon"; import CameraIcon from "@/assets/svgs/CameraIcon";
import AssigneesDisplay from "@/components/shared/AssigneesDisplay"; import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
import {useAtom} from "jotai"; import { useAtom, useAtomValue } from "jotai";
import {eventForEditAtom, selectedNewEventDateAtom,} from "@/components/pages/calendar/atoms"; import {
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers"; eventForEditAtom,
selectedNewEventDateAtom,
isAllDayAtom,
} from "@/components/pages/calendar/atoms";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import BinIcon from "@/assets/svgs/BinIcon"; import BinIcon from "@/assets/svgs/BinIcon";
import DeleteEventDialog from "./DeleteEventDialog"; import DeleteEventDialog from "./DeleteEventDialog";
import {useDeleteEvent} from "@/hooks/firebase/useDeleteEvent"; import { useDeleteEvent } from "@/hooks/firebase/useDeleteEvent";
const daysOfWeek = [ const daysOfWeek = [
{label: "Monday", value: "monday"}, { label: "Monday", value: "monday" },
{label: "Tuesday", value: "tuesday"}, { label: "Tuesday", value: "tuesday" },
{label: "Wednesday", value: "wednesday"}, { label: "Wednesday", value: "wednesday" },
{label: "Thursday", value: "thursday"}, { label: "Thursday", value: "thursday" },
{label: "Friday", value: "friday"}, { label: "Friday", value: "friday" },
{label: "Saturday", value: "saturday"}, { label: "Saturday", value: "saturday" },
{label: "Sunday", value: "sunday"}, { label: "Sunday", value: "sunday" },
]; ];
export const ManuallyAddEventModal = () => { export const ManuallyAddEventModal = () => {
@ -53,10 +57,11 @@ export const ManuallyAddEventModal = () => {
selectedNewEventDateAtom selectedNewEventDateAtom
); );
const [editEvent, setEditEvent] = useAtom(eventForEditAtom); const [editEvent, setEditEvent] = useAtom(eventForEditAtom);
const [allDayAtom, setAllDayAtom] = useAtom(isAllDayAtom);
const [deleteModalVisible, setDeleteModalVisible] = useState<boolean>(false); const [deleteModalVisible, setDeleteModalVisible] = useState<boolean>(false);
const {mutateAsync: deleteEvent, isLoading: isDeleting} = useDeleteEvent() const { mutateAsync: deleteEvent, isLoading: isDeleting } = useDeleteEvent();
const {show, close, initialDate} = { const { show, close, initialDate } = {
show: !!selectedNewEventDate || !!editEvent, show: !!selectedNewEventDate || !!editEvent,
close: () => { close: () => {
setDeleteModalVisible(false); setDeleteModalVisible(false);
@ -74,22 +79,51 @@ export const ManuallyAddEventModal = () => {
const [isPrivate, setIsPrivate] = useState<boolean>( const [isPrivate, setIsPrivate] = useState<boolean>(
editEvent?.private || false editEvent?.private || false
); );
useEffect(() => {
console.log(allDayAtom);
return () => {
setAllDayAtom(false);
};
}, []);
const [startTime, setStartTime] = useState(() => { const [startTime, setStartTime] = useState(() => {
const date = initialDate ?? new Date(); const date = initialDate ?? new Date();
date.setSeconds(0, 0); if (
date.getMinutes() > 0 ||
date.getSeconds() > 0 ||
date.getMilliseconds() > 0
) {
date.setHours(date.getHours() + 1);
}
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
return date; return date;
}); });
const [endTime, setEndTime] = useState(() => { const [endTime, setEndTime] = useState(() => {
if (editEvent?.end) { if (editEvent?.end) {
const date = new Date(editEvent.end); const date = new Date(editEvent.end);
date.setSeconds(0, 0); date.setSeconds(0, 0);
return date; return date;
} }
const date =
editEvent?.end ?? initialDate const baseDate = editEvent?.end ?? initialDate ?? new Date();
? addHours(editEvent?.end ?? initialDate!, 1) const date = new Date(baseDate);
: addHours(new Date(), 1);
date.setSeconds(0, 0); if (
date.getMinutes() > 0 ||
date.getSeconds() > 0 ||
date.getMilliseconds() > 0
) {
date.setHours(date.getHours() + 1);
}
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
date.setHours(date.getHours() + 1);
return date; return date;
}); });
const [startDate, setStartDate] = useState(initialDate ?? new Date()); const [startDate, setStartDate] = useState(initialDate ?? new Date());
@ -101,35 +135,57 @@ export const ManuallyAddEventModal = () => {
); );
const [repeatInterval, setRepeatInterval] = useState<PickerMultiValue>([]); const [repeatInterval, setRepeatInterval] = useState<PickerMultiValue>([]);
const {mutateAsync: createEvent, isLoading: isAdding, isError} = useCreateEvent(); const {
const {data: members} = useGetFamilyMembers(true); mutateAsync: createEvent,
const titleRef = useRef<TextFieldRef>(null) isLoading: isAdding,
isError,
} = useCreateEvent();
const { data: members } = useGetFamilyMembers(true);
const titleRef = useRef<TextFieldRef>(null);
const isLoading = isDeleting || isAdding const isLoading = isDeleting || isAdding;
useEffect(() => { useEffect(() => {
setTitle(editEvent?.title || ""); setTitle(editEvent?.title || "");
setDetails(editEvent?.notes || ""); setDetails(editEvent?.notes || "");
setIsAllDay(editEvent?.allDay || false); setIsAllDay(editEvent?.allDay || false);
setIsPrivate(editEvent?.private || false); setIsPrivate(editEvent?.private || false);
setStartTime(() => { setStartTime(() => {
const date = initialDate ?? new Date(); const date = new Date(initialDate ?? new Date());
date.setSeconds(0, 0); const minutes = date.getMinutes();
date.setMinutes(0, 0, 0);
if (minutes >= 30) {
date.setHours(date.getHours() + 1);
}
return date; return date;
}); });
setEndTime(() => { setEndTime(() => {
if (editEvent?.end) { if (editEvent?.end) {
const date = new Date(editEvent.end); const date = new Date(editEvent.end);
date.setSeconds(0, 0); date.setSeconds(0, 0);
return date; return date;
} }
const date =
editEvent?.end ?? initialDate const baseDate = editEvent?.end ?? initialDate ?? new Date();
? addHours(editEvent?.end ?? initialDate!, 1) const date = new Date(baseDate);
: addHours(new Date(), 1);
date.setSeconds(0, 0); if (
date.getMinutes() > 0 ||
date.getSeconds() > 0 ||
date.getMilliseconds() > 0
) {
date.setHours(date.getHours() + 1);
}
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
date.setHours(date.getHours() + 1);
return date; return date;
}); });
setStartDate(initialDate ?? new Date()); setStartDate(initialDate ?? new Date());
setEndDate(editEvent?.end ?? initialDate ?? new Date()); setEndDate(editEvent?.end ?? initialDate ?? new Date());
setSelectedAttendees(editEvent?.participants ?? []); setSelectedAttendees(editEvent?.participants ?? []);
@ -137,9 +193,9 @@ export const ManuallyAddEventModal = () => {
}, [editEvent, selectedNewEventDate]); }, [editEvent, selectedNewEventDate]);
useEffect(() => { useEffect(() => {
if(show && !editEvent) { if (show && !editEvent) {
setTimeout(() => { setTimeout(() => {
titleRef?.current?.focus() titleRef?.current?.focus();
}, 500); }, 500);
} }
}, [selectedNewEventDate]); }, [selectedNewEventDate]);
@ -160,8 +216,8 @@ export const ManuallyAddEventModal = () => {
}; };
const handleDeleteEvent = async () => { const handleDeleteEvent = async () => {
await deleteEvent({eventId: `${editEvent?.id}`}) await deleteEvent({ eventId: `${editEvent?.id}` });
close() close();
}; };
const hideDeleteEventModal = () => { const hideDeleteEventModal = () => {
@ -246,7 +302,10 @@ export const ManuallyAddEventModal = () => {
onRequestClose={close} onRequestClose={close}
transparent={false} transparent={false}
> >
<LoaderScreen message={isDeleting ? "Deleting event..." : "Saving event..."} color={Colors.grey40}/> <LoaderScreen
message={isDeleting ? "Deleting event..." : "Saving event..."}
color={Colors.grey40}
/>
</Modal> </Modal>
); );
} }
@ -321,7 +380,7 @@ export const ManuallyAddEventModal = () => {
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
<View row center> <View row center>
<DropModalIcon onPress={close}/> <DropModalIcon onPress={close} />
</View> </View>
<View flexS row gap-10> <View flexS row gap-10>
<TouchableOpacity onPress={handleSave}> <TouchableOpacity onPress={handleSave}>
@ -340,15 +399,14 @@ export const ManuallyAddEventModal = () => {
<Button <Button
style={styles.topBtn} style={styles.topBtn}
marginL-5 marginL-5
iconSource={() => <BinIcon/>} iconSource={() => <BinIcon />}
onPress={showDeleteEventModal} onPress={showDeleteEventModal}
/> />
)} )}
</View> </View>
</View> </View>
{/*)}*/} {/*)}*/}
<ScrollView style={{minHeight: "85%"}}> <ScrollView style={{ minHeight: "85%" }}>
<TextField <TextField
placeholder="Add event title" placeholder="Add event title"
ref={titleRef} ref={titleRef}
@ -357,16 +415,16 @@ export const ManuallyAddEventModal = () => {
setTitle(text); setTitle(text);
}} }}
placeholderTextColor="#2d2d30" placeholderTextColor="#2d2d30"
style={{fontFamily: "Manrope_500Medium", fontSize: 22}} style={{ fontFamily: "Manrope_500Medium", fontSize: 22 }}
paddingT-15 paddingT-15
paddingL-30 paddingL-30
returnKeyType="next" returnKeyType="next"
/> />
<View style={styles.divider} marginT-8/> <View style={styles.divider} marginT-8 />
<View marginL-30 centerV> <View marginL-30 centerV>
<View row spread marginB-10 centerV> <View row spread marginB-10 centerV>
<View row> <View row>
<AntDesign name="clockcircleo" size={24} color="#919191"/> <AntDesign name="clockcircleo" size={24} color="#919191" />
<Text <Text
style={{ style={{
fontFamily: "PlusJakartaSans_500Medium", fontFamily: "PlusJakartaSans_500Medium",
@ -389,7 +447,7 @@ export const ManuallyAddEventModal = () => {
</View> </View>
<View row marginB-10 spread> <View row marginB-10 spread>
<View row centerV> <View row centerV>
<Feather name="calendar" size={25} color="#919191"/> <Feather name="calendar" size={25} color="#919191" />
<DateTimePicker <DateTimePicker
value={startDate} value={startDate}
onChange={(date) => { onChange={(date) => {
@ -429,7 +487,7 @@ export const ManuallyAddEventModal = () => {
{!isAllDay && ( {!isAllDay && (
<View row marginB-10 spread> <View row marginB-10 spread>
<View row centerV> <View row centerV>
<Feather name="calendar" size={25} color="#919191"/> <Feather name="calendar" size={25} color="#919191" />
<DateTimePicker <DateTimePicker
value={endDate} value={endDate}
minimumDate={startDate} minimumDate={startDate}
@ -470,30 +528,30 @@ export const ManuallyAddEventModal = () => {
)} )}
</View> </View>
<View style={styles.divider}/> <View style={styles.divider} />
<View marginH-30 marginB-10 row centerV> <View marginH-30 marginB-10 row centerV>
<Ionicons name="person-circle-outline" size={28} color="#919191"/> <Ionicons name="person-circle-outline" size={28} color="#919191" />
<Text <Text
style={{fontFamily: "Manrope_600SemiBold", fontSize: 18}} style={{ fontFamily: "Manrope_600SemiBold", fontSize: 18 }}
marginL-10 marginL-10
> >
Attendees Attendees
</Text> </Text>
<View flex-1/> <View flex-1 />
<Picker <Picker
value={selectedAttendees} value={selectedAttendees}
onChange={(value) => onChange={(value) =>
setSelectedAttendees((value as string[]) ?? []) setSelectedAttendees((value as string[]) ?? [])
} }
style={{marginLeft: "auto"}} style={{ marginLeft: "auto" }}
mode={PickerModes.MULTI} mode={PickerModes.MULTI}
renderInput={() => ( renderInput={() => (
<Button <Button
size={ButtonSize.small} size={ButtonSize.small}
paddingH-8 paddingH-8
iconSource={() => ( iconSource={() => (
<Ionicons name="add-outline" size={20} color="#ea156c"/> <Ionicons name="add-outline" size={20} color="#ea156c" />
)} )}
style={{ style={{
marginLeft: "auto", marginLeft: "auto",
@ -528,10 +586,10 @@ export const ManuallyAddEventModal = () => {
/> />
</View> </View>
<View style={styles.divider}/> <View style={styles.divider} />
<View marginH-30 marginB-0 row spread centerV> <View marginH-30 marginB-0 row spread centerV>
<View row centerV> <View row centerV>
<ClockIcon/> <ClockIcon />
<Text <Text
style={{ style={{
fontFamily: "Manrope_600SemiBold", fontFamily: "Manrope_600SemiBold",
@ -547,7 +605,7 @@ export const ManuallyAddEventModal = () => {
size={ButtonSize.small} size={ButtonSize.small}
paddingH-8 paddingH-8
iconSource={() => ( iconSource={() => (
<Ionicons name="add-outline" size={20} color="#ea156c"/> <Ionicons name="add-outline" size={20} color="#ea156c" />
)} )}
style={{ style={{
marginLeft: "auto", marginLeft: "auto",
@ -556,16 +614,16 @@ export const ManuallyAddEventModal = () => {
borderColor: "#ea156c", borderColor: "#ea156c",
borderWidth: 1, borderWidth: 1,
}} }}
labelStyle={{fontFamily: "Manrope_600SemiBold", fontSize: 14}} labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
color="#ea156c" color="#ea156c"
label="Set Reminder" label="Set Reminder"
/> />
</View> </View>
</View> </View>
<View style={styles.divider}/> <View style={styles.divider} />
<View marginH-30 marginB-0 row spread centerV> <View marginH-30 marginB-0 row spread centerV>
<View row center> <View row center>
<LockIcon/> <LockIcon />
<Text <Text
style={{ style={{
fontFamily: "PlusJakartaSans_500Medium", fontFamily: "PlusJakartaSans_500Medium",
@ -587,11 +645,11 @@ export const ManuallyAddEventModal = () => {
/> />
</View> </View>
</View> </View>
<View style={styles.divider}/> <View style={styles.divider} />
<View marginH-30 marginB-0 spread centerV flex-1> <View marginH-30 marginB-0 spread centerV flex-1>
<TouchableOpacity onPress={() => detailsRef?.current?.focus()}> <TouchableOpacity onPress={() => detailsRef?.current?.focus()}>
<View row centerV> <View row centerV>
<MenuIcon/> <MenuIcon />
<Text <Text
style={{ style={{
fontFamily: "PlusJakartaSans_500Medium", fontFamily: "PlusJakartaSans_500Medium",
@ -612,7 +670,7 @@ export const ManuallyAddEventModal = () => {
multiline multiline
numberOfLines={10} numberOfLines={10}
marginT-10 marginT-10
style={{flex: 1, minHeight: 180}} style={{ flex: 1, minHeight: 180 }}
/> />
</View> </View>
</ScrollView> </ScrollView>
@ -622,12 +680,12 @@ export const ManuallyAddEventModal = () => {
marginB-30 marginB-30
label="Create event from image" label="Create event from image"
text70 text70
style={{height: 47}} style={{ height: 47 }}
labelStyle={{fontFamily: "PlusJakartaSans_500Medium", fontSize: 15}} labelStyle={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 15 }}
backgroundColor="#05a8b6" backgroundColor="#05a8b6"
iconSource={() => ( iconSource={() => (
<View marginR-5> <View marginR-5>
<CameraIcon color="white"/> <CameraIcon color="white" />
</View> </View>
)} )}
/> />
@ -645,7 +703,7 @@ export const ManuallyAddEventModal = () => {
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
divider: {height: 1, backgroundColor: "#e4e4e4", marginVertical: 15}, divider: { height: 1, backgroundColor: "#e4e4e4", marginVertical: 15 },
gradient: { gradient: {
height: "25%", height: "25%",
position: "absolute", position: "absolute",

1
components/pages/calendar/atoms.ts
View File

@ -2,6 +2,7 @@ import { atom } from "jotai";
import { CalendarEvent } from "@/components/pages/calendar/interfaces"; import { CalendarEvent } from "@/components/pages/calendar/interfaces";
export const editVisibleAtom = atom<boolean>(false); export const editVisibleAtom = atom<boolean>(false);
export const isAllDayAtom = atom<boolean>(false);
export const eventForEditAtom = atom<CalendarEvent | undefined>(undefined); export const eventForEditAtom = atom<CalendarEvent | undefined>(undefined);
export const isFamilyViewAtom = atom<boolean>(false); export const isFamilyViewAtom = atom<boolean>(false);
export const modeAtom = atom<"week" | "month" | "day">("week"); export const modeAtom = atom<"week" | "month" | "day">("week");

4
components/pages/settings/user_components/DeleteProfileDialogs.tsx
View File

@ -25,7 +25,7 @@ const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
containerStyle={styles.dialog} containerStyle={styles.dialog}
> >
<View centerH> <View centerH>
<Feather name="alert-triangle" size={70} color="#FF5449" /> <Feather name="alert-triangle" size={70} color="#ff1637" />
</View> </View>
<Text center style={styles.title}> <Text center style={styles.title}>
Are you sure? Are you sure?
@ -101,7 +101,7 @@ const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
// Empty stylesheet for future styles // Empty stylesheet for future styles
const styles = StyleSheet.create({ const styles = StyleSheet.create({
confirmBtn: { confirmBtn: {
backgroundColor: "#FF5449", backgroundColor: "#ff1637",
}, },
cancelBtn: { cancelBtn: {
backgroundColor: "white", backgroundColor: "white",

2
components/pages/settings/user_settings_views/MyProfile.tsx
View File

@ -217,7 +217,7 @@ const MyProfile = () => {
</View> </View>
<Button <Button
size="large" size="large"
backgroundColor="#FF5449" backgroundColor="#ff1637"
label="Delete Profile" label="Delete Profile"
style={{ marginTop: 10 }} style={{ marginTop: 10 }}
labelStyle={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 15 }} labelStyle={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 15 }}

2
components/pages/todos/ToDoItem.tsx
View File

@ -111,7 +111,7 @@ const ToDoItem = (props: {
height={0.7} height={0.7}
width={"100%"} width={"100%"}
style={{ style={{
backgroundColor: props.item.done ? "#b8b8b8" : "#e7e7e7", backgroundColor: "#e7e7e7",
}} }}
centerH centerH
/> />