diff --git a/assets/svgs/ArrowRightIcon.tsx b/assets/svgs/ArrowRightIcon.tsx new file mode 100644 index 0000000..37e85cf --- /dev/null +++ b/assets/svgs/ArrowRightIcon.tsx @@ -0,0 +1,19 @@ +import * as React from "react" +import Svg, { SvgProps, Path } from "react-native-svg" +const ArrowRightIcon = (props: SvgProps) => ( + + + +) +export default ArrowRightIcon diff --git a/assets/svgs/CircledXIcon.tsx b/assets/svgs/CircledXIcon.tsx new file mode 100644 index 0000000..9759ef8 --- /dev/null +++ b/assets/svgs/CircledXIcon.tsx @@ -0,0 +1,22 @@ +import * as React from "react"; +import Svg, { SvgProps, Path } from "react-native-svg"; +const CircledXIcon = (props: SvgProps) => ( + + + + +); +export default CircledXIcon; diff --git a/assets/svgs/EmailIcon.tsx b/assets/svgs/EmailIcon.tsx new file mode 100644 index 0000000..47d6e00 --- /dev/null +++ b/assets/svgs/EmailIcon.tsx @@ -0,0 +1,17 @@ +import * as React from "react" +import Svg, { SvgProps, Path } from "react-native-svg" +const EmailIcon = (props: SvgProps) => ( + + + +) +export default EmailIcon diff --git a/assets/svgs/QRIcon.tsx b/assets/svgs/QRIcon.tsx new file mode 100644 index 0000000..f7be63d --- /dev/null +++ b/assets/svgs/QRIcon.tsx @@ -0,0 +1,20 @@ +import * as React from "react" +import Svg, { SvgProps, Path } from "react-native-svg" +const QRIcon = (props: SvgProps) => ( + + + +) +export default QRIcon diff --git a/components/pages/brain_dump/AddBrainDump.tsx b/components/pages/brain_dump/AddBrainDump.tsx index 00bc3f2..a134f5d 100644 --- a/components/pages/brain_dump/AddBrainDump.tsx +++ b/components/pages/brain_dump/AddBrainDump.tsx @@ -1,17 +1,24 @@ -import { View, Text, Button, TextField } from "react-native-ui-lib"; -import React, { useEffect, useState } from "react"; +import { + View, + Text, + Button, + TextField, + TextFieldRef, + TouchableOpacity, +} from "react-native-ui-lib"; +import React, { useEffect, useState, useRef } 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 { Dimensions, StyleSheet } from "react-native"; +import { Dimensions, Keyboard, StyleSheet } from "react-native"; + import DropModalIcon from "@/assets/svgs/DropModalIcon"; -import MenuIcon from "@/assets/svgs/MenuIcon"; import { useBrainDumpContext } from "@/contexts/DumpContext"; interface IAddBrainDumpProps { isVisible: boolean; setIsVisible: (value: boolean) => void; } + const AddBrainDump = ({ addBrainDumpProps, }: { @@ -20,7 +27,10 @@ const AddBrainDump = ({ const { addBrainDump } = useBrainDumpContext(); const [dumpTitle, setDumpTitle] = useState(""); const [dumpDesc, setDumpDesc] = useState(""); - const { width, height } = Dimensions.get("screen"); + const { width } = Dimensions.get("screen"); + + // Refs for the two TextFields + const descriptionRef = useRef(null); useEffect(() => { setDumpDesc(""); @@ -34,14 +44,7 @@ const AddBrainDump = ({ width={width} panDirection={PanningDirectionsEnum.DOWN} onDismiss={() => addBrainDumpProps.setIsVisible(false)} - containerStyle={{ - borderTopRightRadius: 15, - borderTopLeftRadius: 15, - backgroundColor: "white", - padding: 0, - paddingTop: 3, - margin: 0, - }} + containerStyle={styles.dialogContainer} visible={addBrainDumpProps.isVisible} > @@ -53,16 +56,15 @@ const AddBrainDump = ({ addBrainDumpProps.setIsVisible(false); }} /> - addBrainDumpProps.setIsVisible(false)} - /> + addBrainDumpProps.setIsVisible(false)}> + + - - - 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 - > - - - - - - - - {selectedStatus === ProfileType.FAMILY_DEVICE ? "Device Name" : "First Name"} + {(!!parents.length || !!children.length) && ( + <> + + Family + + {[...parents, ...children]?.map((member, index) => ( + + + + + {member.firstName} {member.lastName} - + + {member.userType === ProfileType.PARENT + ? "Admin (You)" + : "Child"} + + - {selectedStatus !== ProfileType.FAMILY_DEVICE && ( - <> - Last Name - - - )} + - {selectedStatus !== ProfileType.FAMILY_DEVICE && ( - <> - Email Address (Optional) - - - )} - - - - ); + ))} + + )} + + {!!caregivers.length && ( + <> + + Caregivers + + {caregivers?.map((member) => ( + + + + + {member.firstName} {member.lastName} + + + Caregiver + + + + setShowQRCodeDialog("")} + showQRCodeDialog={showQRCodeDialog === member?.uid} + userId={member?.uid!} + /> + + ))} + + )} + + {!!familyDevices.length && ( + <> + + Family Devices + + {familyDevices?.map((member, index) => ( + + + + {member.firstName} + + Family Device + + + + setShowQRCodeDialog("")} + showQRCodeDialog={showQRCodeDialog === member?.uid} + userId={member?.uid!} + /> + + ))} + + )} + + + + setShowAddUserDialog(true), + style: styles.bottomButton, + }} + /> + + setShowAddUserDialog(false)} + panDirection={PanningProvider.Directions.DOWN} + > + + + Add a new user device + + + + + + setShowAddUserDialog(false)} + center + marginT-30 + > + Return to user settings + + + + + setShowNewUserInfoDialog(false)} + > + + + + New User Information + + {setShowNewUserInfoDialog(false)}}> + + + + + + + + } + backgroundColor={Colors.grey60} + style={{ borderRadius: 25 }} + center + /> + {}}> + + Upload User Profile Photo + + + + + Member Status + setSelectedStatus(item)} + style={styles.picker} + showSearch + floatingPlaceholder + > + + + + + + + + {selectedStatus === ProfileType.FAMILY_DEVICE + ? "Device Name" + : "First Name"} + + {lNameRef.current?.focus()}} + blurOnSubmit={false} + /> + + {selectedStatus !== ProfileType.FAMILY_DEVICE && ( + <> + Last Name + {emailRef.current?.focus()}} + blurOnSubmit={false} + /> + + )} + + {selectedStatus !== ProfileType.FAMILY_DEVICE && ( + <> + Email Address (Optional) + + + )} + + + + ); }; 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, - }, - subTit: { - fontFamily: "Manrope_500Medium", - fontSize: 15, - }, + dialogBtn: { + height: 47, + width: 279, + }, + dialogTitle: { fontFamily: "Manrope_600SemiBold", fontSize: 22 }, + dialogBackBtn: { + fontFamily: "PlusJakartaSans_500Medium", + fontSize: 15, + color: "#a7a7a7", + }, + card: { + marginVertical: 15, + backgroundColor: "white", + width: "100%", + borderRadius: 15, + padding: 20, + }, + bottomButton: { + position: "absolute", + bottom: 80, + width: "100%", + }, + familyCard: { + marginBottom: 10, + borderRadius: 10, + backgroundColor: Colors.white, + width: "100%", + }, + inputField: { + fontFamily: "PlusJakartaSans_500Medium", + fontSize: 13, + color: "#565656", + 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, + }, + subTit: { + fontFamily: "Manrope_500Medium", + fontSize: 15, + }, + dialogBtnLbl: { + fontFamily: "PlusJakartaSans_500Medium", + fontSize: 15, + color: "white", + }, + divider: { height: 0.7, backgroundColor: "#e6e6e6", width: "100%" }, + jakarta12: { + fontFamily: "PlusJakartaSans_500Medium", + fontSize: 12, + color: "#a1a1a1", + }, + jakarta13: { + fontFamily: "PlusJakartaSans_500Medium", + fontSize: 13, + }, }); export default MyGroup; diff --git a/components/pages/settings/user_settings_views/UserMenu.tsx b/components/pages/settings/user_settings_views/UserMenu.tsx index ed01179..74f4bfc 100644 --- a/components/pages/settings/user_settings_views/UserMenu.tsx +++ b/components/pages/settings/user_settings_views/UserMenu.tsx @@ -30,7 +30,7 @@ const UserMenu = ({ customContent={ - Show Login QR Code + Show Login QR Code } diff --git a/components/pages/todos/AddChoreDialog.tsx b/components/pages/todos/AddChoreDialog.tsx index 8dc80c1..c8f061c 100644 --- a/components/pages/todos/AddChoreDialog.tsx +++ b/components/pages/todos/AddChoreDialog.tsx @@ -1,5 +1,5 @@ import { View, Text, Button, Switch } from "react-native-ui-lib"; -import React, { useState } from "react"; +import React, { useRef, useState } from "react"; import PointsSlider from "@/components/shared/PointsSlider"; import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext"; import { Feather, AntDesign, Ionicons } from "@expo/vector-icons"; @@ -14,6 +14,7 @@ import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView import { Dimensions, StyleSheet } from "react-native"; import DropModalIcon from "@/assets/svgs/DropModalIcon"; import { IToDo } from "@/hooks/firebase/types/todoData"; +import AssigneesDisplay from "@/components/shared/AssigneesDisplay"; interface IAddChoreDialog { isVisible: boolean; @@ -111,6 +112,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => { { setTodo((oldValue: IToDo) => ({ ...oldValue, title: text })); @@ -197,25 +199,8 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => { label="Assign" /> - - - + + Take Turns