ui changes

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";
@@ -20,6 +20,7 @@ const AddBrainDump = ({
   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);
           }}
         />

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,12 +8,14 @@ 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 height={"100%"}>
       <View>
         <ScrollView
           showsVerticalScrollIndicator={false}
@@ -23,6 +25,13 @@ const BrainDumpPage = () => {
             <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>
@@ -39,6 +48,10 @@ const BrainDumpPage = () => {
                       style={{ paddingRight: 10 }}
                     />
                   }
+                  style={{
+                    fontFamily: "Manrope_500Medium",
+                    fontSize: 15,
+                  }}
                   placeholder="Search notes..."
                 />
               </View>
@@ -46,12 +59,26 @@ const BrainDumpPage = () => {
             </View>
           </View>
         </ScrollView>
-      <Button
+      </View>
+      <LinearGradient
+        colors={["#f2f2f2", "transparent"]}
+        start={{ x: 0.5, y: 1 }}
+        end={{ x: 0.5, y: 0 }}
         style={{
           position: "absolute",
-          bottom: 20,
+          bottom: 0,
-          right: 20,
+          height: 90,
+          width: Dimensions.get("screen").width,
+        }}
+      >
+        <Button
+          style={{
             height: 40,
+            position: "relative",
+            marginLeft: "auto",
+            width: 20,
+            right: 20,
+            bottom: -10,
             borderRadius: 30,
             backgroundColor: "#fd1775",
           }}
@@ -63,11 +90,15 @@ const BrainDumpPage = () => {
         >
           <View row centerV centerH>
             <MaterialIcons name="add" size={22} color={"white"} />
-          <Text white style={{ fontSize: 16, fontFamily: 'Manrope_600SemiBold' }}>
+            <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,
+    borderRadius: 15,
-    height: 48,
+    height: 42,
     paddingLeft: 10,
     marginVertical: 20,
   },

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>
   );
 };

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 }) => (

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 row gap-5>
-        <View paddingT-8>
+        <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;

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} />

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,
@@ -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} />

components/pages/todos/ToDosList.tsx

@@ -66,16 +66,32 @@ const ToDosList = ({isSettings}: {isSettings?: boolean}) => {
               Unscheduled
             </Text>
             {!expandNoDate && (
-                <AntDesign name="caretright" 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)}}/>
+              <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>
         );
       })}

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