added settings pages

app/(auth)/settings/index.tsx

@@ -1,6 +1,12 @@
 import SettingsPage from "@/components/pages/settings/SettingsPage";
+import { SettingsContextProvider } from "@/contexts/SettingsContext";
+import React from "react";
 import { View } from "react-native-ui-lib";
 
 export default function Screen() {
-  return <SettingsPage />;
+  return (
+    <SettingsContextProvider>
+      <SettingsPage />
+    </SettingsContextProvider>
+  );
 }

components/pages/settings/CalendarSettingsPage.tsx

@@ -0,0 +1,123 @@
+import { AntDesign, Ionicons } from "@expo/vector-icons";
+import React, { useState } from "react";
+import { Button, View, Text, Checkbox } from "react-native-ui-lib";
+import { StyleSheet } from "react-native";
+import { colorMap } from "@/contexts/SettingsContext";
+import { TouchableOpacity } from "react-native-gesture-handler";
+
+const CalendarSettingsPage = (props: {
+  setSelectedPage: (page: number) => void;
+}) => {
+  const [selectedColor, setSelectedColor] = useState<string>(colorMap.pink);
+  const [startDate, setStartDate] = useState<boolean>(true);
+  return (
+    <View marginH-30>
+      <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
+        <View row marginT-20 marginB-35 centerV>
+          <Ionicons name="chevron-back" size={22} color="#979797" />
+          <Text text70 color="#979797">Return to main settings</Text>
+        </View>
+      </TouchableOpacity>
+      <Text text60R>Calendar settings</Text>
+      <View style={styles.card}>
+        <Text text70 marginB-14>
+          Event Color Preference
+        </Text>
+        <View row spread>
+          <TouchableOpacity onPress={() => setSelectedColor(colorMap.pink)}>
+            <View style={styles.colorBox} backgroundColor={colorMap.pink}>
+              {selectedColor == colorMap.pink && (
+                <AntDesign name="check" size={30} color="white" />
+              )}
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => setSelectedColor(colorMap.orange)}>
+            <View style={styles.colorBox} backgroundColor={colorMap.orange}>
+              {selectedColor == colorMap.orange && (
+                <AntDesign name="check" size={30} color="white" />
+              )}
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => setSelectedColor(colorMap.green)}>
+            <View style={styles.colorBox} backgroundColor={colorMap.green}>
+              {selectedColor == colorMap.green && (
+                <AntDesign name="check" size={30} color="white" />
+              )}
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => setSelectedColor(colorMap.teal)}>
+            <View style={styles.colorBox} backgroundColor={colorMap.teal}>
+              {selectedColor == colorMap.teal && (
+                <AntDesign name="check" size={30} color="white" />
+              )}
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => setSelectedColor(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 text70>Weekly Start Date</Text>
+        <View row marginV-5 marginT-20>
+          <Checkbox
+            value={startDate}
+            style={styles.checkbox}
+            color="#ea156d"
+            onValueChange={() => setStartDate(true)}
+          />
+          <View row marginL-8>
+            <Text text70>Sundays</Text>
+            <Text text70 color="gray">
+              {" "}
+              (default)
+            </Text>
+          </View>
+        </View>
+        <View row marginV-5>
+          <Checkbox
+            value={!startDate}
+            style={styles.checkbox}
+            color="#ea156d"
+            onValueChange={() => setStartDate(false)}
+          />
+          <Text text70 marginL-8>
+            Mondays
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  backBtn: {
+    backgroundColor: "red",
+    marginLeft: -2,
+    justifyContent: "flex-start",
+  },
+  card: {
+    backgroundColor: "white",
+    width: "100%",
+    padding: 20,
+    paddingBottom: 30,
+    marginTop: 20,
+    borderRadius: 20,
+  },
+  colorBox: {
+    aspectRatio: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    width: 50,
+    borderRadius: 12,
+  },
+  checkbox: {
+    borderRadius: 50,
+  },
+});
+
+export default CalendarSettingsPage;

components/pages/settings/ChoreRewardSettings.tsx

@@ -0,0 +1,33 @@
+import { View, Text, TouchableOpacity } from "react-native-ui-lib";
+import React from "react";
+import { Ionicons } from "@expo/vector-icons";
+import { ToDosContextProvider } from "@/contexts/ToDosContext";
+import ToDosList from "../todos/ToDosList";
+import { ScrollView } from "react-native-gesture-handler";
+
+const ChoreRewardSettings = (props: {
+  setSelectedPage: (page: number) => void;
+}) => {
+  return (
+    <ToDosContextProvider>
+      <View marginT-10>
+        <ScrollView>
+          <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
+            <View row marginT-20 marginL-20 marginB-35 centerV>
+              <Ionicons name="chevron-back" size={22} color="#979797" />
+              <Text text70 color="#979797">
+                Return to main settings
+              </Text>
+            </View>
+          </TouchableOpacity>
+          <Text text60R marginL-30 marginB-20>
+            Chore Reward Settings
+          </Text>
+          <ToDosList />
+        </ScrollView>
+      </View>
+    </ToDosContextProvider>
+  );
+};
+
+export default ChoreRewardSettings;

components/pages/settings/SettingsPage.tsx

@@ -1,49 +1,96 @@
 import { View, Text, Button } from "react-native-ui-lib";
-import React from "react";
+import React, { useState } from "react";
 import { StyleSheet } from "react-native";
 import { Entypo, Ionicons, Octicons } from "@expo/vector-icons";
+import CalendarSettingsPage from "./CalendarSettingsPage";
+import ChoreRewardSettings from "./ChoreRewardSettings";
+import UserSettings from "./UserSettings";
 
 const styles = StyleSheet.create({
-  mainBtn: { width: "100%", justifyContent: "flex-start", marginBottom: 20, height: 60 },
+  mainBtn: {
+    width: "100%",
+    justifyContent: "flex-start",
+    marginBottom: 20,
+    height: 60,
+  },
 });
-
+const pageIndex = {
+  main: 0,
+  user: 1,
+  calendar: 2,
+  chore: 3,
+  policy: 4,
+};
 const SettingsPage = () => {
+  const [selectedPage, setSelectedPage] = useState<number>(0);
   return (
-    <View centerH marginH-30 marginT-30>
+    <View>
-      <Button
+      {selectedPage == 0 && (
-        backgroundColor="white"
+        <View centerH marginH-30 marginT-30>
-        style={styles.mainBtn}
+          <Button
-        label="Manage my profile"
+            backgroundColor="white"
-        color="#07b8c7"
+            style={styles.mainBtn}
-        iconSource={() => (
+            label="Manage my profile"
-          <Ionicons name="person-circle-sharp" size={24} color="#07b8c7" style={{marginRight: 10}} />
+            color="#07b8c7"
-        )}
+            iconSource={() => (
-      />
+              <Ionicons
-      <Button
+                name="person-circle-sharp"
-        backgroundColor="white"
+                size={24}
-        style={styles.mainBtn}
+                color="#07b8c7"
-        label="Calendar settings"
+                style={{ marginRight: 10 }}
-        color="#fd1775"
+              />
-        iconSource={() => (
+            )}
-          <Ionicons name="home-outline" size={24} color="#fd1775" style={{marginRight: 10}} />
+            onPress={() => setSelectedPage(pageIndex.user)}
-        )}
+          />
-      />
+          <Button
-      <Button
+            backgroundColor="white"
-        backgroundColor="white"
+            style={styles.mainBtn}
-        style={styles.mainBtn}
+            label="Calendar settings"
-        label="Chore reward settings"
+            color="#fd1775"
-        color="#ff9900"
+            iconSource={() => (
-        iconSource={() => (<Octicons name="gear" size={24} color="#ff9900" style={{marginRight: 10}} />)}
+              <Ionicons
-      />
+                name="home-outline"
-      <Button
+                size={24}
-        backgroundColor="white"
+                color="#fd1775"
-        style={styles.mainBtn}
+                style={{ marginRight: 10 }}
-        label="Kaly privacy policy"
+              />
-        iconSource={() => (
+            )}
-          <Entypo name="text-document" size={24} color="#6c645b" style={{marginRight: 10}} />
+            onPress={() => {setSelectedPage(pageIndex.calendar)}}
-        )}
+          />
-        color="#6c645b"
+          <Button
-      />
+            backgroundColor="white"
+            style={styles.mainBtn}
+            label="Chore reward settings"
+            color="#ff9900"
+            iconSource={() => (
+              <Octicons
+                name="gear"
+                size={24}
+                color="#ff9900"
+                style={{ marginRight: 10 }}
+              />
+            )}
+            onPress={() => setSelectedPage(pageIndex.chore)}
+          />
+          <Button
+            backgroundColor="white"
+            style={styles.mainBtn}
+            label="Kaly privacy policy"
+            iconSource={() => (
+              <Entypo
+                name="text-document"
+                size={24}
+                color="#6c645b"
+                style={{ marginRight: 10 }}
+              />
+            )}
+            color="#6c645b"
+          />
+        </View>
+      )}
+      {selectedPage == pageIndex.calendar && <CalendarSettingsPage setSelectedPage={setSelectedPage} />}
+      {selectedPage == pageIndex.chore && <ChoreRewardSettings setSelectedPage={setSelectedPage} />}
+      {selectedPage == pageIndex.user && <UserSettings setSelectedPage={setSelectedPage} />}
     </View>
   );
 };

components/pages/settings/UserSettings.tsx

@@ -0,0 +1,79 @@
+import { View, Text, TouchableOpacity } from "react-native-ui-lib";
+import React, { useState } from "react";
+import { Ionicons } from "@expo/vector-icons";
+import { ScrollView, StyleSheet } from "react-native";
+import MyProfile from "./user_settings_views/MyProfile";
+import MyGroup from "./user_settings_views/MyGroup";
+
+const UserSettings = (props: { setSelectedPage: (page: number) => void }) => {
+  const [selectedView, setSelectedView] = useState<boolean>(true);
+  return (
+    <View>
+      <ScrollView>
+        <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
+          <View row marginT-20 marginL-20 marginB-35 centerV>
+            <Ionicons name="chevron-back" size={22} color="#979797" />
+            <Text text70 color="#979797">
+              Return to main settings
+            </Text>
+          </View>
+        </TouchableOpacity>
+        <View marginH-20>
+          <Text text60R marginB-25>
+            User Management
+          </Text>
+          <View style={styles.buttonSwitch} spread row>
+            <TouchableOpacity
+              onPress={() => setSelectedView(true)}
+              centerV
+              centerH
+              style={selectedView == true ? styles.btnSelected : styles.btnNot}
+            >
+              <View>
+                <Text text70 color={selectedView ? "white" : "black"}>
+                  My Profile
+                </Text>
+              </View>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => setSelectedView(false)}
+              centerV
+              centerH
+              style={selectedView == false ? styles.btnSelected : styles.btnNot}
+            >
+              <View>
+                <Text text70 color={!selectedView ? "white" : "black"}>
+                  My Group
+                </Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+          {selectedView && <MyProfile />}
+          {!selectedView && <MyGroup />}
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  buttonSwitch: {
+    borderRadius: 50,
+    width: "100%",
+    backgroundColor: "#ebebeb",
+    height: 45,
+  },
+  btnSelected: {
+    backgroundColor: "#05a8b6",
+    height: "100%",
+    width: "50%",
+    borderRadius: 50,
+  },
+  btnNot: {
+    height: "100%",
+    width: "50%",
+    borderRadius: 50,
+  },
+});
+
+export default UserSettings;

components/pages/settings/user_settings_views/GroupsList.tsx

@@ -0,0 +1,12 @@
+import { View, Text } from "react-native";
+import React from "react";
+
+const GroupsList = () => {
+  return (
+    <View>
+      <Text>GroupsList</Text>
+    </View>
+  );
+};
+
+export default GroupsList;

components/pages/settings/user_settings_views/MyGroup.tsx

@@ -0,0 +1,43 @@
+import { View, Text } from "react-native-ui-lib";
+import React from "react";
+import { StyleSheet } from "react-native";
+
+const MyGroup = () => {
+  return (
+    <View>
+      <View style={styles.card}>
+        <Text text70 marginV-10>
+          Family
+        </Text>
+        <Text text70 marginB-10 marginT-15>
+          Caregivers
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    marginVertical: 15,
+    backgroundColor: "white",
+    width: "100%",
+    borderRadius: 15,
+    padding: 20,
+  },
+  pfp: {
+    aspectRatio: 1,
+    width: 60,
+    backgroundColor: "green",
+    borderRadius: 20,
+  },
+  txtBox: {
+    backgroundColor: "#fafafa",
+    borderRadius: 50,
+    borderWidth: 2,
+    borderColor: "#cecece",
+    padding: 15,
+    height: 45,
+  },
+});
+export default MyGroup;

components/pages/settings/user_settings_views/MyProfile.tsx

@@ -0,0 +1,68 @@
+import { View, Text, TextField } from "react-native-ui-lib";
+import React from "react";
+import { StyleSheet } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
+const MyProfile = () => {
+  return (
+    <View>
+      <View style={styles.card}>
+        <Text text70>Your Profile</Text>
+        <View row spread paddingH-15 centerV marginV-15>
+          <View style={styles.pfp}></View>
+          <Text text80 color="#50be0c">
+            Change Photo
+          </Text>
+          <Text text80>Remove Photo</Text>
+        </View>
+        <View paddingH-15>
+          <Text text80 marginT-10 marginB-7 color="#a1a1a1">
+            First name
+          </Text>
+          <TextField text70 placeholder="First name" style={styles.txtBox} />
+          <Text text80 marginT-10 marginB-7 color="#a1a1a1">
+            Last name
+          </Text>
+          <TextField text70 placeholder="Last name" style={styles.txtBox} />
+          <Text text80 marginT-10 marginB-7 color="#a1a1a1">
+            Email address
+          </Text>
+          <TextField text70 placeholder="Email address" style={styles.txtBox} />
+        </View>
+      </View>
+
+      <View style={styles.card}>
+        <Text text70>Settings</Text>
+        <Text text80 marginT-20 marginB-7 color="#a1a1a1">
+          Time Zone
+        </Text>
+        <TextField text70 placeholder="Email address" style={styles.txtBox} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    marginVertical: 15,
+    backgroundColor: "white",
+    width: "100%",
+    borderRadius: 15,
+    padding: 20,
+  },
+  pfp: {
+    aspectRatio: 1,
+    width: 60,
+    backgroundColor: "green",
+    borderRadius: 20,
+  },
+  txtBox: {
+    backgroundColor: "#fafafa",
+    borderRadius: 50,
+    borderWidth: 2,
+    borderColor: "#cecece",
+    padding: 15,
+    height: 45,
+  },
+});
+
+export default MyProfile;

contexts/SettingsContext.tsx

@@ -0,0 +1,30 @@
+import { createContext, FC, ReactNode, useContext, useState } from "react";
+
+export const colorMap = {
+  pink: "#ea156c",
+  orange: "#e28800",
+  green: "#46a80a",
+  teal: "#05a8b6",
+  purple: "#7305d4",
+};
+
+interface ISettingsContext {
+  calendarColor: string;
+  setCalendarColor: (color: string) => void;
+}
+
+const SettingsContext = createContext<ISettingsContext>(undefined!);
+
+export const SettingsContextProvider: FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [calendarColor, setCalendarColor] = useState<string>(colorMap.pink);
+
+  return (
+    <SettingsContext.Provider value={{ calendarColor, setCalendarColor }}>
+      {children}
+    </SettingsContext.Provider>
+  );
+};
+
+export const useSettingsContext = () => useContext(SettingsContext)!;