ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-07-15 09:45:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

new fonts, ui tweaks

Browse Source
This commit is contained in:
ivic00
2024-10-15 23:07:21 +02:00
parent 4b01e18ac0
commit 43d0d67044
34 changed files with 992 additions and 545 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/(auth)/_layout.tsx
View File

@ -43,7 +43,7 @@ export default function TabLayout() {
return ( return (
<DrawerContentScrollView {...props} style={{ height: "100%" }}> <DrawerContentScrollView {...props} style={{ height: "100%" }}>
<View centerH centerV margin-30> <View centerH centerV margin-30>
<Text text40>Welcome to Cally</Text> <Text style={styles.title}>Welcome to Cally</Text>
</View> </View>
<View <View
style={{ style={{
@ -101,7 +101,7 @@ export default function TabLayout() {
<Button <Button
onPress={() => props.navigation.navigate("settings")} onPress={() => props.navigation.navigate("settings")}
label={"Manage Settings"} label={"Manage Settings"}
labelStyle={{fontFamily: "Manrope_500Medium"}} labelStyle={styles.label}
iconSource={() => ( iconSource={() => (
<View <View
backgroundColor="#ededed" backgroundColor="#ededed"
@ -120,8 +120,8 @@ export default function TabLayout() {
paddingV-30 paddingV-30
marginH-30 marginH-30
marginB-10 marginB-10
borderRadius={15} borderRadius={18.55}
style={{ elevation: 1 }} style={{ elevation: 0 }}
/> />
<Button <Button
@ -136,7 +136,7 @@ export default function TabLayout() {
}} }}
label="Sign out of Cally" label="Sign out of Cally"
color="#fd1775" color="#fd1775"
labelStyle={{fontFamily: 'Manrope_700Bold'}} labelStyle={styles.signOut}
onPress={() => signOut()} onPress={() => signOut()}
/> />
</DrawerContentScrollView> </DrawerContentScrollView>
@ -196,3 +196,13 @@ export default function TabLayout() {
</Drawer> </Drawer>
); );
} }
const styles = StyleSheet.create({
signOut: { fontFamily: "Poppins_500Medium", fontSize: 15 },
label: { fontFamily: "Poppins_400Medium", fontSize: 15 },
title: {
fontSize: 26.13,
fontFamily: 'Manrope_600SemiBold',
color: "#262627"
}
});

74
app/_layout.tsx
View File

@ -10,6 +10,42 @@ import {
Manrope_700Bold, Manrope_700Bold,
Manrope_800ExtraBold, Manrope_800ExtraBold,
} from "@expo-google-fonts/manrope"; } from "@expo-google-fonts/manrope";
import {
PlusJakartaSans_200ExtraLight,
PlusJakartaSans_300Light,
PlusJakartaSans_400Regular,
PlusJakartaSans_500Medium,
PlusJakartaSans_600SemiBold,
PlusJakartaSans_700Bold,
PlusJakartaSans_800ExtraBold,
PlusJakartaSans_200ExtraLight_Italic,
PlusJakartaSans_300Light_Italic,
PlusJakartaSans_400Regular_Italic,
PlusJakartaSans_500Medium_Italic,
PlusJakartaSans_600SemiBold_Italic,
PlusJakartaSans_700Bold_Italic,
PlusJakartaSans_800ExtraBold_Italic,
} from "@expo-google-fonts/plus-jakarta-sans";
import {
Poppins_100Thin,
Poppins_100Thin_Italic,
Poppins_200ExtraLight,
Poppins_200ExtraLight_Italic,
Poppins_300Light,
Poppins_300Light_Italic,
Poppins_400Regular,
Poppins_400Regular_Italic,
Poppins_500Medium,
Poppins_500Medium_Italic,
Poppins_600SemiBold,
Poppins_600SemiBold_Italic,
Poppins_700Bold,
Poppins_700Bold_Italic,
Poppins_800ExtraBold,
Poppins_800ExtraBold_Italic,
Poppins_900Black,
Poppins_900Black_Italic,
} from "@expo-google-fonts/poppins";
import { Stack } from "expo-router"; import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen"; import * as SplashScreen from "expo-splash-screen";
import "react-native-reanimated"; import "react-native-reanimated";
@ -30,9 +66,9 @@ SplashScreen.preventAutoHideAsync();
const queryClient = new QueryClient(); const queryClient = new QueryClient();
if (__DEV__) { if (__DEV__) {
functions().useEmulator('localhost', 5001); functions().useEmulator("localhost", 5001);
firestore().useEmulator("localhost", 5471); firestore().useEmulator("localhost", 5471);
auth().useEmulator("http://localhost:9099"); auth().useEmulator("http://localhost:9099");
} }
type TextStyleBase = type TextStyleBase =
@ -136,6 +172,38 @@ export default function RootLayout() {
Manrope_600SemiBold, Manrope_600SemiBold,
Manrope_700Bold, Manrope_700Bold,
Manrope_800ExtraBold, Manrope_800ExtraBold,
PlusJakartaSans_200ExtraLight,
PlusJakartaSans_300Light,
PlusJakartaSans_400Regular,
PlusJakartaSans_500Medium,
PlusJakartaSans_600SemiBold,
PlusJakartaSans_700Bold,
PlusJakartaSans_800ExtraBold,
PlusJakartaSans_200ExtraLight_Italic,
PlusJakartaSans_300Light_Italic,
PlusJakartaSans_400Regular_Italic,
PlusJakartaSans_500Medium_Italic,
PlusJakartaSans_600SemiBold_Italic,
PlusJakartaSans_700Bold_Italic,
PlusJakartaSans_800ExtraBold_Italic,
Poppins_100Thin,
Poppins_100Thin_Italic,
Poppins_200ExtraLight,
Poppins_200ExtraLight_Italic,
Poppins_300Light,
Poppins_300Light_Italic,
Poppins_400Regular,
Poppins_400Regular_Italic,
Poppins_500Medium,
Poppins_500Medium_Italic,
Poppins_600SemiBold,
Poppins_600SemiBold_Italic,
Poppins_700Bold,
Poppins_700Bold_Italic,
Poppins_800ExtraBold,
Poppins_800ExtraBold_Italic,
Poppins_900Black,
Poppins_900Black_Italic,
}); });
useEffect(() => { useEffect(() => {

BIN
assets/images/child-picture.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
assets/images/child1-picture.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

20
assets/svgs/AddImageIcon.tsx Normal file
View File

@ -0,0 +1,20 @@
import * as React from "react"
import Svg, { Path, SvgProps } from "react-native-svg"
const AddImageIcon: React.FC<SvgProps> = (props) => (
<Svg
width={props.width || 28}
height={props.width || 28}
viewBox="0 0 28 28"
fill="none"
{...props}
>
<Path
stroke={props.color || "#FD1775"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.936}
d="M16.833 20.433 14.34 17.96c-1.146-1.137-1.719-1.705-2.379-1.918a2.903 2.903 0 0 0-1.785 0c-.66.213-1.233.781-2.379 1.918L1.99 23.808m14.843-3.375.496-.492c1.17-1.16 1.755-1.74 2.426-1.952a2.903 2.903 0 0 1 1.811.02c.666.228 1.238.821 2.381 2.008l1.214 1.232m-8.328-.816 5.743 5.844M1.99 23.807c.044.379.121.676.255.939.279.546.723.99 1.27 1.269.62.316 1.434.316 3.06.316h13.94c.901 0 1.553 0 2.061-.054M1.99 23.807c-.061-.515-.061-1.183-.061-2.122V7.745c0-1.626 0-2.439.316-3.06.279-.547.723-.99 1.27-1.27.62-.316 1.434-.316 3.06-.316h5.518m10.483 23.178c.408-.043.723-.121 1-.262.546-.279.99-.723 1.268-1.27.317-.62.317-1.434.317-3.06v-5.518m-2.904-5.808V6.003m0 0V1.647m0 4.356h4.356m-4.356 0H17.9"
/>
</Svg>
)
export default AddImageIcon

19
assets/svgs/AddPersonIcon.tsx Normal file
View File

@ -0,0 +1,19 @@
import * as React from "react"
import Svg, { SvgProps, Path } from "react-native-svg"
const AddPersonIcon = (props: SvgProps) => (
<Svg
width={props. width || 23}
height={props. width || 23}
viewBox="0 0 23 23"
fill="none"
{...props}
>
<Path
fill={props.color || "#8A8A8A"}
fillRule="evenodd"
d="M22.089 19.5a1 1 0 0 1-1 .998h-1v1.05a1 1 0 0 1-2 0v-1.05h-1a1 1 0 0 1-1-.998 1 1 0 0 1 1-.998h1v-.945a1 1 0 0 1 2 0v.945h1a1 1 0 0 1 1 .998Zm-11.377-9.045a7.844 7.844 0 0 0-.654-.033c-.203 0-.402.014-.601.03a2.997 2.997 0 0 1-2.368-2.924 3 3 0 0 1 6 0 2.999 2.999 0 0 1-2.377 2.927Zm-8.605 7.05c-.014.005-.004 0-.018.006V3.53c0-.55.448-.99 1-.99h6.847a4.994 4.994 0 0 0-4.847 4.984c0 1.441.622 2.73 1.602 3.642-2.478 1.147-4.27 3.516-4.584 6.338ZM14.992 6.52a4.955 4.955 0 0 0-4.837-3.98h6.934a1 1 0 0 1 1 .997v8.979a1 1 0 0 0 2 0V2.54a1.997 1.997 0 0 0-2-1.995h-16c-1.105 0-2 .893-2 1.995v15.962c0 1.102.895 1.996 2 1.996h10a1 1 0 0 0 1-.998 1 1 0 0 0-1-.998H4.064s-.006-.065-.006-.106c0-6.084 7.386-6.888 9.24-5.168 1.074.995 2.465-.59 1.387-1.354a7.933 7.933 0 0 0-1.221-.712c1.214-1.115 1.889-2.785 1.528-4.641Z"
clipRule="evenodd"
/>
</Svg>
)
export default AddPersonIcon

1
assets/svgs/MenuIcon.tsx
View File

@ -9,6 +9,7 @@ const MenuIcon: React.FC<MenuIconProps> = (props) => (
<Svg <Svg
width={24} width={24}
height={16} height={16}
viewBox="0 0 24 16"
fill="none" fill="none"
{...props} {...props}
> >

3
assets/svgs/NavCalendarIcon.tsx
View File

@ -4,11 +4,12 @@ const NavCalendarIcon: React.FC<SvgProps> = (props) => (
<Svg <Svg
width={28} width={28}
height={28} height={28}
viewBox="0 0 28 28"
fill="none" fill="none"
{...props} {...props}
> >
<Path <Path
stroke="#07B8C7" stroke={props.color || "#07B8C7"}
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
strokeWidth={2.124} strokeWidth={2.124}

9
assets/svgs/NavToDosIcon.tsx
View File

@ -2,14 +2,15 @@ import * as React from "react"
import Svg, { Path, SvgProps } from "react-native-svg" import Svg, { Path, SvgProps } from "react-native-svg"
const NavToDosIcon: React.FC<SvgProps> = (props) => ( const NavToDosIcon: React.FC<SvgProps> = (props) => (
<Svg <Svg
width={30} width={props.width || 30}
height={30} height={props.width || 30}
viewBox="0 0 30 30"
fill="none" fill="none"
{...props} {...props}
> >
<Path <Path
fill="#8005EB" fill={props.color || "#8005EB"}
stroke="#8005EB" stroke={props.color || "#8005EB"}
strokeWidth={0.5} strokeWidth={0.5}
d="M15.038 29.649c-7.953 0-14.4-6.447-14.4-14.4s6.447-14.4 14.4-14.4 14.4 6.447 14.4 14.4-6.447 14.4-14.4 14.4Zm0-1.44c7.157 0 12.96-5.802 12.96-12.96 0-7.158-5.803-12.96-12.96-12.96-7.158 0-12.96 5.802-12.96 12.96 0 7.158 5.802 12.96 12.96 12.96Zm4.53-17.07a.72.72 0 1 1 1.019 1.019l-7.2 7.2a.72.72 0 0 1-1.018 0l-2.88-2.88a.72.72 0 1 1 1.018-1.018l2.37 2.37 6.692-6.69Z" d="M15.038 29.649c-7.953 0-14.4-6.447-14.4-14.4s6.447-14.4 14.4-14.4 14.4 6.447 14.4 14.4-6.447 14.4-14.4 14.4Zm0-1.44c7.157 0 12.96-5.802 12.96-12.96 0-7.158-5.803-12.96-12.96-12.96-7.158 0-12.96 5.802-12.96 12.96 0 7.158 5.802 12.96 12.96 12.96Zm4.53-17.07a.72.72 0 1 1 1.019 1.019l-7.2 7.2a.72.72 0 0 1-1.018 0l-2.88-2.88a.72.72 0 1 1 1.018-1.018l2.37 2.37 6.692-6.69Z"
/> />

5
assets/svgs/ProfileIcon.tsx
View File

@ -2,8 +2,9 @@ import * as React from "react"
import Svg, { Path, SvgProps } from "react-native-svg" import Svg, { Path, SvgProps } from "react-native-svg"
const ProfileIcon: React.FC<SvgProps> = (props) => ( const ProfileIcon: React.FC<SvgProps> = (props) => (
<Svg <Svg
width={21} width={22}
height={21} height={22}
viewBox="0 0 21 21"
fill="none" fill="none"
{...props} {...props}
> >

21
assets/svgs/RemindersIcon.tsx Normal file
View File

@ -0,0 +1,21 @@
import * as React from "react";
import Svg, { SvgProps, Path } from "react-native-svg";
const RemindersIcon = (props: SvgProps) => (
<Svg
width={props.width || 22}
height={props.width || 22}
viewBox="0 0 22 22"
fill="none"
{...props}
>
<Path
fill={props.color || "#919191"}
fillRule="evenodd"
stroke={props.color || "#919191"}
strokeWidth={0.4}
d="M3.974 3.96C7.964-.023 14.45.02 18.464 4.034c4.016 4.016 4.057 10.506.067 14.495-3.99 3.99-10.48 3.95-14.495-.067a10.315 10.315 0 0 1-2.94-8.705.788.788 0 1 1 1.561.214 8.738 8.738 0 0 0 2.494 7.376c3.41 3.411 8.902 3.43 12.265.067C20.78 14.05 20.76 8.56 17.35 5.148c-3.41-3.41-8.897-3.43-12.26-.072l.786.004a.788.788 0 1 1-.008 1.576L3.19 6.643a.788.788 0 0 1-.785-.784l-.013-2.677a.788.788 0 1 1 1.577-.007l.004.786Zm7.276 2.293c.435 0 .788.353.788.789v3.878l2.398 2.398a.788.788 0 1 1-1.115 1.115l-2.86-2.86V7.043c0-.436.354-.789.789-.789Z"
clipRule="evenodd"
/>
</Svg>
);
export default RemindersIcon;

2
components/pages/brain_dump/BrainDumpPage.tsx
View File

@ -63,7 +63,7 @@ const BrainDumpPage = () => {
> >
<View row centerV centerH> <View row centerV centerH>
<MaterialIcons name="add" size={22} color={"white"} /> <MaterialIcons name="add" size={22} color={"white"} />
<Text white tex30 style={{ fontSize: 17 }}> <Text white style={{ fontSize: 16, fontFamily: 'Manrope_600SemiBold' }}>
New New
</Text> </Text>
</View> </View>

9
components/pages/brain_dump/DumpItem.tsx
View File

@ -13,13 +13,14 @@ const BrainDumpItem = (props: { item: IBrainDump }) => {
<View <View
backgroundColor="white" backgroundColor="white"
marginV-5 marginV-5
padding-15 paddingH-13
style={{ borderRadius: 20, elevation: 2 }} paddingV-10
style={{ borderRadius: 15, elevation: 2 }}
> >
<Text text70B style={{fontSize: 17, fontFamily: 'Manrope_700Bold'}} marginB-8> <Text text70B style={{fontSize: 15, fontFamily: 'Manrope_600SemiBold'}} marginB-8>
{props.item.title} {props.item.title}
</Text> </Text>
<Text text70 style={{fontSize: 15, fontFamily: "Manrope_400Regular", color: '#5c5c5c'}}>{props.item.description}</Text> <Text text70 style={{fontSize: 13, fontFamily: "Manrope_400Regular", color: '#5c5c5c'}}>{props.item.description}</Text>
</View> </View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
<MoveBrainDump item={props.item} isVisible={isVisible} setIsVisible={setIsVisible} /> <MoveBrainDump item={props.item} isVisible={isVisible} setIsVisible={setIsVisible} />

70
components/pages/brain_dump/MoveBrainDump.tsx
View File

@ -1,14 +1,23 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Button, Dialog, View, Text, TextField } from "react-native-ui-lib"; import {
Button,
Dialog,
View,
Text,
TextField,
TouchableOpacity,
} from "react-native-ui-lib";
import { StyleSheet } from "react-native"; import { StyleSheet } from "react-native";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView"; import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import { IBrainDump, useBrainDumpContext } from "@/contexts/DumpContext"; import { IBrainDump, useBrainDumpContext } from "@/contexts/DumpContext";
import { Entypo, EvilIcons, Feather, Octicons } from "@expo/vector-icons";
import { TouchableOpacity } from "react-native-gesture-handler";
import PenIcon from "@/assets/svgs/PenIcon"; import PenIcon from "@/assets/svgs/PenIcon";
import BinIcon from "@/assets/svgs/BinIcon"; import BinIcon from "@/assets/svgs/BinIcon";
import DropModalIcon from "@/assets/svgs/DropModalIcon"; import DropModalIcon from "@/assets/svgs/DropModalIcon";
import CloseXIcon from "@/assets/svgs/CloseXIcon"; import CloseXIcon from "@/assets/svgs/CloseXIcon";
import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
import RemindersIcon from "@/assets/svgs/RemindersIcon";
import MenuIcon from "@/assets/svgs/MenuIcon";
const MoveBrainDump = (props: { const MoveBrainDump = (props: {
item: IBrainDump; item: IBrainDump;
@ -63,6 +72,7 @@ const MoveBrainDump = (props: {
iconSource={() => <PenIcon />} iconSource={() => <PenIcon />}
onPress={() => { onPress={() => {
console.log("selview"); console.log("selview");
props.setIsVisible(false);
}} }}
/> />
<Button <Button
@ -80,13 +90,10 @@ const MoveBrainDump = (props: {
<Text text60R>{props.item.title} </Text> <Text text60R>{props.item.title} </Text>
</View> </View>
<View style={styles.divider} /> <View style={styles.divider} />
<View row marginH-20> <View row marginL-10 gap-5>
<Entypo <View paddingT-8>
name="text" <MenuIcon width={20} height={12} />
size={24} </View>
color="black"
style={{ marginBottom: "auto" }}
/>
<TextField <TextField
textAlignVertical="top" textAlignVertical="top"
multiline multiline
@ -99,6 +106,38 @@ const MoveBrainDump = (props: {
/> />
</View> </View>
<View style={styles.divider} /> <View style={styles.divider} />
<View gap-20 paddingH-10>
<TouchableOpacity>
<View row centerV>
<NavToDosIcon
width={22}
color={"#919191"}
style={styles.optionsIcon}
/>
<Text style={styles.optionsReg}>Move to</Text>
<Text style={styles.optionsBold}> my to do's</Text>
</View>
</TouchableOpacity>
<TouchableOpacity>
<View row centerV>
<NavCalendarIcon
width={22}
height={22}
color={"#919191"}
style={styles.optionsIcon}
/>
<Text style={styles.optionsReg}>Move to</Text>
<Text style={styles.optionsBold}> my calendar</Text>
</View>
</TouchableOpacity>
<TouchableOpacity>
<View row centerV>
<RemindersIcon width={22} style={styles.optionsIcon} />
<Text style={styles.optionsReg}>Move to</Text>
<Text style={styles.optionsBold}> my reminders</Text>
</View>
</TouchableOpacity>
</View>
</Dialog> </Dialog>
); );
}; };
@ -129,6 +168,17 @@ const styles = StyleSheet.create({
marginBottom: 10, marginBottom: 10,
marginTop: 25, marginTop: 25,
}, },
optionsReg: {
fontSize: 16,
fontFamily: "PlusJakartaSans_400Regular",
},
optionsBold: {
fontSize: 16,
fontFamily: "PlusJakartaSans_600SemiBold",
},
optionsIcon: {
marginRight: 10,
},
}); });
export default MoveBrainDump; export default MoveBrainDump;

80
components/pages/calendar/AddEventDialog.tsx
View File

@ -14,11 +14,14 @@ import {
Text, Text,
View, View,
} from "react-native-ui-lib"; } from "react-native-ui-lib";
import { TouchableOpacity } from "react-native"; import { StyleSheet, TouchableOpacity } from "react-native";
import { ManuallyAddEventModal } from "@/components/pages/calendar/ManuallyAddEventModal"; import { ManuallyAddEventModal } from "@/components/pages/calendar/ManuallyAddEventModal";
import AddChoreDialog from "../todos/AddChoreDialog"; import AddChoreDialog from "../todos/AddChoreDialog";
import { ToDosContextProvider } from "@/contexts/ToDosContext"; import { ToDosContextProvider } from "@/contexts/ToDosContext";
import UploadImageDialog from "./UploadImageDialog"; import UploadImageDialog from "./UploadImageDialog";
import CameraIcon from "@/assets/svgs/CameraIcon";
import CalendarIcon from "@/assets/svgs/CalendarIcon";
import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
export const AddEventDialog = () => { export const AddEventDialog = () => {
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
@ -60,9 +63,9 @@ export const AddEventDialog = () => {
> >
<View row centerV centerH> <View row centerV centerH>
<MaterialIcons name="add" size={22} color={"white"} /> <MaterialIcons name="add" size={22} color={"white"} />
<Text white tex30 style={{ fontSize: 17 }}> <Text white style={{ fontSize: 16, fontFamily: 'Manrope_600SemiBold' }}>
New New
</Text> </Text>
</View> </View>
</Button> </Button>
@ -72,16 +75,10 @@ export const AddEventDialog = () => {
panDirection={PanningProvider.Directions.DOWN} panDirection={PanningProvider.Directions.DOWN}
center center
> >
<Card <Card style={styles.dialogCard}>
style={{ <Text text60 style={styles.modalTitle}>
paddingHorizontal: 40, Create a new event
paddingTop: 40, </Text>
paddingBottom: 20,
justifyContent: "center",
alignItems: "center",
}}
>
<Text text50R>Create a new event</Text>
<View <View
style={{ marginTop: 20, alignItems: "center", width: "100%" }} style={{ marginTop: 20, alignItems: "center", width: "100%" }}
@ -95,14 +92,10 @@ export const AddEventDialog = () => {
paddingVertical: 13, paddingVertical: 13,
}} }}
label="Scan Image" label="Scan Image"
labelStyle={styles.btnLabel}
onPress={handleScanImageDialog} onPress={handleScanImageDialog}
iconSource={() => ( iconSource={() => (
<Feather <CameraIcon color="white" style={styles.btnIcon} />
name="camera"
size={21}
style={{ marginRight: 7 }}
color="white"
/>
)} )}
/> />
@ -115,14 +108,10 @@ export const AddEventDialog = () => {
paddingVertical: 13, paddingVertical: 13,
}} }}
label="Create Event" label="Create Event"
labelStyle={styles.btnLabel}
onPress={handleOpenManualInputModal} onPress={handleOpenManualInputModal}
iconSource={() => ( iconSource={() => (
<MaterialCommunityIcons <CalendarIcon color={"white"} style={styles.btnIcon} />
name="calendar-text-outline"
size={22}
style={{ marginRight: 5 }}
color="white"
/>
)} )}
/> />
@ -135,20 +124,20 @@ export const AddEventDialog = () => {
paddingVertical: 13, paddingVertical: 13,
}} }}
label="Add To Do" label="Add To Do"
labelStyle={styles.btnLabel}
onPress={() => setChoreDialogVisible(true)} onPress={() => setChoreDialogVisible(true)}
iconSource={() => ( iconSource={() => (
<AntDesign <NavToDosIcon
name="checkcircleo" color={"white"}
size={20} width={23}
style={{ marginRight: 7 }} style={styles.btnIcon}
color="white"
/> />
)} )}
/> />
</View> </View>
<TouchableOpacity onPress={() => setShow(false)}> <TouchableOpacity onPress={() => setShow(false)}>
<Text style={{ marginTop: 20, color: "#999999" }} text70> <Text style={styles.bottomText} text70>
Go back to calendar Go back to calendar
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
@ -170,3 +159,30 @@ export const AddEventDialog = () => {
</ToDosContextProvider> </ToDosContextProvider>
); );
}; };
const styles = StyleSheet.create({
modalTitle: {
fontSize: 22,
fontFamily: "Manrope_600SemiBold",
marginBottom: 16,
},
bottomText: {
marginTop: 20,
color: "#999999",
fontSize: 13.53,
fontFamily: "Poppins_500Medium",
},
dialogCard: {
paddingHorizontal: 40,
paddingTop: 35,
paddingBottom: 20,
justifyContent: "center",
alignItems: "center",
borderRadius: 20,
},
btnLabel: {
fontSize: 15,
fontFamily: "PlusJakartaSans_500Medium",
},
btnIcon: { marginRight: 10 },
});

333
components/pages/calendar/CalendarPage.tsx
View File

@ -1,186 +1,201 @@
import React, {useRef, useState} from "react"; import React, { useRef, useState } from "react";
import {LayoutChangeEvent, StyleSheet} from "react-native"; import { LayoutChangeEvent, StyleSheet } from "react-native";
import {Calendar} from "react-native-big-calendar"; import { Calendar } from "react-native-big-calendar";
import {Picker, PickerModes, SegmentedControl, View} from "react-native-ui-lib"; import {
import {MaterialIcons} from "@expo/vector-icons"; Picker,
import {AddEventDialog} from "@/components/pages/calendar/AddEventDialog"; PickerModes,
SegmentedControl,
View,
} from "react-native-ui-lib";
import { MaterialIcons } from "@expo/vector-icons";
import { AddEventDialog } from "@/components/pages/calendar/AddEventDialog";
import HeaderTemplate from "@/components/shared/HeaderTemplate"; import HeaderTemplate from "@/components/shared/HeaderTemplate";
import CalendarViewSwitch from "@/components/pages/calendar/CalendarViewSwitch"; import CalendarViewSwitch from "@/components/pages/calendar/CalendarViewSwitch";
import {ManuallyAddEventModal} from "@/components/pages/calendar/ManuallyAddEventModal"; import { ManuallyAddEventModal } from "@/components/pages/calendar/ManuallyAddEventModal";
import {CalendarEvent} from "@/contexts/CalendarContext"; import { CalendarEvent } from "@/contexts/CalendarContext";
import {useSettingsContext} from "@/contexts/SettingsContext"; import { useSettingsContext } from "@/contexts/SettingsContext";
import EditEventDialog from "./EditEventDialog"; import EditEventDialog from "./EditEventDialog";
import {useGetEvents} from "@/hooks/firebase/useGetEvents"; import { useGetEvents } from "@/hooks/firebase/useGetEvents";
import { Text } from "react-native-ui-lib";
const modeMap = new Map([ const modeMap = new Map([
[0, "day"], [0, "day"],
[1, "week"], [1, "week"],
[2, "month"], [2, "month"],
]); ]);
const months = [ const months = [
"January", "January",
"February", "February",
"March", "March",
"April", "April",
"May", "May",
"June", "June",
"July", "July",
"August", "August",
"September", "September",
"October", "October",
"November", "November",
"December", "December",
]; ];
export default function CalendarPage() { export default function CalendarPage() {
const {calendarColor} = useSettingsContext(); const { calendarColor } = useSettingsContext();
const [editVisible, setEditVisible] = useState<boolean>(false); const [editVisible, setEditVisible] = useState<boolean>(false);
const [eventForEdit, setEventForEdit] = useState<CalendarEvent>(); const [eventForEdit, setEventForEdit] = useState<CalendarEvent>();
const styles = StyleSheet.create({ const styles = StyleSheet.create({
segmentslblStyle: { segmentslblStyle: {
fontSize: 14, fontSize: 12,
fontFamily: 'Manrope', fontFamily: "Manrope_600SemiBold",
fontWeight: 'bold' },
}, calHeader: {
calHeader: { borderWidth: 0,
borderWidth: 0, },
}, dayModeHeader: {
dayModeHeader: { alignSelf: "flex-start",
alignSelf: 'flex-start', justifyContent: "space-between",
justifyContent: 'space-between', alignContent: "center",
alignContent: 'center', width: 38,
width: 38, right: 42,
right: 42, },
} });
});
const [isFamilyView, setIsFamilyView] = useState<boolean>(false); const [isFamilyView, setIsFamilyView] = useState<boolean>(false);
const [calendarHeight, setCalendarHeight] = useState(0); const [calendarHeight, setCalendarHeight] = useState(0);
const [mode, setMode] = useState<"week" | "month" | "day">("week"); const [mode, setMode] = useState<"week" | "month" | "day">("week");
const [selectedDate, setSelectedDate] = useState<Date>(new Date()); const [selectedDate, setSelectedDate] = useState<Date>(new Date());
const [selectedNewEventDate, setSelectedNewEndDate] = useState< const [selectedNewEventDate, setSelectedNewEndDate] = useState<
Date | undefined Date | undefined
>(undefined); >(undefined);
const calendarContainerRef = useRef(null); const calendarContainerRef = useRef(null);
const {data: events} = useGetEvents(isFamilyView) const { data: events } = useGetEvents(isFamilyView);
const onLayout = (event: LayoutChangeEvent) => { const onLayout = (event: LayoutChangeEvent) => {
const {height} = event.nativeEvent.layout; const { height } = event.nativeEvent.layout;
setCalendarHeight(height); setCalendarHeight(height);
}; };
const handleSegmentChange = (index: number) => { const handleSegmentChange = (index: number) => {
const selectedMode = modeMap.get(index); const selectedMode = modeMap.get(index);
if (selectedMode) { if (selectedMode) {
setMode(selectedMode as "day" | "week" | "month"); setMode(selectedMode as "day" | "week" | "month");
} }
}; };
const handleMonthChange = (month: string) => { const handleMonthChange = (month: string) => {
const currentDay = selectedDate.getDate(); const currentDay = selectedDate.getDate();
const currentYear = selectedDate.getFullYear(); const currentYear = selectedDate.getFullYear();
const newMonthIndex = months.indexOf(month); const newMonthIndex = months.indexOf(month);
const updatedDate = new Date(currentYear, newMonthIndex, currentDay); const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
setSelectedDate(updatedDate); setSelectedDate(updatedDate);
}; };
return ( return (
<View style={{flex: 1, height: "100%", padding: 10}} paddingH-22 paddingT-10> <View
<HeaderTemplate style={{ flex: 1, height: "100%", padding: 10 }}
message={"Let's get your week started!"} paddingH-22
isWelcome={true} paddingT-0
/> >
<HeaderTemplate
message={"Let's get your week started!"}
isWelcome={true}
/>
<View <View
style={{flex: 1, backgroundColor: "#fff", borderRadius: 30}} style={{ flex: 1, backgroundColor: "#fff", borderRadius: 30 }}
ref={calendarContainerRef} ref={calendarContainerRef}
onLayout={onLayout} onLayout={onLayout}
>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 10,
paddingVertical: 8,
borderRadius: 20,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
backgroundColor: "white",
marginBottom: 10,
}}
>
<View row centerV gap-3>
<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}}
mode={PickerModes.SINGLE}
onChange={(itemValue) => handleMonthChange(itemValue as string)}
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
> >
<View {months.map((month) => (
style={{ <Picker.Item key={month} label={month} value={month} />
flexDirection: "row", ))}
justifyContent: "space-between", </Picker>
alignItems: "center", </View>
paddingHorizontal: 10,
paddingVertical: 8,
borderRadius: 20,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
backgroundColor: "white",
marginBottom: 10,
}}
>
<Picker
value={months[selectedDate.getMonth()]} // Get the month from the date
placeholder={"Select Month"}
mode={PickerModes.SINGLE}
onChange={(itemValue) => handleMonthChange(itemValue as string)}
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>}
>
{months.map((month) => (
<Picker.Item key={month} label={month} value={month}/>
))}
</Picker>
<View> <View>
<SegmentedControl <SegmentedControl
segments={[{label: "D"}, {label: "W"}, {label: "M"}]} segments={[{ label: "D" }, { label: "W" }, { label: "M" }]}
backgroundColor="#ececec" backgroundColor="#ececec"
inactiveColor="#919191" inactiveColor="#919191"
activeBackgroundColor="#ea156c" activeBackgroundColor="#ea156c"
activeColor="white" activeColor="white"
outlineColor="white" outlineColor="white"
outlineWidth={3} outlineWidth={3}
style={{backgroundColor: "green"}} segmentLabelStyle={styles.segmentslblStyle}
segmentLabelStyle={styles.segmentslblStyle} onChangeIndex={handleSegmentChange}
onChangeIndex={handleSegmentChange} initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
/>
</View>
</View>
{calendarHeight > 0 && (
<Calendar
bodyContainerStyle={styles.calHeader}
mode={mode}
events={isFamilyView ? events ?? [] : events ?? []}
eventCellStyle={(event) => ({backgroundColor: event.eventColor})}
onPressEvent={(event) => {
setEditVisible(true);
setEventForEdit(event);
}}
height={calendarHeight}
activeDate={selectedDate}
date={selectedDate}
onPressCell={setSelectedNewEndDate}
headerContentStyle={mode === 'day' ? styles.dayModeHeader : {}}
/>
)}
</View>
<CalendarViewSwitch viewSwitch={setIsFamilyView}/>
<AddEventDialog/>
{eventForEdit && (
<EditEventDialog
isVisible={editVisible}
setIsVisible={() => {
setEditVisible(!editVisible);
}}
event={eventForEdit}
/>
)}
<ManuallyAddEventModal
key={`${selectedNewEventDate}`}
initialDate={selectedNewEventDate}
show={!!selectedNewEventDate}
close={() => setSelectedNewEndDate(undefined)}
/> />
</View>
</View> </View>
);
{calendarHeight > 0 && (
<Calendar
bodyContainerStyle={styles.calHeader}
mode={mode}
events={isFamilyView ? events ?? [] : events ?? []}
eventCellStyle={(event) => ({ backgroundColor: event.eventColor })}
onPressEvent={(event) => {
setEditVisible(true);
setEventForEdit(event);
}}
height={calendarHeight}
activeDate={selectedDate}
date={selectedDate}
onPressCell={setSelectedNewEndDate}
headerContentStyle={mode === "day" ? styles.dayModeHeader : {}}
onSwipeEnd={(date) => {
setSelectedDate(date);
}}
/>
)}
</View>
<CalendarViewSwitch viewSwitch={setIsFamilyView} />
<AddEventDialog />
{eventForEdit && (
<EditEventDialog
isVisible={editVisible}
setIsVisible={() => {
setEditVisible(!editVisible);
}}
event={eventForEdit}
/>
)}
<ManuallyAddEventModal
key={`${selectedNewEventDate}`}
initialDate={selectedNewEventDate}
show={!!selectedNewEventDate}
close={() => setSelectedNewEndDate(undefined)}
/>
</View>
);
} }

8
components/pages/calendar/CalendarViewSwitch.tsx
View File

@ -44,7 +44,7 @@ const CalendarViewSwitch = (calendarViewProps: ICalendarViewProps) => {
paddingH-15 paddingH-15
style={calView ? styles.switchBtnActive : styles.switchBtn} style={calView ? styles.switchBtnActive : styles.switchBtn}
> >
<Text color={calView ? "white" : "#a1a1a1"} text70R> <Text color={calView ? "white" : "#a1a1a1"} style={styles.switchTxt}>
Family View Family View
</Text> </Text>
</View> </View>
@ -63,7 +63,7 @@ const CalendarViewSwitch = (calendarViewProps: ICalendarViewProps) => {
paddingH-15 paddingH-15
style={!calView ? styles.switchBtnActive : styles.switchBtn} style={!calView ? styles.switchBtnActive : styles.switchBtn}
> >
<Text color={!calView ? "white" : "#a1a1a1"} text70R> <Text color={!calView ? "white" : "#a1a1a1"} style={styles.switchTxt}>
My View My View
</Text> </Text>
</View> </View>
@ -83,4 +83,8 @@ const styles = StyleSheet.create({
backgroundColor: "white", backgroundColor: "white",
borderRadius: 50, borderRadius: 50,
}, },
switchTxt:{
fontSize: 16,
fontFamily: 'Manrope_600SemiBold'
}
}); });

186
components/pages/calendar/ManuallyAddEventModal.tsx
View File

@ -30,11 +30,12 @@ import { addHours, setDate } from "date-fns";
import DropModalIcon from "@/assets/svgs/DropModalIcon"; import DropModalIcon from "@/assets/svgs/DropModalIcon";
import { CalendarEvent, useCalendarContext } from "@/contexts/CalendarContext"; import { CalendarEvent, useCalendarContext } from "@/contexts/CalendarContext";
import { repeatOptions } from "@/contexts/ToDosContext"; import { repeatOptions } from "@/contexts/ToDosContext";
import { StyleSheet } from "react-native"; import { ImageBackground, StyleSheet } from "react-native";
import ClockIcon from "@/assets/svgs/ClockIcon"; import ClockIcon from "@/assets/svgs/ClockIcon";
import LockIcon from "@/assets/svgs/LockIcon"; import LockIcon from "@/assets/svgs/LockIcon";
import MenuIcon from "@/assets/svgs/MenuIcon"; import MenuIcon from "@/assets/svgs/MenuIcon";
import CameraIcon from "@/assets/svgs/CameraIcon"; import CameraIcon from "@/assets/svgs/CameraIcon";
import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
const daysOfWeek = [ const daysOfWeek = [
{ label: "Monday", value: "monday" }, { label: "Monday", value: "monday" },
@ -69,7 +70,9 @@ export const ManuallyAddEventModal = ({
return date; return date;
}); });
const [endTime, setEndTime] = useState(() => { const [endTime, setEndTime] = useState(() => {
const date = initialDate ? addHours(initialDate, 1) : addHours(new Date(), 1); const date = initialDate
? addHours(initialDate, 1)
: addHours(new Date(), 1);
date.setSeconds(0, 0); date.setSeconds(0, 0);
return date; return date;
}); });
@ -82,7 +85,7 @@ export const ManuallyAddEventModal = ({
const { mutateAsync: createEvent, isLoading, isError } = useCreateEvent(); const { mutateAsync: createEvent, isLoading, isError } = useCreateEvent();
const formatDateTime = (date?: Date | string) => { const formatDateTime = (date?: Date | string) => {
if(!date) return undefined if (!date) return undefined;
return new Date(date).toLocaleDateString("en-US", { return new Date(date).toLocaleDateString("en-US", {
weekday: "long", weekday: "long",
month: "short", month: "short",
@ -193,13 +196,27 @@ export const ManuallyAddEventModal = ({
}} }}
> >
<TouchableOpacity onPress={close}> <TouchableOpacity onPress={close}>
<Text style={{ color: "#05a8b6" }} text70> <Text
style={{
color: "#05a8b6",
fontFamily: "PlusJakartaSans_400Regular",
fontSize: 16,
}}
text70
>
Cancel Cancel
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
<DropModalIcon onPress={close} /> <DropModalIcon onPress={close} />
<TouchableOpacity onPress={handleSave}> <TouchableOpacity onPress={handleSave}>
<Text style={{ color: "#05a8b6" }} text70> <Text
style={{
color: "#05a8b6",
fontFamily: "PlusJakartaSans_400Regular",
fontSize: 16,
}}
text70
>
Save Save
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
@ -212,16 +229,22 @@ export const ManuallyAddEventModal = ({
setTitle(text); setTitle(text);
}} }}
placeholderTextColor="#2d2d30" placeholderTextColor="#2d2d30"
text60R style={{ fontFamily: "Manrope_500Medium", fontSize: 22 }}
marginT-15 paddingT-15
marginL-30 paddingL-30
/> />
<View style={styles.divider} marginT-8 /> <View style={styles.divider} marginT-8 />
<View marginL-30 centerV> <View marginL-30 centerV>
<View row spread marginB-10 centerV> <View row spread marginB-10 centerV>
<View row> <View row>
<AntDesign name="clockcircleo" size={24} color="#919191" /> <AntDesign name="clockcircleo" size={24} color="#919191" />
<Text text70 marginL-10> <Text
style={{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
}}
marginL-10
>
All day All day
</Text> </Text>
</View> </View>
@ -244,60 +267,82 @@ export const ManuallyAddEventModal = ({
setStartDate(date); setStartDate(date);
}} }}
maximumDate={endDate} maximumDate={endDate}
text70 style={{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
}}
marginL-8 marginL-8
/> />
</View> </View>
<DateTimePicker <DateTimePicker
value={startTime} value={startTime}
onChange={(date) => setStartTime(date)} onChange={(date) => setStartTime(date)}
maximumDate={endTime} maximumDate={endTime}
minuteInterval={5} minuteInterval={5}
dateTimeFormatter={(date, mode) => date.toLocaleTimeString("en-us", dateTimeFormatter={(date, mode) =>
{ hour: "numeric", date.toLocaleTimeString("en-us", {
minute: "numeric" hour: "numeric",
})} minute: "numeric",
mode="time" })
text70 }
marginR-30 mode="time"
style={{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
}}
marginR-30
/> />
</View> </View>
{!isAllDay && <View row marginB-10 spread> {!isAllDay && (
<View row centerV> <View row marginB-10 spread>
<Feather name="calendar" size={25} color="#919191" /> <View row centerV>
<Feather name="calendar" size={25} color="#919191" />
<DateTimePicker
value={endDate}
minimumDate={startDate}
text70
marginL-8
onChange={(date) => {
setEndDate(date);
}}
style={{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
}}
/>
</View>
<DateTimePicker <DateTimePicker
value={endDate}
minimumDate={startDate}
text70
marginL-8
onChange={(date) => {
setEndDate(date);
}}
/>
</View>
<DateTimePicker
value={endTime} value={endTime}
onChange={(date) => setEndTime(date)} onChange={(date) => setEndTime(date)}
minimumDate={startTime} minimumDate={startTime}
minuteInterval={5} minuteInterval={5}
dateTimeFormatter={(date, mode) => date.toLocaleTimeString("en-us", dateTimeFormatter={(date, mode) =>
{ hour: "numeric", date.toLocaleTimeString("en-us", {
minute: "numeric" hour: "numeric",
})} minute: "numeric",
})
}
mode="time" mode="time"
text70 style={{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
}}
marginR-30 marginR-30
/> />
</View>} </View>
)}
</View> </View>
<View style={styles.divider} /> <View style={styles.divider} />
<View marginH-30 marginB-10 row centerV> <View marginH-30 marginB-10 row centerV>
<Ionicons name="person-circle-outline" size={28} color="#919191" /> <Ionicons name="person-circle-outline" size={28} color="#919191" />
<Text text70R marginL-10> <Text
Assignees style={{ fontFamily: "Manrope_600SemiBold", fontSize: 18 }}
marginL-10
>
Attendees
</Text> </Text>
<Button <Button
size={ButtonSize.small} size={ButtonSize.small}
@ -313,35 +358,25 @@ export const ManuallyAddEventModal = ({
borderWidth: 1, borderWidth: 1,
}} }}
color="#ea156c" color="#ea156c"
label="Assign" label="Add"
labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
/> />
</View> </View>
<View row marginH-13 marginT-13> <View marginL-35>
<View <AssigneesDisplay />
marginL-30
style={{
aspectRatio: 1,
width: 50,
backgroundColor: "red",
borderRadius: 50,
}}
/>
<View
marginL-30
style={{
aspectRatio: 1,
width: 50,
backgroundColor: "red",
borderRadius: 50,
}}
/>
</View> </View>
<View style={styles.divider} /> <View style={styles.divider} />
<View marginH-30 marginB-0 row spread centerV> <View marginH-30 marginB-0 row spread centerV>
<View row centerV> <View row centerV>
<ClockIcon /> <ClockIcon />
<Text text70 marginL-10> <Text
Reminder style={{
fontFamily: "Manrope_600SemiBold",
fontSize: 18,
}}
marginL-10
>
Reminders
</Text> </Text>
</View> </View>
<View> <View>
@ -358,6 +393,7 @@ export const ManuallyAddEventModal = ({
borderColor: "#ea156c", borderColor: "#ea156c",
borderWidth: 1, borderWidth: 1,
}} }}
labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
color="#ea156c" color="#ea156c"
label="Set Reminder" label="Set Reminder"
/> />
@ -367,7 +403,13 @@ export const ManuallyAddEventModal = ({
<View marginH-30 marginB-0 row spread centerV> <View marginH-30 marginB-0 row spread centerV>
<View row> <View row>
<LockIcon /> <LockIcon />
<Text text70 marginL-10> <Text
style={{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
}}
marginL-10
>
Mark as Private Mark as Private
</Text> </Text>
</View> </View>
@ -385,7 +427,13 @@ export const ManuallyAddEventModal = ({
<View marginH-30 marginB-0 row spread centerV> <View marginH-30 marginB-0 row spread centerV>
<View row centerV> <View row centerV>
<MenuIcon /> <MenuIcon />
<Text text70 marginL-10> <Text
style={{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
}}
marginL-10
>
Add Details Add Details
</Text> </Text>
</View> </View>
@ -397,6 +445,8 @@ export const ManuallyAddEventModal = ({
marginB-15 marginB-15
label="Create event from image" label="Create event from image"
text70 text70
style={{ height: 47 }}
labelStyle={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 15 }}
backgroundColor="#05a8b6" backgroundColor="#05a8b6"
iconSource={() => ( iconSource={() => (
<View marginR-5> <View marginR-5>

86
components/pages/calendar/UploadImageDialog.tsx
View File

@ -11,6 +11,8 @@ import { Dialog, PanningProvider, Card } from "react-native-ui-lib";
import { StyleSheet } from "react-native"; import { StyleSheet } from "react-native";
import { Feather, MaterialIcons } from "@expo/vector-icons"; import { Feather, MaterialIcons } from "@expo/vector-icons";
import * as ImagePicker from "expo-image-picker"; import * as ImagePicker from "expo-image-picker";
import AddImageIcon from "@/assets/svgs/AddImageIcon";
import CameraIcon from "@/assets/svgs/CameraIcon";
interface IUploadDialogProps { interface IUploadDialogProps {
show: boolean; show: boolean;
@ -51,19 +53,9 @@ const UploadImageDialog = (uploadDialogProps: IUploadDialogProps) => {
panDirection={PanningProvider.Directions.DOWN} panDirection={PanningProvider.Directions.DOWN}
center center
> >
<Card <Card style={styles.modalCard}>
style={{
paddingHorizontal: 40,
paddingTop: 20,
paddingBottom: 10,
justifyContent: "center",
alignItems: "center",
}}
>
<View centerH> <View centerH>
<Text text60 marginB-20> <Text style={styles.modalTitle}>Upload an Image</Text>
Upload an Image
</Text>
{!selectedImage && ( {!selectedImage && (
<TouchableOpacity onPress={handleImagePick}> <TouchableOpacity onPress={handleImagePick}>
<View <View
@ -73,12 +65,8 @@ const UploadImageDialog = (uploadDialogProps: IUploadDialogProps) => {
gap-8 gap-8
marginB-20 marginB-20
> >
<MaterialIcons <AddImageIcon />
name="add-photo-alternate" <Text style={styles.uploadTxt}>
size={30}
color="#fd1775"
/>
<Text color="#fd1775" text70>
Click here to upload an image Click here to upload an image
</Text> </Text>
</View> </View>
@ -102,38 +90,31 @@ const UploadImageDialog = (uploadDialogProps: IUploadDialogProps) => {
setImageTitle(""); setImageTitle("");
}} }}
> >
<Feather <Feather name="trash" size={22} color="#919191" />
name="trash"
size={22}
color="#919191"
/>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<Button <Button
style={{ style={{
marginBottom: 10, marginBottom: 10,
marginTop: 20, marginTop: 35,
backgroundColor: "#ea156c", backgroundColor: "#ea156c",
justifyContent: "center", justifyContent: "center",
paddingVertical: 13, paddingVertical: 15,
width: 285,
alignItems: "center", alignItems: "center",
}} }}
label="Upload Image" label="Upload Image"
onPress={() => {}} onPress={() => {}}
labelStyle={styles.btnLbl}
iconSource={() => ( iconSource={() => (
<Feather <CameraIcon color="white" style={{marginRight: 10}}/>
name="camera"
size={21}
style={{ marginRight: 7 }}
color="white"
/>
)} )}
/> />
</> </>
)} )}
<TouchableOpacity onPress={() => uploadDialogProps.setShow(false)}> <TouchableOpacity onPress={() => uploadDialogProps.setShow(false)}>
<Text text80 color="#999999"> <Text style={styles.bottomText}>
Go back Go back
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
@ -148,6 +129,7 @@ export default UploadImageDialog;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
uploadImgBox: { uploadImgBox: {
backgroundColor: "#ffe8f2", backgroundColor: "#ffe8f2",
padding: 35,
width: "100%", width: "100%",
aspectRatio: 1.8, aspectRatio: 1.8,
borderRadius: 20, borderRadius: 20,
@ -155,10 +137,20 @@ const styles = StyleSheet.create({
borderColor: "#fd1775", borderColor: "#fd1775",
borderStyle: "dashed", borderStyle: "dashed",
}, },
btnLbl: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 15,
},
uploadTxt: {
color: "#b11d5a",
fontSize: 15,
fontFamily: "PlusJakartaSans_400Regular",
marginTop: 12
},
selectedImage: { selectedImage: {
width: 60, width: 38.69,
aspectRatio: 1, aspectRatio: 1,
borderRadius: 10, borderRadius: 5,
}, },
imageContainer: { imageContainer: {
alignItems: "center", alignItems: "center",
@ -166,13 +158,33 @@ const styles = StyleSheet.create({
borderWidth: 1, borderWidth: 1,
borderColor: "#d9d9d9", borderColor: "#d9d9d9",
padding: 10, padding: 10,
borderRadius: 13, borderRadius: 10,
}, },
imageInfo: { imageInfo: {
marginLeft: 10, marginLeft: 10,
}, },
imageTitle: { imageTitle: {
fontSize: 16, fontSize: 15,
color: "#333", color: "#262627",
fontFamily: "PlusJakartaSans_400Regular"
},
modalCard: {
paddingHorizontal: 25,
paddingTop: 30,
paddingBottom: 17,
justifyContent: "center",
alignItems: "center",
borderRadius: 20,
},
modalTitle: {
fontSize: 22,
fontFamily: "Manrope_600SemiBold",
marginBottom: 20,
},
bottomText: {
marginTop: 20,
color: "#999999",
fontSize: 13.53,
fontFamily: "Poppins_500Medium",
}, },
}); });

64
components/pages/grocery/GroceryItem.tsx
View File

@ -1,13 +1,13 @@
import {Checkbox, Text, TouchableOpacity, View,} from "react-native-ui-lib"; import { Checkbox, Text, TouchableOpacity, View } from "react-native-ui-lib";
import React, {useEffect, useState} from "react"; import React, { useEffect, useState } from "react";
import {AntDesign} from "@expo/vector-icons"; import { AntDesign } from "@expo/vector-icons";
import {GroceryCategory, useGroceryContext,} from "@/contexts/GroceryContext"; import { GroceryCategory, useGroceryContext } from "@/contexts/GroceryContext";
import EditGroceryFrequency from "./EditGroceryFrequency"; import EditGroceryFrequency from "./EditGroceryFrequency";
import EditGroceryItem from "./EditGroceryItem"; import EditGroceryItem from "./EditGroceryItem";
import {StyleSheet} from "react-native"; import { ImageBackground, StyleSheet } from "react-native";
import {IGrocery} from "@/hooks/firebase/types/groceryData"; import { IGrocery } from "@/hooks/firebase/types/groceryData";
import firestore from "@react-native-firebase/firestore"; import firestore from "@react-native-firebase/firestore";
import {UserProfile} from "@/hooks/firebase/types/profileTypes"; import { UserProfile } from "@/hooks/firebase/types/profileTypes";
const GroceryItem = ({ const GroceryItem = ({
item, item,
@ -27,11 +27,11 @@ const GroceryItem = ({
const [itemCreator, setItemCreator] = useState<UserProfile>(null); const [itemCreator, setItemCreator] = useState<UserProfile>(null);
const handleTitleChange = (newTitle: string) => { const handleTitleChange = (newTitle: string) => {
updateGroceryItem({id: item?.id, title: newTitle}); updateGroceryItem({ id: item?.id, title: newTitle });
}; };
const handleCategoryChange = (newCategory: GroceryCategory) => { const handleCategoryChange = (newCategory: GroceryCategory) => {
updateGroceryItem({id: item?.id, category: newCategory}); updateGroceryItem({ id: item?.id, category: newCategory });
}; };
useEffect(() => { useEffect(() => {
@ -43,25 +43,24 @@ const GroceryItem = ({
const getItemCreator = async (uid: string | undefined) => { const getItemCreator = async (uid: string | undefined) => {
if (uid) { if (uid) {
const documentSnapshot = await firestore() const documentSnapshot = await firestore()
.collection("Profiles") .collection("Profiles")
.doc(uid) .doc(uid)
.get(); .get();
if (documentSnapshot.exists) { if (documentSnapshot.exists) {
setItemCreator(documentSnapshot.data() as UserProfile) setItemCreator(documentSnapshot.data() as UserProfile);
} }
} }
} };
return ( return (
<View <View
key={item.id} key={item.id}
style={{ borderRadius: 18, marginVertical: 5 }} style={{ borderRadius: 17, marginVertical: 5 }}
backgroundColor="white" backgroundColor="white"
centerV centerV
paddingV-12 paddingH-13
paddingR-12 paddingV-10
paddingL-12
> >
<View row spread> <View row spread>
<EditGroceryFrequency <EditGroceryFrequency
@ -75,7 +74,9 @@ const GroceryItem = ({
{!isEditingTitle ? ( {!isEditingTitle ? (
<View> <View>
<TouchableOpacity onPress={() => setIsEditingTitle(true)}> <TouchableOpacity onPress={() => setIsEditingTitle(true)}>
<Text text70T black style={{fontWeight: "400"}}>{item.title}</Text> <Text text70T black style={styles.title}>
{item.title}
</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
) : ( ) : (
@ -98,7 +99,7 @@ const GroceryItem = ({
size={24} size={24}
style={{ style={{
color: item.approved ? "green" : "#aaaaaa", color: item.approved ? "green" : "#aaaaaa",
marginRight: 15 marginRight: 15,
}} }}
onPress={() => { onPress={() => {
handleItemApproved(item.id, { approved: true }); handleItemApproved(item.id, { approved: true });
@ -127,19 +128,21 @@ const GroceryItem = ({
{!item.approved && ( {!item.approved && (
<View> <View>
<View centerH> <View centerH>
<View height={1} backgroundColor="#e7e7e7" width={"90%"} /> <View height={0.7} backgroundColor="#e7e7e7" width={"98%"} />
</View> </View>
<View paddingL-0 paddingT-10 flexS row centerV> <View paddingL-0 paddingT-12 flexS row centerV>
<View <ImageBackground
style={{ style={{
width: 25, width: 22.36,
aspectRatio: 1, aspectRatio: 1,
borderRadius: 50, borderRadius: 50,
backgroundColor: "red", backgroundColor: "red",
marginRight: 10, marginRight: 10,
overflow: 'hidden'
}} }}
></View> source={require('../../../assets/images/child-picture.png')}
<Text color="#858585" text70> />
<Text color="#858585" style={styles.authorTxt}>
Requested by {itemCreator?.firstName} Requested by {itemCreator?.firstName}
</Text> </Text>
</View> </View>
@ -150,14 +153,19 @@ const GroceryItem = ({
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
authorTxt: { fontFamily: "Manrope_500Medium", fontSize: 12 },
checkbox: { checkbox: {
borderRadius: 50, borderRadius: 50,
borderWidth: 1, borderWidth: 0.7,
color: "#bfbfbf", color: "#bfbfbf",
borderColor: "#bfbfbf", borderColor: "#bfbfbf",
width: 28, width: 24.64,
aspectRatio: 1, aspectRatio: 1,
}, },
title: {
fontFamily: "Manrope_500Medium",
fontSize: 15,
},
}); });
export default GroceryItem; export default GroceryItem;

49
components/pages/grocery/GroceryList.tsx
View File

@ -12,6 +12,7 @@ import { AntDesign, MaterialIcons } from "@expo/vector-icons";
import EditGroceryItem from "./EditGroceryItem"; import EditGroceryItem from "./EditGroceryItem";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext"; import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import { IGrocery } from "@/hooks/firebase/types/groceryData"; import { IGrocery } from "@/hooks/firebase/types/groceryData";
import AddPersonIcon from "@/assets/svgs/AddPersonIcon";
const GroceryList = () => { const GroceryList = () => {
const { const {
@ -88,32 +89,20 @@ const GroceryList = () => {
<View row centerV> <View row centerV>
<View <View
backgroundColor="#e2eed8" backgroundColor="#e2eed8"
paddingH-5 paddingH-15
paddingV-8 paddingV-8
marginR-5 marginR-5
centerV centerV
style={{ borderRadius: 50 }} style={{ borderRadius: 50 }}
> >
<Text <Text text70BL color="#46a80a" style={styles.counterText}>
text70BL
color="#46a80a"
style={{ fontFamily: "Manrope_700Bold" }}
>
{approvedGroceries?.length} list{" "} {approvedGroceries?.length} list{" "}
{approvedGroceries?.length === 1 ? ( {approvedGroceries?.length === 1 ? (
<Text <Text text70BL color="#46a80a" style={styles.counterText}>
text70BL
color="#46a80a"
style={{ fontFamily: "Manrope_700Bold" }}
>
item item
</Text> </Text>
) : ( ) : (
<Text <Text text70BL color="#46a80a" style={styles.counterText}>
text70BL
color="#46a80a"
style={{ fontFamily: "Manrope_700Bold" }}
>
items items
</Text> </Text>
)} )}
@ -126,16 +115,12 @@ const GroceryList = () => {
marginR-15 marginR-15
style={{ borderRadius: 50 }} style={{ borderRadius: 50 }}
> >
<Text <Text text70 style={styles.counterText} color="#e28800">
text70
style={{ fontFamily: "Manrope_700Bold" }}
color="#e28800"
>
{pendingGroceries?.length} pending {pendingGroceries?.length} pending
</Text> </Text>
</View> </View>
<TouchableOpacity> <TouchableOpacity>
<MaterialIcons name="person-add-alt" size={24} color="gray" /> <AddPersonIcon width={24}/>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</HeaderTemplate> </HeaderTemplate>
@ -143,7 +128,7 @@ const GroceryList = () => {
{/* Pending Approval Section */} {/* Pending Approval Section */}
<View row spread marginT-40 marginB-10 centerV> <View row spread marginT-40 marginB-10 centerV>
<View row centerV> <View row centerV>
<Text text70BL>Pending Approval</Text> <Text style={styles.subHeader}>Pending Approval</Text>
{pendingVisible && ( {pendingVisible && (
<AntDesign <AntDesign
name="down" name="down"
@ -176,7 +161,7 @@ const GroceryList = () => {
borderRadius: 50, borderRadius: 50,
}} }}
> >
<Text text70 center color="#e28800"> <Text style={styles.counterNr} center color="#e28800">
{pendingGroceries?.length.toString()} {pendingGroceries?.length.toString()}
</Text> </Text>
</View> </View>
@ -203,6 +188,7 @@ const GroceryList = () => {
{/* Approved Section */} {/* Approved Section */}
<View row spread marginT-40 marginB-0 centerV> <View row spread marginT-40 marginB-0 centerV>
<View row centerV> <View row centerV>
<Text style={styles.subHeader}>Shopping List</Text>
{approvedVisible && ( {approvedVisible && (
<AntDesign <AntDesign
name="down" name="down"
@ -225,7 +211,6 @@ const GroceryList = () => {
}} }}
/> />
)} )}
<Text text70BL>Shopping List</Text>
</View> </View>
<View <View
centerV centerV
@ -236,7 +221,7 @@ const GroceryList = () => {
borderRadius: 50, borderRadius: 50,
}} }}
> >
<Text text70 center color="#46a80a"> <Text style={styles.counterNr} center color="#46a80a">
{approvedGroceries?.length.toString()} {approvedGroceries?.length.toString()}
</Text> </Text>
</View> </View>
@ -296,6 +281,18 @@ const styles = StyleSheet.create({
fontFamily: "Manrope_400Regular", fontFamily: "Manrope_400Regular",
fontSize: 14, fontSize: 14,
}, },
counterText: {
fontSize: 14,
fontFamily: "PlusJakartaSans_600SemiBold",
},
subHeader: {
fontSize: 15,
fontFamily: "Manrope_700Bold",
},
counterNr: {
fontFamily: "PlusJakartaSans_600SemiBold",
fontSize: 14
}
}); });
export default GroceryList; export default GroceryList;

112
components/pages/settings/CalendarSettingsPage.tsx
View File

@ -1,5 +1,5 @@
import { AntDesign, Ionicons } from "@expo/vector-icons"; import { AntDesign, Ionicons } from "@expo/vector-icons";
import React, {useCallback, useEffect, useState} from "react"; import React, { useCallback, useEffect, useState } from "react";
import { Button, Checkbox, Text, View } from "react-native-ui-lib"; import { Button, Checkbox, Text, View } from "react-native-ui-lib";
import { ScrollView, StyleSheet } from "react-native"; import { ScrollView, StyleSheet } from "react-native";
import { colorMap } from "@/contexts/SettingsContext"; import { colorMap } from "@/contexts/SettingsContext";
@ -18,10 +18,17 @@ import * as Google from "expo-auth-session/providers/google";
import * as WebBrowser from "expo-web-browser"; import * as WebBrowser from "expo-web-browser";
const googleConfig = { const googleConfig = {
androidClientId: "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com", androidClientId:
iosClientId: "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com", "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
webClientId: "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com", iosClientId:
scopes: ["email", "profile", "https://www.googleapis.com/auth/calendar.events.owned"] "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
webClientId:
"406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
scopes: [
"email",
"profile",
"https://www.googleapis.com/auth/calendar.events.owned",
],
}; };
const microsoftConfig = { const microsoftConfig = {
@ -55,7 +62,7 @@ const CalendarSettingsPage = (props: {
const { mutateAsync: createEventFromProvider } = useCreateEventFromProvider(); const { mutateAsync: createEventFromProvider } = useCreateEventFromProvider();
const { mutateAsync: updateUserData } = useUpdateUserData(); const { mutateAsync: updateUserData } = useUpdateUserData();
WebBrowser.maybeCompleteAuthSession() WebBrowser.maybeCompleteAuthSession();
const [request, response, promptAsync] = Google.useAuthRequest(googleConfig); const [request, response, promptAsync] = Google.useAuthRequest(googleConfig);
useEffect(() => { useEffect(() => {
@ -103,9 +110,11 @@ const CalendarSettingsPage = (props: {
const signInWithGoogle = async () => { const signInWithGoogle = async () => {
try { try {
// Attempt to retrieve user information from AsyncStorage // Attempt to retrieve user information from AsyncStorage
if (response?.type === 'success') { if (response?.type === "success") {
console.log(response.authentication) console.log(response.authentication);
await updateUserData({newUserData: {googleToken: response.authentication?.accessToken}}) await updateUserData({
newUserData: { googleToken: response.authentication?.accessToken },
});
} }
} catch (error) { } catch (error) {
// Handle any errors that occur during AsyncStorage retrieval or other operations // Handle any errors that occur during AsyncStorage retrieval or other operations
@ -206,15 +215,23 @@ const CalendarSettingsPage = (props: {
<View marginH-30> <View marginH-30>
<TouchableOpacity onPress={() => props.setSelectedPage(0)}> <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
<View row marginT-20 marginB-35 centerV> <View row marginT-20 marginB-35 centerV>
<Ionicons name="chevron-back" size={22} color="#979797" /> <Ionicons
<Text text70 color="#979797"> name="chevron-back"
size={14}
color="#979797"
style={{ paddingBottom: 3 }}
/>
<Text
style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
color="#979797"
>
Return to main settings Return to main settings
</Text> </Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<Text text60R>Calendar settings</Text> <Text style={styles.subTitle}>Calendar settings</Text>
<View style={styles.card}> <View style={styles.card}>
<Text text70 marginB-14> <Text style={styles.cardTitle} marginB-14>
Event Color Preference Event Color Preference
</Text> </Text>
<View row spread> <View row spread>
@ -260,7 +277,7 @@ const CalendarSettingsPage = (props: {
</View> </View>
</View> </View>
<View style={styles.card}> <View style={styles.card}>
<Text text70>Weekly Start Date</Text> <Text style={styles.cardTitle}>Weekly Start Date</Text>
<View row marginV-5 marginT-20> <View row marginV-5 marginT-20>
<Checkbox <Checkbox
value={startDate} value={startDate}
@ -288,13 +305,14 @@ const CalendarSettingsPage = (props: {
</Text> </Text>
</View> </View>
</View> </View>
<Text text60R marginT-30 marginB-25> <Text style={styles.subTitle} marginT-30 marginB-25>
Add Calendar Add Calendar
</Text> </Text>
<Button <Button
onPress={() => promptAsync()} onPress={() => promptAsync()}
label="Connect Google" label="Connect Google"
labelStyle={styles.addCalLbl}
iconSource={() => ( iconSource={() => (
<View marginR-15> <View marginR-15>
<GoogleIcon /> <GoogleIcon />
@ -306,6 +324,7 @@ const CalendarSettingsPage = (props: {
/> />
<Button <Button
label="Connect Apple" label="Connect Apple"
labelStyle={styles.addCalLbl}
iconSource={() => ( iconSource={() => (
<View marginR-15> <View marginR-15>
<AppleIcon /> <AppleIcon />
@ -318,6 +337,7 @@ const CalendarSettingsPage = (props: {
<Button <Button
onPress={handleMicrosoftSignIn} onPress={handleMicrosoftSignIn}
label="Connect Outlook" label="Connect Outlook"
labelStyle={styles.addCalLbl}
iconSource={() => ( iconSource={() => (
<View marginR-15> <View marginR-15>
<OutlookIcon /> <OutlookIcon />
@ -328,34 +348,36 @@ const CalendarSettingsPage = (props: {
text70BL text70BL
/> />
<Text text60R marginT-30 marginB-20> <Text style={styles.subTitle} marginT-30 marginB-20>
Connected Calendars Connected Calendars
</Text> </Text>
<View style={styles.card}> <View style={styles.card}>
<View style={{ marginTop: 20 }}> <View style={{ marginTop: 20 }}>
<Button <Button
onPress={fetchAndSaveGoogleEvents} onPress={fetchAndSaveGoogleEvents}
label="Sync Google" label="Sync Google"
iconSource={() => ( labelStyle={styles.addCalLbl}
<View marginR-15> iconSource={() => (
<GoogleIcon /> <View marginR-15>
</View> <GoogleIcon />
)} </View>
style={styles.addCalBtn} )}
color="black" style={styles.addCalBtn}
text70BL color="black"
text70BL
/> />
<Button <Button
onPress={fetchAndSaveMicrosoftEvents} onPress={fetchAndSaveMicrosoftEvents}
label="Sync Outlook" label="Sync Outlook"
iconSource={() => ( labelStyle={styles.addCalLbl}
<View marginR-15> iconSource={() => (
<OutlookIcon /> <View marginR-15>
</View> <OutlookIcon />
)} </View>
style={styles.addCalBtn} )}
color="black" style={styles.addCalBtn}
text70BL color="black"
text70BL
/> />
</View> </View>
</View> </View>
@ -382,18 +404,30 @@ const styles = StyleSheet.create({
padding: 20, padding: 20,
paddingBottom: 30, paddingBottom: 30,
marginTop: 20, marginTop: 20,
borderRadius: 20, borderRadius: 12,
}, },
colorBox: { colorBox: {
aspectRatio: 1, aspectRatio: 1,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
width: 50, width: 51,
borderRadius: 12, borderRadius: 12,
}, },
checkbox: { checkbox: {
borderRadius: 50, borderRadius: 50,
}, },
addCalLbl: {
fontSize: 16,
fontFamily: "PlusJakartaSan_500Medium",
},
subTitle: {
fontFamily: "Manrope_600SemiBold",
fontSize: 18,
},
cardTitle: {
fontFamily: "Manrope_500Medium",
fontSize: 15,
},
}); });
export default CalendarSettingsPage; export default CalendarSettingsPage;

16
components/pages/settings/ChoreRewardSettings.tsx
View File

@ -13,9 +13,17 @@ const ChoreRewardSettings = (props: {
<View marginT-10 marginH-20> <View marginT-10 marginH-20>
<ScrollView> <ScrollView>
<TouchableOpacity onPress={() => props.setSelectedPage(0)}> <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
<View row marginT-20 marginL-5 marginB-35 centerV> <View row marginT-20 marginB-35 centerV>
<Ionicons name="chevron-back" size={22} color="#979797" /> <Ionicons
<Text text70 color="#979797"> name="chevron-back"
size={14}
color="#979797"
style={{ paddingBottom: 3 }}
/>
<Text
style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
color="#979797"
>
Return to main settings Return to main settings
</Text> </Text>
</View> </View>
@ -23,7 +31,7 @@ const ChoreRewardSettings = (props: {
<Text text60R marginB-20> <Text text60R marginB-20>
Chore Reward Settings Chore Reward Settings
</Text> </Text>
<ToDosList isSettings/> <ToDosList isSettings />
</ScrollView> </ScrollView>
</View> </View>
</ToDosContextProvider> </ToDosContextProvider>

26
components/pages/settings/SettingsPage.tsx
View File

@ -10,14 +10,6 @@ import ProfileIcon from "@/assets/svgs/ProfileIcon";
import CalendarIcon from "@/assets/svgs/CalendarIcon"; import CalendarIcon from "@/assets/svgs/CalendarIcon";
import PrivacyPolicyIcon from "@/assets/svgs/PrivacyPolicyIcon"; import PrivacyPolicyIcon from "@/assets/svgs/PrivacyPolicyIcon";
const styles = StyleSheet.create({
mainBtn: {
width: "100%",
justifyContent: "flex-start",
marginBottom: 20,
height: 60,
},
});
const pageIndex = { const pageIndex = {
main: 0, main: 0,
user: 1, user: 1,
@ -35,6 +27,7 @@ const SettingsPage = () => {
backgroundColor="white" backgroundColor="white"
style={styles.mainBtn} style={styles.mainBtn}
label="Manage My Profile" label="Manage My Profile"
labelStyle={styles.label}
color="#07b8c7" color="#07b8c7"
iconSource={() => ( iconSource={() => (
<ProfileIcon style={{marginRight: 10}} color="#07b9c8" /> <ProfileIcon style={{marginRight: 10}} color="#07b9c8" />
@ -45,6 +38,7 @@ const SettingsPage = () => {
backgroundColor="white" backgroundColor="white"
style={styles.mainBtn} style={styles.mainBtn}
label="Calendar Settings" label="Calendar Settings"
labelStyle={styles.label}
color="#fd1775" color="#fd1775"
iconSource={() => ( iconSource={() => (
<CalendarIcon style={{marginRight: 10}}/> <CalendarIcon style={{marginRight: 10}}/>
@ -57,6 +51,7 @@ const SettingsPage = () => {
backgroundColor="white" backgroundColor="white"
style={styles.mainBtn} style={styles.mainBtn}
label="To-Do Reward Settings" label="To-Do Reward Settings"
labelStyle={styles.label}
color="#ff9900" color="#ff9900"
iconSource={() => ( iconSource={() => (
<Octicons <Octicons
@ -72,6 +67,7 @@ const SettingsPage = () => {
backgroundColor="white" backgroundColor="white"
style={styles.mainBtn} style={styles.mainBtn}
label="Cally Privacy Policy" label="Cally Privacy Policy"
labelStyle={styles.label}
iconSource={() => ( iconSource={() => (
<PrivacyPolicyIcon style={{marginRight: 10}}/> <PrivacyPolicyIcon style={{marginRight: 10}}/>
)} )}
@ -93,3 +89,17 @@ const SettingsPage = () => {
}; };
export default SettingsPage; export default SettingsPage;
const styles = StyleSheet.create({
mainBtn: {
width: "100%",
justifyContent: "flex-start",
marginBottom: 20,
height: 60,
},
label:{
fontFamily: "Poppins_400Regular",
fontSize: 14.71,
textAlignVertical: 'center'
}
});

24
components/pages/settings/UserSettings.tsx
View File

@ -11,9 +11,12 @@ const UserSettings = (props: { setSelectedPage: (page: number) => void }) => {
<View flexG> <View flexG>
<ScrollView style={{ paddingBottom: 20, minHeight: "100%" }}> <ScrollView style={{ paddingBottom: 20, minHeight: "100%" }}>
<TouchableOpacity onPress={() => props.setSelectedPage(0)}> <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
<View row marginT-20 marginL-20 marginB-35 centerV> <View row marginT-20 marginB-35 centerV>
<Ionicons name="chevron-back" size={22} color="#979797" /> <Ionicons name="chevron-back" size={14} color="#979797" style={{paddingBottom: 3}} />
<Text text70 color="#979797"> <Text
style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
color="#979797"
>
Return to main settings Return to main settings
</Text> </Text>
</View> </View>
@ -30,7 +33,10 @@ const UserSettings = (props: { setSelectedPage: (page: number) => void }) => {
style={selectedView == true ? styles.btnSelected : styles.btnNot} style={selectedView == true ? styles.btnSelected : styles.btnNot}
> >
<View> <View>
<Text text70 color={selectedView ? "white" : "black"}> <Text
style={styles.btnTxt}
color={selectedView ? "white" : "black"}
>
My Profile My Profile
</Text> </Text>
</View> </View>
@ -42,7 +48,10 @@ const UserSettings = (props: { setSelectedPage: (page: number) => void }) => {
style={selectedView == false ? styles.btnSelected : styles.btnNot} style={selectedView == false ? styles.btnSelected : styles.btnNot}
> >
<View> <View>
<Text text70 color={!selectedView ? "white" : "black"}> <Text
style={styles.btnTxt}
color={!selectedView ? "white" : "black"}
>
My Group My Group
</Text> </Text>
</View> </View>
@ -75,11 +84,16 @@ const styles = StyleSheet.create({
width: "50%", width: "50%",
borderRadius: 50, borderRadius: 50,
}, },
btnTxt: {
fontFamily: "Manrope_500Medium",
fontSize: 15,
},
btnNot: { btnNot: {
height: "100%", height: "100%",
width: "50%", width: "50%",
borderRadius: 50, borderRadius: 50,
}, },
title: { fontFamily: "Manrope_600SemiBold", fontSize: 18 },
}); });
export default UserSettings; export default UserSettings;

6
components/pages/settings/user_settings_views/MyGroup.tsx
View File

@ -95,7 +95,7 @@ const MyGroup = () => {
{(!!parents.length || !!children.length) && ( {(!!parents.length || !!children.length) && (
<> <>
<Text text70 marginV-10> <Text style={styles.subTit} marginV-10>
Family Family
</Text> </Text>
{[...parents, ...children]?.map((member, index) => ( {[...parents, ...children]?.map((member, index) => (
@ -383,6 +383,10 @@ const styles = StyleSheet.create({
borderRadius: 10, borderRadius: 10,
gap: 10, gap: 10,
}, },
subTit: {
fontFamily: "Manrope_500Medium",
fontSize: 15,
},
}); });
export default MyGroup; export default MyGroup;

202
components/pages/settings/user_settings_views/MyProfile.tsx
View File

@ -1,102 +1,122 @@
import {Text, TextField, View} from "react-native-ui-lib"; import { Text, TextField, View } from "react-native-ui-lib";
import React, {useState} from "react"; import React, { useState } from "react";
import {StyleSheet} from "react-native"; import { ImageBackground, StyleSheet } from "react-native";
import {ScrollView} from "react-native-gesture-handler"; import { ScrollView } from "react-native-gesture-handler";
import {useAuthContext} from "@/contexts/AuthContext"; import { useAuthContext } from "@/contexts/AuthContext";
import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData"; import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
const MyProfile = () => { const MyProfile = () => {
const {user, profileData} = useAuthContext(); const { user, profileData } = useAuthContext();
const [lastName, setLastName] = useState<string>(profileData?.lastName || ""); const [lastName, setLastName] = useState<string>(profileData?.lastName || "");
const [firstName, setFirstName] = useState<string>( const [firstName, setFirstName] = useState<string>(
profileData?.firstName || "" profileData?.firstName || ""
); );
const {mutateAsync: updateUserData} = useUpdateUserData(); const { mutateAsync: updateUserData } = useUpdateUserData();
return ( return (
<ScrollView style={{paddingBottom: 100, flex: 1}}> <ScrollView style={{ paddingBottom: 100, flex: 1 }}>
<View style={styles.card}> <View style={styles.card}>
<Text text70>Your Profile</Text> <Text style={styles.subTit}>Your Profile</Text>
<View row spread paddingH-15 centerV marginV-15> <View row spread paddingH-15 centerV marginV-15>
<View style={styles.pfp}></View> <ImageBackground
<Text text80 color="#50be0c"> style={styles.pfp}
Change Photo source={require("../../../../assets/images/profile-picture.png")}
</Text> />
<Text text80>Remove Photo</Text>
</View>
<View paddingH-15>
<Text text80 marginT-10 marginB-7 color="#a1a1a1">
First name
</Text>
<TextField
text70
placeholder="First name"
style={styles.txtBox}
value={firstName}
onChangeText={async (value) => {
setFirstName(value);
await updateUserData({newUserData: {firstName: value}});
}}
/>
<Text text80 marginT-10 marginB-7 color="#a1a1a1">
Last name
</Text>
<TextField
text70
placeholder="Last name"
style={styles.txtBox}
value={lastName}
onChangeText={async (value) => {
setLastName(value);
await updateUserData({newUserData: {lastName: value}});
}}
/>
<Text text80 marginT-10 marginB-7 color="#a1a1a1">
Email address
</Text>
<TextField
text70
placeholder="Email address"
value={user?.email?.toString()}
style={styles.txtBox}
/>
</View>
</View>
<View style={styles.card}> <Text style={styles.photoSet} color="#50be0c">
<Text text70>Settings</Text> Change Photo
<Text text80 marginT-20 marginB-7 color="#a1a1a1"> </Text>
Time Zone <Text style={styles.photoSet}>Remove Photo</Text>
</Text> </View>
<TextField text70 placeholder="Time Zone" style={styles.txtBox}/> <View paddingH-15>
</View> <Text text80 marginT-10 marginB-7 style={styles.label}>
</ScrollView> First name
); </Text>
<TextField
text70
placeholder="First name"
style={styles.txtBox}
value={firstName}
onChangeText={async (value) => {
setFirstName(value);
await updateUserData({ newUserData: { firstName: value } });
}}
/>
<Text text80 marginT-10 marginB-7 style={styles.label}>
Last name
</Text>
<TextField
text70
placeholder="Last name"
style={styles.txtBox}
value={lastName}
onChangeText={async (value) => {
setLastName(value);
await updateUserData({ newUserData: { lastName: value } });
}}
/>
<Text text80 marginT-10 marginB-7 style={styles.label}>
Email address
</Text>
<TextField
text70
placeholder="Email address"
value={user?.email?.toString()}
style={styles.txtBox}
/>
</View>
</View>
<View style={styles.card}>
<Text style={styles.subTit}>Settings</Text>
<Text text80 marginT-20 marginB-7 style={styles.label}>
Time Zone
</Text>
<TextField text70 placeholder="Time Zone" style={styles.txtBox} />
</View>
</ScrollView>
);
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
card: { card: {
marginVertical: 15, marginVertical: 15,
backgroundColor: "white", backgroundColor: "white",
width: "100%", width: "100%",
borderRadius: 15, borderRadius: 12,
padding: 20, paddingHorizontal: 20,
}, paddingVertical: 21,
pfp: { },
aspectRatio: 1, pfp: {
width: 60, aspectRatio: 1,
backgroundColor: "green", width: 65.54,
borderRadius: 20, backgroundColor: "green",
}, borderRadius: 20,
txtBox: { },
backgroundColor: "#fafafa", txtBox: {
borderRadius: 50, backgroundColor: "#fafafa",
borderWidth: 2, borderRadius: 50,
borderColor: "#cecece", borderWidth: 2,
padding: 15, borderColor: "#cecece",
height: 45, padding: 15,
}, height: 45,
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 13
},
subTit: {
fontFamily: "Manrope_500Medium",
fontSize: 15,
},
label: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 12,
color: "#a1a1a1"
},
photoSet:{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 13.07
}
}); });
export default MyProfile; export default MyProfile;

20
components/pages/todos/ToDoItem.tsx
View File

@ -34,11 +34,11 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
return ( return (
<View <View
centerV centerV
paddingV-15 paddingV-10
paddingH-15 paddingH-13
marginV-10 marginV-10
style={{ style={{
borderRadius: 22, borderRadius: 17,
backgroundColor: props.item.done ? "#e0e0e0" : "white", backgroundColor: props.item.done ? "#e0e0e0" : "white",
opacity: props.item.done ? 0.3 : 1, opacity: props.item.done ? 0.3 : 1,
}} }}
@ -49,8 +49,8 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
text70 text70
style={{ style={{
textDecorationLine: props.item.done ? "line-through" : "none", textDecorationLine: props.item.done ? "line-through" : "none",
fontFamily: "Manrope_600SemiBold", fontFamily: "Manrope_500Medium",
fontSize: 18, fontSize: 15,
}} }}
onPress={() => { onPress={() => {
if (props.isSettings) { if (props.isSettings) {
@ -77,17 +77,17 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
)} )}
<Checkbox <Checkbox
value={props.item.done} value={props.item.done}
containerStyle={{borderWidth: 1, borderRadius: 50, borderColor: 'gray', height: 28, width: 28}} containerStyle={{borderWidth: 0.7, borderRadius: 50, borderColor: 'gray', height: 24.64, width: 24.64}}
color="#fd1575" color="#fd1575"
onValueChange={(value) => { onValueChange={(value) => {
updateToDo({ id: props.item.id, done: !props.item.done }); updateToDo({ id: props.item.id, done: !props.item.done });
}} }}
/> />
</View> </View>
<View centerH paddingV-5> <View centerH paddingV-0>
<View <View
centerV centerV
height={2} height={0.7}
width={"100%"} width={"100%"}
style={{ style={{
backgroundColor: props.item.done ? "#b8b8b8" : "#e7e7e7", backgroundColor: props.item.done ? "#b8b8b8" : "#e7e7e7",
@ -106,7 +106,7 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
> >
<View centerV row gap-3> <View centerV row gap-3>
<Ionicons name="gift-outline" size={20} color="#46a80a" /> <Ionicons name="gift-outline" size={20} color="#46a80a" />
<Text color="#46a80a" style={{ fontSize: 16 }}> <Text color="#46a80a" style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}>
{props.item.points} points {props.item.points} points
</Text> </Text>
</View> </View>
@ -117,7 +117,7 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
<ImageBackground <ImageBackground
source={require("../../../assets/images/child-picture.png")} source={require("../../../assets/images/child-picture.png")}
style={{ style={{
height: 28, height: 24.64,
aspectRatio: 1, aspectRatio: 1,
borderRadius: 22, borderRadius: 22,
overflow: "hidden", overflow: "hidden",

23
components/shared/AssigneesDisplay.tsx Normal file
View File

@ -0,0 +1,23 @@
import React from "react";
import { ImageBackground, StyleSheet } from "react-native";
import { View } from "react-native-ui-lib";
import RemoveAssigneeBtn from "./RemoveAssigneeBtn";
const AssigneesDisplay = () => {
return (
<View row marginH-13 marginT-13 gap-20>
<ImageBackground
source={require("../../assets/images/child-picture.png")}
style={{ aspectRatio: 1, width: 58.08, overflow: "hidden" }}
children={<RemoveAssigneeBtn />}
/>
<ImageBackground
source={require("../../assets/images/child1-picture.png")}
style={{ aspectRatio: 1, width: 58.08, overflow: "hidden" }}
children={<RemoveAssigneeBtn />}
/>
</View>
);
};
export default AssigneesDisplay;

4
components/shared/DrawerButton.tsx
View File

@ -30,7 +30,7 @@ const DrawerButton = (props: IDrawerButtonProps) => {
)} )}
style={{ style={{
aspectRatio: 1, aspectRatio: 1,
borderRadius: 15, borderRadius: 18.55,
marginBottom: 12, marginBottom: 12,
flexDirection: "column", flexDirection: "column",
justifyContent: "space-between", justifyContent: "space-between",
@ -47,5 +47,5 @@ const styles = StyleSheet.create({
aspectRatio: 1, aspectRatio: 1,
borderRadius: 50, borderRadius: 50,
}, },
labelStyle: { fontSize: 14, fontFamily: "Manrope_600SemiBold" }, labelStyle: { fontSize: 15, fontFamily: "Poppins_400Regular" },
}); });

6
components/shared/HeaderTemplate.tsx
View File

@ -11,7 +11,7 @@ const HeaderTemplate = (props: {
}) => { }) => {
const { user, profileData } = useAuthContext(); const { user, profileData } = useAuthContext();
const headerHeight:number = 80; const headerHeight:number = 72;
return ( return (
<View row centerV marginV-15> <View row centerV marginV-15>
<ImageBackground <ImageBackground
@ -26,9 +26,9 @@ const HeaderTemplate = (props: {
/> />
<View gap-3> <View gap-3>
{props.isWelcome && ( {props.isWelcome && (
<Text text70L style={{fontSize: 17, fontFamily: "Manrope_400Regular"}}>Welcome, {profileData?.firstName}!</Text> <Text text70L style={{fontSize: 19, fontFamily: "Manrope_400Regular"}}>Welcome, {profileData?.firstName}!</Text>
)} )}
<Text text70B style={{ fontSize: 18, fontFamily: "Manrope_700Bold" }}> <Text text70B style={{ fontSize: 18 , fontFamily: "Manrope_600SemiBold" }}>
{props.message} {props.message}
</Text> </Text>
{props.children && <View>{props.children}</View>} {props.children && <View>{props.children}</View>}

27
components/shared/RemoveAssigneeBtn.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Text, StyleSheet } from "react-native";
import React from "react";
import CloseXIcon from "@/assets/svgs/CloseXIcon";
import { View } from "react-native-ui-lib";
const RemoveAssigneeBtn = () => {
return (
<View style={styles.removeBtn} center>
<CloseXIcon />
</View>
);
};
const styles = StyleSheet.create({
removeBtn: {
aspectRatio: 1,
width: 20,
backgroundColor: "#f0efef",
right: 0,
borderRadius: 50,
position: "absolute",
borderWidth: 1,
borderColor: "#7f7f7f",
},
});
export default RemoveAssigneeBtn;

2
package.json
View File

@ -28,6 +28,8 @@
}, },
"dependencies": { "dependencies": {
"@expo-google-fonts/manrope": "^0.2.3", "@expo-google-fonts/manrope": "^0.2.3",
"@expo-google-fonts/plus-jakarta-sans": "^0.2.3",
"@expo-google-fonts/poppins": "^0.2.3",
"@expo/vector-icons": "^14.0.2", "@expo/vector-icons": "^14.0.2",
"@react-native-community/blur": "^4.4.0", "@react-native-community/blur": "^4.4.0",
"@react-native-community/datetimepicker": "^8.2.0", "@react-native-community/datetimepicker": "^8.2.0",

10
yarn.lock
View File

@ -853,6 +853,16 @@
resolved "https://registry.yarnpkg.com/@expo-google-fonts/manrope/-/manrope-0.2.3.tgz#7ae7eec06232a9efdae460ac05b99bac3075e101" resolved "https://registry.yarnpkg.com/@expo-google-fonts/manrope/-/manrope-0.2.3.tgz#7ae7eec06232a9efdae460ac05b99bac3075e101"
integrity sha512-2M9hzi5ku97ZbheGMyzqIdiIEmve0/ihBk9nVWRy2lVIchWqR2k2yIQPS7jKC/Az/e43tW3POLNeU6gQJQL9hw== integrity sha512-2M9hzi5ku97ZbheGMyzqIdiIEmve0/ihBk9nVWRy2lVIchWqR2k2yIQPS7jKC/Az/e43tW3POLNeU6gQJQL9hw==
"@expo-google-fonts/plus-jakarta-sans@^0.2.3":
version "0.2.3"
resolved "https://registry.yarnpkg.com/@expo-google-fonts/plus-jakarta-sans/-/plus-jakarta-sans-0.2.3.tgz#d13debe67e40b2059797e5bbb8e1f32c13312ab5"
integrity sha512-7vukKMax5xrMlrf0DCzOpqqCQwxYaUXH4BmVxbal5Xrys1LIQmaqoiPftd7RtTSRbwPEhU/GYqIGrkuCAydRrQ==
"@expo-google-fonts/poppins@^0.2.3":
version "0.2.3"
resolved "https://registry.yarnpkg.com/@expo-google-fonts/poppins/-/poppins-0.2.3.tgz#807fc1bf58948c32ddfb9c67f7329ff16cc78d14"
integrity sha512-PXkur1ZY/puy1PwVFYPJx8qiI3dtBzC2ig1bo53swCt7/sI7krCGYRO6hLBNp15M0kcNh2J4cCR9ZQyFxsving==
"@expo/bunyan@^4.0.0": "@expo/bunyan@^4.0.0":
version "4.0.1" version "4.0.1"
resolved "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.1.tgz" resolved "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.1.tgz"