Merge branch 'dev'

components/pages/main/SignUpPage.tsx

@@ -25,6 +25,7 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import { useRouter } from "expo-router";
 import * as Device from "expo-device";
 import { DeviceType } from "expo-device";
+import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
 
 if (Platform.OS === "ios") KeyboardManager.setEnableAutoToolbar(true);
 
@@ -38,6 +39,7 @@ const SignUpPage = () => {
   const [allowFaceID, setAllowFaceID] = useState<boolean>(false);
   const [acceptTerms, setAcceptTerms] = useState<boolean>(false);
   const { mutateAsync: signUp, isLoading } = useSignUp();
+  const {profileData} = useAuthContext();
 
   const lnameRef = useRef<TextFieldRef>(null);
   const emailRef = useRef<TextFieldRef>(null);
@@ -68,7 +70,12 @@ const SignUpPage = () => {
 
   const handleSignUp = async () => {
     await signUp({ email, password, firstName, lastName });
+    
+    if (profileData?.userType === ProfileType.FAMILY_DEVICE) {
+        router.replace("/(auth)/calendar");
+    } else {
         router.replace("/(unauth)/cal_sync");
+    }
   };
 
   return (

components/pages/settings/user_settings_views/MyProfile.tsx

@@ -291,6 +291,13 @@ const MyProfile = () => {
               )}
             </View>
           </TouchableOpacity>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.lightPink)} disabled={takenColors.includes(colorMap.lightPink)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.lightPink) ? 0.1 : 1}]} backgroundColor={colorMap.lightPink}>
+              {selectedColor == colorMap.lightPink && (
+                <AntDesign name="check" size={30} color="black" />
+              )}
+            </View>
+          </TouchableOpacity>
           <TouchableOpacity onPress={() => handleChangeColor(colorMap.orange)} disabled={takenColors.includes(colorMap.orange)}>
             <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.orange) ? 0.1 : 1}]} backgroundColor={colorMap.orange}>
               {selectedColor == colorMap.orange && (
@@ -298,6 +305,13 @@ const MyProfile = () => {
               )}
             </View>
           </TouchableOpacity>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.lightOrange)} disabled={takenColors.includes(colorMap.lightOrange)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.lightOrange) ? 0.1 : 1}]} backgroundColor={colorMap.lightOrange}>
+              {selectedColor == colorMap.lightOrange && (
+                <AntDesign name="check" size={30} color="black" />
+              )}
+            </View>
+          </TouchableOpacity>
           <TouchableOpacity onPress={() => handleChangeColor(colorMap.green)}disabled={takenColors.includes(colorMap.green)}>
             <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.green) ? 0.1 : 1}]} backgroundColor={colorMap.green}>
               {selectedColor == colorMap.green && (
@@ -305,6 +319,15 @@ const MyProfile = () => {
               )}
             </View>
           </TouchableOpacity>
+        </View>
+        <View row spread marginT-10>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.lightGreen)} disabled={takenColors.includes(colorMap.lightGreen)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.lightGreen) ? 0.1 : 1}]} backgroundColor={colorMap.lightGreen}>
+              {selectedColor == colorMap.lightGreen && (
+                <AntDesign name="check" size={30} color="black" />
+              )}
+            </View>
+          </TouchableOpacity>
           <TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)} disabled={takenColors.includes(colorMap.teal)}>
             <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.teal) ? 0.1 : 1}]} backgroundColor={colorMap.teal}>
               {selectedColor == colorMap.teal && (
@@ -312,6 +335,13 @@ const MyProfile = () => {
               )}
             </View>
           </TouchableOpacity>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.lightTeal)} disabled={takenColors.includes(colorMap.lightTeal)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.lightTeal) ? 0.1 : 1}]} backgroundColor={colorMap.lightTeal}>
+              {selectedColor == colorMap.lightTeal && (
+                <AntDesign name="check" size={30} color="black" />
+              )}
+            </View>
+          </TouchableOpacity>
           <TouchableOpacity onPress={() => handleChangeColor(colorMap.purple)} disabled={takenColors.includes(colorMap.purple)}>
             <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.purple) ? 0.1 : 1}]} backgroundColor={colorMap.purple}>
               {selectedColor == colorMap.purple && (
@@ -319,40 +349,10 @@ const MyProfile = () => {
               )}
             </View>
           </TouchableOpacity>
-        </View>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.lightPurple)} disabled={takenColors.includes(colorMap.lightPurple)}>
-        <View row spread marginT-10>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.lightPurple) ? 0.1 : 1}]} backgroundColor={colorMap.lightPurple}>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.navy)} disabled={takenColors.includes(colorMap.navy)}>
+              {selectedColor == colorMap.lightPurple && (
-            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.navy) ? 0.1 : 1}]} backgroundColor={colorMap.navy}>
+                <AntDesign name="check" size={30} color="black" />
-              {selectedColor == colorMap.navy && (
-                <AntDesign name="check" size={30} color="white" />
-              )}
-            </View>
-          </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.red)} disabled={takenColors.includes(colorMap.red)}>
-            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.red) ? 0.1 : 1}]} backgroundColor={colorMap.red}>
-              {selectedColor == colorMap.red && (
-                <AntDesign name="check" size={30} color="white" />
-              )}
-            </View>
-          </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.indigo)} disabled={takenColors.includes(colorMap.indigo)}>
-            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.indigo) ? 0.1 : 1}]} backgroundColor={colorMap.indigo}>
-              {selectedColor == colorMap.indigo && (
-                <AntDesign name="check" size={30} color="white" />
-              )}
-            </View>
-          </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.emerald)} disabled={takenColors.includes(colorMap.emerald)}>
-            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.emerald) ? 0.1 : 1}]} backgroundColor={colorMap.emerald}>
-              {selectedColor == colorMap.emerald && (
-                <AntDesign name="check" size={30} color="white" />
-              )}
-            </View>
-          </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.violet)} disabled={takenColors.includes(colorMap.violet)}>
-            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.violet) ? 0.1 : 1}]} backgroundColor={colorMap.violet}>
-              {selectedColor == colorMap.violet && (
-                <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>

components/pages/settings/user_settings_views/UpdateUserDialog.tsx

@@ -244,6 +244,15 @@ const UpdateUserDialog = ({ open, handleClose, profileData }: Props) => {
                   )}
                 </View>
               </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => handleChangeColor(colorMap.lightPink)}
+              >
+                <View style={styles.colorBox} backgroundColor={colorMap.lightPink}>
+                  {selectedColor == colorMap.lightPink && (
+                    <AntDesign name="check" size={30} color="white" />
+                  )}
+                </View>
+              </TouchableOpacity>
               <TouchableOpacity
                 onPress={() => handleChangeColor(colorMap.orange)}
               >
@@ -253,6 +262,15 @@ const UpdateUserDialog = ({ open, handleClose, profileData }: Props) => {
                   )}
                 </View>
               </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => handleChangeColor(colorMap.lightOrange)}
+              >
+                <View style={styles.colorBox} backgroundColor={colorMap.lightOrange}>
+                  {selectedColor == colorMap.lightOrange && (
+                    <AntDesign name="check" size={30} color="white" />
+                  )}
+                </View>
+              </TouchableOpacity>
               <TouchableOpacity
                 onPress={() => handleChangeColor(colorMap.green)}
               >
@@ -262,15 +280,33 @@ const UpdateUserDialog = ({ open, handleClose, profileData }: Props) => {
                   )}
                 </View>
               </TouchableOpacity>
+            </View>
+            <View row spread marginT-10>
               <TouchableOpacity
-                onPress={() => handleChangeColor(colorMap.teal)}
+                onPress={() => handleChangeColor(colorMap.lightGreen)}
               >
+                <View style={styles.colorBox} backgroundColor={colorMap.lightGreen}>
+                  {selectedColor == colorMap.lightGreen && (
+                    <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.lightTeal)}
+              >
+                <View style={styles.colorBox} backgroundColor={colorMap.lightTeal}>
+                  {selectedColor == colorMap.lightTeal && (
+                    <AntDesign name="check" size={30} color="white" />
+                  )}
+                </View>
+              </TouchableOpacity>
               <TouchableOpacity
                 onPress={() => handleChangeColor(colorMap.purple)}
               >
@@ -280,45 +316,9 @@ const UpdateUserDialog = ({ open, handleClose, profileData }: Props) => {
                   )}
                 </View>
               </TouchableOpacity>
-            </View>
+              <TouchableOpacity onPress={() => handleChangeColor(colorMap.lightPurple)}>
-            <View row spread marginT-10>
+                <View style={styles.colorBox} backgroundColor={colorMap.lightPurple}>
-              <TouchableOpacity
+                  {selectedColor == colorMap.lightPurple && (
-                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>

constants/colorMap.ts

@@ -1,15 +1,12 @@
 export const colorMap = {
     pink: "#ea156c",
-    orange: "#e28800",
+    orange: "#ffb902",
-    green: "#46a80a",
+    green: "#72d82a",
-    teal: "#05a8b6",
+    teal: "#07b9c6",
-    purple: "#7305d4",
+    purple: "#7204d5",
-    navy: '#002e42',
+    lightPink: '#ffc8dd',
-    red: '#ff1637',
+    lightOrange: '#ffe5a6',
-    gray: '#607d8b',
+    lightGreen: '#c1eea1',
-    yellow: '#ffc107',
+    lightTeal: '#c4f0f3',
-    sky: '#2196f3',
+    lightPurple: '#debffa',
-    indigo: '#4F46E5',
-    emerald: '#059669',
-    violet: '#7C3AED',
 };