added new colors, ui changes

2025-07-17 02:25:10 +00:00 · 2024-11-26 19:32:40 +01:00
parent 29ec985ffa
commit 4b5900c652
8 changed files with 549 additions and 409 deletions
--- a/app/(auth)/calendar/index.tsx
+++ b/app/(auth)/calendar/index.tsx
@ -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,
--- a/app/(unauth)/cal_sync.tsx
+++ b/app/(unauth)/cal_sync.tsx
@ -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!
--- a/components/pages/settings/SettingsPage.tsx
+++ b/components/pages/settings/SettingsPage.tsx
@ -55,7 +55,7 @@ const SettingsPage = () => {
                    isntParent ? styles.disabledText : { color: "#07b9c8" },
                  ]}
                >
-                  Manage My Profile
+                  User Profiles & Settings
                </Text>
                <ArrowRightIcon style={{ marginLeft: "auto" }} />
              </View>
--- a/components/pages/settings/user_settings_views/MyGroup.tsx
+++ b/components/pages/settings/user_settings_views/MyGroup.tsx
@ -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>
--- a/components/pages/settings/user_settings_views/MyProfile.tsx
+++ b/components/pages/settings/user_settings_views/MyProfile.tsx
@ -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);
--- a/components/pages/settings/user_settings_views/UpdateUserDialog.tsx
+++ b/components/pages/settings/user_settings_views/UpdateUserDialog.tsx
@ -1,6 +1,20 @@
-import {Button, Colors, Dialog, Image, Picker, Text, TextField, View} from "react-native-ui-lib";
+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 {
+  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";
@ -14,10 +28,10 @@ import {PanningDirectionsEnum} from "react-native-ui-lib/src/incubator/panView";
 import { useUpdateSubUser } from "@/hooks/firebase/useUpdateSubUser";

 type Props = {
-    open: boolean,
-    handleClose: Function,
-    profileData: UserProfile
-}
+  open: boolean;
+  handleClose: Function;
+  profileData: UserProfile;
+};
 const UpdateUserDialog = ({ open, handleClose, profileData }: Props) => {
  const [timeZone, setTimeZone] = useState<string>(
    profileData?.timeZone! ?? Localization.getCalendars()[0].timeZone
@ -39,7 +53,15 @@ const UpdateUserDialog = ({open, handleClose, profileData} : Props) => {
  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();
  };

@ -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",
--- a/components/pages/settings/user_settings_views/UserMenu.tsx
+++ b/components/pages/settings/user_settings_views/UserMenu.tsx
@ -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
--- a/constants/colorMap.ts
+++ b/constants/colorMap.ts
@ -4,4 +4,9 @@ export const colorMap = {
    green: "#46a80a",
    teal: "#05a8b6",
    purple: "#7305d4",
+    navy: '#002e42',
+    red: '#ff1637',
+    gray: '#607d8b',
+    yellow: '#ffc107',
+    sky: '#2196f3'
 };