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={{
position: "absolute",
top: 0,
left: isTablet ? "15%" : "0",
left: isTablet ? "15%" : 0,
height: isTablet ? "9%" : "4%",
width: isTablet ? "62%" : "100%",
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 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!

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

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

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

@ -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>
<Button
size="large"
backgroundColor="#ff1637"
label="Delete Profile"
style={{ marginTop: 10 }}
labelStyle={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 15 }}
onPress={handleShowDeleteDialog}
</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 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);

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

@ -1,24 +1,38 @@
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) => {
open: boolean;
handleClose: Function;
profileData: UserProfile;
};
const UpdateUserDialog = ({ open, handleClose, profileData }: Props) => {
const [timeZone, setTimeZone] = useState<string>(
profileData?.timeZone! ?? Localization.getCalendars()[0].timeZone
);
@ -35,11 +49,19 @@ const UpdateUserDialog = ({open, handleClose, profileData} : Props) => {
);
const { mutateAsync: updateUserData } = useUpdateUserData();
const { mutateAsync: updateSubUser} = useUpdateSubUser();
const { mutateAsync: updateSubUser } = useUpdateSubUser();
const { mutateAsync: changeProfilePicture } = useChangeProfilePicture();
const handleUpdateUserData = async () => {
await updateSubUser({ userProfile: {...profileData, firstName, lastName, timeZone, eventColor: selectedColor } });
await updateSubUser({
userProfile: {
...profileData,
firstName,
lastName,
timeZone,
eventColor: selectedColor,
},
});
handleClose();
};
@ -78,7 +100,7 @@ const UpdateUserDialog = ({open, handleClose, profileData} : Props) => {
setSelectedColor(color);
};
const {width} = Dimensions.get("screen");
const { width } = Dimensions.get("screen");
return (
<Dialog
visible={open}
@ -93,10 +115,10 @@ const UpdateUserDialog = ({open, handleClose, profileData} : Props) => {
alignSelf: "stretch",
padding: 0,
paddingTop: 4,
margin: 0
margin: 0,
}}
>
<ScrollView style={{ flex: 1, display: 'flex' }}>
<ScrollView style={{ flex: 1, display: "flex" }}>
<View style={styles.dialogContent}>
<View>
<Text style={styles.title}>Update Profile</Text>
@ -208,40 +230,50 @@ const UpdateUserDialog = ({open, handleClose, profileData} : Props) => {
</Picker>
</View>
</View>
<View paddingH-15 marginT-15 style={{ display: 'flex', flexGrow: 1}}>
<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)}>
<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)}>
<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)}>
<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)}>
<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)}>
<TouchableOpacity
onPress={() => handleChangeColor(colorMap.purple)}
>
<View style={styles.colorBox} backgroundColor={colorMap.purple}>
{selectedColor == colorMap.purple && (
<AntDesign name="check" size={30} color="white" />
@ -249,14 +281,61 @@ const UpdateUserDialog = ({open, handleClose, profileData} : Props) => {
</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 row center style={{
display: 'flex',
</View>
<View
row
center
style={{
display: "flex",
gap: 10,
alignItems: "flex-end",
marginTop: 50
}}>
marginTop: 10,
}}
>
<Button
style={{
backgroundColor: profileData.eventColor ?? colorMap.pink,
@ -276,7 +355,7 @@ const UpdateUserDialog = ({open, handleClose, profileData} : Props) => {
</View>
</ScrollView>
</Dialog>
)
);
};
const timeZoneItems = Object.keys(tz.zones)
@ -294,7 +373,7 @@ const styles = StyleSheet.create({
paddingHorizontal: 10,
paddingTop: 10,
paddingBottom: 10,
flexGrow: 1
flexGrow: 1,
},
cardTitle: {
fontFamily: "Manrope_500Medium",
@ -342,7 +421,7 @@ const styles = StyleSheet.create({
},
title: {
fontFamily: "Manrope_500Medium",
fontSize: 20
fontSize: 20,
},
label: {
fontFamily: "PlusJakartaSans_500Medium",

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 { 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

5
constants/colorMap.ts
View File

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