ui changes, fixes

components/pages/brain_dump/AddBrainDump.tsx

@@ -73,7 +73,7 @@ const AddBrainDump = ({
                     onPress={() => {
                         addBrainDump({
              
-                            id: 99,
+                            id: '99',
              
                             title: dumpTitle.trimEnd().trimStart(),
              

components/pages/calendar/DetailedCalendar.tsx

@@ -97,7 +97,7 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
                 {...bodyProps}
                 renderEvent={renderEvent}
             />
-            <View marginB-45/>
+            <View marginB-0/>
         </CalendarContainer>
     );
 };

components/pages/calendar/EventCell.tsx

@@ -74,7 +74,8 @@ const styles = StyleSheet.create({
     eventCell: {
         flex: 1,
         borderRadius: 4,
-        padding: 8,
+        paddingHorizontal: 8,
+        paddingBottom: 8,
         height: '100%',
     },
     eventTitle: {

components/pages/calendar/InnerCalendar.tsx

@@ -28,7 +28,7 @@ export const InnerCalendar = () => {
                 style={{flex: 1, backgroundColor: "#fff", borderRadius: 0, marginBottom: 0, overflow: "hidden"}}
                 ref={calendarContainerRef}
                 onLayout={onLayout}
-                paddingB-15
+                paddingB-0
             >
                 {calendarHeight > 0 && (
                     <EventCalendar

components/pages/calendar/ManuallyAddEventModal.tsx

@@ -567,18 +567,10 @@ export const ManuallyAddEventModal = () => {
                                     Save
                                 </Text>
                             </TouchableOpacity>
-                            {editEvent && (
-                                <Button
-                                    style={styles.topBtn}
-                                    marginL-5
-                                    iconSource={() => <BinIcon/>}
-                                    onPress={showDeleteEventModal}
-                                />
-                            )}
                         </View>
                     </View>
                     {/*)}*/}
-                    <ScrollView style={{minHeight: "85%"}}>
+                    <ScrollView style={{minHeight: "81%"}}>
                         <TextField
                             placeholder="Add event title"
                             ref={titleRef}
@@ -788,7 +780,6 @@ export const ManuallyAddEventModal = () => {
                     <Button
                         disabled
                         marginH-30
-                        marginB-30
                         label="Create event from image"
                         text70
                         style={{height: 47}}
@@ -800,6 +791,23 @@ export const ManuallyAddEventModal = () => {
                             </View>
                         )}
                         />                        
+                        {editEvent && (
+                            <TouchableOpacity 
+                            onPress={showDeleteEventModal}
+                            style={{ marginTop: 15, marginBottom: 40, alignSelf: "center" }}
+                            hitSlop={{left: 30, right: 30, top: 10, bottom: 10}}
+                            >
+                                <Text
+                                          style={{
+                                            color: "#ff1637",
+                                            fontFamily: "PlusJakartaSans_500Medium",
+                                            fontSize: 15,
+                                          }}
+                                        >
+                                          Delete Event
+                                </Text>
+                            </TouchableOpacity>
+                            )}
                 </View>
                 {editEvent && (
                     <DeleteEventDialog

components/pages/calendar/MonthCalendar.tsx

@@ -652,7 +652,7 @@ export const MonthCalendar: React.FC<EventCalendarProps> = React.memo(
                     ampm
                     // renderCustomDateForMonth={renderCustomDateForMonth}
                 />
-                <View style={{backgroundColor: 'white', height: 50, width: '100%'}}/>
+                {/*<View style={{backgroundColor: 'white', height: 50, width: '100%'}}/>*/}
             </>
 
         );
@@ -666,7 +666,7 @@ const styles = StyleSheet.create({
     },
     calHeader: {
         borderWidth: 0,
-        paddingBottom: 60,
+        paddingBottom: 0,
     },
     dayModeHeader: {
         alignSelf: "flex-start",

components/pages/todos/ToDoItem.tsx

@@ -26,7 +26,7 @@ const ToDoItem = (props: {
   isSettings?: boolean;
   is7Days?: boolean;
   localTodos: Array<IToDo>;
-  setLocalTodos: Function
+  setLocalTodos: Function;
 }) => {
   const { updateToDo } = useToDosContext();
   const { data: members } = useGetFamilyMembers();
@@ -38,13 +38,15 @@ const ToDoItem = (props: {
   const [visible, setVisible] = useState<boolean>(false);
   const [points, setPoints] = useState(props.item.points);
   const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(false);
-  const [creator, setCreator] = useState('');
+  const [creator, setCreator] = useState("");
 
   useEffect(() => {
-    let creatorMember = members?.find((member) => member?.uid === props.item.creatorId);
+    let creatorMember = members?.find(
+      (member) => member?.uid === props.item.creatorId
+    );
     const fullName = `${creatorMember?.firstName ?? ""}`;
     setCreator(fullName);
-  }, [])
+  }, []);
 
   const handlePointsChange = (text: string) => {
     const numericValue = parseInt(text, 10);
@@ -111,6 +113,12 @@ const ToDoItem = (props: {
         />
       )}
       <View paddingB-8 row spread>
+        <TouchableOpacity
+          onPress={() => {
+            isTodoEditable ? setVisible(true) : null;
+          }}
+          hitSlop={{right: 150, top:10}}
+        >
           <Text
             text70
             style={{
@@ -119,12 +127,10 @@ const ToDoItem = (props: {
               color: props.item.done ? "#a09f9f" : "black",
               fontSize: 15,
             }}
-          onPress={() => {
-            isTodoEditable ? setVisible(true) : null;
-          }}
           >
             {props.item.title}
           </Text>
+        </TouchableOpacity>
         <Checkbox
           value={props.item.done}
           containerStyle={[styles.checkbox, { borderRadius: 50 }]}
@@ -133,7 +139,11 @@ const ToDoItem = (props: {
           borderRadius={50}
           color="#fd1575"
           onValueChange={() => {
-            const updatedTodos = props.localTodos?.map((item) => item.id === props.item.id ? { ...item, done: !props.item.done } : item);
+            const updatedTodos = props.localTodos?.map((item) =>
+              item.id === props.item.id
+                ? { ...item, done: !props.item.done }
+                : item
+            );
             props.setLocalTodos(updatedTodos);
             updateToDo({ id: props.item.id, done: !props.item.done });
             if (!props.item.done && isChild) {
@@ -231,7 +241,7 @@ const ToDoItem = (props: {
                   borderRadius: 22,
                   overflow: "hidden",
                   borderWidth: 2,
-                  borderColor: member.eventColor || 'transparent'
+                  borderColor: member.eventColor || "transparent",
                 }}
               />
             ) : (
@@ -242,7 +252,7 @@ const ToDoItem = (props: {
                   aspectRatio: 1,
                   borderWidth: 2,
                   borderRadius: 100,
-                  borderColor: member.eventColor || '#ccc',
+                  borderColor: member.eventColor || "#ccc",
                 }}
               >
                 <View

contexts/DumpContext.tsx

@@ -3,11 +3,15 @@ import { useDeleteNote } from "@/hooks/firebase/useDeleteNote";
 import { useGetNotes } from "@/hooks/firebase/useGetNotes";
 import { useUpdateNote } from "@/hooks/firebase/useUpdateNote";
 import { createContext, useContext, useState } from "react";
+import firestore, { FirebaseFirestoreTypes } from '@react-native-firebase/firestore';
 
 export interface IBrainDump {
-  id: number;
+  id: string;
   title: string;
   description: string;
+  createdAt?: FirebaseFirestoreTypes.Timestamp;
+  updatedAt?: FirebaseFirestoreTypes.Timestamp;
+  creatorId?: string;
 }
 
 interface IBrainDumpContext {

hooks/firebase/useCreateNote.ts

@@ -12,6 +12,8 @@ export const useCreateNote = () => {
     mutationKey: ["createNote"],
     mutationFn: async (note: Partial<IBrainDump>) => {
       try {
+        const timestamp = firestore.FieldValue.serverTimestamp();
+        
         if (note.id) {
           const snapshot = await firestore()
             .collection("BrainDumps")
@@ -27,16 +29,22 @@ export const useCreateNote = () => {
                 {
                   ...note,
                   creatorId: currentUser?.uid,
+                  updatedAt: timestamp
                 },
                 { merge: true }
               );
             return;
           }
         }
+        
         const newDoc = firestore().collection("BrainDumps").doc();
-        await firestore()
+        await newDoc.set({ 
-          .collection("BrainDumps")
+          ...note, 
-          .add({ ...note, id: newDoc.id, creatorId: currentUser?.uid });
+          id: newDoc.id, 
+          creatorId: currentUser?.uid,
+          updatedAt: timestamp,
+          createdAt: timestamp
+        });
       } catch (e) {
         console.error(e);
       }

hooks/firebase/useGetNotes.ts

@@ -18,6 +18,9 @@ export const useGetNotes = () => {
 
         return snapshot.docs.map((doc) => ({
           ...doc.data(),
+          id: doc.id,
+          createdAt: doc.data().createdAt,
+          updatedAt: doc.data().updatedAt,
         })) as IBrainDump[];
       } catch (error) {
         console.error("Error fetching braindumps:", error);