Merge branch 'dev'

2025-11-26 16:34:54 +00:00 · 2024-10-16 21:07:26 +02:00
parent 939b525a4b e4eb67fba7
commit d00c89ec6c
9 changed files with 218 additions and 106 deletions
--- 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"
--- 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,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,
-          right: 20,
+          bottom: 0,
+          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,
-    height: 48,
+    borderRadius: 15,
+    height: 42,
    paddingLeft: 10,
    marginVertical: 20,
  },
--- 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>
  );
 };
--- 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 }) => (
--- 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;
--- 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} />
--- 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} />
--- 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)}}/>
+              <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>
        );
      })}
--- 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