Moved color settings to manage my profile

components/pages/settings/CalendarSettingsPage.tsx

@@ -1,4 +1,4 @@
-import {AntDesign, Ionicons} from "@expo/vector-icons";
+import {Ionicons} from "@expo/vector-icons";
 import React, {useCallback, useState} from "react";
 import {Button, Checkbox, Text, View} from "react-native-ui-lib";
 import {ActivityIndicator, ScrollView, StyleSheet} from "react-native";
@@ -10,7 +10,6 @@ import AppleIcon from "@/assets/svgs/AppleIcon";
 import GoogleIcon from "@/assets/svgs/GoogleIcon";
 import OutlookIcon from "@/assets/svgs/OutlookIcon";
 import ExpoLocalization from "expo-localization/src/ExpoLocalization";
-import {colorMap} from "@/constants/colorMap";
 import {useSetAtom} from "jotai";
 import {settingsPageIndex} from "../calendar/atoms";
 import CalendarSettingsDialog from "./calendar_components/CalendarSettingsDialog";
@@ -53,13 +52,6 @@ const CalendarSettingsPage = () => {
         setModalVisible(false);
     };
 
-    const [selectedColor, setSelectedColor] = useState<string>(
-        profileData?.eventColor ?? colorMap.pink
-    );
-    const [previousSelectedColor, setPreviousSelectedColor] = useState<string>(
-        profileData?.eventColor ?? colorMap.pink
-    );
-
     const {mutateAsync: updateUserData} = useUpdateUserData();
     const {mutateAsync: clearToken} = useClearTokens();
 
@@ -78,22 +70,6 @@ const CalendarSettingsPage = () => {
         fetchAndSaveAppleEvents
     } = useCalSync()
 
-    const debouncedUpdateUserData = useCallback(
-        debounce(async (color: string) => {
-            try {
-                await updateUserData({
-                    newUserData: {
-                        eventColor: color,
-                    },
-                });
-            } catch (error) {
-                console.error("Failed to update color:", error);
-                setSelectedColor(previousSelectedColor);
-            }
-        }, 500),
-        []
-    );
-
     const debouncedUpdateFirstDayOfWeek = useCallback(
         debounce(async (firstDayOfWeek: string) => {
             try {
@@ -114,12 +90,6 @@ const CalendarSettingsPage = () => {
         debouncedUpdateFirstDayOfWeek(firstDayOfWeek);
     };
 
-    const handleChangeColor = (color: string) => {
-        setPreviousSelectedColor(selectedColor);
-        setSelectedColor(color);
-        debouncedUpdateUserData(color);
-    };
-
     return (
         <ScrollView>
             <TouchableOpacity onPress={() => setPageIndex(0)}>
@@ -140,52 +110,6 @@ const CalendarSettingsPage = () => {
             </TouchableOpacity>
             <View marginH-30 marginB-30>
                 <Text style={styles.subTitle}>Calendar settings</Text>
-                <View style={styles.card}>
-                    <Text style={styles.cardTitle} marginB-14>
-                        Event 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 style={styles.card}>
                     <Text style={styles.cardTitle}>Weekly Start Date</Text>
                     <View row marginV-5 marginT-20>

components/pages/settings/user_settings_views/MyProfile.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, {useCallback, useEffect, useRef, useState} from "react";
 import { StyleSheet, TouchableOpacity } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
 import * as ImagePicker from "expo-image-picker";
@@ -20,6 +20,7 @@ import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
 import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture";
 import { colorMap } from "@/constants/colorMap";
 import DeleteProfileDialogs from "../user_components/DeleteProfileDialogs";
+import {AntDesign} from "@expo/vector-icons";
 
 const MyProfile = () => {
   const { user, profileData } = useAuthContext();
@@ -34,6 +35,13 @@ const MyProfile = () => {
     string | ImagePicker.ImagePickerAsset | null
   >(profileData?.pfp || null);
 
+  const [selectedColor, setSelectedColor] = useState<string>(
+      profileData?.eventColor ?? colorMap.pink
+  );
+  const [previousSelectedColor, setPreviousSelectedColor] = useState<string>(
+      profileData?.eventColor ?? colorMap.pink
+  );
+
   const [showDeleteDialog, setShowDeleteDialog] = useState<boolean>(false);
 
   const handleHideDeleteDialog = () => {
@@ -102,6 +110,28 @@ const MyProfile = () => {
       ? profileImage.uri
       : profileImage;
 
+  const handleChangeColor = (color: string) => {
+    setPreviousSelectedColor(selectedColor);
+    setSelectedColor(color);
+    debouncedUpdateUserData(color);
+  };
+
+  const debouncedUpdateUserData = useCallback(
+      debounce(async (color: string) => {
+        try {
+          await updateUserData({
+            newUserData: {
+              eventColor: color,
+            },
+          });
+        } catch (error) {
+          console.error("Failed to update color:", error);
+          setSelectedColor(previousSelectedColor);
+        }
+      }, 500),
+      []
+  );
+
   return (
     <ScrollView style={{ paddingBottom: 20, flex: 1 }}>
       <View style={styles.card}>
@@ -215,6 +245,52 @@ const MyProfile = () => {
           </Picker>
         </View>
       </View>
+      <View style={styles.card}>
+        <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>
       <Button
         size="large"
         backgroundColor="#ff1637"
@@ -248,6 +324,17 @@ const timeZoneItems = Object.keys(tz.zones)
   ));
 
 const styles = StyleSheet.create({
+  cardTitle: {
+    fontFamily: "Manrope_500Medium",
+    fontSize: 15,
+  },
+  colorBox: {
+    aspectRatio: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    width: 51,
+    borderRadius: 12,
+  },
   card: {
     marginVertical: 15,
     backgroundColor: "white",