diff --git a/app/(auth)/calendar/index.tsx b/app/(auth)/calendar/index.tsx index 6f6a51e..4c4da19 100644 --- a/app/(auth)/calendar/index.tsx +++ b/app/(auth)/calendar/index.tsx @@ -1,160 +1,14 @@ -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 { useGetEvents } from "@/hooks/firebase/useGetEvents"; -import { useAuthContext } from "@/contexts/AuthContext"; -import HeaderTemplate from "@/components/shared/HeaderTemplate"; -import CalendarViewSwitch from "@/components/pages/calendar/CalendarViewSwitch"; -import {ManuallyAddEventModal} from "@/components/pages/calendar/ManuallyAddEventModal"; - -const modeMap = new Map([ - [0, "day"], - [1, "week"], - [2, "month"], -]); - -const months = [ - "January", - "February", - "March", - "April", - "May", - "June", - "July", - "August", - "September", - "October", - "November", - "December", -]; +import React from "react"; +import { CalendarProvider } from "@/contexts/CalendarContext"; // Import the new CalendarPage component +import CalendarPage from "@/components/pages/calendar/CalendarPage"; +import { SettingsContextProvider } from "@/contexts/SettingsContext"; export default function Screen() { - const {profileData} = useAuthContext(); - const [calendarHeight, setCalendarHeight] = useState(0); - const [mode, setMode] = useState<"week" | "month" | "day">("week"); - const [selectedDate, setSelectedDate] = useState(new Date()); - const [selectedNewEventDate, setSelectedNewEndDate] = useState(undefined); - - const calendarContainerRef = useRef(null); - const {data: events } = useGetEvents(); - - 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 handleMonthChange = (month: string) => { - const currentYear = selectedDate.getFullYear(); - const currentDay = selectedDate.getDate(); - const newMonthIndex = months.indexOf(month); - - // Update the date with the new month while preserving the day and year - const updatedDate = new Date(currentYear, newMonthIndex, currentDay); - setSelectedDate(updatedDate); - }; - - console.log({events}); - return ( - - - - - - handleMonthChange(itemValue as string)} - trailingAccessory={} - > - {months.map((month) => ( - - ))} - - - - - - - - {calendarHeight > 0 && ( - { - console.log(newDate); - setSelectedDate(newDate); - }} - /> - )} - - - - setSelectedNewEndDate(undefined)}/> - + + + + + ); } - -const styles = StyleSheet.create({ - segmentslblStyle: { - fontSize: 14, - }, - calHeader: { - borderWidth: 0, - }, -}); diff --git a/assets/svgs/AppleIcon.tsx b/assets/svgs/AppleIcon.tsx new file mode 100644 index 0000000..afb096b --- /dev/null +++ b/assets/svgs/AppleIcon.tsx @@ -0,0 +1,15 @@ +import * as React from "react"; +import Svg, { Path, SvgProps } from "react-native-svg"; + +const AppleIcon: React.FC = (props) => ( + + + +); + +export default AppleIcon; diff --git a/assets/svgs/CameraIcon.tsx b/assets/svgs/CameraIcon.tsx new file mode 100644 index 0000000..7d27d7c --- /dev/null +++ b/assets/svgs/CameraIcon.tsx @@ -0,0 +1,34 @@ +import * as React from "react"; +import Svg, { Path, SvgProps } from "react-native-svg"; + +interface CameraIconProps extends SvgProps { + color?: string; +} + +const CameraIcon: React.FC = (props) => ( + + + + + +); + +export default CameraIcon; diff --git a/assets/svgs/ClockIcon.tsx b/assets/svgs/ClockIcon.tsx new file mode 100644 index 0000000..3cdb4de --- /dev/null +++ b/assets/svgs/ClockIcon.tsx @@ -0,0 +1,28 @@ +import * as React from "react"; +import Svg, { Path, SvgProps } from "react-native-svg"; + +interface ClockIconProps extends SvgProps {} + +const ClockIcon: React.FC = (props) => ( + + + + +); + +export default ClockIcon; diff --git a/assets/svgs/CloseXIcon.tsx b/assets/svgs/CloseXIcon.tsx new file mode 100644 index 0000000..b072267 --- /dev/null +++ b/assets/svgs/CloseXIcon.tsx @@ -0,0 +1,19 @@ +import * as React from "react" +import Svg, { Path, SvgProps } from "react-native-svg" +const CloseXIcon: React.FC = (props) => ( + + + +) +export default CloseXIcon diff --git a/assets/svgs/DropModalIcon.tsx b/assets/svgs/DropModalIcon.tsx new file mode 100644 index 0000000..df3a08e --- /dev/null +++ b/assets/svgs/DropModalIcon.tsx @@ -0,0 +1,20 @@ +import * as React from "react"; +import Svg, { Path, SvgProps } from "react-native-svg"; + +const DropModalIcon: React.FC = (props) => ( + + + +); + +export default DropModalIcon; diff --git a/assets/svgs/GoogleIcon.tsx b/assets/svgs/GoogleIcon.tsx new file mode 100644 index 0000000..33f4e8e --- /dev/null +++ b/assets/svgs/GoogleIcon.tsx @@ -0,0 +1,30 @@ +import * as React from "react"; +import Svg, { Path, SvgProps } from "react-native-svg"; + +const GoogleIcon: React.FC = (props) => ( + + + + + + +); + +export default GoogleIcon; diff --git a/assets/svgs/LockIcon.tsx b/assets/svgs/LockIcon.tsx new file mode 100644 index 0000000..c2edc61 --- /dev/null +++ b/assets/svgs/LockIcon.tsx @@ -0,0 +1,23 @@ +import * as React from "react"; +import Svg, { Path, SvgProps } from "react-native-svg"; + +interface LockIconProps extends SvgProps {} + +const LockIcon: React.FC = (props) => ( + + + +); + +export default LockIcon; diff --git a/assets/svgs/MenuIcon.tsx b/assets/svgs/MenuIcon.tsx new file mode 100644 index 0000000..2d3fc37 --- /dev/null +++ b/assets/svgs/MenuIcon.tsx @@ -0,0 +1,25 @@ +import * as React from "react"; +import Svg, { Path, SvgProps } from "react-native-svg"; + +interface MenuIconProps extends SvgProps { + color?: string; +} + +const MenuIcon: React.FC = (props) => ( + + + +); + +export default MenuIcon; diff --git a/assets/svgs/OutlookIcon.tsx b/assets/svgs/OutlookIcon.tsx new file mode 100644 index 0000000..719d0de --- /dev/null +++ b/assets/svgs/OutlookIcon.tsx @@ -0,0 +1,119 @@ +import * as React from "react"; +import Svg, { Path, LinearGradient, Stop, SvgProps } from "react-native-svg"; + +const OutlookIcon: React.FC = (props) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default OutlookIcon; diff --git a/components/pages/calendar/CalendarPage.tsx b/components/pages/calendar/CalendarPage.tsx new file mode 100644 index 0000000..ddf5eac --- /dev/null +++ b/components/pages/calendar/CalendarPage.tsx @@ -0,0 +1,187 @@ +import React, { useEffect, useRef, useState } from "react"; +import { LayoutChangeEvent, StyleSheet } from "react-native"; +import { Calendar } from "react-native-big-calendar"; +import { + Picker, + PickerModes, + SegmentedControl, + View, + Text +} from "react-native-ui-lib"; +import { MaterialIcons } from "@expo/vector-icons"; +import { AddEventDialog } from "@/components/pages/calendar/AddEventDialog"; +import { useAuthContext } from "@/contexts/AuthContext"; +import HeaderTemplate from "@/components/shared/HeaderTemplate"; +import CalendarViewSwitch from "@/components/pages/calendar/CalendarViewSwitch"; +import { ManuallyAddEventModal } from "@/components/pages/calendar/ManuallyAddEventModal"; +import { CalendarEvent, useCalendarContext } from "@/contexts/CalendarContext"; +import { useSettingsContext } from "@/contexts/SettingsContext"; +import EditEventDialog from "./EditEventDialog"; + +const modeMap = new Map([ + [0, "day"], + [1, "week"], + [2, "month"], +]); + +const months = [ + "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 styles = StyleSheet.create({ + segmentslblStyle: { + fontSize: 14, + }, + calHeader: { + borderWidth: 0, + }, + }); + + const { profileData } = useAuthContext(); + const [isFamilyView, setIsFamilyView] = useState(true); + 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 { events, familyEvents } = useCalendarContext(); + + 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 handleMonthChange = (month: string) => { + // Get the current day and year + const currentDay = selectedDate.getDate(); + const currentYear = selectedDate.getFullYear(); + + // Find the new month index + const newMonthIndex = months.indexOf(month); + + // Create a new Date object with the selected month, preserving day and year + const updatedDate = new Date(currentYear, newMonthIndex, currentDay); + + // Update both selectedDate and activeDate in the Calendar component + setSelectedDate(updatedDate); + }; + + return ( + + + + + + handleMonthChange(itemValue as string)} + trailingAccessory={} + > + {months.map((month) => ( + + ))} + + + + + + + + {calendarHeight > 0 && ( + { + setEditVisible(true); + setEventForEdit(event); + }} + height={calendarHeight} + activeDate={selectedDate} + date={selectedDate} + onPressCell={setSelectedNewEndDate} + /> + )} + + + + {eventForEdit && ( + { + setEditVisible(!editVisible); + }} + event={eventForEdit} + /> + )} + + setSelectedNewEndDate(undefined)} + /> + + ); +} diff --git a/components/pages/calendar/CalendarViewSwitch.tsx b/components/pages/calendar/CalendarViewSwitch.tsx index 6197ac0..48b7fd2 100644 --- a/components/pages/calendar/CalendarViewSwitch.tsx +++ b/components/pages/calendar/CalendarViewSwitch.tsx @@ -3,8 +3,10 @@ import React, { useState } from "react"; import { MaterialIcons } from "@expo/vector-icons"; import { StyleSheet } from "react-native"; -const CalendarViewSwitch = () => { - const [show, setShow] = useState(false); +interface ICalendarViewProps { + viewSwitch: (value: boolean) => void; +} +const CalendarViewSwitch = (calendarViewProps: ICalendarViewProps) => { const [calView, setCalView] = useState(false); return ( @@ -29,7 +31,12 @@ const CalendarViewSwitch = () => { }} centerV > - setCalView(true)}> + { + setCalView(true); + calendarViewProps.viewSwitch(true); + }} + > { - setCalView(false)}> + { + setCalView(false); + calendarViewProps.viewSwitch(false); + }} + > void; +} +const EditEventDialog = (editEventProps: IEditEventDialog) => { + const { updateEvent } = useCalendarContext(); + const [event, setEvent] = useState(editEventProps.event); + + useEffect(() => { + setEvent(editEventProps.event); + }, [editEventProps.isVisible]); + + return ( + editEventProps.setIsVisible(false)} + containerStyle={{ + borderRadius: 10, + backgroundColor: "white", + width: "100%", + alignSelf: "stretch", + padding: 0, + paddingTop: 4, + margin: 0, + }} + visible={editEventProps.isVisible} + > + + + ); +}; + +export default EditEventDialog; + +const styles = StyleSheet.create({ + divider: { height: 1, backgroundColor: "#e4e4e4", marginVertical: 15 }, + gradient: { + height: "25%", + position: "absolute", + bottom: 0, + width: "100%", + }, + buttonContainer: { + position: "absolute", + bottom: 25, + width: "100%", + }, + button: { + backgroundColor: "rgb(253, 23, 117)", + paddingVertical: 20, + }, + topBtn: { + backgroundColor: "white", + color: "#05a8b6", + }, + rotateSwitch: { + marginLeft: 35, + marginBottom: 10, + marginTop: 25, + }, +}); diff --git a/components/pages/calendar/ManuallyAddEventModal.tsx b/components/pages/calendar/ManuallyAddEventModal.tsx index 8659f42..d1cb54c 100644 --- a/components/pages/calendar/ManuallyAddEventModal.tsx +++ b/components/pages/calendar/ManuallyAddEventModal.tsx @@ -1,331 +1,415 @@ import { - Avatar, - Colors, - DateTimePicker, - LoaderScreen, - Modal, - Picker, - Switch, - Text, - TextField, - View, + Avatar, + Button, + ButtonSize, + Colors, + DateTimePicker, + LoaderScreen, + Modal, + Picker, + Switch, + Text, + TextField, + TouchableOpacity, + View, } from "react-native-ui-lib"; -import {ScrollView, TouchableOpacity} from "react-native-gesture-handler"; -import {useSafeAreaInsets} from "react-native-safe-area-context"; -import {useState} from "react"; -import {MaterialIcons} from "@expo/vector-icons"; -import {PickerMultiValue} from "react-native-ui-lib/src/components/picker/types"; -import {useAuthContext} from "@/contexts/AuthContext"; -import {useCreateEvent} from "@/hooks/firebase/useCreateEvent"; -import {EventData} from "@/hooks/firebase/types/eventData"; -import {addHours} from "date-fns"; +import { ScrollView } from "react-native-gesture-handler"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; +import { useState } from "react"; +import { + AntDesign, + Feather, + Ionicons, + MaterialIcons, +} from "@expo/vector-icons"; +import { PickerMultiValue } from "react-native-ui-lib/src/components/picker/types"; +import { useAuthContext } from "@/contexts/AuthContext"; +import { useCreateEvent } from "@/hooks/firebase/useCreateEvent"; +import { EventData } from "@/hooks/firebase/types/eventData"; +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 ClockIcon from "@/assets/svgs/ClockIcon"; +import LockIcon from "@/assets/svgs/LockIcon"; +import MenuIcon from "@/assets/svgs/MenuIcon"; +import CameraIcon from "@/assets/svgs/CameraIcon"; const daysOfWeek = [ - {label: "Monday", value: "monday"}, - {label: "Tuesday", value: "tuesday"}, - {label: "Wednesday", value: "wednesday"}, - {label: "Thursday", value: "thursday"}, - {label: "Friday", value: "friday"}, - {label: "Saturday", value: "saturday"}, - {label: "Sunday", value: "sunday"}, + { label: "Monday", value: "monday" }, + { label: "Tuesday", value: "tuesday" }, + { label: "Wednesday", value: "wednesday" }, + { label: "Thursday", value: "thursday" }, + { label: "Friday", value: "friday" }, + { label: "Saturday", value: "saturday" }, + { label: "Sunday", value: "sunday" }, ]; export const ManuallyAddEventModal = ({ - show, - close, - initialDate - }: { - show: boolean; - close: () => void; - initialDate?: Date + show, + close, + initialDate, +}: { + show: boolean; + close: () => void; + initialDate?: Date; }) => { - const {user} = useAuthContext(); - const insets = useSafeAreaInsets(); + const { addEvent } = useCalendarContext(); + const { user } = useAuthContext(); + const insets = useSafeAreaInsets(); - const [title, setTitle] = useState(""); + const [title, setTitle] = useState(""); - const [isAllDay, setIsAllDay] = useState(false); - const [startTime, setStartTime] = useState(() => { - const date = initialDate ?? new Date(); - date.setSeconds(0, 0); - return date; - }); - const [endTime, setEndTime] = useState(() => { - const date = initialDate ? addHours(initialDate, 1) : new Date(); - date.setSeconds(0, 0); - return date; + const [isAllDay, setIsAllDay] = useState(false); + const [isPrivate, setIsPrivate] = useState(false); + const [startTime, setStartTime] = useState(() => { + const date = initialDate ?? new Date(); + date.setSeconds(0, 0); + return date; + }); + const [endTime, setEndTime] = useState(() => { + const date = initialDate ? addHours(initialDate, 1) : new Date(); + date.setSeconds(0, 0); + return date; + }); + + const [startDate, setStartDate] = useState(initialDate ?? new Date()); + const [endDate, setEndDate] = useState(initialDate ?? new Date()); + + const [repeatInterval, setRepeatInterval] = useState([]); + + const { mutateAsync: createEvent, isLoading, isError } = useCreateEvent(); + + const formatDateTime = (date: Date) => { + return date.toLocaleDateString("en-US", { + weekday: "long", + month: "short", + day: "numeric", }); + }; - const [startDate, setStartDate] = useState(initialDate ?? new Date()); - const [endDate, setEndDate] = useState(initialDate ?? new Date()); + const combineDateAndTime = (date: Date, time: Date): Date => { + const combined = new Date(date); + combined.setHours(time.getHours()); + combined.setMinutes(time.getMinutes()); + combined.setSeconds(0); + combined.setMilliseconds(0); + return combined; + }; - const [repeatInterval, setRepeatInterval] = useState([]); + const handleSave = () => { + let finalStartDate: Date; + let finalEndDate: Date; - const {mutateAsync: createEvent, isLoading, isError} = useCreateEvent(); + if (isAllDay) { + finalStartDate = new Date(startDate); + finalStartDate.setHours(0, 0, 0, 0); - const formatDateTime = (date: Date) => { - return date.toLocaleDateString("en-US", { - weekday: "long", - month: "short", - day: "numeric", - }); - }; - - const combineDateAndTime = (date: Date, time: Date): Date => { - const combined = new Date(date); - combined.setHours(time.getHours()); - combined.setMinutes(time.getMinutes()); - combined.setSeconds(0); - combined.setMilliseconds(0); - return combined; - }; - - const handleSave = async () => { - let finalStartDate: Date; - let finalEndDate: Date; - - if (isAllDay) { - finalStartDate = new Date(startDate); - finalStartDate.setHours(0, 0, 0, 0); - - finalEndDate = new Date(startDate); - finalEndDate.setHours(23, 59, 59, 999); - } else { - finalStartDate = combineDateAndTime(startDate, startTime); - finalEndDate = combineDateAndTime(endDate, endTime); - } - - const eventData: Partial = { - title, - startDate: finalStartDate, - endDate: finalEndDate, - repeatDays: repeatInterval.map((x) => x.toString()), - allDay: isAllDay, - }; - - await createEvent(eventData); - - close(); - }; - - const getRepeatLabel = () => { - const selectedDays = repeatInterval; - const allDays = [ - "sunday", - "monday", - "tuesday", - "wednesday", - "thursday", - "friday", - "saturday", - ]; - const workDays = ["monday", "tuesday", "wednesday", "thursday", "friday"]; - - const isEveryWorkDay = workDays.every((day) => selectedDays.includes(day)); - - const isEveryDay = allDays.every((day) => selectedDays.includes(day)); - - if (isEveryDay) { - return "Every day"; - } else if ( - isEveryWorkDay && - !selectedDays.includes("saturday") && - !selectedDays.includes("sunday") - ) { - return "Every work day"; - } else { - return selectedDays - .map((item) => daysOfWeek.find((day) => day.value === item)?.label) - .join(", "); - } - }; - - if (isLoading && !isError) { - return ( - - - - ); + finalEndDate = new Date(startDate); + finalEndDate.setHours(23, 59, 59, 999); + } else { + finalStartDate = combineDateAndTime(startDate, startTime); + finalEndDate = combineDateAndTime(endDate, endTime); } + const eventData: CalendarEvent = { + title: title, + start: finalStartDate, + end: finalEndDate, + allDay: isAllDay, + private: isPrivate, + }; + + addEvent(eventData); + + close(); + }; + + const getRepeatLabel = () => { + const selectedDays = repeatInterval; + const allDays = [ + "sunday", + "monday", + "tuesday", + "wednesday", + "thursday", + "friday", + "saturday", + ]; + const workDays = ["monday", "tuesday", "wednesday", "thursday", "friday"]; + + const isEveryWorkDay = workDays.every((day) => selectedDays.includes(day)); + + const isEveryDay = allDays.every((day) => selectedDays.includes(day)); + + if (isEveryDay) { + return "Every day"; + } else if ( + isEveryWorkDay && + !selectedDays.includes("saturday") && + !selectedDays.includes("sunday") + ) { + return "Every work day"; + } else { + return selectedDays + .map((item) => daysOfWeek.find((day) => day.value === item)?.label) + .join(", "); + } + }; + + if (isLoading && !isError) { return ( - - - - - Cancel - - Add event - - Save - - - - - - - - - - - - All-day - - setIsAllDay(value)} - /> - - - - - {!isAllDay && ( - - )} - - - {!isAllDay && ( - - - - - )} - - - - setRepeatInterval(items)} - placeholder="Doest not repeat" - style={{marginLeft: 10, flex: 1}} - mode={Picker.modes.MULTI} - getLabel={getRepeatLabel} - > - {daysOfWeek.map((option) => ( - - ))} - - - - - - - - - Other - {user?.email} - - - - - - + + + ); + } + + return ( + + + + + + Cancel + + + + + + Save + + + + + { + setTitle(text); + }} + placeholderTextColor="#2d2d30" + text60R + marginT-15 + marginL-30 + /> + + + + + + + All day + + + + setIsAllDay(value)} + /> + + + + + + { + setStartDate(date); + }} + /> + + + + + {!isAllDay && + + + { + setEndDate(date); + }} + /> + + + } + + + + + + + + Assignees + + - + - - setShowAddUserDialog(false)} center>Return to user - settings + - + ))} + + )} - setShowNewUserInfoDialog(false)} - > - - - - New User Information - - setShowAddUserDialog(false)}> - X - - - - - - { - }}> - Upload User Profile Photo - - - - Member Status - setSelectedStatus(item)} - style={styles.picker} - showSearch - floatingPlaceholder - > - - - - - - - First Name - - - Last Name - - - Email Address - - - - - ); + ))} + + )} + + + + setShowAddUserDialog(true), + }} + /> + + setShowAddUserDialog(false)} + panDirection={PanningProvider.Directions.DOWN} + > + + Add a new user device + + + + + setShowAddUserDialog(false)} center> + Return to user settings + + + + + setShowNewUserInfoDialog(false)} + > + + + New User Information + setShowAddUserDialog(false)}> + X + + + + + + {}}> + + Upload User Profile Photo + + + + + Member Status + setSelectedStatus(item)} + style={styles.picker} + showSearch + floatingPlaceholder + > + + + + + + First Name + + + Last Name + + + Email Address + + + + + ); }; const styles = StyleSheet.create({ - card: { - marginVertical: 15, - backgroundColor: "white", - width: "100%", - borderRadius: 15, - padding: 20, - }, - familyCard: { - marginBottom: 10, - borderRadius: 10, - backgroundColor: Colors.white, - width: "100%" - }, - inputField: { - borderRadius: 50, - paddingVertical: 12, - paddingHorizontal: 16, - backgroundColor: Colors.grey80, - marginBottom: 16, - borderColor: Colors.grey50, - borderWidth: 1, - height: 40, - }, - picker: { - borderRadius: 50, - paddingVertical: 12, - paddingHorizontal: 16, - backgroundColor: Colors.grey80, - marginBottom: 16, - borderColor: Colors.grey50, - borderWidth: 1, - marginTop: -20, - height: 40, - }, - label: { - marginBottom: 5, - fontSize: 12, - color: Colors.grey40, - }, - dialogCard: { - borderRadius: 10, - gap: 10, - }, + card: { + marginVertical: 15, + backgroundColor: "white", + width: "100%", + borderRadius: 15, + padding: 20, + }, + familyCard: { + marginBottom: 10, + borderRadius: 10, + backgroundColor: Colors.white, + width: "100%", + }, + inputField: { + borderRadius: 50, + paddingVertical: 12, + paddingHorizontal: 16, + backgroundColor: Colors.grey80, + marginBottom: 16, + borderColor: Colors.grey50, + borderWidth: 1, + height: 40, + }, + picker: { + borderRadius: 50, + paddingVertical: 12, + paddingHorizontal: 16, + backgroundColor: Colors.grey80, + marginBottom: 16, + borderColor: Colors.grey50, + borderWidth: 1, + marginTop: -20, + height: 40, + }, + label: { + marginBottom: 5, + fontSize: 12, + color: Colors.grey40, + }, + dialogCard: { + borderRadius: 10, + gap: 10, + }, }); export default MyGroup; diff --git a/components/pages/todos/AddChoreDialog.tsx b/components/pages/todos/AddChoreDialog.tsx index 8b550e0..7b34109 100644 --- a/components/pages/todos/AddChoreDialog.tsx +++ b/components/pages/todos/AddChoreDialog.tsx @@ -12,6 +12,7 @@ import { } from "react-native-ui-lib"; import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView"; import { StyleSheet } from "react-native"; +import DropModalIcon from "@/assets/svgs/DropModalIcon"; interface IAddChoreDialog { isVisible: boolean; @@ -47,7 +48,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => { width: "100%", alignSelf: "stretch", padding: 0, - paddingTop: 3, + paddingTop: 4, margin: 0, }} visible={addChoreDialogProps.isVisible} @@ -61,15 +62,13 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => { addChoreDialogProps.setIsVisible(false); }} /> -