ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-07-17 02:25:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

added new colors, ui changes

Browse Source
This commit is contained in:
ivic00
2024-11-26 19:32:40 +01:00
parent 29ec985ffa
commit 4b5900c652
8 changed files with 549 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/(auth)/calendar/index.tsx
View File

@ -62,7 +62,7 @@ export default function Screen() {
style={{ style={{
position: "absolute", position: "absolute",
top: 0, top: 0,
left: isTablet ? "15%" : "0", left: isTablet ? "15%" : 0,
height: isTablet ? "9%" : "4%", height: isTablet ? "9%" : "4%",
width: isTablet ? "62%" : "100%", width: isTablet ? "62%" : "100%",
zIndex: 50, zIndex: 50,

2
app/(unauth)/cal_sync.tsx
View File

@ -27,7 +27,7 @@ export default function Screen() {
<View style={{flex: 1, padding: 21, paddingBottom: 45, paddingTop: "20%", alignItems: "center"}}> <View style={{flex: 1, padding: 21, paddingBottom: 45, paddingTop: "20%", alignItems: "center"}}>
<View gap-13 width={"100%"} marginB-20> <View gap-13 width={"100%"} marginB-20>
{householdName && <Text style={{fontSize: 25, fontFamily: 'Manrope_600SemiBold'}}> {householdName && <Text style={{fontSize: 25, fontFamily: 'Manrope_600SemiBold'}}>
You Joined {householdName} You Joined The {householdName} Household
</Text>} </Text>}
<Text style={{fontSize: 40, fontFamily: 'Manrope_600SemiBold'}}> <Text style={{fontSize: 40, fontFamily: 'Manrope_600SemiBold'}}>
Let's get started! Let's get started!

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

@ -55,7 +55,7 @@ const SettingsPage = () => {
isntParent ? styles.disabledText : { color: "#07b9c8" }, isntParent ? styles.disabledText : { color: "#07b9c8" },
]} ]}
> >
Manage My Profile User Profiles & Settings
</Text> </Text>
<ArrowRightIcon style={{ marginLeft: "auto" }} /> <ArrowRightIcon style={{ marginLeft: "auto" }} />
</View> </View>

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

@ -36,6 +36,7 @@ import { useUploadProfilePicture } from "@/hooks/useUploadProfilePicture";
import { ImagePickerAsset } from "expo-image-picker"; import { ImagePickerAsset } from "expo-image-picker";
import MenuDotsIcon from "@/assets/svgs/MenuDotsIcon"; import MenuDotsIcon from "@/assets/svgs/MenuDotsIcon";
import UserOptions from "./UserOptions"; import UserOptions from "./UserOptions";
import { colorMap } from "@/constants/colorMap";
type MyGroupProps = { type MyGroupProps = {
onNewUserClick: boolean; onNewUserClick: boolean;
@ -183,7 +184,7 @@ const MyGroup: React.FC<MyGroupProps> = ({
/> />
) : ( ) : (
<View <View
style={[styles.pfp, { backgroundColor: "#ea156d" }]} style={[styles.pfp, { backgroundColor: member.eventColor || colorMap.pink }]}
/> />
)} )}
<View row marginL-10 centerV> <View row marginL-10 centerV>

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

@ -109,7 +109,7 @@ const MyProfile = () => {
useEffect(() => { useEffect(() => {
setHouseholdName(hhName); setHouseholdName(hhName);
}, [hhName]) }, [hhName]);
const pickImage = async () => { const pickImage = async () => {
const permissionResult = const permissionResult =
@ -262,40 +262,6 @@ const MyProfile = () => {
/> />
</View> </View>
</View> </View>
<View style={styles.card}>
<Text style={styles.subTit}>Settings</Text>
<Text style={styles.jakarta12}>Time Zone</Text>
<View style={styles.viewPicker}>
<Picker
value={timeZone}
onChange={(item) => setTimeZone(item as string)}
showSearch
floatingPlaceholder
style={styles.inViewPicker}
trailingAccessory={
<View
style={{
justifyContent: "center",
alignItems: "center",
height: "100%",
marginTop: -38,
paddingRight: 15,
}}
>
<Ionicons
name={"chevron-down"}
style={{ alignSelf: "center" }}
size={20}
color={"#000000"}
/>
</View>
}
>
{timeZoneItems}
</Picker>
</View>
</View>
<View style={styles.card}> <View style={styles.card}>
<Text style={styles.cardTitle} marginB-14> <Text style={styles.cardTitle} marginB-14>
Color Preference Color Preference
@ -337,15 +303,92 @@ const MyProfile = () => {
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View row spread marginT-10>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.navy)}>
<View style={styles.colorBox} backgroundColor={colorMap.navy}>
{selectedColor == colorMap.navy && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.red)}>
<View style={styles.colorBox} backgroundColor={colorMap.red}>
{selectedColor == colorMap.red && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.gray)}>
<View style={styles.colorBox} backgroundColor={colorMap.gray}>
{selectedColor == colorMap.gray && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.yellow)}>
<View style={styles.colorBox} backgroundColor={colorMap.yellow}>
{selectedColor == colorMap.yellow && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.sky)}>
<View style={styles.colorBox} backgroundColor={colorMap.sky}>
{selectedColor == colorMap.sky && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
</View>
</View> </View>
<Button
size="large" <View style={styles.card}>
backgroundColor="#ff1637" <Text style={styles.subTit}>Settings</Text>
label="Delete Profile" <Text style={styles.jakarta12}>Time Zone</Text>
style={{ marginTop: 10 }} <View style={styles.viewPicker}>
labelStyle={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 15 }} <Picker
value={timeZone}
onChange={(item) => setTimeZone(item as string)}
showSearch
floatingPlaceholder
style={styles.inViewPicker}
trailingAccessory={
<View
style={{
justifyContent: "center",
alignItems: "center",
height: "100%",
marginTop: -38,
paddingRight: 15,
}}
>
<Ionicons
name={"chevron-down"}
style={{ alignSelf: "center" }}
size={20}
color={"#000000"}
/>
</View>
}
>
{timeZoneItems}
</Picker>
</View>
</View>
<TouchableOpacity
onPress={handleShowDeleteDialog} onPress={handleShowDeleteDialog}
/> style={{ marginTop: 10, alignSelf: "center" }}
>
<Text
style={{
color: "#ff1637",
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 15,
}}
>
Delete Profile
</Text>
</TouchableOpacity>
<DeleteProfileDialogs <DeleteProfileDialogs
onFirstYes={() => { onFirstYes={() => {
setShowDeleteDialog(false); setShowDeleteDialog(false);

797
components/pages/settings/user_settings_views/UpdateUserDialog.tsx
View File

@ -1,383 +1,462 @@
import {Button, Colors, Dialog, Image, Picker, Text, TextField, View} from "react-native-ui-lib"; import {
import {UserProfile} from "@/hooks/firebase/types/profileTypes"; Button,
import {Dimensions, ScrollView, StyleSheet, TouchableOpacity} from "react-native"; Colors,
import {colorMap} from "@/constants/colorMap"; Dialog,
Image,
Picker,
Text,
TextField,
View,
} from "react-native-ui-lib";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
import {
Dimensions,
ScrollView,
StyleSheet,
TouchableOpacity,
} from "react-native";
import { colorMap } from "@/constants/colorMap";
import Ionicons from "@expo/vector-icons/Ionicons"; import Ionicons from "@expo/vector-icons/Ionicons";
import {AntDesign} from "@expo/vector-icons"; import { AntDesign } from "@expo/vector-icons";
import React, {useState} from "react"; import React, { useState } from "react";
import * as Localization from "expo-localization"; import * as Localization from "expo-localization";
import * as ImagePicker from "expo-image-picker"; import * as ImagePicker from "expo-image-picker";
import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData"; import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
import {useChangeProfilePicture} from "@/hooks/firebase/useChangeProfilePicture"; import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture";
import * as tz from "tzdata"; import * as tz from "tzdata";
import {PanningDirectionsEnum} from "react-native-ui-lib/src/incubator/panView"; import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import {useUpdateSubUser} from "@/hooks/firebase/useUpdateSubUser"; import { useUpdateSubUser } from "@/hooks/firebase/useUpdateSubUser";
type Props = { type Props = {
open: boolean, open: boolean;
handleClose: Function, handleClose: Function;
profileData: UserProfile profileData: UserProfile;
} };
const UpdateUserDialog = ({open, handleClose, profileData} : Props) => { const UpdateUserDialog = ({ open, handleClose, profileData }: Props) => {
const [timeZone, setTimeZone] = useState<string>( const [timeZone, setTimeZone] = useState<string>(
profileData?.timeZone! ?? Localization.getCalendars()[0].timeZone profileData?.timeZone! ?? Localization.getCalendars()[0].timeZone
); );
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 [profileImage, setProfileImage] = useState< const [profileImage, setProfileImage] = useState<
string | ImagePicker.ImagePickerAsset | null string | ImagePicker.ImagePickerAsset | null
>(profileData?.pfp || null); >(profileData?.pfp || null);
const [selectedColor, setSelectedColor] = useState<string>( const [selectedColor, setSelectedColor] = useState<string>(
profileData?.eventColor ?? colorMap.pink profileData?.eventColor ?? colorMap.pink
); );
const { mutateAsync: updateUserData } = useUpdateUserData(); const { mutateAsync: updateUserData } = useUpdateUserData();
const { mutateAsync: updateSubUser} = useUpdateSubUser(); const { mutateAsync: updateSubUser } = useUpdateSubUser();
const { mutateAsync: changeProfilePicture } = useChangeProfilePicture(); const { mutateAsync: changeProfilePicture } = useChangeProfilePicture();
const handleUpdateUserData = async () => { const handleUpdateUserData = async () => {
await updateSubUser({ userProfile: {...profileData, firstName, lastName, timeZone, eventColor: selectedColor } }); await updateSubUser({
handleClose(); userProfile: {
}; ...profileData,
firstName,
lastName,
timeZone,
eventColor: selectedColor,
},
});
handleClose();
};
const pickImage = async () => { const pickImage = async () => {
const permissionResult = const permissionResult =
await ImagePicker.requestMediaLibraryPermissionsAsync(); await ImagePicker.requestMediaLibraryPermissionsAsync();
if (!permissionResult.granted) { if (!permissionResult.granted) {
alert("Permission to access camera roll is required!"); alert("Permission to access camera roll is required!");
return; return;
} }
const result = await ImagePicker.launchImageLibraryAsync({ const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images, mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true, allowsEditing: true,
aspect: [1, 1], aspect: [1, 1],
quality: 1, quality: 1,
}); });
if (!result.canceled) { if (!result.canceled) {
setProfileImage(result.assets[0].uri); setProfileImage(result.assets[0].uri);
await changeProfilePicture(result.assets[0]); await changeProfilePicture(result.assets[0]);
} }
}; };
const handleClearImage = async () => { const handleClearImage = async () => {
await updateUserData({ newUserData: { pfp: null } }); await updateUserData({ newUserData: { pfp: null } });
setProfileImage(null); setProfileImage(null);
}; };
const pfpUri = const pfpUri =
profileImage && typeof profileImage === "object" && "uri" in profileImage profileImage && typeof profileImage === "object" && "uri" in profileImage
? profileImage.uri ? profileImage.uri
: profileImage; : profileImage;
const handleChangeColor = (color: string) => { const handleChangeColor = (color: string) => {
setSelectedColor(color); setSelectedColor(color);
}; };
const {width} = Dimensions.get("screen"); const { width } = Dimensions.get("screen");
return ( return (
<Dialog <Dialog
visible={open} visible={open}
height={"90%"} height={"90%"}
width={width} width={width}
panDirection={PanningDirectionsEnum.DOWN} panDirection={PanningDirectionsEnum.DOWN}
center center
onDismiss={() => handleClose} onDismiss={() => handleClose}
containerStyle={{ containerStyle={{
borderRadius: 10, borderRadius: 10,
backgroundColor: "white", backgroundColor: "white",
alignSelf: "stretch", alignSelf: "stretch",
padding: 0, padding: 0,
paddingTop: 4, paddingTop: 4,
margin: 0 margin: 0,
}} }}
>
<ScrollView style={{ flex: 1, display: "flex" }}>
<View style={styles.dialogContent}>
<View>
<Text style={styles.title}>Update Profile</Text>
</View>
<View row spread paddingH-15 centerV marginV-15>
<TouchableOpacity onPress={pickImage}>
{pfpUri ? (
<Image
key={pfpUri}
style={styles.pfp}
source={pfpUri ? { uri: pfpUri } : null}
/>
) : (
<View
center
style={{
aspectRatio: 1,
width: 65.54,
backgroundColor: profileData?.eventColor ?? colorMap.pink,
borderRadius: 20,
}}
>
<Text style={styles.pfpTxt}>
{profileData?.firstName?.at(0)}
{profileData?.lastName?.at(0)}
</Text>
</View>
)}
</TouchableOpacity>
<TouchableOpacity onPress={pickImage}>
<Text style={styles.photoSet} color="#50be0c" onPress={pickImage}>
{profileData?.pfp ? "Change" : "Add"} Photo
</Text>
</TouchableOpacity>
{profileData?.pfp && (
<TouchableOpacity onPress={handleClearImage}>
<Text style={styles.photoSet}>Remove Photo</Text>
</TouchableOpacity>
)}
</View>
<View paddingH-15>
<Text text80 marginT-10 marginB-7 style={styles.label}>
First name
</Text>
<TextField
text70
placeholder="First name"
style={styles.txtBox}
value={firstName}
onChangeText={async (value) => {
setFirstName(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);
}}
/>
<Text text80 marginT-10 marginB-7 style={styles.label}>
Email address
</Text>
<TextField
editable={false}
text70
placeholder="Email address"
value={profileData?.email?.toString()}
style={styles.txtBox}
/>
</View>
<View paddingH-15 marginT-15>
<Text style={styles.subTit}>Settings</Text>
<Text style={styles.jakarta12}>Time Zone</Text>
<View style={styles.viewPicker}>
<Picker
value={timeZone}
onChange={(item) => setTimeZone(item as string)}
showSearch
floatingPlaceholder
style={styles.inViewPicker}
trailingAccessory={
<View
style={{
justifyContent: "center",
alignItems: "center",
height: "100%",
marginTop: -38,
paddingRight: 15,
}}
>
<Ionicons
name={"chevron-down"}
style={{ alignSelf: "center" }}
size={20}
color={"#000000"}
/>
</View>
}
>
{timeZoneItems}
</Picker>
</View>
</View>
<View paddingH-15 marginT-15 style={{ display: "flex", flexGrow: 1 }}>
<Text style={styles.cardTitle} marginB-14>
Color Preference
</Text>
<View row spread>
<TouchableOpacity
onPress={() => handleChangeColor(colorMap.pink)}
>
<View style={styles.colorBox} backgroundColor={colorMap.pink}>
{selectedColor == colorMap.pink && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => handleChangeColor(colorMap.orange)}
>
<View style={styles.colorBox} backgroundColor={colorMap.orange}>
{selectedColor == colorMap.orange && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => handleChangeColor(colorMap.green)}
>
<View style={styles.colorBox} backgroundColor={colorMap.green}>
{selectedColor == colorMap.green && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => handleChangeColor(colorMap.teal)}
>
<View style={styles.colorBox} backgroundColor={colorMap.teal}>
{selectedColor == colorMap.teal && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => handleChangeColor(colorMap.purple)}
>
<View style={styles.colorBox} backgroundColor={colorMap.purple}>
{selectedColor == colorMap.purple && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
</View>
<View row spread marginT-10>
<TouchableOpacity
onPress={() => handleChangeColor(colorMap.navy)}
>
<View style={styles.colorBox} backgroundColor={colorMap.navy}>
{selectedColor == colorMap.navy && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.red)}>
<View style={styles.colorBox} backgroundColor={colorMap.red}>
{selectedColor == colorMap.red && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => handleChangeColor(colorMap.gray)}
>
<View style={styles.colorBox} backgroundColor={colorMap.gray}>
{selectedColor == colorMap.gray && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => handleChangeColor(colorMap.yellow)}
>
<View style={styles.colorBox} backgroundColor={colorMap.yellow}>
{selectedColor == colorMap.yellow && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.sky)}>
<View style={styles.colorBox} backgroundColor={colorMap.sky}>
{selectedColor == colorMap.sky && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
</View>
</View>
</View>
<View
row
center
style={{
display: "flex",
gap: 10,
alignItems: "flex-end",
marginTop: 10,
}}
> >
<ScrollView style={{ flex: 1, display: 'flex' }}> <Button
<View style={styles.dialogContent}> style={{
<View> backgroundColor: profileData.eventColor ?? colorMap.pink,
<Text style={styles.title}>Update Profile</Text> justifyContent: "center",
</View> }}
<View row spread paddingH-15 centerV marginV-15> label="Save"
<TouchableOpacity onPress={pickImage}> onPress={handleUpdateUserData}
{pfpUri ? ( />
<Image <Button
key={pfpUri} style={{
style={styles.pfp} backgroundColor: "#9c978f",
source={pfpUri ? { uri: pfpUri } : null} justifyContent: "center",
/> }}
) : ( label="Cancel"
<View onPress={handleClose}
center />
style={{ </View>
aspectRatio: 1, </ScrollView>
width: 65.54, </Dialog>
backgroundColor: profileData?.eventColor ?? colorMap.pink, );
borderRadius: 20,
}}
>
<Text style={styles.pfpTxt}>
{profileData?.firstName?.at(0)}
{profileData?.lastName?.at(0)}
</Text>
</View>
)}
</TouchableOpacity>
<TouchableOpacity onPress={pickImage}>
<Text style={styles.photoSet} color="#50be0c" onPress={pickImage}>
{profileData?.pfp ? "Change" : "Add"} Photo
</Text>
</TouchableOpacity>
{profileData?.pfp && (
<TouchableOpacity onPress={handleClearImage}>
<Text style={styles.photoSet}>Remove Photo</Text>
</TouchableOpacity>
)}
</View>
<View paddingH-15>
<Text text80 marginT-10 marginB-7 style={styles.label}>
First name
</Text>
<TextField
text70
placeholder="First name"
style={styles.txtBox}
value={firstName}
onChangeText={async (value) => {
setFirstName(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);
}}
/>
<Text text80 marginT-10 marginB-7 style={styles.label}>
Email address
</Text>
<TextField
editable={false}
text70
placeholder="Email address"
value={profileData?.email?.toString()}
style={styles.txtBox}
/>
</View>
<View paddingH-15 marginT-15>
<Text style={styles.subTit}>Settings</Text>
<Text style={styles.jakarta12}>Time Zone</Text>
<View style={styles.viewPicker}>
<Picker
value={timeZone}
onChange={(item) => setTimeZone(item as string)}
showSearch
floatingPlaceholder
style={styles.inViewPicker}
trailingAccessory={
<View
style={{
justifyContent: "center",
alignItems: "center",
height: "100%",
marginTop: -38,
paddingRight: 15,
}}
>
<Ionicons
name={"chevron-down"}
style={{ alignSelf: "center" }}
size={20}
color={"#000000"}
/>
</View>
}
>
{timeZoneItems}
</Picker>
</View>
</View>
<View paddingH-15 marginT-15 style={{ display: 'flex', flexGrow: 1}}>
<Text style={styles.cardTitle} marginB-14>
Color Preference
</Text>
<View row spread>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)}>
<View style={styles.colorBox} backgroundColor={colorMap.pink}>
{selectedColor == colorMap.pink && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.orange)}>
<View style={styles.colorBox} backgroundColor={colorMap.orange}>
{selectedColor == colorMap.orange && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.green)}>
<View style={styles.colorBox} backgroundColor={colorMap.green}>
{selectedColor == colorMap.green && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)}>
<View style={styles.colorBox} backgroundColor={colorMap.teal}>
{selectedColor == colorMap.teal && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.purple)}>
<View style={styles.colorBox} backgroundColor={colorMap.purple}>
{selectedColor == colorMap.purple && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
</View>
</View>
</View>
<View row center style={{
display: 'flex',
gap: 10,
alignItems: "flex-end",
marginTop: 50
}}>
<Button
style={{
backgroundColor: profileData.eventColor ?? colorMap.pink,
justifyContent: "center",
}}
label="Save"
onPress={handleUpdateUserData}
/>
<Button
style={{
backgroundColor: "#9c978f",
justifyContent: "center",
}}
label="Cancel"
onPress={handleClose}
/>
</View>
</ScrollView>
</Dialog>
)
}; };
const timeZoneItems = Object.keys(tz.zones) const timeZoneItems = Object.keys(tz.zones)
.sort() .sort()
.map((zone) => ( .map((zone) => (
<Picker.Item <Picker.Item
key={zone} key={zone}
label={zone.replace("/", " / ").replace("_", " ")} label={zone.replace("/", " / ").replace("_", " ")}
value={zone} value={zone}
/> />
)); ));
const styles = StyleSheet.create({ const styles = StyleSheet.create({
dialogContent: { dialogContent: {
paddingHorizontal: 10, paddingHorizontal: 10,
paddingTop: 10, paddingTop: 10,
paddingBottom: 10, paddingBottom: 10,
flexGrow: 1 flexGrow: 1,
}, },
cardTitle: { cardTitle: {
fontFamily: "Manrope_500Medium", fontFamily: "Manrope_500Medium",
fontSize: 15, fontSize: 15,
}, },
colorBox: { colorBox: {
aspectRatio: 1, aspectRatio: 1,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
width: 51, width: 51,
borderRadius: 12, borderRadius: 12,
}, },
card: { card: {
marginVertical: 15, marginVertical: 15,
backgroundColor: "white", backgroundColor: "white",
width: "100%", width: "100%",
borderRadius: 12, borderRadius: 12,
paddingHorizontal: 20, paddingHorizontal: 20,
paddingVertical: 21, paddingVertical: 21,
}, },
pfpTxt: { pfpTxt: {
fontFamily: "Manrope_500Medium", fontFamily: "Manrope_500Medium",
fontSize: 30, fontSize: 30,
color: "white", color: "white",
}, },
pfp: { pfp: {
aspectRatio: 1, aspectRatio: 1,
width: 65.54, width: 65.54,
backgroundColor: "gray", backgroundColor: "gray",
borderRadius: 20, borderRadius: 20,
}, },
txtBox: { txtBox: {
backgroundColor: "#fafafa", backgroundColor: "#fafafa",
borderRadius: 50, borderRadius: 50,
borderWidth: 2, borderWidth: 2,
borderColor: "#cecece", borderColor: "#cecece",
padding: 15, padding: 15,
height: 45, height: 45,
fontFamily: "PlusJakartaSans_500Medium", fontFamily: "PlusJakartaSans_500Medium",
fontSize: 13, fontSize: 13,
}, },
subTit: { subTit: {
fontFamily: "Manrope_500Medium", fontFamily: "Manrope_500Medium",
fontSize: 15, fontSize: 15,
}, },
title: { title: {
fontFamily: "Manrope_500Medium", fontFamily: "Manrope_500Medium",
fontSize: 20 fontSize: 20,
}, },
label: { label: {
fontFamily: "PlusJakartaSans_500Medium", fontFamily: "PlusJakartaSans_500Medium",
fontSize: 12, fontSize: 12,
color: "#a1a1a1", color: "#a1a1a1",
}, },
photoSet: { photoSet: {
fontFamily: "PlusJakartaSans_500Medium", fontFamily: "PlusJakartaSans_500Medium",
fontSize: 13.07, fontSize: 13.07,
}, },
jakarta12: { jakarta12: {
paddingVertical: 10, paddingVertical: 10,
fontFamily: "PlusJakartaSans_500Medium", fontFamily: "PlusJakartaSans_500Medium",
fontSize: 12, fontSize: 12,
color: "#a1a1a1", color: "#a1a1a1",
}, },
viewPicker: { viewPicker: {
borderRadius: 50, borderRadius: 50,
backgroundColor: Colors.grey80, backgroundColor: Colors.grey80,
marginBottom: 16, marginBottom: 16,
borderColor: Colors.grey50, borderColor: Colors.grey50,
borderWidth: 1, borderWidth: 1,
marginTop: 0, marginTop: 0,
height: 40, height: 40,
zIndex: 10, zIndex: 10,
}, },
inViewPicker: { inViewPicker: {
borderRadius: 50, borderRadius: 50,
paddingVertical: 12, paddingVertical: 12,
paddingHorizontal: 16, paddingHorizontal: 16,
marginBottom: 16, marginBottom: 16,
marginTop: -20, marginTop: -20,
height: 40, height: 40,
zIndex: 10, zIndex: 10,
}, },
}); });
export default UpdateUserDialog; export default UpdateUserDialog;

20
components/pages/settings/user_settings_views/UserMenu.tsx
View File

@ -12,7 +12,7 @@ import Ionicons from "@expo/vector-icons/Ionicons";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers"; import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import { UserProfile } from "@/hooks/firebase/types/profileTypes"; import { UserProfile } from "@/hooks/firebase/types/profileTypes";
import { StyleSheet } from "react-native"; import { StyleSheet } from "react-native";
import { ProfileType } from "@/contexts/AuthContext"; import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
const UserMenu = ({ const UserMenu = ({
user, user,
@ -23,10 +23,24 @@ const UserMenu = ({
showQRCodeDialog: boolean; showQRCodeDialog: boolean;
setShowQRCodeDialog: (value: string | boolean) => void; setShowQRCodeDialog: (value: string | boolean) => void;
}) => { }) => {
const {user: currentUser} = useAuthContext();
const handleShowQRCode = () => { const handleShowQRCode = () => {
setShowQRCodeDialog(user.uid!); setShowQRCodeDialog(user.uid!);
}; };
const getQRCodeText = () => {
if (user.userType === ProfileType.FAMILY_DEVICE) {
return "Open Cally on the family device and scan the code to link it to your family group";
}
if (currentUser?.uid === user.uid) {
return "To connect another device to your profile, open the Cally app on that device and scan this QR code.";
}
return `To connect ${user.firstName}'s device to your Family Group, open the Cally app on their device and scan the QR code.`;
};
return ( return (
<> <>
<TouchableOpacity onPress={handleShowQRCode}> <TouchableOpacity onPress={handleShowQRCode}>
@ -46,9 +60,7 @@ const UserMenu = ({
marginB-25 marginB-25
style={{ fontSize: 18, fontFamily: "Manrope_500Medium" }} style={{ fontSize: 18, fontFamily: "Manrope_500Medium" }}
> >
{user.userType !== ProfileType.FAMILY_DEVICE {getQRCodeText()}
? `Open Cally on ${user.firstName}'s device and scan the code to link it to your family group`
: "Open Cally on the family device and scan the code to link it to your family group"}
</Text> </Text>
<QRCode value={user.uid!} size={150} /> <QRCode value={user.uid!} size={150} />
<Button <Button

5
constants/colorMap.ts
View File

@ -4,4 +4,9 @@ export const colorMap = {
green: "#46a80a", green: "#46a80a",
teal: "#05a8b6", teal: "#05a8b6",
purple: "#7305d4", purple: "#7305d4",
navy: '#002e42',
red: '#ff1637',
gray: '#607d8b',
yellow: '#ffc107',
sky: '#2196f3'
}; };