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

70
app/_layout.tsx
View File

@ -10,6 +10,42 @@ import {
Manrope_700Bold,
Manrope_800ExtraBold,
} 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 * as SplashScreen from "expo-splash-screen";
import "react-native-reanimated";
@ -30,7 +66,7 @@ SplashScreen.preventAutoHideAsync();
const queryClient = new QueryClient();
if (__DEV__) {
functions().useEmulator('localhost', 5001);
functions().useEmulator("localhost", 5001);
firestore().useEmulator("localhost", 5471);
auth().useEmulator("http://localhost:9099");
}
@ -136,6 +172,38 @@ export default function RootLayout() {
Manrope_600SemiBold,
Manrope_700Bold,
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(() => {

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
width={24}
height={16}
viewBox="0 0 24 16"
fill="none"
{...props}
>

3
assets/svgs/NavCalendarIcon.tsx
View File

@ -4,11 +4,12 @@ const NavCalendarIcon: React.FC<SvgProps> = (props) => (
<Svg
width={28}
height={28}
viewBox="0 0 28 28"
fill="none"
{...props}
>
<Path
stroke="#07B8C7"
stroke={props.color || "#07B8C7"}
strokeLinecap="round"
strokeLinejoin="round"
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"
const NavToDosIcon: React.FC<SvgProps> = (props) => (
<Svg
width={30}
height={30}
width={props.width || 30}
height={props.width || 30}
viewBox="0 0 30 30"
fill="none"
{...props}
>
<Path
fill="#8005EB"
stroke="#8005EB"
fill={props.color || "#8005EB"}
stroke={props.color || "#8005EB"}
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"
/>

5
assets/svgs/ProfileIcon.tsx
View File

@ -2,8 +2,9 @@ import * as React from "react"
import Svg, { Path, SvgProps } from "react-native-svg"
const ProfileIcon: React.FC<SvgProps> = (props) => (
<Svg
width={21}
height={21}
width={22}
height={22}
viewBox="0 0 21 21"
fill="none"
{...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>
<MaterialIcons name="add" size={22} color={"white"} />
<Text white tex30 style={{ fontSize: 17 }}>
<Text white style={{ fontSize: 16, fontFamily: 'Manrope_600SemiBold' }}>
New
</Text>
</View>

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

@ -13,13 +13,14 @@ const BrainDumpItem = (props: { item: IBrainDump }) => {
<View
backgroundColor="white"
marginV-5
padding-15
style={{ borderRadius: 20, elevation: 2 }}
paddingH-13
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}
</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>
</TouchableWithoutFeedback>
<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 { 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 { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
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 BinIcon from "@/assets/svgs/BinIcon";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
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: {
item: IBrainDump;
@ -63,6 +72,7 @@ const MoveBrainDump = (props: {
iconSource={() => <PenIcon />}
onPress={() => {
console.log("selview");
props.setIsVisible(false);
}}
/>
<Button
@ -80,13 +90,10 @@ const MoveBrainDump = (props: {
<Text text60R>{props.item.title} </Text>
</View>
<View style={styles.divider} />
<View row marginH-20>
<Entypo
name="text"
size={24}
color="black"
style={{ marginBottom: "auto" }}
/>
<View row marginL-10 gap-5>
<View paddingT-8>
<MenuIcon width={20} height={12} />
</View>
<TextField
textAlignVertical="top"
multiline
@ -99,6 +106,38 @@ const MoveBrainDump = (props: {
/>
</View>
<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>
);
};
@ -129,6 +168,17 @@ const styles = StyleSheet.create({
marginBottom: 10,
marginTop: 25,
},
optionsReg: {
fontSize: 16,
fontFamily: "PlusJakartaSans_400Regular",
},
optionsBold: {
fontSize: 16,
fontFamily: "PlusJakartaSans_600SemiBold",
},
optionsIcon: {
marginRight: 10,
},
});
export default MoveBrainDump;

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

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

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

@ -1,16 +1,22 @@
import React, {useRef, useState} from "react";
import {LayoutChangeEvent, StyleSheet} from "react-native";
import {Calendar} from "react-native-big-calendar";
import {Picker, PickerModes, SegmentedControl, View} from "react-native-ui-lib";
import {MaterialIcons} from "@expo/vector-icons";
import {AddEventDialog} from "@/components/pages/calendar/AddEventDialog";
import React, { useRef, useState } from "react";
import { LayoutChangeEvent, StyleSheet } from "react-native";
import { Calendar } from "react-native-big-calendar";
import {
Picker,
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 CalendarViewSwitch from "@/components/pages/calendar/CalendarViewSwitch";
import {ManuallyAddEventModal} from "@/components/pages/calendar/ManuallyAddEventModal";
import {CalendarEvent} from "@/contexts/CalendarContext";
import {useSettingsContext} from "@/contexts/SettingsContext";
import { ManuallyAddEventModal } from "@/components/pages/calendar/ManuallyAddEventModal";
import { CalendarEvent } from "@/contexts/CalendarContext";
import { useSettingsContext } from "@/contexts/SettingsContext";
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([
[0, "day"],
@ -34,26 +40,25 @@ const months = [
];
export default function CalendarPage() {
const {calendarColor} = useSettingsContext();
const { calendarColor } = useSettingsContext();
const [editVisible, setEditVisible] = useState<boolean>(false);
const [eventForEdit, setEventForEdit] = useState<CalendarEvent>();
const styles = StyleSheet.create({
segmentslblStyle: {
fontSize: 14,
fontFamily: 'Manrope',
fontWeight: 'bold'
fontSize: 12,
fontFamily: "Manrope_600SemiBold",
},
calHeader: {
borderWidth: 0,
},
dayModeHeader: {
alignSelf: 'flex-start',
justifyContent: 'space-between',
alignContent: 'center',
alignSelf: "flex-start",
justifyContent: "space-between",
alignContent: "center",
width: 38,
right: 42,
}
},
});
const [isFamilyView, setIsFamilyView] = useState<boolean>(false);
@ -65,10 +70,10 @@ export default function CalendarPage() {
>(undefined);
const calendarContainerRef = useRef(null);
const {data: events} = useGetEvents(isFamilyView)
const { data: events } = useGetEvents(isFamilyView);
const onLayout = (event: LayoutChangeEvent) => {
const {height} = event.nativeEvent.layout;
const { height } = event.nativeEvent.layout;
setCalendarHeight(height);
};
@ -91,14 +96,18 @@ export default function CalendarPage() {
};
return (
<View style={{flex: 1, height: "100%", padding: 10}} paddingH-22 paddingT-10>
<View
style={{ flex: 1, height: "100%", padding: 10 }}
paddingH-22
paddingT-0
>
<HeaderTemplate
message={"Let's get your week started!"}
isWelcome={true}
/>
<View
style={{flex: 1, backgroundColor: "#fff", borderRadius: 30}}
style={{ flex: 1, backgroundColor: "#fff", borderRadius: 30 }}
ref={calendarContainerRef}
onLayout={onLayout}
>
@ -116,28 +125,31 @@ export default function CalendarPage() {
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"}/>}
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
>
{months.map((month) => (
<Picker.Item key={month} label={month} value={month}/>
<Picker.Item key={month} label={month} value={month} />
))}
</Picker>
</View>
<View>
<SegmentedControl
segments={[{label: "D"}, {label: "W"}, {label: "M"}]}
segments={[{ label: "D" }, { label: "W" }, { label: "M" }]}
backgroundColor="#ececec"
inactiveColor="#919191"
activeBackgroundColor="#ea156c"
activeColor="white"
outlineColor="white"
outlineWidth={3}
style={{backgroundColor: "green"}}
segmentLabelStyle={styles.segmentslblStyle}
onChangeIndex={handleSegmentChange}
initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
@ -150,7 +162,7 @@ export default function CalendarPage() {
bodyContainerStyle={styles.calHeader}
mode={mode}
events={isFamilyView ? events ?? [] : events ?? []}
eventCellStyle={(event) => ({backgroundColor: event.eventColor})}
eventCellStyle={(event) => ({ backgroundColor: event.eventColor })}
onPressEvent={(event) => {
setEditVisible(true);
setEventForEdit(event);
@ -159,12 +171,15 @@ export default function CalendarPage() {
activeDate={selectedDate}
date={selectedDate}
onPressCell={setSelectedNewEndDate}
headerContentStyle={mode === 'day' ? styles.dayModeHeader : {}}
headerContentStyle={mode === "day" ? styles.dayModeHeader : {}}
onSwipeEnd={(date) => {
setSelectedDate(date);
}}
/>
)}
</View>
<CalendarViewSwitch viewSwitch={setIsFamilyView}/>
<AddEventDialog/>
<CalendarViewSwitch viewSwitch={setIsFamilyView} />
<AddEventDialog />
{eventForEdit && (
<EditEventDialog
isVisible={editVisible}

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

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

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

@ -30,11 +30,12 @@ import { addHours, setDate } from "date-fns";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
import { CalendarEvent, useCalendarContext } from "@/contexts/CalendarContext";
import { repeatOptions } from "@/contexts/ToDosContext";
import { StyleSheet } from "react-native";
import { ImageBackground, StyleSheet } from "react-native";
import ClockIcon from "@/assets/svgs/ClockIcon";
import LockIcon from "@/assets/svgs/LockIcon";
import MenuIcon from "@/assets/svgs/MenuIcon";
import CameraIcon from "@/assets/svgs/CameraIcon";
import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
const daysOfWeek = [
{ label: "Monday", value: "monday" },
@ -69,7 +70,9 @@ export const ManuallyAddEventModal = ({
return date;
});
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);
return date;
});
@ -82,7 +85,7 @@ export const ManuallyAddEventModal = ({
const { mutateAsync: createEvent, isLoading, isError } = useCreateEvent();
const formatDateTime = (date?: Date | string) => {
if(!date) return undefined
if (!date) return undefined;
return new Date(date).toLocaleDateString("en-US", {
weekday: "long",
month: "short",
@ -193,13 +196,27 @@ export const ManuallyAddEventModal = ({
}}
>
<TouchableOpacity onPress={close}>
<Text style={{ color: "#05a8b6" }} text70>
<Text
style={{
color: "#05a8b6",
fontFamily: "PlusJakartaSans_400Regular",
fontSize: 16,
}}
text70
>
Cancel
</Text>
</TouchableOpacity>
<DropModalIcon onPress={close} />
<TouchableOpacity onPress={handleSave}>
<Text style={{ color: "#05a8b6" }} text70>
<Text
style={{
color: "#05a8b6",
fontFamily: "PlusJakartaSans_400Regular",
fontSize: 16,
}}
text70
>
Save
</Text>
</TouchableOpacity>
@ -212,16 +229,22 @@ export const ManuallyAddEventModal = ({
setTitle(text);
}}
placeholderTextColor="#2d2d30"
text60R
marginT-15
marginL-30
style={{ fontFamily: "Manrope_500Medium", fontSize: 22 }}
paddingT-15
paddingL-30
/>
<View style={styles.divider} marginT-8 />
<View marginL-30 centerV>
<View row spread marginB-10 centerV>
<View row>
<AntDesign name="clockcircleo" size={24} color="#919191" />
<Text text70 marginL-10>
<Text
style={{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
}}
marginL-10
>
All day
</Text>
</View>
@ -244,7 +267,10 @@ export const ManuallyAddEventModal = ({
setStartDate(date);
}}
maximumDate={endDate}
text70
style={{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
}}
marginL-8
/>
</View>
@ -253,17 +279,23 @@ export const ManuallyAddEventModal = ({
onChange={(date) => setStartTime(date)}
maximumDate={endTime}
minuteInterval={5}
dateTimeFormatter={(date, mode) => date.toLocaleTimeString("en-us",
{ hour: "numeric",
minute: "numeric"
})}
dateTimeFormatter={(date, mode) =>
date.toLocaleTimeString("en-us", {
hour: "numeric",
minute: "numeric",
})
}
mode="time"
text70
style={{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
}}
marginR-30
/>
</View>
{!isAllDay && <View row marginB-10 spread>
{!isAllDay && (
<View row marginB-10 spread>
<View row centerV>
<Feather name="calendar" size={25} color="#919191" />
<DateTimePicker
@ -274,6 +306,10 @@ export const ManuallyAddEventModal = ({
onChange={(date) => {
setEndDate(date);
}}
style={{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
}}
/>
</View>
<DateTimePicker
@ -281,23 +317,32 @@ export const ManuallyAddEventModal = ({
onChange={(date) => setEndTime(date)}
minimumDate={startTime}
minuteInterval={5}
dateTimeFormatter={(date, mode) => date.toLocaleTimeString("en-us",
{ hour: "numeric",
minute: "numeric"
})}
dateTimeFormatter={(date, mode) =>
date.toLocaleTimeString("en-us", {
hour: "numeric",
minute: "numeric",
})
}
mode="time"
text70
style={{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
}}
marginR-30
/>
</View>}
</View>
)}
</View>
<View style={styles.divider} />
<View marginH-30 marginB-10 row centerV>
<Ionicons name="person-circle-outline" size={28} color="#919191" />
<Text text70R marginL-10>
Assignees
<Text
style={{ fontFamily: "Manrope_600SemiBold", fontSize: 18 }}
marginL-10
>
Attendees
</Text>
<Button
size={ButtonSize.small}
@ -313,35 +358,25 @@ export const ManuallyAddEventModal = ({
borderWidth: 1,
}}
color="#ea156c"
label="Assign"
label="Add"
labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
/>
</View>
<View row marginH-13 marginT-13>
<View
marginL-30
style={{
aspectRatio: 1,
width: 50,
backgroundColor: "red",
borderRadius: 50,
}}
/>
<View
marginL-30
style={{
aspectRatio: 1,
width: 50,
backgroundColor: "red",
borderRadius: 50,
}}
/>
<View marginL-35>
<AssigneesDisplay />
</View>
<View style={styles.divider} />
<View marginH-30 marginB-0 row spread centerV>
<View row centerV>
<ClockIcon />
<Text text70 marginL-10>
Reminder
<Text
style={{
fontFamily: "Manrope_600SemiBold",
fontSize: 18,
}}
marginL-10
>
Reminders
</Text>
</View>
<View>
@ -358,6 +393,7 @@ export const ManuallyAddEventModal = ({
borderColor: "#ea156c",
borderWidth: 1,
}}
labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
color="#ea156c"
label="Set Reminder"
/>
@ -367,7 +403,13 @@ export const ManuallyAddEventModal = ({
<View marginH-30 marginB-0 row spread centerV>
<View row>
<LockIcon />
<Text text70 marginL-10>
<Text
style={{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
}}
marginL-10
>
Mark as Private
</Text>
</View>
@ -385,7 +427,13 @@ export const ManuallyAddEventModal = ({
<View marginH-30 marginB-0 row spread centerV>
<View row centerV>
<MenuIcon />
<Text text70 marginL-10>
<Text
style={{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
}}
marginL-10
>
Add Details
</Text>
</View>
@ -397,6 +445,8 @@ export const ManuallyAddEventModal = ({
marginB-15
label="Create event from image"
text70
style={{ height: 47 }}
labelStyle={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 15 }}
backgroundColor="#05a8b6"
iconSource={() => (
<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 { Feather, MaterialIcons } from "@expo/vector-icons";
import * as ImagePicker from "expo-image-picker";
import AddImageIcon from "@/assets/svgs/AddImageIcon";
import CameraIcon from "@/assets/svgs/CameraIcon";
interface IUploadDialogProps {
show: boolean;
@ -51,19 +53,9 @@ const UploadImageDialog = (uploadDialogProps: IUploadDialogProps) => {
panDirection={PanningProvider.Directions.DOWN}
center
>
<Card
style={{
paddingHorizontal: 40,
paddingTop: 20,
paddingBottom: 10,
justifyContent: "center",
alignItems: "center",
}}
>
<Card style={styles.modalCard}>
<View centerH>
<Text text60 marginB-20>
Upload an Image
</Text>
<Text style={styles.modalTitle}>Upload an Image</Text>
{!selectedImage && (
<TouchableOpacity onPress={handleImagePick}>
<View
@ -73,12 +65,8 @@ const UploadImageDialog = (uploadDialogProps: IUploadDialogProps) => {
gap-8
marginB-20
>
<MaterialIcons
name="add-photo-alternate"
size={30}
color="#fd1775"
/>
<Text color="#fd1775" text70>
<AddImageIcon />
<Text style={styles.uploadTxt}>
Click here to upload an image
</Text>
</View>
@ -102,38 +90,31 @@ const UploadImageDialog = (uploadDialogProps: IUploadDialogProps) => {
setImageTitle("");
}}
>
<Feather
name="trash"
size={22}
color="#919191"
/>
<Feather name="trash" size={22} color="#919191" />
</TouchableOpacity>
</View>
<Button
style={{
marginBottom: 10,
marginTop: 20,
marginTop: 35,
backgroundColor: "#ea156c",
justifyContent: "center",
paddingVertical: 13,
paddingVertical: 15,
width: 285,
alignItems: "center",
}}
label="Upload Image"
onPress={() => {}}
labelStyle={styles.btnLbl}
iconSource={() => (
<Feather
name="camera"
size={21}
style={{ marginRight: 7 }}
color="white"
/>
<CameraIcon color="white" style={{marginRight: 10}}/>
)}
/>
</>
)}
<TouchableOpacity onPress={() => uploadDialogProps.setShow(false)}>
<Text text80 color="#999999">
<Text style={styles.bottomText}>
Go back
</Text>
</TouchableOpacity>
@ -148,6 +129,7 @@ export default UploadImageDialog;
const styles = StyleSheet.create({
uploadImgBox: {
backgroundColor: "#ffe8f2",
padding: 35,
width: "100%",
aspectRatio: 1.8,
borderRadius: 20,
@ -155,10 +137,20 @@ const styles = StyleSheet.create({
borderColor: "#fd1775",
borderStyle: "dashed",
},
btnLbl: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 15,
},
uploadTxt: {
color: "#b11d5a",
fontSize: 15,
fontFamily: "PlusJakartaSans_400Regular",
marginTop: 12
},
selectedImage: {
width: 60,
width: 38.69,
aspectRatio: 1,
borderRadius: 10,
borderRadius: 5,
},
imageContainer: {
alignItems: "center",
@ -166,13 +158,33 @@ const styles = StyleSheet.create({
borderWidth: 1,
borderColor: "#d9d9d9",
padding: 10,
borderRadius: 13,
borderRadius: 10,
},
imageInfo: {
marginLeft: 10,
},
imageTitle: {
fontSize: 16,
color: "#333",
fontSize: 15,
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",
},
});

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

@ -1,13 +1,13 @@
import {Checkbox, Text, TouchableOpacity, View,} from "react-native-ui-lib";
import React, {useEffect, useState} from "react";
import {AntDesign} from "@expo/vector-icons";
import {GroceryCategory, useGroceryContext,} from "@/contexts/GroceryContext";
import { Checkbox, Text, TouchableOpacity, View } from "react-native-ui-lib";
import React, { useEffect, useState } from "react";
import { AntDesign } from "@expo/vector-icons";
import { GroceryCategory, useGroceryContext } from "@/contexts/GroceryContext";
import EditGroceryFrequency from "./EditGroceryFrequency";
import EditGroceryItem from "./EditGroceryItem";
import {StyleSheet} from "react-native";
import {IGrocery} from "@/hooks/firebase/types/groceryData";
import { ImageBackground, StyleSheet } from "react-native";
import { IGrocery } from "@/hooks/firebase/types/groceryData";
import firestore from "@react-native-firebase/firestore";
import {UserProfile} from "@/hooks/firebase/types/profileTypes";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
const GroceryItem = ({
item,
@ -27,11 +27,11 @@ const GroceryItem = ({
const [itemCreator, setItemCreator] = useState<UserProfile>(null);
const handleTitleChange = (newTitle: string) => {
updateGroceryItem({id: item?.id, title: newTitle});
updateGroceryItem({ id: item?.id, title: newTitle });
};
const handleCategoryChange = (newCategory: GroceryCategory) => {
updateGroceryItem({id: item?.id, category: newCategory});
updateGroceryItem({ id: item?.id, category: newCategory });
};
useEffect(() => {
@ -48,20 +48,19 @@ const GroceryItem = ({
.get();
if (documentSnapshot.exists) {
setItemCreator(documentSnapshot.data() as UserProfile)
}
setItemCreator(documentSnapshot.data() as UserProfile);
}
}
};
return (
<View
key={item.id}
style={{ borderRadius: 18, marginVertical: 5 }}
style={{ borderRadius: 17, marginVertical: 5 }}
backgroundColor="white"
centerV
paddingV-12
paddingR-12
paddingL-12
paddingH-13
paddingV-10
>
<View row spread>
<EditGroceryFrequency
@ -75,7 +74,9 @@ const GroceryItem = ({
{!isEditingTitle ? (
<View>
<TouchableOpacity onPress={() => setIsEditingTitle(true)}>
<Text text70T black style={{fontWeight: "400"}}>{item.title}</Text>
<Text text70T black style={styles.title}>
{item.title}
</Text>
</TouchableOpacity>
</View>
) : (
@ -98,7 +99,7 @@ const GroceryItem = ({
size={24}
style={{
color: item.approved ? "green" : "#aaaaaa",
marginRight: 15
marginRight: 15,
}}
onPress={() => {
handleItemApproved(item.id, { approved: true });
@ -127,19 +128,21 @@ const GroceryItem = ({
{!item.approved && (
<View>
<View centerH>
<View height={1} backgroundColor="#e7e7e7" width={"90%"} />
<View height={0.7} backgroundColor="#e7e7e7" width={"98%"} />
</View>
<View paddingL-0 paddingT-10 flexS row centerV>
<View
<View paddingL-0 paddingT-12 flexS row centerV>
<ImageBackground
style={{
width: 25,
width: 22.36,
aspectRatio: 1,
borderRadius: 50,
backgroundColor: "red",
marginRight: 10,
overflow: 'hidden'
}}
></View>
<Text color="#858585" text70>
source={require('../../../assets/images/child-picture.png')}
/>
<Text color="#858585" style={styles.authorTxt}>
Requested by {itemCreator?.firstName}
</Text>
</View>
@ -150,14 +153,19 @@ const GroceryItem = ({
};
const styles = StyleSheet.create({
authorTxt: { fontFamily: "Manrope_500Medium", fontSize: 12 },
checkbox: {
borderRadius: 50,
borderWidth: 1,
borderWidth: 0.7,
color: "#bfbfbf",
borderColor: "#bfbfbf",
width: 28,
width: 24.64,
aspectRatio: 1,
},
title: {
fontFamily: "Manrope_500Medium",
fontSize: 15,
},
});
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 { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import { IGrocery } from "@/hooks/firebase/types/groceryData";
import AddPersonIcon from "@/assets/svgs/AddPersonIcon";
const GroceryList = () => {
const {
@ -88,32 +89,20 @@ const GroceryList = () => {
<View row centerV>
<View
backgroundColor="#e2eed8"
paddingH-5
paddingH-15
paddingV-8
marginR-5
centerV
style={{ borderRadius: 50 }}
>
<Text
text70BL
color="#46a80a"
style={{ fontFamily: "Manrope_700Bold" }}
>
<Text text70BL color="#46a80a" style={styles.counterText}>
{approvedGroceries?.length} list{" "}
{approvedGroceries?.length === 1 ? (
<Text
text70BL
color="#46a80a"
style={{ fontFamily: "Manrope_700Bold" }}
>
<Text text70BL color="#46a80a" style={styles.counterText}>
item
</Text>
) : (
<Text
text70BL
color="#46a80a"
style={{ fontFamily: "Manrope_700Bold" }}
>
<Text text70BL color="#46a80a" style={styles.counterText}>
items
</Text>
)}
@ -126,16 +115,12 @@ const GroceryList = () => {
marginR-15
style={{ borderRadius: 50 }}
>
<Text
text70
style={{ fontFamily: "Manrope_700Bold" }}
color="#e28800"
>
<Text text70 style={styles.counterText} color="#e28800">
{pendingGroceries?.length} pending
</Text>
</View>
<TouchableOpacity>
<MaterialIcons name="person-add-alt" size={24} color="gray" />
<AddPersonIcon width={24}/>
</TouchableOpacity>
</View>
</HeaderTemplate>
@ -143,7 +128,7 @@ const GroceryList = () => {
{/* Pending Approval Section */}
<View row spread marginT-40 marginB-10 centerV>
<View row centerV>
<Text text70BL>Pending Approval</Text>
<Text style={styles.subHeader}>Pending Approval</Text>
{pendingVisible && (
<AntDesign
name="down"
@ -176,7 +161,7 @@ const GroceryList = () => {
borderRadius: 50,
}}
>
<Text text70 center color="#e28800">
<Text style={styles.counterNr} center color="#e28800">
{pendingGroceries?.length.toString()}
</Text>
</View>
@ -203,6 +188,7 @@ const GroceryList = () => {
{/* Approved Section */}
<View row spread marginT-40 marginB-0 centerV>
<View row centerV>
<Text style={styles.subHeader}>Shopping List</Text>
{approvedVisible && (
<AntDesign
name="down"
@ -225,7 +211,6 @@ const GroceryList = () => {
}}
/>
)}
<Text text70BL>Shopping List</Text>
</View>
<View
centerV
@ -236,7 +221,7 @@ const GroceryList = () => {
borderRadius: 50,
}}
>
<Text text70 center color="#46a80a">
<Text style={styles.counterNr} center color="#46a80a">
{approvedGroceries?.length.toString()}
</Text>
</View>
@ -296,6 +281,18 @@ const styles = StyleSheet.create({
fontFamily: "Manrope_400Regular",
fontSize: 14,
},
counterText: {
fontSize: 14,
fontFamily: "PlusJakartaSans_600SemiBold",
},
subHeader: {
fontSize: 15,
fontFamily: "Manrope_700Bold",
},
counterNr: {
fontFamily: "PlusJakartaSans_600SemiBold",
fontSize: 14
}
});
export default GroceryList;

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

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

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

@ -13,9 +13,17 @@ const ChoreRewardSettings = (props: {
<View marginT-10 marginH-20>
<ScrollView>
<TouchableOpacity onPress={() => props.setSelectedPage(0)}>
<View row marginT-20 marginL-5 marginB-35 centerV>
<Ionicons name="chevron-back" size={22} color="#979797" />
<Text text70 color="#979797">
<View row marginT-20 marginB-35 centerV>
<Ionicons
name="chevron-back"
size={14}
color="#979797"
style={{ paddingBottom: 3 }}
/>
<Text
style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
color="#979797"
>
Return to main settings
</Text>
</View>
@ -23,7 +31,7 @@ const ChoreRewardSettings = (props: {
<Text text60R marginB-20>
Chore Reward Settings
</Text>
<ToDosList isSettings/>
<ToDosList isSettings />
</ScrollView>
</View>
</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 PrivacyPolicyIcon from "@/assets/svgs/PrivacyPolicyIcon";
const styles = StyleSheet.create({
mainBtn: {
width: "100%",
justifyContent: "flex-start",
marginBottom: 20,
height: 60,
},
});
const pageIndex = {
main: 0,
user: 1,
@ -35,6 +27,7 @@ const SettingsPage = () => {
backgroundColor="white"
style={styles.mainBtn}
label="Manage My Profile"
labelStyle={styles.label}
color="#07b8c7"
iconSource={() => (
<ProfileIcon style={{marginRight: 10}} color="#07b9c8" />
@ -45,6 +38,7 @@ const SettingsPage = () => {
backgroundColor="white"
style={styles.mainBtn}
label="Calendar Settings"
labelStyle={styles.label}
color="#fd1775"
iconSource={() => (
<CalendarIcon style={{marginRight: 10}}/>
@ -57,6 +51,7 @@ const SettingsPage = () => {
backgroundColor="white"
style={styles.mainBtn}
label="To-Do Reward Settings"
labelStyle={styles.label}
color="#ff9900"
iconSource={() => (
<Octicons
@ -72,6 +67,7 @@ const SettingsPage = () => {
backgroundColor="white"
style={styles.mainBtn}
label="Cally Privacy Policy"
labelStyle={styles.label}
iconSource={() => (
<PrivacyPolicyIcon style={{marginRight: 10}}/>
)}
@ -93,3 +89,17 @@ const 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>
<ScrollView style={{ paddingBottom: 20, minHeight: "100%" }}>
<TouchableOpacity onPress={() => props.setSelectedPage(0)}>
<View row marginT-20 marginL-20 marginB-35 centerV>
<Ionicons name="chevron-back" size={22} color="#979797" />
<Text text70 color="#979797">
<View row marginT-20 marginB-35 centerV>
<Ionicons name="chevron-back" size={14} color="#979797" style={{paddingBottom: 3}} />
<Text
style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
color="#979797"
>
Return to main settings
</Text>
</View>
@ -30,7 +33,10 @@ const UserSettings = (props: { setSelectedPage: (page: number) => void }) => {
style={selectedView == true ? styles.btnSelected : styles.btnNot}
>
<View>
<Text text70 color={selectedView ? "white" : "black"}>
<Text
style={styles.btnTxt}
color={selectedView ? "white" : "black"}
>
My Profile
</Text>
</View>
@ -42,7 +48,10 @@ const UserSettings = (props: { setSelectedPage: (page: number) => void }) => {
style={selectedView == false ? styles.btnSelected : styles.btnNot}
>
<View>
<Text text70 color={!selectedView ? "white" : "black"}>
<Text
style={styles.btnTxt}
color={!selectedView ? "white" : "black"}
>
My Group
</Text>
</View>
@ -75,11 +84,16 @@ const styles = StyleSheet.create({
width: "50%",
borderRadius: 50,
},
btnTxt: {
fontFamily: "Manrope_500Medium",
fontSize: 15,
},
btnNot: {
height: "100%",
width: "50%",
borderRadius: 50,
},
title: { fontFamily: "Manrope_600SemiBold", fontSize: 18 },
});
export default UserSettings;

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

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

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

@ -1,32 +1,36 @@
import {Text, TextField, View} from "react-native-ui-lib";
import React, {useState} from "react";
import {StyleSheet} from "react-native";
import {ScrollView} from "react-native-gesture-handler";
import {useAuthContext} from "@/contexts/AuthContext";
import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData";
import { Text, TextField, View } from "react-native-ui-lib";
import React, { useState } from "react";
import { ImageBackground, StyleSheet } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { useAuthContext } from "@/contexts/AuthContext";
import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
const MyProfile = () => {
const {user, profileData} = useAuthContext();
const { user, profileData } = useAuthContext();
const [lastName, setLastName] = useState<string>(profileData?.lastName || "");
const [firstName, setFirstName] = useState<string>(
profileData?.firstName || ""
);
const {mutateAsync: updateUserData} = useUpdateUserData();
const { mutateAsync: updateUserData } = useUpdateUserData();
return (
<ScrollView style={{paddingBottom: 100, flex: 1}}>
<ScrollView style={{ paddingBottom: 100, flex: 1 }}>
<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 style={styles.pfp}></View>
<Text text80 color="#50be0c">
<ImageBackground
style={styles.pfp}
source={require("../../../../assets/images/profile-picture.png")}
/>
<Text style={styles.photoSet} color="#50be0c">
Change Photo
</Text>
<Text text80>Remove Photo</Text>
<Text style={styles.photoSet}>Remove Photo</Text>
</View>
<View paddingH-15>
<Text text80 marginT-10 marginB-7 color="#a1a1a1">
<Text text80 marginT-10 marginB-7 style={styles.label}>
First name
</Text>
<TextField
@ -36,10 +40,10 @@ const MyProfile = () => {
value={firstName}
onChangeText={async (value) => {
setFirstName(value);
await updateUserData({newUserData: {firstName: value}});
await updateUserData({ newUserData: { firstName: value } });
}}
/>
<Text text80 marginT-10 marginB-7 color="#a1a1a1">
<Text text80 marginT-10 marginB-7 style={styles.label}>
Last name
</Text>
<TextField
@ -49,10 +53,10 @@ const MyProfile = () => {
value={lastName}
onChangeText={async (value) => {
setLastName(value);
await updateUserData({newUserData: {lastName: value}});
await updateUserData({ newUserData: { lastName: value } });
}}
/>
<Text text80 marginT-10 marginB-7 color="#a1a1a1">
<Text text80 marginT-10 marginB-7 style={styles.label}>
Email address
</Text>
<TextField
@ -65,11 +69,11 @@ const MyProfile = () => {
</View>
<View style={styles.card}>
<Text text70>Settings</Text>
<Text text80 marginT-20 marginB-7 color="#a1a1a1">
<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}/>
<TextField text70 placeholder="Time Zone" style={styles.txtBox} />
</View>
</ScrollView>
);
@ -80,12 +84,13 @@ const styles = StyleSheet.create({
marginVertical: 15,
backgroundColor: "white",
width: "100%",
borderRadius: 15,
padding: 20,
borderRadius: 12,
paddingHorizontal: 20,
paddingVertical: 21,
},
pfp: {
aspectRatio: 1,
width: 60,
width: 65.54,
backgroundColor: "green",
borderRadius: 20,
},
@ -96,7 +101,22 @@ const styles = StyleSheet.create({
borderColor: "#cecece",
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;

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

@ -34,11 +34,11 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
return (
<View
centerV
paddingV-15
paddingH-15
paddingV-10
paddingH-13
marginV-10
style={{
borderRadius: 22,
borderRadius: 17,
backgroundColor: props.item.done ? "#e0e0e0" : "white",
opacity: props.item.done ? 0.3 : 1,
}}
@ -49,8 +49,8 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
text70
style={{
textDecorationLine: props.item.done ? "line-through" : "none",
fontFamily: "Manrope_600SemiBold",
fontSize: 18,
fontFamily: "Manrope_500Medium",
fontSize: 15,
}}
onPress={() => {
if (props.isSettings) {
@ -77,17 +77,17 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
)}
<Checkbox
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"
onValueChange={(value) => {
updateToDo({ id: props.item.id, done: !props.item.done });
}}
/>
</View>
<View centerH paddingV-5>
<View centerH paddingV-0>
<View
centerV
height={2}
height={0.7}
width={"100%"}
style={{
backgroundColor: props.item.done ? "#b8b8b8" : "#e7e7e7",
@ -106,7 +106,7 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
>
<View centerV row gap-3>
<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
</Text>
</View>
@ -117,7 +117,7 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
<ImageBackground
source={require("../../../assets/images/child-picture.png")}
style={{
height: 28,
height: 24.64,
aspectRatio: 1,
borderRadius: 22,
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={{
aspectRatio: 1,
borderRadius: 15,
borderRadius: 18.55,
marginBottom: 12,
flexDirection: "column",
justifyContent: "space-between",
@ -47,5 +47,5 @@ const styles = StyleSheet.create({
aspectRatio: 1,
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 headerHeight:number = 80;
const headerHeight:number = 72;
return (
<View row centerV marginV-15>
<ImageBackground
@ -26,9 +26,9 @@ const HeaderTemplate = (props: {
/>
<View gap-3>
{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}
</Text>
{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": {
"@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",
"@react-native-community/blur": "^4.4.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"
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":
version "4.0.1"
resolved "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.1.tgz"