mirror of
https://github.com/urosran/cally.git
synced 2025-11-26 00:24:53 +00:00
added new colors, ui changes
This commit is contained in:
ivic00
@ -62,7 +62,7 @@ export default function Screen() {
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: isTablet ? "15%" : "0",
|
||||
left: isTablet ? "15%" : 0,
|
||||
height: isTablet ? "9%" : "4%",
|
||||
width: isTablet ? "62%" : "100%",
|
||||
zIndex: 50,
|
||||
|
||||
@ -27,7 +27,7 @@ export default function Screen() {
|
||||
<View style={{flex: 1, padding: 21, paddingBottom: 45, paddingTop: "20%", alignItems: "center"}}>
|
||||
<View gap-13 width={"100%"} marginB-20>
|
||||
{householdName && <Text style={{fontSize: 25, fontFamily: 'Manrope_600SemiBold'}}>
|
||||
You Joined {householdName}
|
||||
You Joined The {householdName} Household
|
||||
</Text>}
|
||||
<Text style={{fontSize: 40, fontFamily: 'Manrope_600SemiBold'}}>
|
||||
Let's get started!
|
||||
|
||||
@ -55,7 +55,7 @@ const SettingsPage = () => {
|
||||
isntParent ? styles.disabledText : { color: "#07b9c8" },
|
||||
]}
|
||||
>
|
||||
Manage My Profile
|
||||
User Profiles & Settings
|
||||
</Text>
|
||||
<ArrowRightIcon style={{ marginLeft: "auto" }} />
|
||||
</View>
|
||||
|
||||
@ -36,6 +36,7 @@ import { useUploadProfilePicture } from "@/hooks/useUploadProfilePicture";
|
||||
import { ImagePickerAsset } from "expo-image-picker";
|
||||
import MenuDotsIcon from "@/assets/svgs/MenuDotsIcon";
|
||||
import UserOptions from "./UserOptions";
|
||||
import { colorMap } from "@/constants/colorMap";
|
||||
|
||||
type MyGroupProps = {
|
||||
onNewUserClick: boolean;
|
||||
@ -183,7 +184,7 @@ const MyGroup: React.FC<MyGroupProps> = ({
|
||||
/>
|
||||
) : (
|
||||
<View
|
||||
style={[styles.pfp, { backgroundColor: "#ea156d" }]}
|
||||
style={[styles.pfp, { backgroundColor: member.eventColor || colorMap.pink }]}
|
||||
/>
|
||||
)}
|
||||
<View row marginL-10 centerV>
|
||||
|
||||
@ -109,7 +109,7 @@ const MyProfile = () => {
|
||||
|
||||
useEffect(() => {
|
||||
setHouseholdName(hhName);
|
||||
}, [hhName])
|
||||
}, [hhName]);
|
||||
|
||||
const pickImage = async () => {
|
||||
const permissionResult =
|
||||
@ -262,40 +262,6 @@ const MyProfile = () => {
|
||||
/>
|
||||
</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}>
|
||||
<Text style={styles.cardTitle} marginB-14>
|
||||
Color Preference
|
||||
@ -337,15 +303,92 @@ const MyProfile = () => {
|
||||
</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>
|
||||
<Button
|
||||
size="large"
|
||||
backgroundColor="#ff1637"
|
||||
label="Delete Profile"
|
||||
style={{ marginTop: 10 }}
|
||||
labelStyle={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 15 }}
|
||||
|
||||
<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>
|
||||
<TouchableOpacity
|
||||
onPress={handleShowDeleteDialog}
|
||||
/>
|
||||
style={{ marginTop: 10, alignSelf: "center" }}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: "#ff1637",
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 15,
|
||||
}}
|
||||
>
|
||||
Delete Profile
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<DeleteProfileDialogs
|
||||
onFirstYes={() => {
|
||||
setShowDeleteDialog(false);
|
||||
|
||||
@ -1,383 +1,462 @@
|
||||
import {Button, Colors, 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 {
|
||||
Button,
|
||||
Colors,
|
||||
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 {AntDesign} from "@expo/vector-icons";
|
||||
import React, {useState} from "react";
|
||||
import { AntDesign } from "@expo/vector-icons";
|
||||
import React, { useState } from "react";
|
||||
import * as Localization from "expo-localization";
|
||||
import * as ImagePicker from "expo-image-picker";
|
||||
import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData";
|
||||
import {useChangeProfilePicture} from "@/hooks/firebase/useChangeProfilePicture";
|
||||
import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
|
||||
import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture";
|
||||
import * as tz from "tzdata";
|
||||
import {PanningDirectionsEnum} from "react-native-ui-lib/src/incubator/panView";
|
||||
import {useUpdateSubUser} from "@/hooks/firebase/useUpdateSubUser";
|
||||
import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
|
||||
import { useUpdateSubUser } from "@/hooks/firebase/useUpdateSubUser";
|
||||
|
||||
type Props = {
|
||||
open: boolean,
|
||||
handleClose: Function,
|
||||
profileData: UserProfile
|
||||
}
|
||||
const UpdateUserDialog = ({open, handleClose, profileData} : Props) => {
|
||||
const [timeZone, setTimeZone] = useState<string>(
|
||||
profileData?.timeZone! ?? Localization.getCalendars()[0].timeZone
|
||||
);
|
||||
const [lastName, setLastName] = useState<string>(profileData?.lastName || "");
|
||||
const [firstName, setFirstName] = useState<string>(
|
||||
profileData?.firstName || ""
|
||||
);
|
||||
const [profileImage, setProfileImage] = useState<
|
||||
string | ImagePicker.ImagePickerAsset | null
|
||||
>(profileData?.pfp || null);
|
||||
open: boolean;
|
||||
handleClose: Function;
|
||||
profileData: UserProfile;
|
||||
};
|
||||
const UpdateUserDialog = ({ open, handleClose, profileData }: Props) => {
|
||||
const [timeZone, setTimeZone] = useState<string>(
|
||||
profileData?.timeZone! ?? Localization.getCalendars()[0].timeZone
|
||||
);
|
||||
const [lastName, setLastName] = useState<string>(profileData?.lastName || "");
|
||||
const [firstName, setFirstName] = useState<string>(
|
||||
profileData?.firstName || ""
|
||||
);
|
||||
const [profileImage, setProfileImage] = useState<
|
||||
string | ImagePicker.ImagePickerAsset | null
|
||||
>(profileData?.pfp || null);
|
||||
|
||||
const [selectedColor, setSelectedColor] = useState<string>(
|
||||
profileData?.eventColor ?? colorMap.pink
|
||||
);
|
||||
const [selectedColor, setSelectedColor] = useState<string>(
|
||||
profileData?.eventColor ?? colorMap.pink
|
||||
);
|
||||
|
||||
const { mutateAsync: updateUserData } = useUpdateUserData();
|
||||
const { mutateAsync: updateSubUser} = useUpdateSubUser();
|
||||
const { mutateAsync: changeProfilePicture } = useChangeProfilePicture();
|
||||
const { mutateAsync: updateUserData } = useUpdateUserData();
|
||||
const { mutateAsync: updateSubUser } = useUpdateSubUser();
|
||||
const { mutateAsync: changeProfilePicture } = useChangeProfilePicture();
|
||||
|
||||
const handleUpdateUserData = async () => {
|
||||
await updateSubUser({ userProfile: {...profileData, firstName, lastName, timeZone, eventColor: selectedColor } });
|
||||
handleClose();
|
||||
};
|
||||
const handleUpdateUserData = async () => {
|
||||
await updateSubUser({
|
||||
userProfile: {
|
||||
...profileData,
|
||||
firstName,
|
||||
lastName,
|
||||
timeZone,
|
||||
eventColor: selectedColor,
|
||||
},
|
||||
});
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const pickImage = async () => {
|
||||
const permissionResult =
|
||||
await ImagePicker.requestMediaLibraryPermissionsAsync();
|
||||
if (!permissionResult.granted) {
|
||||
alert("Permission to access camera roll is required!");
|
||||
return;
|
||||
}
|
||||
const pickImage = async () => {
|
||||
const permissionResult =
|
||||
await ImagePicker.requestMediaLibraryPermissionsAsync();
|
||||
if (!permissionResult.granted) {
|
||||
alert("Permission to access camera roll is required!");
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await ImagePicker.launchImageLibraryAsync({
|
||||
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
||||
allowsEditing: true,
|
||||
aspect: [1, 1],
|
||||
quality: 1,
|
||||
});
|
||||
const result = await ImagePicker.launchImageLibraryAsync({
|
||||
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
||||
allowsEditing: true,
|
||||
aspect: [1, 1],
|
||||
quality: 1,
|
||||
});
|
||||
|
||||
if (!result.canceled) {
|
||||
setProfileImage(result.assets[0].uri);
|
||||
await changeProfilePicture(result.assets[0]);
|
||||
}
|
||||
};
|
||||
if (!result.canceled) {
|
||||
setProfileImage(result.assets[0].uri);
|
||||
await changeProfilePicture(result.assets[0]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearImage = async () => {
|
||||
await updateUserData({ newUserData: { pfp: null } });
|
||||
setProfileImage(null);
|
||||
};
|
||||
const handleClearImage = async () => {
|
||||
await updateUserData({ newUserData: { pfp: null } });
|
||||
setProfileImage(null);
|
||||
};
|
||||
|
||||
const pfpUri =
|
||||
profileImage && typeof profileImage === "object" && "uri" in profileImage
|
||||
? profileImage.uri
|
||||
: profileImage;
|
||||
const pfpUri =
|
||||
profileImage && typeof profileImage === "object" && "uri" in profileImage
|
||||
? profileImage.uri
|
||||
: profileImage;
|
||||
|
||||
const handleChangeColor = (color: string) => {
|
||||
setSelectedColor(color);
|
||||
};
|
||||
const handleChangeColor = (color: string) => {
|
||||
setSelectedColor(color);
|
||||
};
|
||||
|
||||
const {width} = Dimensions.get("screen");
|
||||
return (
|
||||
<Dialog
|
||||
visible={open}
|
||||
height={"90%"}
|
||||
width={width}
|
||||
panDirection={PanningDirectionsEnum.DOWN}
|
||||
center
|
||||
onDismiss={() => handleClose}
|
||||
containerStyle={{
|
||||
borderRadius: 10,
|
||||
backgroundColor: "white",
|
||||
alignSelf: "stretch",
|
||||
padding: 0,
|
||||
paddingTop: 4,
|
||||
margin: 0
|
||||
}}
|
||||
const { width } = Dimensions.get("screen");
|
||||
return (
|
||||
<Dialog
|
||||
visible={open}
|
||||
height={"90%"}
|
||||
width={width}
|
||||
panDirection={PanningDirectionsEnum.DOWN}
|
||||
center
|
||||
onDismiss={() => handleClose}
|
||||
containerStyle={{
|
||||
borderRadius: 10,
|
||||
backgroundColor: "white",
|
||||
alignSelf: "stretch",
|
||||
padding: 0,
|
||||
paddingTop: 4,
|
||||
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' }}>
|
||||
<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>
|
||||
</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>
|
||||
)
|
||||
<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)
|
||||
.sort()
|
||||
.map((zone) => (
|
||||
<Picker.Item
|
||||
key={zone}
|
||||
label={zone.replace("/", " / ").replace("_", " ")}
|
||||
value={zone}
|
||||
/>
|
||||
));
|
||||
.sort()
|
||||
.map((zone) => (
|
||||
<Picker.Item
|
||||
key={zone}
|
||||
label={zone.replace("/", " / ").replace("_", " ")}
|
||||
value={zone}
|
||||
/>
|
||||
));
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
dialogContent: {
|
||||
paddingHorizontal: 10,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
flexGrow: 1
|
||||
},
|
||||
cardTitle: {
|
||||
fontFamily: "Manrope_500Medium",
|
||||
fontSize: 15,
|
||||
},
|
||||
colorBox: {
|
||||
aspectRatio: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: 51,
|
||||
borderRadius: 12,
|
||||
},
|
||||
card: {
|
||||
marginVertical: 15,
|
||||
backgroundColor: "white",
|
||||
width: "100%",
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 21,
|
||||
},
|
||||
pfpTxt: {
|
||||
fontFamily: "Manrope_500Medium",
|
||||
fontSize: 30,
|
||||
color: "white",
|
||||
},
|
||||
pfp: {
|
||||
aspectRatio: 1,
|
||||
width: 65.54,
|
||||
backgroundColor: "gray",
|
||||
borderRadius: 20,
|
||||
},
|
||||
txtBox: {
|
||||
backgroundColor: "#fafafa",
|
||||
borderRadius: 50,
|
||||
borderWidth: 2,
|
||||
borderColor: "#cecece",
|
||||
padding: 15,
|
||||
height: 45,
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 13,
|
||||
},
|
||||
subTit: {
|
||||
fontFamily: "Manrope_500Medium",
|
||||
fontSize: 15,
|
||||
},
|
||||
title: {
|
||||
fontFamily: "Manrope_500Medium",
|
||||
fontSize: 20
|
||||
},
|
||||
label: {
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 12,
|
||||
color: "#a1a1a1",
|
||||
},
|
||||
photoSet: {
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 13.07,
|
||||
},
|
||||
jakarta12: {
|
||||
paddingVertical: 10,
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 12,
|
||||
color: "#a1a1a1",
|
||||
},
|
||||
viewPicker: {
|
||||
borderRadius: 50,
|
||||
backgroundColor: Colors.grey80,
|
||||
marginBottom: 16,
|
||||
borderColor: Colors.grey50,
|
||||
borderWidth: 1,
|
||||
marginTop: 0,
|
||||
height: 40,
|
||||
zIndex: 10,
|
||||
},
|
||||
inViewPicker: {
|
||||
borderRadius: 50,
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
marginBottom: 16,
|
||||
marginTop: -20,
|
||||
height: 40,
|
||||
zIndex: 10,
|
||||
},
|
||||
dialogContent: {
|
||||
paddingHorizontal: 10,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
flexGrow: 1,
|
||||
},
|
||||
cardTitle: {
|
||||
fontFamily: "Manrope_500Medium",
|
||||
fontSize: 15,
|
||||
},
|
||||
colorBox: {
|
||||
aspectRatio: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: 51,
|
||||
borderRadius: 12,
|
||||
},
|
||||
card: {
|
||||
marginVertical: 15,
|
||||
backgroundColor: "white",
|
||||
width: "100%",
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 21,
|
||||
},
|
||||
pfpTxt: {
|
||||
fontFamily: "Manrope_500Medium",
|
||||
fontSize: 30,
|
||||
color: "white",
|
||||
},
|
||||
pfp: {
|
||||
aspectRatio: 1,
|
||||
width: 65.54,
|
||||
backgroundColor: "gray",
|
||||
borderRadius: 20,
|
||||
},
|
||||
txtBox: {
|
||||
backgroundColor: "#fafafa",
|
||||
borderRadius: 50,
|
||||
borderWidth: 2,
|
||||
borderColor: "#cecece",
|
||||
padding: 15,
|
||||
height: 45,
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 13,
|
||||
},
|
||||
subTit: {
|
||||
fontFamily: "Manrope_500Medium",
|
||||
fontSize: 15,
|
||||
},
|
||||
title: {
|
||||
fontFamily: "Manrope_500Medium",
|
||||
fontSize: 20,
|
||||
},
|
||||
label: {
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 12,
|
||||
color: "#a1a1a1",
|
||||
},
|
||||
photoSet: {
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 13.07,
|
||||
},
|
||||
jakarta12: {
|
||||
paddingVertical: 10,
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 12,
|
||||
color: "#a1a1a1",
|
||||
},
|
||||
viewPicker: {
|
||||
borderRadius: 50,
|
||||
backgroundColor: Colors.grey80,
|
||||
marginBottom: 16,
|
||||
borderColor: Colors.grey50,
|
||||
borderWidth: 1,
|
||||
marginTop: 0,
|
||||
height: 40,
|
||||
zIndex: 10,
|
||||
},
|
||||
inViewPicker: {
|
||||
borderRadius: 50,
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
marginBottom: 16,
|
||||
marginTop: -20,
|
||||
height: 40,
|
||||
zIndex: 10,
|
||||
},
|
||||
});
|
||||
|
||||
export default UpdateUserDialog;
|
||||
export default UpdateUserDialog;
|
||||
|
||||
@ -12,7 +12,7 @@ import Ionicons from "@expo/vector-icons/Ionicons";
|
||||
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
|
||||
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
|
||||
import { StyleSheet } from "react-native";
|
||||
import { ProfileType } from "@/contexts/AuthContext";
|
||||
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
|
||||
|
||||
const UserMenu = ({
|
||||
user,
|
||||
@ -23,10 +23,24 @@ const UserMenu = ({
|
||||
showQRCodeDialog: boolean;
|
||||
setShowQRCodeDialog: (value: string | boolean) => void;
|
||||
}) => {
|
||||
const {user: currentUser} = useAuthContext();
|
||||
|
||||
const handleShowQRCode = () => {
|
||||
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 (
|
||||
<>
|
||||
<TouchableOpacity onPress={handleShowQRCode}>
|
||||
@ -46,9 +60,7 @@ const UserMenu = ({
|
||||
marginB-25
|
||||
style={{ fontSize: 18, fontFamily: "Manrope_500Medium" }}
|
||||
>
|
||||
{user.userType !== ProfileType.FAMILY_DEVICE
|
||||
? `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"}
|
||||
{getQRCodeText()}
|
||||
</Text>
|
||||
<QRCode value={user.uid!} size={150} />
|
||||
<Button
|
||||
|
||||
@ -4,4 +4,9 @@ export const colorMap = {
|
||||
green: "#46a80a",
|
||||
teal: "#05a8b6",
|
||||
purple: "#7305d4",
|
||||
navy: '#002e42',
|
||||
red: '#ff1637',
|
||||
gray: '#607d8b',
|
||||
yellow: '#ffc107',
|
||||
sky: '#2196f3'
|
||||
};
|
||||
Reference in New Issue
Block a user