From 0f75be8d1e07aa88330bb69385785c9265075cd9 Mon Sep 17 00:00:00 2001 From: Dejan Date: Tue, 15 Oct 2024 20:34:18 +0200 Subject: [PATCH 1/4] Fixed issue with groceries update --- components/pages/grocery/EditGroceryItem.tsx | 26 ++++++++++++-------- components/pages/grocery/GroceryItem.tsx | 18 +++++++------- 2 files changed, 25 insertions(+), 19 deletions(-) diff --git a/components/pages/grocery/EditGroceryItem.tsx b/components/pages/grocery/EditGroceryItem.tsx index 6162c44..cfdb56d 100644 --- a/components/pages/grocery/EditGroceryItem.tsx +++ b/components/pages/grocery/EditGroceryItem.tsx @@ -1,17 +1,17 @@ import {Text, View} from "react-native"; import React, {useEffect, useRef} from "react"; import {TextField, TextFieldRef} from "react-native-ui-lib"; -import {GroceryCategory, IGrocery, useGroceryContext,} from "@/contexts/GroceryContext"; +import {GroceryCategory, useGroceryContext,} from "@/contexts/GroceryContext"; interface IEditGrocery { - id?: number; + id?: string; title: string; + category: GroceryCategory; setTitle: (value: string) => void; setCategory?: (category: GroceryCategory) => void; - category: GroceryCategory; setSubmit?: (value: boolean) => void; - updateCategory?: (id: number, changes: Partial) => void; closeEdit?: (value: boolean) => void; + handleEditSubmit?: Function } const EditGroceryItem = ({editGrocery}: { editGrocery: IEditGrocery }) => { @@ -49,12 +49,18 @@ const EditGroceryItem = ({editGrocery}: { editGrocery: IEditGrocery }) => { editGrocery.setTitle(value); }} onSubmitEditing={() => { - if (editGrocery.setSubmit) editGrocery.setSubmit(true); - if (editGrocery.closeEdit) editGrocery.closeEdit(false); - if (editGrocery.updateCategory && editGrocery.id) - editGrocery.updateCategory(editGrocery.id, { - category: fuzzyMatchGroceryCategory(editGrocery.title), title: editGrocery.title - }); + if (editGrocery.setSubmit) { + editGrocery.setSubmit(true); + } + if (editGrocery.setCategory) { + editGrocery.setCategory(fuzzyMatchGroceryCategory(editGrocery.title)); + } + if (editGrocery.handleEditSubmit) { + editGrocery.handleEditSubmit({id: editGrocery.id, title: editGrocery.title, category: editGrocery.category}); + } + if (editGrocery.closeEdit) { + editGrocery.closeEdit(false); + } }} maxLength={25} /> diff --git a/components/pages/grocery/GroceryItem.tsx b/components/pages/grocery/GroceryItem.tsx index 1e45dc3..cfc0e36 100644 --- a/components/pages/grocery/GroceryItem.tsx +++ b/components/pages/grocery/GroceryItem.tsx @@ -80,15 +80,15 @@ const GroceryItem = ({ ) : ( )} {!item.approved ? ( From dc05090f4925ab374d2ef9ed4821ac43a74aca7c Mon Sep 17 00:00:00 2001 From: Dejan Date: Tue, 15 Oct 2024 22:31:53 +0200 Subject: [PATCH 2/4] - Implemented editing of the todos - Modified the AddChoreDialog.tsx to be able to edit or add new items --- components/pages/todos/AddChore.tsx | 28 ++------- components/pages/todos/AddChoreDialog.tsx | 70 ++++++++++++----------- components/pages/todos/ToDoItem.tsx | 44 +++++--------- hooks/firebase/types/todoData.ts | 2 +- 4 files changed, 55 insertions(+), 89 deletions(-) diff --git a/components/pages/todos/AddChore.tsx b/components/pages/todos/AddChore.tsx index aface01..5e64af0 100644 --- a/components/pages/todos/AddChore.tsx +++ b/components/pages/todos/AddChore.tsx @@ -1,34 +1,14 @@ import { StyleSheet } from "react-native"; -import React, { useEffect, useState } from "react"; -import { - Button, - ButtonSize, - View, - Text, - ActionSheet, - TextField, - Dialog, - Slider, - NumberInput, - NumberInputData, - DateTimePicker, - Switch, - Picker, -} from "react-native-ui-lib"; -import { AntDesign, Feather, Ionicons } from "@expo/vector-icons"; +import React, { useState } from "react"; +import { Button, ButtonSize, Text, View } from "react-native-ui-lib"; +import { AntDesign } from "@expo/vector-icons"; import LinearGradient from "react-native-linear-gradient"; -import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/panningViews/panningProvider"; -import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext"; -import { setDate } from "date-fns"; -import PointsSlider from "@/components/shared/PointsSlider"; import AddChoreDialog from "./AddChoreDialog"; const AddChore = () => { const [isVisible, setIsVisible] = useState(false); - - return ( { - + ); }; diff --git a/components/pages/todos/AddChoreDialog.tsx b/components/pages/todos/AddChoreDialog.tsx index 5d29561..9b9e71c 100644 --- a/components/pages/todos/AddChoreDialog.tsx +++ b/components/pages/todos/AddChoreDialog.tsx @@ -13,26 +13,31 @@ import { import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView"; import { StyleSheet } from "react-native"; import DropModalIcon from "@/assets/svgs/DropModalIcon"; +import { IToDo } from "@/hooks/firebase/types/todoData"; interface IAddChoreDialog { isVisible: boolean; setIsVisible: (value: boolean) => void; + selectedTodo?: IToDo } -const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => { - const { addToDo, toDos } = useToDosContext(); - const [newTitle, setNewTitle] = useState(""); - const [points, setPoints] = useState(10); - const [choreDate, setChoreDate] = useState(new Date()); - const [rotate, setRotate] = useState(false); - const [repeatType, setRepeatType] = useState("Every week"); +const defaultTodo = { + id: "", + title: "", + points: 10, + date: new Date(), + rotate: false, + repeatType: "Every week" +}; + +const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => { + const { addToDo, updateToDo } = useToDosContext(); + const [todo, setTodo] = useState(addChoreDialogProps.selectedTodo ?? defaultTodo) + + const [points, setPoints] = useState(todo.points); const handleClose = () => { - setNewTitle(""); - setPoints(10); - setChoreDate(new Date()); - setRotate(false); - setRepeatType("every week"); + setTodo(defaultTodo); addChoreDialogProps.setIsVisible(false); }; @@ -45,6 +50,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => { setPoints(0); } }; + return ( { label="Save" onPress={() => { try { - addToDo({ - id: "", - title: newTitle, - done: false, - date: choreDate, - points: points, - rotate: rotate, - repeatType: repeatType, - }); + if (addChoreDialogProps.selectedTodo) { + updateToDo({...todo, points: points}) + } else { + addToDo({ + ...todo, + done: false, + points: points, + }); + } handleClose(); } catch (error) { console.error(error); @@ -102,9 +108,9 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => { { - setNewTitle(text); + setTodo((oldValue: IToDo) => ({...oldValue, title: text})); }} placeholderTextColor="#2d2d30" text60R @@ -114,15 +120,15 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => { - {choreDate && ( + {todo?.date && ( { - setChoreDate(date); + setTodo((oldValue: IToDo) => ({...oldValue, date: date})); }} /> @@ -133,15 +139,13 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => { { if (value) { if (value.toString() == "None") { - setChoreDate(null); - setRepeatType("None"); + setTodo((oldValue) => ({...oldValue, date: null, repeatType: "None"})); } else { - setRepeatType(value.toString()); - setChoreDate(new Date()); + setTodo((oldValue) => ({...oldValue, date: new Date(), repeatType: value.toString()})) } } }} @@ -206,9 +210,9 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => { Take Turns setRotate(value)} + onValueChange={(value) => setTodo((oldValue) => ({...oldValue, rotate: value}))} /> diff --git a/components/pages/todos/ToDoItem.tsx b/components/pages/todos/ToDoItem.tsx index b4c5948..1eeeeb0 100644 --- a/components/pages/todos/ToDoItem.tsx +++ b/components/pages/todos/ToDoItem.tsx @@ -2,19 +2,18 @@ import { View, Text, Checkbox, - TextField, TouchableOpacity, - Modal, Dialog, Button, ButtonSize, } from "react-native-ui-lib"; -import React, { useEffect, useState } from "react"; +import React, { useState } from "react"; import { useToDosContext } from "@/contexts/ToDosContext"; import { Ionicons } from "@expo/vector-icons"; import PointsSlider from "@/components/shared/PointsSlider"; import { IToDo } from "@/hooks/firebase/types/todoData"; import { ImageBackground } from "react-native"; +import AddChoreDialog from "@/components/pages/todos/AddChoreDialog"; const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => { const { updateToDo } = useToDosContext(); @@ -43,38 +42,21 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => { opacity: props.item.done ? 0.3 : 1, }} > + - {!editing ? ( - { - if (props.isSettings) { - setEditing(true); - } - }} - > - {props.item.title} - - ) : ( - { - updateToDo({ id: props.item.id, title: text }); - }} - onSubmitEditing={() => { - setEditing(false); - }} - onBlur={() => { - setEditing(false); - }} - /> - )} + }} + onPress={() => { + setEditing(true); + }} + > + {props.item.title} + Date: Tue, 15 Oct 2024 22:52:53 +0200 Subject: [PATCH 3/4] - Sorted the todo list and showed the todos by sorted date --- components/pages/todos/ToDosList.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/pages/todos/ToDosList.tsx b/components/pages/todos/ToDosList.tsx index 3492785..0a68263 100644 --- a/components/pages/todos/ToDosList.tsx +++ b/components/pages/todos/ToDosList.tsx @@ -7,7 +7,8 @@ import { AntDesign } from "@expo/vector-icons"; import {IToDo} from "@/hooks/firebase/types/todoData"; const groupToDosByDate = (toDos: IToDo[]) => { - return toDos.reduce((groups, toDo) => { + let sortedTodos = toDos.sort((a, b) => a.date - b.date); + return sortedTodos.reduce((groups, toDo) => { let dateKey; if (toDo.date === null) { From 43d0d670445595429f97ac1fba3fb8827f9aa957 Mon Sep 17 00:00:00 2001 From: ivic00 <102467664+ivic00@users.noreply.github.com> Date: Tue, 15 Oct 2024 23:07:21 +0200 Subject: [PATCH 4/4] new fonts, ui tweaks --- app/(auth)/_layout.tsx | 20 +- app/_layout.tsx | 74 +++- assets/images/child-picture.png | Bin 2052 -> 7889 bytes assets/images/child1-picture.png | Bin 4547 -> 7046 bytes assets/svgs/AddImageIcon.tsx | 20 ++ assets/svgs/AddPersonIcon.tsx | 19 + assets/svgs/MenuIcon.tsx | 1 + assets/svgs/NavCalendarIcon.tsx | 3 +- assets/svgs/NavToDosIcon.tsx | 9 +- assets/svgs/ProfileIcon.tsx | 5 +- assets/svgs/RemindersIcon.tsx | 21 ++ components/pages/brain_dump/BrainDumpPage.tsx | 2 +- components/pages/brain_dump/DumpItem.tsx | 9 +- components/pages/brain_dump/MoveBrainDump.tsx | 70 +++- components/pages/calendar/AddEventDialog.tsx | 80 +++-- components/pages/calendar/CalendarPage.tsx | 333 +++++++++--------- .../pages/calendar/CalendarViewSwitch.tsx | 8 +- .../pages/calendar/ManuallyAddEventModal.tsx | 186 ++++++---- .../pages/calendar/UploadImageDialog.tsx | 86 +++-- components/pages/grocery/GroceryItem.tsx | 64 ++-- components/pages/grocery/GroceryList.tsx | 49 ++- .../pages/settings/CalendarSettingsPage.tsx | 112 ++++-- .../pages/settings/ChoreRewardSettings.tsx | 16 +- components/pages/settings/SettingsPage.tsx | 26 +- components/pages/settings/UserSettings.tsx | 24 +- .../settings/user_settings_views/MyGroup.tsx | 6 +- .../user_settings_views/MyProfile.tsx | 202 ++++++----- components/pages/todos/ToDoItem.tsx | 20 +- components/shared/AssigneesDisplay.tsx | 23 ++ components/shared/DrawerButton.tsx | 4 +- components/shared/HeaderTemplate.tsx | 6 +- components/shared/RemoveAssigneeBtn.tsx | 27 ++ package.json | 2 + yarn.lock | 10 + 34 files changed, 992 insertions(+), 545 deletions(-) create mode 100644 assets/svgs/AddImageIcon.tsx create mode 100644 assets/svgs/AddPersonIcon.tsx create mode 100644 assets/svgs/RemindersIcon.tsx create mode 100644 components/shared/AssigneesDisplay.tsx create mode 100644 components/shared/RemoveAssigneeBtn.tsx diff --git a/app/(auth)/_layout.tsx b/app/(auth)/_layout.tsx index 714d3b4..36768ba 100644 --- a/app/(auth)/_layout.tsx +++ b/app/(auth)/_layout.tsx @@ -43,7 +43,7 @@ export default function TabLayout() { return ( - Welcome to Cally + Welcome to Cally props.navigation.navigate("settings")} label={"Manage Settings"} - labelStyle={{fontFamily: "Manrope_500Medium"}} + labelStyle={styles.label} iconSource={() => ( ); }; @@ -129,6 +168,17 @@ const styles = StyleSheet.create({ marginBottom: 10, marginTop: 25, }, + optionsReg: { + fontSize: 16, + fontFamily: "PlusJakartaSans_400Regular", + }, + optionsBold: { + fontSize: 16, + fontFamily: "PlusJakartaSans_600SemiBold", + }, + optionsIcon: { + marginRight: 10, + }, }); export default MoveBrainDump; diff --git a/components/pages/calendar/AddEventDialog.tsx b/components/pages/calendar/AddEventDialog.tsx index 0ef37a6..4e92c30 100644 --- a/components/pages/calendar/AddEventDialog.tsx +++ b/components/pages/calendar/AddEventDialog.tsx @@ -14,11 +14,14 @@ import { Text, View, } from "react-native-ui-lib"; -import { TouchableOpacity } from "react-native"; +import { StyleSheet, TouchableOpacity } from "react-native"; import { ManuallyAddEventModal } from "@/components/pages/calendar/ManuallyAddEventModal"; import AddChoreDialog from "../todos/AddChoreDialog"; import { ToDosContextProvider } from "@/contexts/ToDosContext"; import UploadImageDialog from "./UploadImageDialog"; +import CameraIcon from "@/assets/svgs/CameraIcon"; +import CalendarIcon from "@/assets/svgs/CalendarIcon"; +import NavToDosIcon from "@/assets/svgs/NavToDosIcon"; export const AddEventDialog = () => { const [show, setShow] = useState(false); @@ -60,9 +63,9 @@ export const AddEventDialog = () => { > - - New - + + New + @@ -72,16 +75,10 @@ export const AddEventDialog = () => { panDirection={PanningProvider.Directions.DOWN} center > - - Create a new event + + + Create a new event + { paddingVertical: 13, }} label="Scan Image" + labelStyle={styles.btnLabel} onPress={handleScanImageDialog} iconSource={() => ( - + )} /> @@ -115,14 +108,10 @@ export const AddEventDialog = () => { paddingVertical: 13, }} label="Create Event" + labelStyle={styles.btnLabel} onPress={handleOpenManualInputModal} iconSource={() => ( - + )} /> @@ -135,20 +124,20 @@ export const AddEventDialog = () => { paddingVertical: 13, }} label="Add To Do" + labelStyle={styles.btnLabel} onPress={() => setChoreDialogVisible(true)} iconSource={() => ( - )} /> setShow(false)}> - + Go back to calendar @@ -170,3 +159,30 @@ export const AddEventDialog = () => { ); }; + +const styles = StyleSheet.create({ + modalTitle: { + fontSize: 22, + fontFamily: "Manrope_600SemiBold", + marginBottom: 16, + }, + bottomText: { + marginTop: 20, + color: "#999999", + fontSize: 13.53, + fontFamily: "Poppins_500Medium", + }, + dialogCard: { + paddingHorizontal: 40, + paddingTop: 35, + paddingBottom: 20, + justifyContent: "center", + alignItems: "center", + borderRadius: 20, + }, + btnLabel: { + fontSize: 15, + fontFamily: "PlusJakartaSans_500Medium", + }, + btnIcon: { marginRight: 10 }, +}); diff --git a/components/pages/calendar/CalendarPage.tsx b/components/pages/calendar/CalendarPage.tsx index b928bfa..8c953fc 100644 --- a/components/pages/calendar/CalendarPage.tsx +++ b/components/pages/calendar/CalendarPage.tsx @@ -1,186 +1,201 @@ -import React, {useRef, useState} from "react"; -import {LayoutChangeEvent, StyleSheet} from "react-native"; -import {Calendar} from "react-native-big-calendar"; -import {Picker, PickerModes, SegmentedControl, View} from "react-native-ui-lib"; -import {MaterialIcons} from "@expo/vector-icons"; -import {AddEventDialog} from "@/components/pages/calendar/AddEventDialog"; +import React, { useRef, useState } from "react"; +import { LayoutChangeEvent, StyleSheet } from "react-native"; +import { Calendar } from "react-native-big-calendar"; +import { + Picker, + PickerModes, + SegmentedControl, + View, +} from "react-native-ui-lib"; +import { MaterialIcons } from "@expo/vector-icons"; +import { AddEventDialog } from "@/components/pages/calendar/AddEventDialog"; import HeaderTemplate from "@/components/shared/HeaderTemplate"; import CalendarViewSwitch from "@/components/pages/calendar/CalendarViewSwitch"; -import {ManuallyAddEventModal} from "@/components/pages/calendar/ManuallyAddEventModal"; -import {CalendarEvent} from "@/contexts/CalendarContext"; -import {useSettingsContext} from "@/contexts/SettingsContext"; +import { ManuallyAddEventModal } from "@/components/pages/calendar/ManuallyAddEventModal"; +import { CalendarEvent } from "@/contexts/CalendarContext"; +import { useSettingsContext } from "@/contexts/SettingsContext"; import EditEventDialog from "./EditEventDialog"; -import {useGetEvents} from "@/hooks/firebase/useGetEvents"; +import { useGetEvents } from "@/hooks/firebase/useGetEvents"; +import { Text } from "react-native-ui-lib"; const modeMap = new Map([ - [0, "day"], - [1, "week"], - [2, "month"], + [0, "day"], + [1, "week"], + [2, "month"], ]); const months = [ - "January", - "February", - "March", - "April", - "May", - "June", - "July", - "August", - "September", - "October", - "November", - "December", + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", ]; export default function CalendarPage() { - const {calendarColor} = useSettingsContext(); - const [editVisible, setEditVisible] = useState(false); - const [eventForEdit, setEventForEdit] = useState(); + const { calendarColor } = useSettingsContext(); + const [editVisible, setEditVisible] = useState(false); + const [eventForEdit, setEventForEdit] = useState(); - const styles = StyleSheet.create({ - segmentslblStyle: { - fontSize: 14, - fontFamily: 'Manrope', - fontWeight: 'bold' - }, - calHeader: { - borderWidth: 0, - }, - dayModeHeader: { - alignSelf: 'flex-start', - justifyContent: 'space-between', - alignContent: 'center', - width: 38, - right: 42, - } - }); + const styles = StyleSheet.create({ + segmentslblStyle: { + fontSize: 12, + fontFamily: "Manrope_600SemiBold", + }, + calHeader: { + borderWidth: 0, + }, + dayModeHeader: { + alignSelf: "flex-start", + justifyContent: "space-between", + alignContent: "center", + width: 38, + right: 42, + }, + }); - const [isFamilyView, setIsFamilyView] = useState(false); - const [calendarHeight, setCalendarHeight] = useState(0); - const [mode, setMode] = useState<"week" | "month" | "day">("week"); - const [selectedDate, setSelectedDate] = useState(new Date()); - const [selectedNewEventDate, setSelectedNewEndDate] = useState< - Date | undefined - >(undefined); + const [isFamilyView, setIsFamilyView] = useState(false); + const [calendarHeight, setCalendarHeight] = useState(0); + const [mode, setMode] = useState<"week" | "month" | "day">("week"); + const [selectedDate, setSelectedDate] = useState(new Date()); + const [selectedNewEventDate, setSelectedNewEndDate] = useState< + Date | undefined + >(undefined); - const calendarContainerRef = useRef(null); - const {data: events} = useGetEvents(isFamilyView) + const calendarContainerRef = useRef(null); + const { data: events } = useGetEvents(isFamilyView); - const onLayout = (event: LayoutChangeEvent) => { - const {height} = event.nativeEvent.layout; - setCalendarHeight(height); - }; + const onLayout = (event: LayoutChangeEvent) => { + const { height } = event.nativeEvent.layout; + setCalendarHeight(height); + }; - const handleSegmentChange = (index: number) => { - const selectedMode = modeMap.get(index); - if (selectedMode) { - setMode(selectedMode as "day" | "week" | "month"); - } - }; + const handleSegmentChange = (index: number) => { + const selectedMode = modeMap.get(index); + if (selectedMode) { + setMode(selectedMode as "day" | "week" | "month"); + } + }; - const handleMonthChange = (month: string) => { - const currentDay = selectedDate.getDate(); - const currentYear = selectedDate.getFullYear(); + const handleMonthChange = (month: string) => { + const currentDay = selectedDate.getDate(); + const currentYear = selectedDate.getFullYear(); - const newMonthIndex = months.indexOf(month); + const newMonthIndex = months.indexOf(month); - const updatedDate = new Date(currentYear, newMonthIndex, currentDay); + const updatedDate = new Date(currentYear, newMonthIndex, currentDay); - setSelectedDate(updatedDate); - }; + setSelectedDate(updatedDate); + }; - return ( - - + return ( + + - + + + {selectedDate.getFullYear()} + handleMonthChange(itemValue as string)} + trailingAccessory={} > - - handleMonthChange(itemValue as string)} - trailingAccessory={} - > - {months.map((month) => ( - - ))} - + {months.map((month) => ( + + ))} + + - - - - - - {calendarHeight > 0 && ( - ({backgroundColor: event.eventColor})} - onPressEvent={(event) => { - setEditVisible(true); - setEventForEdit(event); - }} - height={calendarHeight} - activeDate={selectedDate} - date={selectedDate} - onPressCell={setSelectedNewEndDate} - headerContentStyle={mode === 'day' ? styles.dayModeHeader : {}} - /> - )} - - - - {eventForEdit && ( - { - setEditVisible(!editVisible); - }} - event={eventForEdit} - /> - )} - - setSelectedNewEndDate(undefined)} + + + - ); + + {calendarHeight > 0 && ( + ({ backgroundColor: event.eventColor })} + onPressEvent={(event) => { + setEditVisible(true); + setEventForEdit(event); + }} + height={calendarHeight} + activeDate={selectedDate} + date={selectedDate} + onPressCell={setSelectedNewEndDate} + headerContentStyle={mode === "day" ? styles.dayModeHeader : {}} + onSwipeEnd={(date) => { + setSelectedDate(date); + }} + /> + )} + + + + {eventForEdit && ( + { + setEditVisible(!editVisible); + }} + event={eventForEdit} + /> + )} + + setSelectedNewEndDate(undefined)} + /> + + ); } diff --git a/components/pages/calendar/CalendarViewSwitch.tsx b/components/pages/calendar/CalendarViewSwitch.tsx index 48b7fd2..2bbc376 100644 --- a/components/pages/calendar/CalendarViewSwitch.tsx +++ b/components/pages/calendar/CalendarViewSwitch.tsx @@ -44,7 +44,7 @@ const CalendarViewSwitch = (calendarViewProps: ICalendarViewProps) => { paddingH-15 style={calView ? styles.switchBtnActive : styles.switchBtn} > - + Family View @@ -63,7 +63,7 @@ const CalendarViewSwitch = (calendarViewProps: ICalendarViewProps) => { paddingH-15 style={!calView ? styles.switchBtnActive : styles.switchBtn} > - + My View @@ -83,4 +83,8 @@ const styles = StyleSheet.create({ backgroundColor: "white", borderRadius: 50, }, + switchTxt:{ + fontSize: 16, + fontFamily: 'Manrope_600SemiBold' + } }); diff --git a/components/pages/calendar/ManuallyAddEventModal.tsx b/components/pages/calendar/ManuallyAddEventModal.tsx index 0bf4825..ab2b19e 100644 --- a/components/pages/calendar/ManuallyAddEventModal.tsx +++ b/components/pages/calendar/ManuallyAddEventModal.tsx @@ -30,11 +30,12 @@ import { addHours, setDate } from "date-fns"; import DropModalIcon from "@/assets/svgs/DropModalIcon"; import { CalendarEvent, useCalendarContext } from "@/contexts/CalendarContext"; import { repeatOptions } from "@/contexts/ToDosContext"; -import { StyleSheet } from "react-native"; +import { ImageBackground, StyleSheet } from "react-native"; import ClockIcon from "@/assets/svgs/ClockIcon"; import LockIcon from "@/assets/svgs/LockIcon"; import MenuIcon from "@/assets/svgs/MenuIcon"; import CameraIcon from "@/assets/svgs/CameraIcon"; +import AssigneesDisplay from "@/components/shared/AssigneesDisplay"; const daysOfWeek = [ { label: "Monday", value: "monday" }, @@ -69,7 +70,9 @@ export const ManuallyAddEventModal = ({ return date; }); const [endTime, setEndTime] = useState(() => { - const date = initialDate ? addHours(initialDate, 1) : addHours(new Date(), 1); + const date = initialDate + ? addHours(initialDate, 1) + : addHours(new Date(), 1); date.setSeconds(0, 0); return date; }); @@ -82,7 +85,7 @@ export const ManuallyAddEventModal = ({ const { mutateAsync: createEvent, isLoading, isError } = useCreateEvent(); const formatDateTime = (date?: Date | string) => { - if(!date) return undefined + if (!date) return undefined; return new Date(date).toLocaleDateString("en-US", { weekday: "long", month: "short", @@ -193,13 +196,27 @@ export const ManuallyAddEventModal = ({ }} > - + Cancel - + Save @@ -212,16 +229,22 @@ export const ManuallyAddEventModal = ({ setTitle(text); }} placeholderTextColor="#2d2d30" - text60R - marginT-15 - marginL-30 + style={{ fontFamily: "Manrope_500Medium", fontSize: 22 }} + paddingT-15 + paddingL-30 /> - + All day @@ -244,60 +267,82 @@ export const ManuallyAddEventModal = ({ setStartDate(date); }} maximumDate={endDate} - text70 + style={{ + fontFamily: "PlusJakartaSans_500Medium", + fontSize: 16, + }} marginL-8 /> setStartTime(date)} - maximumDate={endTime} - minuteInterval={5} - dateTimeFormatter={(date, mode) => date.toLocaleTimeString("en-us", - { hour: "numeric", - minute: "numeric" - })} - mode="time" - text70 - marginR-30 + value={startTime} + onChange={(date) => setStartTime(date)} + maximumDate={endTime} + minuteInterval={5} + dateTimeFormatter={(date, mode) => + date.toLocaleTimeString("en-us", { + hour: "numeric", + minute: "numeric", + }) + } + mode="time" + style={{ + fontFamily: "PlusJakartaSans_500Medium", + fontSize: 16, + }} + marginR-30 /> - {!isAllDay && - - + {!isAllDay && ( + + + + { + setEndDate(date); + }} + style={{ + fontFamily: "PlusJakartaSans_500Medium", + fontSize: 16, + }} + /> + { - setEndDate(date); - }} - /> - - setEndTime(date)} minimumDate={startTime} minuteInterval={5} - dateTimeFormatter={(date, mode) => date.toLocaleTimeString("en-us", - { hour: "numeric", - minute: "numeric" - })} + dateTimeFormatter={(date, mode) => + date.toLocaleTimeString("en-us", { + hour: "numeric", + minute: "numeric", + }) + } mode="time" - text70 + style={{ + fontFamily: "PlusJakartaSans_500Medium", + fontSize: 16, + }} marginR-30 - /> - } + /> + + )} - + - - Assignees + + Attendees