From e4eb67fba75278d3e811f44f1a26ed8ef9b8a98b Mon Sep 17 00:00:00 2001
From: ivic00 <102467664+ivic00@users.noreply.github.com>
Date: Wed, 16 Oct 2024 19:07:57 +0200
Subject: [PATCH] ui changes

---
 components/pages/brain_dump/AddBrainDump.tsx  |  20 +--
 components/pages/brain_dump/BrainDumpPage.tsx | 135 +++++++++++-------
 components/pages/brain_dump/DumpItem.tsx      |  28 +++-
 components/pages/brain_dump/DumpList.tsx      |   2 +
 components/pages/brain_dump/MoveBrainDump.tsx |  43 ++++--
 components/pages/calendar/CalendarPage.tsx    |  10 +-
 components/pages/todos/AddChoreDialog.tsx     |  37 +++--
 components/pages/todos/ToDosList.tsx          |  40 ++++--
 components/pages/todos/ToDosPage.tsx          |   9 +-
 9 files changed, 218 insertions(+), 106 deletions(-)

diff --git a/components/pages/brain_dump/AddBrainDump.tsx b/components/pages/brain_dump/AddBrainDump.tsx
index 7e66c1e..00bc3f2 100644
--- a/components/pages/brain_dump/AddBrainDump.tsx
+++ b/components/pages/brain_dump/AddBrainDump.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import { Dialog } from "react-native-ui-lib";
 import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
 import CloseXIcon from "@/assets/svgs/CloseXIcon";
-import { StyleSheet } from "react-native";
+import { Dimensions, StyleSheet } from "react-native";
 import DropModalIcon from "@/assets/svgs/DropModalIcon";
 import MenuIcon from "@/assets/svgs/MenuIcon";
 import { useBrainDumpContext } from "@/contexts/DumpContext";
@@ -17,9 +17,10 @@ const AddBrainDump = ({
 }: {
   addBrainDumpProps: IAddBrainDumpProps;
 }) => {
-    const {addBrainDump} = useBrainDumpContext();
+  const { addBrainDump } = useBrainDumpContext();
   const [dumpTitle, setDumpTitle] = useState<string>("");
   const [dumpDesc, setDumpDesc] = useState<string>("");
+  const { width, height } = Dimensions.get("screen");
 
   useEffect(() => {
     setDumpDesc("");
@@ -30,13 +31,13 @@ const AddBrainDump = ({
     <Dialog
       bottom={true}
       height={"90%"}
+      width={width}
       panDirection={PanningDirectionsEnum.DOWN}
       onDismiss={() => addBrainDumpProps.setIsVisible(false)}
       containerStyle={{
-        borderRadius: 10,
+        borderTopRightRadius: 15,
+        borderTopLeftRadius: 15,
         backgroundColor: "white",
-        width: "100%",
-        alignSelf: "stretch",
         padding: 0,
         paddingTop: 3,
         margin: 0,
@@ -52,13 +53,16 @@ const AddBrainDump = ({
             addBrainDumpProps.setIsVisible(false);
           }}
         />
-        <DropModalIcon style={{ marginTop: 15 }} onPress={() => addBrainDumpProps.setIsVisible(false)}/>
+        <DropModalIcon
+          style={{ marginTop: 15 }}
+          onPress={() => addBrainDumpProps.setIsVisible(false)}
+        />
         <Button
           color="#05a8b6"
           label="Save"
           style={styles.topBtn}
           onPress={() => {
-            addBrainDump({id: 99, title: dumpTitle, description: dumpDesc})
+            addBrainDump({ id: 99, title: dumpTitle, description: dumpDesc });
             addBrainDumpProps.setIsVisible(false);
           }}
         />
@@ -72,7 +76,7 @@ const AddBrainDump = ({
             setDumpTitle(text);
           }}
         />
-        <View height={2} backgroundColor="#b3b3b3" width={"100%"} marginB-20/>
+        <View height={2} backgroundColor="#b3b3b3" width={"100%"} marginB-20 />
         <TextField
           value={dumpDesc}
           placeholder="Write Description"
diff --git a/components/pages/brain_dump/BrainDumpPage.tsx b/components/pages/brain_dump/BrainDumpPage.tsx
index bab2448..ce2803d 100644
--- a/components/pages/brain_dump/BrainDumpPage.tsx
+++ b/components/pages/brain_dump/BrainDumpPage.tsx
@@ -1,4 +1,4 @@
-import { ScrollView } from "react-native";
+import { Dimensions, ScrollView } from "react-native";
 import React, { useState } from "react";
 import { View, Text, Button } from "react-native-ui-lib";
 import DumpList from "./DumpList";
@@ -8,66 +8,97 @@ import { StyleSheet } from "react-native";
 import { Feather, MaterialIcons } from "@expo/vector-icons";
 import { TextInput } from "react-native-gesture-handler";
 import AddBrainDump from "./AddBrainDump";
+import LinearGradient from "react-native-linear-gradient";
 
 const BrainDumpPage = () => {
   const [searchText, setSearchText] = useState<string>("");
   const [isAddVisible, setIsAddVisible] = useState<boolean>(false);
 
   return (
-    <View>
-      <ScrollView
-        showsVerticalScrollIndicator={false}
-        showsHorizontalScrollIndicator={false}
-      >
-        <View marginH-25>
-          <HeaderTemplate
-            message={"Welcome to your notes!"}
-            isWelcome={false}
-          />
-          <View>
-            <View style={styles.searchField} centerV>
-              <TextField
-                value={searchText}
-                onChangeText={(value) => {
-                  setSearchText(value);
-                }}
-                leadingAccessory={
-                  <Feather
-                    name="search"
-                    size={24}
-                    color="#9b9b9b"
-                    style={{ paddingRight: 10 }}
-                  />
-                }
-                placeholder="Search notes..."
-              />
+    <View height={"100%"}>
+      <View>
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          showsHorizontalScrollIndicator={false}
+        >
+          <View marginH-25>
+            <HeaderTemplate
+              message={"Welcome to your notes!"}
+              isWelcome={false}
+              children={
+                <Text
+                  style={{ fontFamily: "Manrope_400Regular", fontSize: 14 }}
+                >
+                  Drop your notes on-the-go here, and{"\n"}organize them later.
+                </Text>
+              }
+            />
+            <View>
+              <View style={styles.searchField} centerV>
+                <TextField
+                  value={searchText}
+                  onChangeText={(value) => {
+                    setSearchText(value);
+                  }}
+                  leadingAccessory={
+                    <Feather
+                      name="search"
+                      size={24}
+                      color="#9b9b9b"
+                      style={{ paddingRight: 10 }}
+                    />
+                  }
+                  style={{
+                    fontFamily: "Manrope_500Medium",
+                    fontSize: 15,
+                  }}
+                  placeholder="Search notes..."
+                />
+              </View>
+              <DumpList searchText={searchText} />
             </View>
-            <DumpList searchText={searchText} />
           </View>
-        </View>
-      </ScrollView>
-      <Button
+        </ScrollView>
+      </View>
+      <LinearGradient
+        colors={["#f2f2f2", "transparent"]}
+        start={{ x: 0.5, y: 1 }}
+        end={{ x: 0.5, y: 0 }}
         style={{
           position: "absolute",
-          bottom: 20,
-          right: 20,
-          height: 40,
-          borderRadius: 30,
-          backgroundColor: "#fd1775",
-        }}
-        color="white"
-        enableShadow
-        onPress={() => {
-          setIsAddVisible(true);
+          bottom: 0,
+          height: 90,
+          width: Dimensions.get("screen").width,
         }}
       >
-        <View row centerV centerH>
-          <MaterialIcons name="add" size={22} color={"white"} />
-          <Text white style={{ fontSize: 16, fontFamily: 'Manrope_600SemiBold' }}>
-            New
-          </Text>
-        </View>
-      </Button>
+        <Button
+          style={{
+            height: 40,
+            position: "relative",
+            marginLeft: "auto",
+            width: 20,
+            right: 20,
+            bottom: -10,
+            borderRadius: 30,
+            backgroundColor: "#fd1775",
+          }}
+          color="white"
+          enableShadow
+          onPress={() => {
+            setIsAddVisible(true);
+          }}
+        >
+          <View row centerV centerH>
+            <MaterialIcons name="add" size={22} color={"white"} />
+            <Text
+              white
+              style={{ fontSize: 16, fontFamily: "Manrope_600SemiBold" }}
+            >
+              New
+            </Text>
+          </View>
+        </Button>
+      </LinearGradient>
       <AddBrainDump
         addBrainDumpProps={{
           isVisible: isAddVisible,
@@ -80,10 +111,10 @@ const BrainDumpPage = () => {
 
 const styles = StyleSheet.create({
   searchField: {
-    borderWidth: 1,
+    borderWidth: 0.7,
     borderColor: "#9b9b9b",
-    borderRadius: 18,
-    height: 48,
+    borderRadius: 15,
+    height: 42,
     paddingLeft: 10,
     marginVertical: 20,
   },
diff --git a/components/pages/brain_dump/DumpItem.tsx b/components/pages/brain_dump/DumpItem.tsx
index 9c08bbb..4228b0a 100644
--- a/components/pages/brain_dump/DumpItem.tsx
+++ b/components/pages/brain_dump/DumpItem.tsx
@@ -1,7 +1,10 @@
 import { View, Text } from "react-native-ui-lib";
 import React, { useState } from "react";
 import { IBrainDump } from "@/contexts/DumpContext";
-import { TouchableOpacity, TouchableWithoutFeedback } from "react-native-gesture-handler";
+import {
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+} from "react-native-gesture-handler";
 import MoveBrainDump from "./MoveBrainDump";
 
 const BrainDumpItem = (props: { item: IBrainDump }) => {
@@ -17,13 +20,30 @@ const BrainDumpItem = (props: { item: IBrainDump }) => {
           paddingV-10
           style={{ borderRadius: 15, elevation: 2 }}
         >
-          <Text text70B style={{fontSize: 15, fontFamily: 'Manrope_600SemiBold'}} marginB-8>
+          <Text
+            text70B
+            style={{ fontSize: 15, fontFamily: "Manrope_600SemiBold" }}
+            marginB-8
+          >
             {props.item.title}
           </Text>
-          <Text text70 style={{fontSize: 13, fontFamily: "Manrope_400Regular", color: '#5c5c5c'}}>{props.item.description}</Text>
+          <Text
+            text70
+            style={{
+              fontSize: 13,
+              fontFamily: "Manrope_400Regular",
+              color: "#5c5c5c",
+            }}
+          >
+            {props.item.description}
+          </Text>
         </View>
       </TouchableWithoutFeedback>
-      <MoveBrainDump item={props.item} isVisible={isVisible} setIsVisible={setIsVisible} />
+      <MoveBrainDump
+        item={props.item}
+        isVisible={isVisible}
+        setIsVisible={setIsVisible}
+      />
     </View>
   );
 };
diff --git a/components/pages/brain_dump/DumpList.tsx b/components/pages/brain_dump/DumpList.tsx
index 8cd8efb..d8b7611 100644
--- a/components/pages/brain_dump/DumpList.tsx
+++ b/components/pages/brain_dump/DumpList.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { useBrainDumpContext } from "@/contexts/DumpContext";
 import { FlatList } from "react-native";
 import BrainDumpItem from "./DumpItem";
+import LinearGradient from "react-native-linear-gradient";
 
 const DumpList = (props: { searchText: string }) => {
   const { brainDumps } = useBrainDumpContext();
@@ -21,6 +22,7 @@ const DumpList = (props: { searchText: string }) => {
   return (
     <View marginB-70>
       <FlatList
+        style={{ zIndex: -1 }}
         data={filteredBrainDumps}
         keyExtractor={(item) => item.title}
         renderItem={({ item }) => (
diff --git a/components/pages/brain_dump/MoveBrainDump.tsx b/components/pages/brain_dump/MoveBrainDump.tsx
index ad11ac8..97b974f 100644
--- a/components/pages/brain_dump/MoveBrainDump.tsx
+++ b/components/pages/brain_dump/MoveBrainDump.tsx
@@ -7,7 +7,7 @@ import {
   TextField,
   TouchableOpacity,
 } from "react-native-ui-lib";
-import { StyleSheet } from "react-native";
+import { Dimensions, StyleSheet } from "react-native";
 import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
 import { IBrainDump, useBrainDumpContext } from "@/contexts/DumpContext";
 import PenIcon from "@/assets/svgs/PenIcon";
@@ -28,6 +28,7 @@ const MoveBrainDump = (props: {
   const [description, setDescription] = useState<string>(
     props.item.description
   );
+  const { width } = Dimensions.get("screen");
 
   useEffect(() => {
     updateBrainDumpItem(props.item.id, { description: description });
@@ -37,20 +38,26 @@ const MoveBrainDump = (props: {
     <Dialog
       bottom={true}
       height={"90%"}
+      width={width}
       panDirection={PanningDirectionsEnum.DOWN}
       onDismiss={() => props.setIsVisible(false)}
       containerStyle={{
-        borderRadius: 10,
+        borderRadius: 15,
         backgroundColor: "white",
         width: "100%",
         alignSelf: "stretch",
-        padding: 0,
+        padding: 10,
         paddingTop: 3,
         margin: 0,
       }}
       visible={props.isVisible}
     >
-      <View row spread paddingH-10 paddingV-15>
+      <View center paddingT-8>
+        <TouchableOpacity onPress={() => props.setIsVisible(false)}>
+          <DropModalIcon />
+        </TouchableOpacity>
+      </View>
+      <View row spread paddingH-10 paddingB-15>
         <Button
           color="#05a8b6"
           style={styles.topBtn}
@@ -59,16 +66,10 @@ const MoveBrainDump = (props: {
             props.setIsVisible(false);
           }}
         />
-        <Button
-          style={styles.topBtn}
-          iconSource={() => <DropModalIcon />}
-          onPress={() => {
-            props.setIsVisible(false);
-          }}
-        />
         <View row>
           <Button
             style={styles.topBtn}
+            marginR-10
             iconSource={() => <PenIcon />}
             onPress={() => {
               console.log("selview");
@@ -87,16 +88,23 @@ const MoveBrainDump = (props: {
         </View>
       </View>
       <View centerH>
-        <Text text60R>{props.item.title} </Text>
+        <Text style={styles.title}>{props.item.title} </Text>
       </View>
       <View style={styles.divider} />
-      <View row marginL-10 gap-5>
-        <View paddingT-8>
+      <View row gap-5>
+        <View paddingT-8 marginR-5>
           <MenuIcon width={20} height={12} />
         </View>
         <TextField
           textAlignVertical="top"
           multiline
+          fieldStyle={{
+            width: "94%",
+          }}
+          style={{
+            fontFamily: "Manrope_400Regular",
+            fontSize: 14,
+          }}
           placeholder="Add description"
           numberOfLines={3}
           value={description}
@@ -106,7 +114,7 @@ const MoveBrainDump = (props: {
         />
       </View>
       <View style={styles.divider} />
-      <View gap-20 paddingH-10>
+      <View gap-20>
         <TouchableOpacity>
           <View row centerV>
             <NavToDosIcon
@@ -162,6 +170,7 @@ const styles = StyleSheet.create({
   topBtn: {
     backgroundColor: "white",
     color: "#05a8b6",
+    marginTop: -3,
   },
   rotateSwitch: {
     marginLeft: 35,
@@ -179,6 +188,10 @@ const styles = StyleSheet.create({
   optionsIcon: {
     marginRight: 10,
   },
+  title: {
+    fontSize: 22,
+    fontFamily: "Manrope_500Medium",
+  },
 });
 
 export default MoveBrainDump;
diff --git a/components/pages/calendar/CalendarPage.tsx b/components/pages/calendar/CalendarPage.tsx
index 8c953fc..0cfd397 100644
--- a/components/pages/calendar/CalendarPage.tsx
+++ b/components/pages/calendar/CalendarPage.tsx
@@ -126,14 +126,20 @@ export default function CalendarPage() {
           }}
         >
           <View row centerV gap-3>
-            <Text style={{fontFamily: 'Manrope_500Medium', fontSize: 17}}>{selectedDate.getFullYear()}</Text>
+            <Text style={{ fontFamily: "Manrope_500Medium", fontSize: 17 }}>
+              {selectedDate.getFullYear()}
+            </Text>
             <Picker
               value={months[selectedDate.getMonth()]} // Get the month from the date
               placeholder={"Select Month"}
-              style={{fontFamily: 'Manrope_500Medium', fontSize: 17}}
+              style={{ fontFamily: "Manrope_500Medium", fontSize: 17 }}
               mode={PickerModes.SINGLE}
               onChange={(itemValue) => handleMonthChange(itemValue as string)}
               trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
+              topBarProps={{
+                title: selectedDate.getFullYear().toString(),
+                titleStyle: { fontFamily: "Manrope_500Medium", fontSize: 17 },
+              }}
             >
               {months.map((month) => (
                 <Picker.Item key={month} label={month} value={month} />
diff --git a/components/pages/todos/AddChoreDialog.tsx b/components/pages/todos/AddChoreDialog.tsx
index 9b9e71c..8dc80c1 100644
--- a/components/pages/todos/AddChoreDialog.tsx
+++ b/components/pages/todos/AddChoreDialog.tsx
@@ -11,14 +11,14 @@ import {
   ButtonSize,
 } from "react-native-ui-lib";
 import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
-import { StyleSheet } from "react-native";
+import { Dimensions, 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
+  selectedTodo?: IToDo;
 }
 
 const defaultTodo = {
@@ -27,12 +27,15 @@ const defaultTodo = {
   points: 10,
   date: new Date(),
   rotate: false,
-  repeatType: "Every week"
+  repeatType: "Every week",
 };
 
 const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
   const { addToDo, updateToDo } = useToDosContext();
-  const [todo, setTodo] = useState<IToDo>(addChoreDialogProps.selectedTodo ?? defaultTodo)
+  const [todo, setTodo] = useState<IToDo>(
+    addChoreDialogProps.selectedTodo ?? defaultTodo
+  );
+  const { width, height } = Dimensions.get("screen");
 
   const [points, setPoints] = useState<number>(todo.points);
 
@@ -55,12 +58,12 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
     <Dialog
       bottom={true}
       height={"90%"}
+      width={width}
       panDirection={PanningDirectionsEnum.DOWN}
       onDismiss={() => handleClose}
       containerStyle={{
         borderRadius: 10,
         backgroundColor: "white",
-        width: "100%",
         alignSelf: "stretch",
         padding: 0,
         paddingTop: 4,
@@ -80,7 +83,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
         <View marginT-12>
           <DropModalIcon
             onPress={() => {
-              handleClose()
+              handleClose();
             }}
           />
         </View>
@@ -91,7 +94,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
           onPress={() => {
             try {
               if (addChoreDialogProps.selectedTodo) {
-                updateToDo({...todo, points: points})
+                updateToDo({ ...todo, points: points });
               } else {
                 addToDo({
                   ...todo,
@@ -110,7 +113,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
         placeholder="Add a To Do"
         value={todo?.title}
         onChangeText={(text) => {
-          setTodo((oldValue: IToDo) => ({...oldValue, title: text}));
+          setTodo((oldValue: IToDo) => ({ ...oldValue, title: text }));
         }}
         placeholderTextColor="#2d2d30"
         text60R
@@ -128,7 +131,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
                 text70
                 marginL-8
                 onChange={(date) => {
-                  setTodo((oldValue: IToDo) => ({...oldValue, date: date}));
+                  setTodo((oldValue: IToDo) => ({ ...oldValue, date: date }));
                 }}
               />
             </View>
@@ -143,9 +146,17 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
             onChange={(value) => {
               if (value) {
                 if (value.toString() == "None") {
-                  setTodo((oldValue) => ({...oldValue, date: null, repeatType: "None"}));
+                  setTodo((oldValue) => ({
+                    ...oldValue,
+                    date: null,
+                    repeatType: "None",
+                  }));
                 } else {
-                  setTodo((oldValue) => ({...oldValue, date: new Date(), repeatType: value.toString()}))
+                  setTodo((oldValue) => ({
+                    ...oldValue,
+                    date: new Date(),
+                    repeatType: value.toString(),
+                  }));
                 }
               }
             }}
@@ -212,7 +223,9 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
           onColor={"#ea156c"}
           value={todo.rotate}
           marginL-10
-          onValueChange={(value) => setTodo((oldValue) => ({...oldValue, rotate: value}))}
+          onValueChange={(value) =>
+            setTodo((oldValue) => ({ ...oldValue, rotate: value }))
+          }
         />
       </View>
       <View style={styles.divider} />
diff --git a/components/pages/todos/ToDosList.tsx b/components/pages/todos/ToDosList.tsx
index 0a68263..2f2775a 100644
--- a/components/pages/todos/ToDosList.tsx
+++ b/components/pages/todos/ToDosList.tsx
@@ -4,7 +4,7 @@ import { useToDosContext } from "@/contexts/ToDosContext";
 import ToDoItem from "./ToDoItem";
 import { format, isToday, isTomorrow } from "date-fns";
 import { AntDesign } from "@expo/vector-icons";
-import {IToDo} from "@/hooks/firebase/types/todoData";
+import { IToDo } from "@/hooks/firebase/types/todoData";
 
 const groupToDosByDate = (toDos: IToDo[]) => {
   let sortedTodos = toDos.sort((a, b) => a.date - b.date);
@@ -30,7 +30,7 @@ const groupToDosByDate = (toDos: IToDo[]) => {
   }, {} as { [key: string]: IToDo[] });
 };
 
-const ToDosList = ({isSettings}: {isSettings?: boolean}) => {
+const ToDosList = ({ isSettings }: { isSettings?: boolean }) => {
   const { toDos } = useToDosContext();
   const groupedToDos = groupToDosByDate(toDos);
 
@@ -66,16 +66,32 @@ const ToDosList = ({isSettings}: {isSettings?: boolean}) => {
               Unscheduled
             </Text>
             {!expandNoDate && (
-                <AntDesign name="caretright" size={24} color="#fd1575" onPress={() => {setExpandNoDate(!expandNoDate)}}/>
-              )}
-              {expandNoDate && (
-                <AntDesign name="caretdown" size={24} color="#fd1575" onPress={() => {setExpandNoDate(!expandNoDate)}}/>
-              )}
+              <AntDesign
+                name="caretright"
+                size={24}
+                color="#fd1575"
+                onPress={() => {
+                  setExpandNoDate(!expandNoDate);
+                }}
+              />
+            )}
+            {expandNoDate && (
+              <AntDesign
+                name="caretdown"
+                size={24}
+                color="#fd1575"
+                onPress={() => {
+                  setExpandNoDate(!expandNoDate);
+                }}
+              />
+            )}
           </View>
           {expandNoDate &&
             noDateToDos
               .sort((a, b) => Number(a.done) - Number(b.done))
-              .map((item) => <ToDoItem isSettings={isSettings} key={item.id} item={item} />)}
+              .map((item) => (
+                <ToDoItem isSettings={isSettings} key={item.id} item={item} />
+              ))}
         </View>
       )}
 
@@ -101,7 +117,9 @@ const ToDosList = ({isSettings}: {isSettings?: boolean}) => {
               <Text
                 text70
                 style={{
-                  fontWeight: "bold",
+                  fontFamily: "Manrope_700Bold",
+                  fontSize: 15,
+                  color: "#484848",
                 }}
               >
                 {dateKey}
@@ -115,7 +133,9 @@ const ToDosList = ({isSettings}: {isSettings?: boolean}) => {
             </TouchableOpacity>
 
             {isExpanded &&
-              sortedToDos.map((item) => <ToDoItem isSettings={isSettings} key={item.id} item={item} />)}
+              sortedToDos.map((item) => (
+                <ToDoItem isSettings={isSettings} key={item.id} item={item} />
+              ))}
           </View>
         );
       })}
diff --git a/components/pages/todos/ToDosPage.tsx b/components/pages/todos/ToDosPage.tsx
index d5ac22f..8c3aa46 100644
--- a/components/pages/todos/ToDosPage.tsx
+++ b/components/pages/todos/ToDosPage.tsx
@@ -4,7 +4,7 @@ import HeaderTemplate from "@/components/shared/HeaderTemplate";
 import AddChore from "./AddChore";
 import ProgressCard from "./ProgressCard";
 import ToDosList from "./ToDosList";
-import { ScrollView } from "react-native";
+import { Dimensions, ScrollView } from "react-native";
 import { StyleSheet } from "react-native";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
@@ -14,13 +14,16 @@ import UserChoresProgress from "./user-chores/UserChoresProgress";
 const ToDosPage = () => {
   const [pageIndex, setPageIndex] = useState<number>(0);
   const { profileData } = useAuthContext();
+  const { width, height } = Dimensions.get("screen");
   const pageLink = (
     <TouchableOpacity onPress={() => setPageIndex(1)}>
-      <Text color="#ea156d" style={{fontSize: 14}}>View family progress</Text>
+      <Text color="#ea156d" style={{ fontSize: 14 }}>
+        View family progress
+      </Text>
     </TouchableOpacity>
   );
   return (
-    <View paddingH-25 backgroundColor="#f9f8f7" height={"100%"}>
+    <View paddingH-25 backgroundColor="#f9f8f7" height={"100%"} width={width}>
       {pageIndex == 0 && (
         <View>
           <ScrollView