Merge pull request #6 from lemeow125/feature/UserInfo

Feature/user info
2024-11-17 06:19:25 +08:00 · 2023-07-19 17:21:03 +08:00 · 2023-07-19 17:21:03 +08:00 · 8fb8d6b8b2
commit 8fb8d6b8b2
parent 2ff22f63df de97dca9d3
31 changed files with 1007 additions and 489 deletions
--- a/App.tsx
+++ b/App.tsx
@ -16,9 +16,11 @@ import Register from "./src/routes/Register/Register";
 import Onboarding from "./src/routes/Onboarding/Onboarding";
 import Revalidation from "./src/routes/Revalidation/Revalidation";
 import Activation from "./src/routes/Activation/Activation";
-import UserInfo from "./src/routes/UserInfo/UserInfo";
 import { useState, useEffect } from "react";
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import { StatusBar } from "expo-status-bar";
+import UserInfoPage from "./src/routes/UserInfoPage/UserInfoPage";
+import SubjectsPage from "./src/routes/SubjectsPage/SubjectsPage";

 const Drawer = createDrawerNavigator();

@ -53,8 +55,10 @@ export default function App() {
    }
  }, [initialRoute]);
  return (
-    <Provider store={store}>
-      <QueryClientProvider client={queryClient}>
+    <QueryClientProvider client={queryClient}>
+      <Provider store={store}>
+        <StatusBar style="light" />
+
        <NavigationContainer linking={linking}>
          <Drawer.Navigator
            initialRouteName="Revalidation"
@ -67,10 +71,11 @@ export default function App() {
            <Drawer.Screen name="Onboarding" component={Onboarding} />
            <Drawer.Screen name="Revalidation" component={Revalidation} />
            <Drawer.Screen name="Activation" component={Activation} />
-          <Drawer.Screen name="UserInfo" component={UserInfo} />
+            <Drawer.Screen name="User Info" component={UserInfoPage} />
+            <Drawer.Screen name="Subjects" component={SubjectsPage} />
          </Drawer.Navigator>
        </NavigationContainer>
-      </QueryClientProvider>
-    </Provider>
+      </Provider>
+    </QueryClientProvider>
  );
 }
--- a/app.json
+++ b/app.json
@ -1,6 +1,6 @@
 {
  "expo": {
-    "name": "StudE_Frontend",
+    "name": "StudE",
    "scheme": "stude",
    "slug": "StudE_Frontend",
    "version": "1.0.0",
@ -10,7 +10,7 @@
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
+      "backgroundColor": "#1C2C3F"
    },
    "assetBundlePatterns": [
      "**/*"
@ -21,8 +21,14 @@
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
-      }
+        "backgroundColor": "#FFFF"
+      },
+      "package": "com.teamblackpink.stude",
+      "permissions": [
+        "android.permission.ACCESS_COARSE_LOCATION",
+        "android.permission.ACCESS_FINE_LOCATION",
+        "android.permission.FOREGROUND_SERVICE"
+      ]
    },
    "web": {
      "favicon": "./assets/favicon.png"
@ -34,6 +40,11 @@
          "locationAlwaysAndWhenInUsePermission": "Allow Stud-E to use your location."
        }
      ]
-    ]
+    ],
+    "extra": {
+      "eas": {
+        "projectId": "614fd93f-345c-4d72-a9e7-592f1ba0c6e8"
+      }
+    }
  }
 }
--- a/assets/adaptive-icon.png
+++ b/assets/adaptive-icon.png
--- a/assets/favicon.png
+++ b/assets/favicon.png
--- a/assets/icon.png
+++ b/assets/icon.png
--- a/assets/splash.png
+++ b/assets/splash.png
--- a/eas.json
+++ b/eas.json
@ -0,0 +1,19 @@
+{
+    "build": {
+      "preview": {
+        "android": {
+          "buildType": "apk"
+        }
+      },
+      "preview2": {
+        "android": {
+          "gradleCommand": ":app:assembleRelease"
+        }
+      },
+      "preview3": {
+        "developmentClient": true
+      },
+      "production": {}
+    }
+  }
+  
--- a/package.json
+++ b/package.json
@ -33,10 +33,10 @@
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-native-select-dropdown": "^3.3.4",
-    "react-native-svg": "13.4.0",
    "react-query": "^3.39.3",
    "react-redux": "^8.1.1",
-    "redux": "^4.2.1"
+    "redux": "^4.2.1",
+    "react-native-svg": "13.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
--- a/src/components/AnimatedContainer/AnimatedContainer.tsx
+++ b/src/components/AnimatedContainer/AnimatedContainer.tsx
@ -13,21 +13,23 @@ export default function AnimatedContainer(props: props) {
      contentContainerStyle={styles.container}
      from={{
        borderRadius: 0,
-        backgroundColor: colors.orange_2,
+        opacity: 0,
+        backgroundColor: colors.secondary_2,
        paddingTop: 4,
        paddingBottom: 4,
        marginHorizontal: "4%",
-        marginVertical: "5%",
+        marginVertical: "10%",
      }}
      animate={{
        borderRadius: 15,
-        backgroundColor: colors.blue_2,
+        opacity: 1,
+        backgroundColor: colors.secondary_2,
        paddingTop: 16,
        paddingBottom: 16,
        marginHorizontal: "4%",
        marginVertical: "5%",
      }}
-      transition={{ type: "timing", duration: 300 }}
+      transition={{ type: "timing", duration: 700 }}
    >
      {props.children}
    </MotiScrollView>
--- a/src/components/AnimatedContainer/AnimatedContainerNoScroll.tsx
+++ b/src/components/AnimatedContainer/AnimatedContainerNoScroll.tsx
@ -0,0 +1,37 @@
+import * as React from "react";
+import { View, Text, ScrollView } from "react-native";
+import styles from "../../styles";
+import { colors } from "../../styles";
+import { MotiView, MotiScrollView } from "moti";
+export interface props {
+  children: React.ReactNode;
+}
+
+export default function AnimatedContainerNoScroll(props: props) {
+  return (
+    <MotiView
+      style={styles.container}
+      from={{
+        borderRadius: 0,
+        opacity: 0,
+        backgroundColor: colors.secondary_2,
+        paddingTop: 4,
+        paddingBottom: 4,
+        marginHorizontal: "4%",
+        marginVertical: "10%",
+      }}
+      animate={{
+        borderRadius: 15,
+        opacity: 1,
+        backgroundColor: colors.secondary_2,
+        paddingTop: 16,
+        paddingBottom: 16,
+        marginHorizontal: "4%",
+        marginVertical: "5%",
+      }}
+      transition={{ type: "timing", duration: 700 }}
+    >
+      {props.children}
+    </MotiView>
+  );
+}
--- a/src/components/Api/Api.tsx
+++ b/src/components/Api/Api.tsx
@ -4,7 +4,9 @@ import {
  ActivationParams,
  LoginParams,
  OnboardingParams,
+  PatchStudentData,
  RegistrationParams,
+  StudentData,
 } from "../../interfaces/Interfaces";

 let debug = true;
@ -43,6 +45,16 @@ export async function setRefreshToken(refresh: string) {
  return true;
 }

+// Header Config Template for REST
+export async function GetConfig() {
+  const accessToken = await getAccessToken();
+  return {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  };
+}
+
 // User APIs
 export function UserRegister(register: RegistrationParams) {
  console.log(JSON.stringify(register));
@ -77,6 +89,7 @@ export function UserLogin(user: LoginParams) {
      let error_message = "";
      if (error.response) error_message = error.response.data;
      else error_message = "Unable to reach servers";
+      // console.log(error_message);
      return [false, error_message];
    });
 }
@ -105,13 +118,9 @@ export async function TokenRefresh() {
    });
 }
 export async function UserInfo() {
-  const accessToken = await getAccessToken();
+  const config = await GetConfig();
  return instance
-    .get("/api/v1/accounts/users/me/", {
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-      },
-    })
+    .get("/api/v1/accounts/users/me/", config)
    .then((response) => {
      // console.log(JSON.stringify(response.data));
      return [true, response.data];
@ -124,6 +133,23 @@ export async function UserInfo() {
    });
 }

+export async function PatchUserInfo(info: PatchStudentData) {
+  const config = await GetConfig();
+  return instance
+    .patch("/api/v1/accounts/users/me/", info, config)
+    .then((response) => {
+      console.log(JSON.stringify(response.data));
+      return [true, response.data];
+    })
+    .catch((error) => {
+      let error_message = "";
+      if (error.response) error_message = error.response.data;
+      else error_message = "Unable to reach servers";
+      // console.log(error_message);
+      return [false, error_message];
+    });
+}
+
 export function UserActivate(activation: ActivationParams) {
  return instance
    .post("/api/v1/accounts/users/activation/", activation)
@ -147,14 +173,13 @@ export async function GetCourses() {
    })
    .then((response) => {
      // console.log(JSON.stringify(response.data));
-      return response.data;
+      return [true, response.data];
    })
    .catch((error) => {
      let error_message = "";
      if (error.response) error_message = error.response.data;
      else error_message = "Unable to reach servers";
-      console.log("Error getting courses", error_message);
-      return false;
+      return [false, error_message];
    });
 }

@ -168,45 +193,59 @@ export async function GetSemesters() {
    })
    .then((response) => {
      // console.log(JSON.stringify(response.data));
-      return response.data;
+      return [true, response.data];
    })
    .catch((error) => {
      let error_message = "";
      if (error.response) error_message = error.response.data;
      else error_message = "Unable to reach servers";
-      console.log("Error getting semesters", error_message);
-      return false;
+      return [false, error_message];
    });
 }

 export async function GetYearLevels() {
-  const accessToken = await getAccessToken();
+  const config = await GetConfig();
  return instance
-    .get("/api/v1/year_levels/", {
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-      },
-    })
+    .get("/api/v1/year_levels/", config)
    .then((response) => {
      // console.log(JSON.stringify(response.data));
-      return response.data;
+      return [true, response.data];
    })
    .catch((error) => {
      let error_message = "";
      if (error.response) error_message = error.response.data;
      else error_message = "Unable to reach servers";
-      console.log("Error getting year levels", error_message);
-      return false;
+      return [false, error_message];
+    });
+}
+
+export async function GetSubjects(
+  course: string,
+  year_level: string,
+  semester: string
+) {
+  const config = await GetConfig();
+  return instance
+    .get(
+      "/api/v1/subjects/" + course + "/" + year_level + "/" + semester,
+      config
+    )
+    .then((response) => {
+      // console.log(JSON.stringify(response.data));
+      return [true, response.data];
+    })
+    .catch((error) => {
+      let error_message = "";
+      if (error.response) error_message = error.response.data;
+      else error_message = "Unable to reach servers";
+      return [false, error_message];
    });
 }

 export async function OnboardingUpdateStudentInfo(info: OnboardingParams) {
-  const accessToken = await getAccessToken();
-  const headers = {
-    Authorization: `Bearer ${accessToken}`,
-  };
+  const config = await GetConfig();
  return instance
-    .patch("/api/v1/accounts/users/me/", info, { headers })
+    .patch("/api/v1/accounts/users/me/", info, config)
    .then((response) => {
      console.log(JSON.stringify(response.data));
      return [true, response.data];
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@ -1,30 +1,23 @@
 import * as React from "react";
 import { Pressable, GestureResponderEvent } from "react-native";
 import styles from "../../styles";
-
+import { colors } from "../../styles";
 export interface props {
  children: React.ReactNode;
  onPress: (event: GestureResponderEvent) => void;
-  color: string;
+  color?: string;
  disabled?: boolean;
 }

 export default function Button({ disabled = false, ...props }: props) {
-  const rgb = props.color.match(/\d+/g);
+  if (!props.color) {
+    props.color = colors.secondary_3;
+  }
  return (
    <Pressable
      disabled={disabled}
      onPress={props.onPress}
-      style={{
-        ...styles.button_template,
-        ...{
-          backgroundColor: disabled
-            ? rgb
-              ? `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.3)`
-              : "rgba(0, 0, 0, 0)"
-            : props.color,
-        },
-      }}
+      style={{ ...styles.button_template, ...{ backgroundColor: props.color } }}
    >
      {props.children}
    </Pressable>
--- a/src/components/Button/DrawerButton.tsx
+++ b/src/components/Button/DrawerButton.tsx
@ -1,5 +1,5 @@
 import * as React from "react";
-import { Text, Pressable, GestureResponderEvent } from "react-native";
+import { Pressable, GestureResponderEvent } from "react-native";
 import styles from "../../styles";

 export interface props {
--- a/src/components/DrawerSettings/CustomDrawerContent.tsx
+++ b/src/components/DrawerSettings/CustomDrawerContent.tsx
@ -31,12 +31,12 @@ export default function CustomDrawerContent(props: {}) {
            ...{ justifyContent: "center" },
          }}
        >
-          <AppIcon size={32} />
+          <AppIcon size={96} />
          <Text style={styles.text_white_medium}>Stud-E</Text>
        </View>

        <DrawerButton
-          color={colors.blue_2}
+          color={colors.secondary_3}
          onPress={async () => {
            dispatch(logout());
            await AsyncStorage.clear();
@ -57,11 +57,11 @@ export default function CustomDrawerContent(props: {}) {
            ...{ justifyContent: "center" },
          }}
        >
-          <AppIcon size={32} />
+          <AppIcon size={96} />
          <Text style={styles.text_white_medium}>Stud-E</Text>
        </View>
        <DrawerButton
-          color={colors.blue_3}
+          color={colors.secondary_2}
          onPress={() => {
            navigation.navigate("Home");
          }}
@ -70,16 +70,25 @@ export default function CustomDrawerContent(props: {}) {
          <Text style={styles.text_white_medium}>Home</Text>
        </DrawerButton>
        <DrawerButton
-          color={colors.blue_2}
+          color={colors.secondary_2}
          onPress={() => {
-            navigation.navigate("UserInfo");
+            navigation.navigate("User Info");
          }}
        >
          <UserIcon size={32} />
-          <Text style={styles.text_white_medium}>UserInfo</Text>
+          <Text style={styles.text_white_medium}>User Info</Text>
        </DrawerButton>
        <DrawerButton
-          color={colors.blue_2}
+          color={colors.secondary_2}
+          onPress={() => {
+            navigation.navigate("Subjects");
+          }}
+        >
+          <UserIcon size={32} />
+          <Text style={styles.text_white_medium}>Subjects</Text>
+        </DrawerButton>
+        <DrawerButton
+          color={colors.secondary_3}
          onPress={async () => {
            dispatch(logout());
            await AsyncStorage.clear();
@ -100,11 +109,11 @@ export default function CustomDrawerContent(props: {}) {
            ...{ justifyContent: "center" },
          }}
        >
-          <AppIcon size={32} />
+          <AppIcon size={96} />
          <Text style={styles.text_white_medium}>Stud-E</Text>
        </View>
        <DrawerButton
-          color={colors.blue_2}
+          color={colors.secondary_2}
          onPress={() => {
            navigation.navigate("Login");
          }}
@ -113,7 +122,7 @@ export default function CustomDrawerContent(props: {}) {
          <Text style={styles.text_white_medium}>Login</Text>
        </DrawerButton>
        <DrawerButton
-          color={colors.blue_2}
+          color={colors.secondary_2}
          onPress={() => {
            navigation.navigate("Register");
          }}
@ -125,7 +134,7 @@ export default function CustomDrawerContent(props: {}) {
        {/*
        Debug buttons for accessing revalidation and activation page
        <DrawerButton
-          color={colors.blue_2}
+          color={colors.secondary_2}
          onPress={() => {
            navigation.navigate("Revalidation");
          }}
@ -133,7 +142,7 @@ export default function CustomDrawerContent(props: {}) {
          <Text style={styles.text_white_medium}>Revalidation</Text>
        </DrawerButton>
        <DrawerButton
-          color={colors.blue_2}
+          color={colors.secondary_2}
          onPress={() => {
            navigation.navigate("Activation");
          }}
--- a/src/components/DrawerSettings/DrawerScreenSettings.tsx
+++ b/src/components/DrawerSettings/DrawerScreenSettings.tsx
@ -10,21 +10,19 @@ const DrawerScreenSettings: DrawerNavigationOptions = {
    fontSize: font_sizes.medium,
  },
  unmountOnBlur: true,
-  headerStyle: { backgroundColor: colors.login_color},
+  headerStyle: { backgroundColor: colors.primary_1 },
  headerTintColor: colors.text_default,
  drawerType: "slide",
  drawerLabelStyle: {
    color: colors.text_default,
  },
  drawerStyle: {
-    backgroundColor: colors.login_color,
+    backgroundColor: colors.primary_1,
    width: 260,
  },
  headerRight: () => (
-    <View
-      style={{ flexDirection: "row", marginRight: 16, alignItems: "center" }}
-    >
-      <AppIcon size={32} />
+    <View style={{ flexDirection: "row", alignItems: "center" }}>
+      <AppIcon size={96} />
    </View>
  ),
 };
--- a/src/icons/AppIcon/AppIcon.tsx
+++ b/src/icons/AppIcon/AppIcon.tsx
@ -1,20 +1,13 @@
 import * as React from "react";
 import { IconProps } from "../../interfaces/Interfaces";
-
-import { Svg, Path } from "react-native-svg";
-import { colors } from "../../styles";
-
+import { Image } from "react-native";
 export default function AppIcon(props: IconProps) {
  return (
    <>
-      <Svg
-        fill={colors.icon_color}
-        height={props.size + "px"}
-        width={props.size + "px"}
-        viewBox="0 0 375.775 375.775"
-      >
-        <Path d="M187.886,375.775c-16.216,0-29.409-13.193-29.409-29.411s13.193-29.412,29.409-29.412c16.218,0,29.412,13.194,29.412,29.412 S204.104,375.775,187.886,375.775z M187.886,332.952c-7.394,0-13.409,6.017-13.409,13.412c0,7.395,6.015,13.411,13.409,13.411 c7.395,0,13.412-6.017,13.412-13.411C201.298,338.969,195.281,332.952,187.886,332.952z M244.851,342.665 c-3.207,0-6.233-1.941-7.461-5.11c-1.597-4.12,0.449-8.754,4.568-10.351c40.127-15.554,71.73-47.612,86.706-87.957 c1.537-4.142,6.142-6.253,10.284-4.716s6.253,6.142,4.716,10.284c-16.568,44.633-51.531,80.101-95.924,97.307 C246.79,342.49,245.812,342.665,244.851,342.665z M130.671,342.665c-0.961,0-1.939-0.174-2.889-0.543 c-44.393-17.206-79.356-52.674-95.925-97.307c-1.538-4.143,0.574-8.746,4.716-10.284c4.144-1.538,8.746,0.573,10.284,4.716 c14.977,40.345,46.58,72.403,86.707,87.957c4.12,1.597,6.165,6.23,4.568,10.351C136.904,340.724,133.877,342.665,130.671,342.665z M196.589,305.682h-17.403c-25.12,0-36.188-20.112-42.33-35.241l-2.277-5.612c-1.661-4.095,0.312-8.76,4.406-10.421 c4.095-1.662,8.759,0.312,10.42,4.405l2.276,5.612c3.44,8.475,7.034,14.579,11.16,18.661l18.583-25.466 c1.506-2.063,3.907-3.284,6.462-3.284c2.555,0,4.956,1.22,6.462,3.284l18.585,25.465c4.126-4.082,7.719-10.187,11.159-18.662 l2.277-5.611c1.661-4.095,6.327-6.064,10.421-4.404c4.094,1.662,6.066,6.327,4.404,10.422l-2.277,5.611 C232.778,285.568,221.71,305.682,196.589,305.682z M177.857,289.652c0.438,0.02,0.88,0.029,1.329,0.029h17.402 c0.45,0,0.892-0.01,1.331-0.029l-10.031-13.745L177.857,289.652z M113.951,241.785c-1.002,0-2.02-0.189-3.005-0.589l-5.611-2.277 c-15.129-6.142-35.242-17.21-35.242-42.33v-17.401c0-25.12,20.113-36.189,35.241-42.33l5.612-2.278 c4.092-1.661,8.759,0.311,10.421,4.404c1.662,4.095-0.31,8.76-4.404,10.422l-5.611,2.277c-8.475,3.439-14.579,7.032-18.662,11.158 l25.467,18.585c2.064,1.506,3.284,3.907,3.284,6.462s-1.22,4.956-3.284,6.462l-25.467,18.584c4.082,4.126,10.187,7.72,18.662,11.159 l5.611,2.277c4.094,1.662,6.066,6.327,4.404,10.422C120.105,239.9,117.111,241.785,113.951,241.785z M86.123,177.855 c-0.02,0.438-0.03,0.881-0.03,1.33v17.403c0,0.449,0.01,0.893,0.03,1.33l13.747-10.031L86.123,177.855z M261.823,241.785 c-3.161,0-6.154-1.885-7.416-4.994c-1.661-4.094,0.311-8.76,4.405-10.421l5.612-2.277c8.475-3.44,14.579-7.033,18.661-11.159 l-25.467-18.584c-2.064-1.506-3.284-3.907-3.284-6.462s1.22-4.956,3.284-6.462l25.466-18.585 c-4.082-4.125-10.187-7.719-18.661-11.158l-5.611-2.277c-4.094-1.661-6.066-6.327-4.405-10.421s6.328-6.064,10.421-4.405 l5.612,2.277c15.129,6.142,35.242,17.21,35.242,42.329v17.403c0,25.12-20.112,36.188-35.241,42.329l-5.613,2.278 C263.843,241.596,262.825,241.785,261.823,241.785z M275.906,187.888l13.746,10.031c0.02-0.438,0.03-0.881,0.03-1.33v-17.401 c0-0.449-0.01-0.894-0.03-1.332L275.906,187.888z M346.363,217.299c-16.217,0-29.411-13.193-29.411-29.41 c0-16.218,13.194-29.412,29.411-29.412c16.218,0,29.412,13.194,29.412,29.412C375.775,204.105,362.581,217.299,346.363,217.299z M346.363,174.477c-7.395,0-13.411,6.017-13.411,13.412c0,7.395,6.016,13.41,13.411,13.41c7.395,0,13.412-6.016,13.412-13.41 C359.775,180.493,353.758,174.477,346.363,174.477z M29.411,217.299c-16.217,0-29.41-13.193-29.41-29.41 c0-16.218,13.193-29.412,29.41-29.412c16.217,0,29.411,13.194,29.411,29.412C58.822,204.105,45.628,217.299,29.411,217.299z M29.411,174.477c-7.395,0-13.41,6.017-13.41,13.412c0,7.395,6.016,13.41,13.41,13.41c7.395,0,13.411-6.016,13.411-13.41 C42.822,180.493,36.806,174.477,29.411,174.477z M336.165,140.768c-3.249,0-6.304-1.993-7.501-5.218 c-14.976-40.345-46.579-72.403-86.706-87.957c-4.12-1.597-6.165-6.23-4.568-10.351c1.596-4.119,6.231-6.168,10.351-4.567 c44.393,17.206,79.355,52.673,95.924,97.307c1.538,4.143-0.574,8.747-4.716,10.284C338.03,140.606,337.089,140.768,336.165,140.768z M39.356,140.768c-0.925,0-1.865-0.161-2.783-0.502c-4.142-1.538-6.253-6.143-4.716-10.284 c16.569-44.634,51.532-80.101,95.925-97.307c4.119-1.596,8.753,0.448,10.351,4.567c1.597,4.12-0.449,8.754-4.568,10.351 c-40.126,15.554-71.73,47.612-86.707,87.957C45.66,138.773,42.604,140.768,39.356,140.768z M141.99,121.957 c-1.001,0-2.02-0.189-3.004-0.589c-4.094-1.661-6.067-6.326-4.406-10.421l2.276-5.611c6.142-15.13,17.211-35.243,42.33-35.243 h17.402c25.121,0,36.189,20.113,42.33,35.242l2.277,5.611c1.662,4.095-0.31,8.76-4.404,10.422c-4.096,1.659-8.76-0.312-10.421-4.404 l-2.277-5.611c-3.44-8.476-7.033-14.58-11.159-18.663l-18.585,25.466c-1.506,2.063-3.907,3.284-6.462,3.284l0,0 c-2.555,0-4.957-1.221-6.462-3.284l-18.583-25.466c-4.126,4.082-7.72,10.188-11.16,18.663l-2.276,5.61 C148.145,120.071,145.15,121.957,141.99,121.957z M177.857,86.122l10.031,13.746l10.031-13.746c-0.438-0.02-0.881-0.029-1.33-0.029 h-17.403C178.737,86.093,178.294,86.103,177.857,86.122z M187.886,58.822c-16.216,0-29.409-13.193-29.409-29.411S171.67,0,187.886,0 c16.218,0,29.412,13.193,29.412,29.411S204.104,58.822,187.886,58.822z M187.886,16c-7.394,0-13.409,6.017-13.409,13.411 s6.015,13.411,13.409,13.411c7.395,0,13.412-6.017,13.412-13.411S195.281,16,187.886,16z"></Path>
-      </Svg>
+      <Image
+        style={{ height: props.size, width: props.size, marginHorizontal: -16 }}
+        source={require("../../img/app_icon_light.png")}
+      />
    </>
  );
 }
--- a/src/icons/DropdownIcon/DropdownIcon.tsx
+++ b/src/icons/DropdownIcon/DropdownIcon.tsx
@ -1,9 +1,7 @@
 import * as React from "react";
 import { IconProps } from "../../interfaces/Interfaces";
-
 import { Svg, Path } from "react-native-svg";
 import { colors } from "../../styles";
-import finalPropsSelectorFactory from "react-redux/es/connect/selectorFactory";

 export default function DropdownIcon(props: IconProps) {
  return (
--- a/src/img/app_icon_dark.png
+++ b/src/img/app_icon_dark.png
--- a/src/img/app_icon_light.png
+++ b/src/img/app_icon_light.png
--- a/src/routes/UserInfo/image/3135715.png
+++ b/src/routes/UserInfo/image/3135715.png
--- a/src/interfaces/Interfaces.tsx
+++ b/src/interfaces/Interfaces.tsx
@ -47,26 +47,86 @@ export interface ActivationParams {
  token: string;
 }

-export interface SemesterParams {
+export interface OptionType {
+  label: string;
+  value: string;
+}
+
+// Semester
+export interface Semester {
  id: string;
  name: string;
  shortname: string;
 }

-export interface YearLevelParams {
+export type Semesters = Array<Semester>;
+
+export type SemesterParams = [boolean, Semesters];
+
+// Year Level
+export interface YearLevel {
  id: string;
  name: string;
  shortname: string;
 }

-export interface CourseParams {
+export type YearLevels = Array<YearLevel>;
+
+export type YearLevelParams = [boolean, YearLevels];
+
+// Course
+export interface Course {
  id: string;
  name: string;
  shortname: string;
 }
+export type Courses = Array<Course>;
+export type CourseParams = [boolean, Courses];
+
+// Subject
+export interface Subject {
+  name: string;
+  code: string;
+  // courses: any[]; // To-do
+  // year_levels: any[]; // To-do
+  // semesters: any[]; // To-do
+}
+
+export type Subjects = Array<Subject>;
+export type SubjectParams = [boolean, Subjects];
+
+// For dropdown menu

 export interface OnboardingParams {
  year_level: string;
  course: string;
  semester: string;
 }
+
+export interface PatchStudentData {
+  course?: string | null;
+  first_name?: string | null;
+  last_name?: string | null;
+  semester?: string | null;
+  subjects?: any[] | null; // To-do, replace 'any' with your actual type
+  year_level?: string | null;
+}
+
+export interface StudentData {
+  first_name: string;
+  last_name: string;
+  email: string;
+  avatar: string;
+  student_id_number: string;
+  is_banned: boolean;
+  semester: string;
+  semester_shortname: string;
+  course: string;
+  course_shortname: string;
+  year_level: string;
+  yearlevel_shortname: string;
+  subjects: any[]; // To-do
+  username: string;
+}
+
+export type UserInfoParams = [boolean, StudentData];
--- a/src/routes/Activation/Activation.tsx
+++ b/src/routes/Activation/Activation.tsx
@ -53,7 +53,7 @@ export default function Activation() {
            marginBottom: 16,
            borderRadius: 4,
            width: "90%",
-            backgroundColor: colors.blue_1,
+            backgroundColor: colors.secondary_1,
          }}
        />
        <Text style={styles.text_white_large}>Activation</Text>
@ -61,7 +61,7 @@ export default function Activation() {
        <ActivityIndicator
          animating={loading}
          size={96}
-          color={colors.blue_1}
+          color={colors.secondary_1}
        />
        <Text style={styles.text_white_medium}>{state}</Text>
        <Text style={styles.text_white_tiny}>{uid + "\n" + token}</Text>
--- a/src/routes/Home/Home.tsx
+++ b/src/routes/Home/Home.tsx
@ -1,4 +1,4 @@
-import styles from "../../styles";
+import styles, { Viewport } from "../../styles";
 import { View, Text } from "react-native";
 import { useSelector } from "react-redux";
 import { RootState } from "../../features/redux/Store/Store";
@ -9,7 +9,6 @@ import * as Location from "expo-location";
 import GetDistance from "../../components/GetDistance/GetDistance";
 import Button from "../../components/Button/Button";
 import { colors } from "../../styles";
-import { startActivityAsync, ActivityAction } from "expo-intent-launcher";

 type LocationType = Location.LocationObject;
 export default function Home() {
@ -18,47 +17,59 @@ export default function Home() {
  const [feedback, setFeedback] = useState(
    "To continue, please allow Stud-E permission to location services"
  );
-
-  async function requestLocation() {
-    let { status } = await Location.requestForegroundPermissionsAsync();
-    if (status === "granted") {
-      getLocation();
-      return;
-    } else if (status === "denied") {
-      setFeedback("Stud-E requires location services to function");
-      setTimeout(() => {
-        startActivityAsync(ActivityAction.LOCATION_SOURCE_SETTINGS);
-      }, 3000);
-      console.log("Location Permission denied");
-    }
-  }
-
-  async function getLocation() {
-    let location = await Location.getCurrentPositionAsync({});
-    setLocation(location);
-    let dist = GetDistance(
-      location.coords.latitude,
-      location.coords.longitude,
-      8.4857,
-      124.6565
-    );
-    setDist(Math.round(dist));
-  }
-  useEffect(() => {
-    requestLocation();
-  }, []);
-
  const ustpCoords = {
    latitude: 8.4857,
    longitude: 124.6565,
    latitudeDelta: 0.000235,
    longitudeDelta: 0.000067,
  };
+
+  async function requestLocation() {
+    let { status } = await Location.requestForegroundPermissionsAsync();
+    if (status !== "granted") {
+      setFeedback(
+        "Permission to access location was denied. Please allow permission"
+      );
+      return;
+    }
+    if (status == "granted") {
+      let location = await Location.getCurrentPositionAsync({});
+      if (location) {
+        setLocation(location);
+        getDistance(location);
+      }
+    }
+  }
+  useEffect(() => {
+    requestLocation();
+  }, [location]);
+
+  async function getDistance(location: LocationType) {
+    let dist = GetDistance(
+      location.coords.latitude,
+      location.coords.longitude,
+      8.4857, // LatitudeDelta
+      124.6565 // LongitudeDelta
+    );
+    setDist(Math.round(dist));
+  }
+
  function CustomMap() {
-    if (dist !== null && location !== null) {
+    if (dist && location) {
      if (dist <= 1.5) {
        // Just switch this condition for map debugging
-        return <MapView style={styles.map} initialRegion={ustpCoords} />;
+        return (
+          <MapView
+            style={styles.map}
+            initialRegion={ustpCoords}
+            showsUserLocation={true}
+            scrollEnabled={false}
+            zoomEnabled={false}
+            rotateEnabled={false}
+            followsUserLocation={true}
+            minZoomLevel={15}
+          />
+        );
      } else {
        return (
          <View>
@ -68,8 +79,8 @@ export default function Home() {
            </Text>
            <MapView
              style={{
-                height: 256,
-                width: 256,
+                height: Viewport.height * 0.5,
+                width: Viewport.width * 0.8,
                alignSelf: "center",
              }}
              showsUserLocation={true}
@ -95,14 +106,13 @@ export default function Home() {
      return (
        <AnimatedContainer>
          <Text style={styles.text_white_medium}>{feedback}</Text>
-          <Button onPress={() => requestLocation()} color={colors.blue_3}>
-            <Text style={styles.text_white_small}>Allow Access</Text>
+          <Button onPress={() => requestLocation()}>
+            <Text style={styles.text_white_medium}>Allow Access</Text>
          </Button>
        </AnimatedContainer>
      );
    }
  }
-  const creds = useSelector((state: RootState) => state.user.user);
  return (
    <View style={styles.background}>
      <AnimatedContainer>
--- a/src/routes/Login/Login.tsx
+++ b/src/routes/Login/Login.tsx
@ -30,25 +30,17 @@ export default function Login() {
  const [creds, setCreds] = useState({
    username: "",
    password: "",
-    error: "",
  });
+  const [error, setError] = useState("");
  return (
    <View style={styles.background}>
      <AnimatedContainer>
-      <View style={styles.flex_row}>
+        <View style={styles.flex_row}>
          <LoginIcon size={32} />
          <Text style={styles.text_white_large}>Student Login</Text>
        </View>
        <View style={{ paddingVertical: 8 }} />
-        <View
-          style={{
-            paddingVertical: 4,
-            marginBottom: 16,
-            borderRadius: 4,
-            width: "90%",
-            backgroundColor: colors.head,
-          }}
-        />
+        <View style={styles.padding} />
        <TextInput
          style={styles.text_input}
          placeholder="Username"
@ -75,7 +67,7 @@ export default function Login() {
          }}
        />
        <View style={{ paddingVertical: 2 }} />
-        <Text style={styles.text_white_small}>{creds.error}</Text>
+        <Text style={styles.text_white_small}>{error}</Text>
        <View style={{ paddingVertical: 4 }} />
        <Button
          onPress={async () => {
@ -102,20 +94,18 @@ export default function Login() {
                }
                console.log(JSON.stringify(user_info));
              } else {
-                setUser({
-                  ...creds,
-                  error: ParseLoginError(JSON.stringify(result[1])),
-                });
+                console.log("heh", ParseLoginError(JSON.stringify(result[1])));
+                setError(ParseLoginError(JSON.stringify(result[1])));
              }
            });
          }}
-          color={colors.login_color}
+          color={colors.secondary_3}
        >
          <Text style={styles.text_white_small}>Login</Text>
        </Button>
        <Button
          onPress={() => navigation.navigate("Register")}
-          color={colors.reg_color}
+          color={colors.secondary_3}
        >
          <Text style={styles.text_white_small}>Register</Text>
        </Button>
--- a/src/routes/Onboarding/Onboarding.tsx
+++ b/src/routes/Onboarding/Onboarding.tsx
@ -3,17 +3,16 @@ import styles from "../../styles";
 import { View, Text } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import {
-  CourseParams,
+  Course,
  RootDrawerParamList,
-  SemesterParams,
-  YearLevelParams,
+  Semester,
+  YearLevel,
 } from "../../interfaces/Interfaces";
 import { colors } from "../../styles";
-import { AnimatePresence, MotiView } from "moti";
-import { useEffect, useState } from "react";
+import { MotiView } from "moti";
+import { useState } from "react";
 import Button from "../../components/Button/Button";
 import DropDownPicker from "react-native-dropdown-picker";
-import isStringEmpty from "../../components/IsStringEmpty/IsStringEmpty";
 import { useQuery } from "@tanstack/react-query";
 import {
  GetCourses,
@ -24,6 +23,8 @@ import {
 import { useDispatch } from "react-redux";
 import { unsetOnboarding } from "../../features/redux/slices/StatusSlice/StatusSlice";
 import { setUser } from "../../features/redux/slices/UserSlice/UserSlice";
+import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
+import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
 export default function Onboarding() {
  const navigation = useNavigation<RootDrawerParamList>();
  const dispatch = useDispatch();
@ -40,7 +41,7 @@ export default function Onboarding() {
    queryKey: ["semesters"],
    queryFn: GetSemesters,
    onSuccess: (data) => {
-      let semesters = data.map((item: SemesterParams) => ({
+      let semesters = data[1].map((item: Semester) => ({
        label: item.name,
        value: item.name,
      }));
@ -58,7 +59,7 @@ export default function Onboarding() {
    queryKey: ["year_levels"],
    queryFn: GetYearLevels,
    onSuccess: (data) => {
-      let year_levels = data.map((item: YearLevelParams) => ({
+      let year_levels = data[1].map((item: YearLevel) => ({
        label: item.name,
        value: item.name,
      }));
@ -79,7 +80,7 @@ export default function Onboarding() {
    queryKey: ["courses"],
    queryFn: GetCourses,
    onSuccess: (data) => {
-      let courses = data.map((item: CourseParams) => ({
+      let courses = data[1].map((item: Course) => ({
        label: item.name,
        value: item.name,
      }));
@ -97,7 +98,7 @@ export default function Onboarding() {
  }
  return (
    <View style={styles.background}>
-      <View style={styles.container}>
+      <AnimatedContainerNoScroll>
        <MotiView
          from={{ opacity: 0 }}
          animate={{ opacity: 1 }}
@ -112,7 +113,7 @@ export default function Onboarding() {
            marginBottom: 16,
            borderRadius: 4,
            width: "90%",
-            backgroundColor: colors.blue_1,
+            backgroundColor: colors.secondary_1,
          }}
        />
        <View style={{ paddingVertical: 4 }} />
@ -144,34 +145,18 @@ export default function Onboarding() {
              setSemesterOpen(false);
              setYearLevelOpen(false);
            }}
+            style={styles.input}
            setValue={setSelectedCourse}
            placeholder="Choose your course"
-            containerStyle={{
-              ...styles.dropdown_template,
-              ...{ zIndex: 3000 },
+            containerStyle={{ zIndex: 3000 }}
+            textStyle={{
+              ...styles.text_white_small_bold,
+              ...{ textAlign: "center" },
            }}
-            dropDownContainerStyle={{ backgroundColor: "white" }}
+            dropDownContainerStyle={{ backgroundColor: colors.primary_2 }}
          />
          <DropDownPicker
            zIndex={2000}
-            open={semesterOpen}
-            value={selected_semester}
-            items={semesters}
-            setOpen={(open) => {
-              setSemesterOpen(open);
-              setCourseOpen(false);
-              setYearLevelOpen(false);
-            }}
-            setValue={setSelectedSemester}
-            placeholder="Current semester"
-            containerStyle={{
-              ...styles.dropdown_template,
-              ...{ zIndex: 2000 },
-            }}
-            dropDownContainerStyle={{ backgroundColor: "white" }}
-          />
-          <DropDownPicker
-            zIndex={1000}
            open={yearLevelOpen}
            value={selected_yearlevel}
            items={year_levels}
@ -180,22 +165,53 @@ export default function Onboarding() {
              setSemesterOpen(false);
              setCourseOpen(false);
            }}
+            style={styles.input}
            setValue={setSelectedYearLevel}
            placeholder="Your Year Level"
-            containerStyle={{
-              ...styles.dropdown_template,
-              ...{ zIndex: 1000 },
+            containerStyle={{ zIndex: 2000 }}
+            textStyle={{
+              ...styles.text_white_small_bold,
+              ...{ textAlign: "center" },
            }}
-            dropDownContainerStyle={{ backgroundColor: "white" }}
+            dropDownContainerStyle={{ backgroundColor: colors.primary_2 }}
+          />
+          <DropDownPicker
+            zIndex={1000}
+            open={semesterOpen}
+            value={selected_semester}
+            items={semesters}
+            setOpen={(open) => {
+              setSemesterOpen(open);
+              setCourseOpen(false);
+              setYearLevelOpen(false);
+            }}
+            style={styles.input}
+            setValue={setSelectedSemester}
+            placeholder="Current semester"
+            containerStyle={{ zIndex: 1000 }}
+            textStyle={{
+              ...styles.text_white_small_bold,
+              ...{ textAlign: "center" },
+            }}
+            dropDownContainerStyle={{ backgroundColor: colors.primary_2 }}
          />
        </MotiView>
+        <Text style={styles.text_white_small}>{error}</Text>
        <MotiView
-          from={{ opacity: 0 }}
-          animate={{ opacity: 1, zIndex: -1 }}
+          from={{
+            opacity: 0,
+            zIndex: -1,
+          }}
+          animate={{
+            opacity: 1,
+            zIndex: -1,
+          }}
          transition={{ type: "timing", duration: 400, delay: 1700 }}
-          style={styles.button_template}
+          style={{
+            ...styles.button_template,
+            ...{ padding: 0, backgroundColor: colors.secondary_3 },
+          }}
        >
-          <Text style={styles.text_white_small}>{error}</Text>
          <Button
            disabled={
              !selected_yearlevel || !selected_course || !selected_semester
@ -218,12 +234,11 @@ export default function Onboarding() {
                setError(result[1]);
              }
            }}
-            color={colors.blue_3}
          >
            <Text style={styles.text_white_small}>Proceed</Text>
          </Button>
        </MotiView>
-      </View>
+      </AnimatedContainerNoScroll>
    </View>
  );
 }
--- a/src/routes/Register/Register.tsx
+++ b/src/routes/Register/Register.tsx
@ -34,25 +34,16 @@ export default function Register() {
  return (
    <View style={styles.background}>
      <AnimatedContainer>
-      <View style={styles.flex_row}>
+        <View style={styles.flex_row}>
          <SignupIcon size={32} />
          <Text style={styles.text_white_large}>Student Signup</Text>
-          <View style={{ paddingVertical: 8, }} />
+          <View style={{ paddingVertical: 8 }} />
        </View>
-        <View
-          style={{
-            paddingVertical: 4,
-            marginBottom: 16,
-            marginTop: 8,
-            borderRadius: 4,
-            width: "90%",
-            backgroundColor: colors.head,
-          }}
-        />
+        <View style={styles.padding} />
        <TextInput
          style={styles.text_input}
          placeholder="First Name"
-          placeholderTextColor="white"
+          placeholderTextColor={colors.text_default}
          value={user.first_name}
          onChange={(
            e: NativeSyntheticEvent<TextInputChangeEventData>
@ -64,7 +55,7 @@ export default function Register() {
        <TextInput
          style={styles.text_input}
          placeholder="Last Name"
-          placeholderTextColor="white"
+          placeholderTextColor={colors.text_default}
          value={user.last_name}
          onChange={(
            e: NativeSyntheticEvent<TextInputChangeEventData>
@ -76,7 +67,7 @@ export default function Register() {
        <TextInput
          style={styles.text_input}
          placeholder="USTP ID Number"
-          placeholderTextColor="white"
+          placeholderTextColor={colors.text_default}
          value={user.student_id_number}
          onChange={(
            e: NativeSyntheticEvent<TextInputChangeEventData>
@ -93,7 +84,7 @@ export default function Register() {
        <TextInput
          style={styles.text_input}
          placeholder="Username"
-          placeholderTextColor="white"
+          placeholderTextColor={colors.text_default}
          autoCapitalize={"none"}
          value={user.username}
          onChange={(
@ -106,7 +97,7 @@ export default function Register() {
        <TextInput
          style={styles.text_input}
          placeholder="Email"
-          placeholderTextColor="white"
+          placeholderTextColor={colors.text_default}
          autoCapitalize={"none"}
          value={user.email}
          onChange={(
@ -119,7 +110,7 @@ export default function Register() {
        <TextInput
          style={styles.text_input}
          placeholder="Password"
-          placeholderTextColor="white"
+          placeholderTextColor={colors.text_default}
          secureTextEntry={true}
          value={user.password}
          onChange={(
@ -167,7 +158,7 @@ export default function Register() {
            {
            }
          }}
-          color={colors.reg_color}
+          color={colors.secondary_3}
        >
          <Text style={styles.text_white_small}>Register</Text>
        </Button>
--- a/src/routes/Revalidation/Revalidation.tsx
+++ b/src/routes/Revalidation/Revalidation.tsx
@ -58,7 +58,7 @@ export default function Revalidation() {
    <View style={styles.background}>
      <AnimatedContainer>
        <View style={{ paddingVertical: 8 }} />
-        <ActivityIndicator size={96} color={colors.blue_1} />
+        <ActivityIndicator size={96} color={colors.secondary_1} />
        <Text style={styles.text_white_medium}>{state}</Text>
      </AnimatedContainer>
    </View>
--- a/src/routes/SubjectsPage/SubjectsPage.tsx
+++ b/src/routes/SubjectsPage/SubjectsPage.tsx
@ -0,0 +1,223 @@
+import * as React from "react";
+import styles from "../../styles";
+import {
+  View,
+  Text,
+  TextInput,
+  NativeSyntheticEvent,
+  TextInputChangeEventData,
+} from "react-native";
+import { useState } from "react";
+import {
+  SemesterParams,
+  UserInfoParams,
+  Semester,
+  SubjectParams,
+  Subject,
+  YearLevel,
+  Course,
+  OptionType,
+  Subjects,
+} from "../../interfaces/Interfaces";
+import Button from "../../components/Button/Button";
+import { Image } from "react-native";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  GetCourses,
+  GetSemesters,
+  GetSubjects,
+  GetYearLevels,
+  PatchUserInfo,
+  UserInfo,
+} from "../../components/Api/Api";
+import { colors } from "../../styles";
+import DropDownPicker from "react-native-dropdown-picker";
+import { ValueType } from "react-native-dropdown-picker";
+import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
+
+export default function SubjectsPage() {
+  const queryClient = useQueryClient();
+  // User Info
+  const [user, setUser] = useState({
+    first_name: "",
+    last_name: "",
+    year_level: "",
+    yearlevel_shortname: "",
+    semester: "",
+    semester_shortname: "",
+    course: "",
+    course_shortname: "",
+    avatar: "",
+    student_id_number: "",
+    subjects: [] as Subjects,
+  });
+  const [displayName, setDisplayName] = useState({
+    first_name: "",
+    last_name: "",
+  });
+  const StudentInfo = useQuery({
+    queryKey: ["user"],
+    queryFn: UserInfo,
+    onSuccess: (data: UserInfoParams) => {
+      //  console.log(data[1]);
+      setUser({
+        ...user,
+        first_name: data[1].first_name,
+        last_name: data[1].last_name,
+        year_level: data[1].year_level,
+        semester: data[1].semester,
+        course: data[1].course,
+        avatar: data[1].avatar,
+        student_id_number: data[1].student_id_number,
+        subjects: data[1].subjects,
+      });
+      setDisplayName({
+        first_name: data[1].first_name,
+        last_name: data[1].last_name,
+      });
+      setSelectedSubjects(user.subjects);
+    },
+  });
+  const mutation = useMutation({
+    mutationFn: PatchUserInfo,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["user"] });
+      queryClient.invalidateQueries({ queryKey: ["subjects"] });
+      setSelectedSubjects([]);
+    },
+  });
+
+  // Subjects
+
+  const [selected_subjects, setSelectedSubjects] = useState<any>([]);
+  const [subjectsOpen, setSubjectsOpen] = useState(false);
+  const [subjects, setSubjects] = useState<OptionType[]>([]);
+
+  const Subjects = useQuery({
+    enabled: StudentInfo.isFetched,
+    queryKey: ["subjects"],
+    queryFn: async () => {
+      let data;
+      if (StudentInfo.data) {
+        if (
+          StudentInfo.data[1].course_shortname &&
+          StudentInfo.data[1].yearlevel_shortname &&
+          StudentInfo.data[1].semester_shortname
+        ) {
+          data = await GetSubjects(
+            StudentInfo.data[1].course_shortname,
+            StudentInfo.data[1].yearlevel_shortname,
+            StudentInfo.data[1].semester_shortname
+          );
+        }
+      }
+      if (data) {
+        if (!data[0]) {
+          throw new Error("Error with query" + data[1]);
+        }
+        if (!data[1]) {
+          throw new Error("User has no course, year level, or semester!");
+        }
+        // console.log("Subjects available:", data[1]);
+      }
+      return data;
+    },
+    onSuccess: (data: SubjectParams) => {
+      let subjectsData = data[1].map((subject: Subject) => ({
+        label: subject.name,
+        value: subject.name,
+      }));
+      // Update the 'subjects' state
+      setSelectedSubjects(user.subjects);
+      setSubjects(subjectsData);
+    },
+  });
+
+  // Profile photo
+  function Avatar() {
+    if (user.avatar) {
+      return <Image source={{ uri: user.avatar }} style={styles.profile} />;
+    } else {
+      return (
+        <Image
+          source={require("../../img/user_profile_placeholder.png")}
+          style={{ ...styles.profile, ...{ marginRight: 48 } }}
+        />
+      );
+    }
+  }
+
+  return (
+    <View style={styles.background}>
+      <AnimatedContainerNoScroll>
+        <View style={styles.flex_row}>
+          <Avatar />
+          <Text style={{ ...styles.text_white_small, ...{ marginLeft: 16 } }}>
+            {(displayName.first_name || "Undefined") +
+              " " +
+              (displayName.last_name || "User") +
+              "\n" +
+              user.student_id_number}
+          </Text>
+        </View>
+
+        <View style={styles.padding} />
+        <View style={styles.flex_row}>
+          <View style={{ flex: 1 }}>
+            <Text style={styles.text_white_small_bold}>Subjects</Text>
+          </View>
+          <View style={{ flex: 3 }}>
+            <DropDownPicker
+              zIndex={1000}
+              multiple={true}
+              max={16}
+              open={subjectsOpen}
+              value={selected_subjects}
+              items={subjects}
+              setOpen={(open) => {
+                setSubjectsOpen(open);
+              }}
+              setValue={setSelectedSubjects}
+              placeholderStyle={{
+                ...styles.text_white_tiny_bold,
+                ...{ textAlign: "left" },
+              }}
+              placeholder="Select subjects"
+              multipleText="Select subjects"
+              style={styles.input}
+              textStyle={{
+                ...styles.text_white_tiny_bold,
+                ...{ textAlign: "left" },
+              }}
+              dropDownContainerStyle={{
+                backgroundColor: colors.primary_2,
+                borderWidth: 0,
+                zIndex: 1000,
+                maxHeight: 512,
+              }}
+              dropDownDirection="TOP"
+            />
+          </View>
+        </View>
+        <View style={{ zIndex: -1 }}>
+          <Button
+            color={colors.secondary_3}
+            onPress={() => {
+              if (subjectsOpen) {
+                setSelectedSubjects([]);
+                setSubjectsOpen(false);
+                mutation.mutate({
+                  subjects: selected_subjects,
+                });
+              }
+            }}
+          >
+            <Text style={styles.text_white_small}>
+              {subjectsOpen && StudentInfo.isSuccess ? "Save" : "Edit Subjects"}
+            </Text>
+          </Button>
+        </View>
+      </AnimatedContainerNoScroll>
+    </View>
+  );
+}
--- a/src/routes/UserInfo/UserInfo.tsx
+++ b/src/routes/UserInfo/UserInfo.tsx
@ -1,216 +0,0 @@
-import * as React from "react";
-import styles from "../../styles";
-import {
-  View,
-  Text,
-  TextInput,
-  NativeSyntheticEvent,
-  TextInputChangeEventData,
-} from "react-native";
-import { colors } from "../../styles";
-import { useState, useEffect } from "react";
-import Button from "../../components/Button/Button";
-import { useNavigation } from "@react-navigation/native";
-import { RootDrawerParamList } from "../../interfaces/Interfaces";
-import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
-import { TouchableOpacity, Image } from "react-native";
-import { ScrollView } from "react-native-gesture-handler";
-import SelectDropdown from "react-native-select-dropdown";
-import DropdownIcon from "../../icons/DropdownIcon/DropdownIcon";
-import { useQuery } from "react-query";
-import { UserInfo as GetUserInfo } from "../../components/Api/Api";
-import { err } from "react-native-svg/lib/typescript/xml";
-
-export default function UserInfo() {
-  const navigation = useNavigation<RootDrawerParamList>();
-  const [isEditable, setIsEditable] = useState(false);
-  const options = ["", "", "", ""];
-  const [isActive, setIsActive] = useState(false);
-  const toggleUserActive = () => {
-    setIsActive(!isActive);
-  };
-  //const dispatch = useDispatch();
-  // const creds = useSelector((state: RootState) => state.auth.creds);
-  const [user, setUser] = useState({
-    first_name: "",
-    last_name: "",
-    year_level: "",
-    semester: "",
-    course: "",
-  });
-  const { data, isLoading, error } = useQuery("user", UserInfo, {
-    retry: 0,
-    onSuccess: (data) => console.log(data),
-  });
-  if (!isLoading && !error) {
-    return (
-      <ScrollView style={styles.background}>
-        <AnimatedContainer>
-          <Text style={{ ...styles.text_white_medium, ...{ fontSize: 32 } }}>
-            Kurt Toledo
-          </Text>
-          <View>
-            <Image
-              source={require("./image/3135715.png")}
-              style={styles.profile}
-            />
-            <TouchableOpacity onPress={toggleUserActive} style={styles.button}>
-              <Text
-                style={[
-                  styles.text,
-                  isActive ? styles.activeText : styles.inactiveText,
-                ]}
-              >
-                Student {isActive ? "Active" : "Inactive"}
-              </Text>
-            </TouchableOpacity>
-          </View>
-          <View
-            style={{
-              paddingVertical: 4,
-              marginBottom: 16,
-              marginTop: 8,
-              borderRadius: 4,
-              width: "90%",
-              backgroundColor: colors.head,
-            }}
-          />
-          <View style={styles.formGroup}>
-            <View style={{ width: 70 }}>
-              <Text style={styles.text}>First Name</Text>
-            </View>
-            <View style={{ flex: 1 }}>
-              <TextInput
-                style={[styles.input, !isEditable && styles.input]}
-                editable={isEditable}
-                onChange={(
-                  e: NativeSyntheticEvent<TextInputChangeEventData>
-                ): void => {
-                  setUser({ ...user, first_name: e.nativeEvent.text });
-                }}
-              />
-            </View>
-          </View>
-          <View style={styles.formGroup}>
-            <View style={{ width: 70 }}>
-              <Text style={styles.text}>Last Name</Text>
-            </View>
-            <View style={{ flex: 1 }}>
-              <TextInput
-                style={[styles.input, !isEditable && styles.input]}
-                editable={isEditable}
-                onChange={(
-                  e: NativeSyntheticEvent<TextInputChangeEventData>
-                ): void => {
-                  setUser({ ...user, first_name: e.nativeEvent.text });
-                }}
-              />
-            </View>
-          </View>
-          <View
-            style={{
-              paddingVertical: 4,
-              marginBottom: 16,
-              marginTop: 8,
-              borderRadius: 4,
-              width: "90%",
-              backgroundColor: colors.head,
-            }}
-          />
-          <View style={styles.formGroup}>
-            <View style={{ width: 70 }}>
-              <Text style={styles.text}>Year Level</Text>
-            </View>
-            <View style={{ flex: 1 }}>
-              <TextInput
-                style={[styles.input, !isEditable && styles.input]}
-                editable={isEditable}
-                onChange={(
-                  e: NativeSyntheticEvent<TextInputChangeEventData>
-                ): void => {
-                  setUser({ ...user, first_name: e.nativeEvent.text });
-                }}
-              />
-            </View>
-          </View>
-          <View style={styles.formGroup}>
-            <View style={{ width: 70 }}>
-              <Text style={styles.text}>Semester</Text>
-            </View>
-            <View style={{ flex: 1 }}>
-              <TextInput
-                style={[styles.input, !isEditable && styles.input]}
-                editable={isEditable}
-                onChange={(
-                  e: NativeSyntheticEvent<TextInputChangeEventData>
-                ): void => {
-                  setUser({ ...user, first_name: e.nativeEvent.text });
-                }}
-              />
-            </View>
-          </View>
-          <View style={styles.formGroup}>
-            <View style={{ width: 70 }}>
-              <Text style={styles.text}>Course</Text>
-            </View>
-            <View style={{ flex: 1 }}>
-              <TextInput
-                style={[styles.input, !isEditable && styles.input]}
-                editable={isEditable}
-                onChange={(
-                  e: NativeSyntheticEvent<TextInputChangeEventData>
-                ): void => {
-                  setUser({ ...user, first_name: e.nativeEvent.text });
-                }}
-              />
-            </View>
-          </View>
-          <View
-            style={{
-              paddingVertical: 4,
-              marginBottom: 16,
-              marginTop: 8,
-              borderRadius: 4,
-              width: "90%",
-              backgroundColor: colors.head,
-            }}
-          />
-          <View style={styles.formGroup}>
-            <View style={{ width: 80 }}>
-              <Text style={styles.text}>Subject</Text>
-            </View>
-            <View style={{ flex: 1 }}>
-              <SelectDropdown
-                onSelect={(selectedItem, index) => {
-                  console.log(selectedItem, index);
-                }}
-                renderDropdownIcon={() => <DropdownIcon size={32} />}
-                buttonTextStyle={{
-                  color: "white",
-                }}
-                dropdownStyle={{
-                  backgroundColor: "#E3963E",
-                }}
-                data={options}
-                buttonStyle={{
-                  width: "90%",
-                  marginLeft: 10,
-                  backgroundColor: "#E3963E",
-                  borderRadius: 8,
-                }}
-              />
-            </View>
-          </View>
-          <TouchableOpacity
-            style={styles.button_template}
-            onPress={() => setIsEditable(!isEditable)}
-          >
-            <Text style={styles.text_white_small}>
-              {isEditable ? "Save" : "Edit Profile"}
-            </Text>
-          </TouchableOpacity>
-        </AnimatedContainer>
-      </ScrollView>
-    );
-  }
-}
--- a/src/routes/UserInfoPage/UserInfoPage.tsx
+++ b/src/routes/UserInfoPage/UserInfoPage.tsx
@ -0,0 +1,339 @@
+import * as React from "react";
+import styles from "../../styles";
+import {
+  View,
+  Text,
+  TextInput,
+  NativeSyntheticEvent,
+  TextInputChangeEventData,
+} from "react-native";
+import { useState } from "react";
+import {
+  SemesterParams,
+  UserInfoParams,
+  Semester,
+  SubjectParams,
+  Subject,
+  YearLevel,
+  Course,
+  OptionType,
+  Subjects,
+} from "../../interfaces/Interfaces";
+import Button from "../../components/Button/Button";
+import { Image } from "react-native";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  GetCourses,
+  GetSemesters,
+  GetSubjects,
+  GetYearLevels,
+  PatchUserInfo,
+  UserInfo,
+} from "../../components/Api/Api";
+import { colors } from "../../styles";
+import DropDownPicker from "react-native-dropdown-picker";
+import { ValueType } from "react-native-dropdown-picker";
+import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
+
+export default function UserInfoPage() {
+  const queryClient = useQueryClient();
+  // User Info
+  const [user, setUser] = useState({
+    first_name: "",
+    last_name: "",
+    year_level: "",
+    yearlevel_shortname: "",
+    semester: "",
+    semester_shortname: "",
+    course: "",
+    course_shortname: "",
+    avatar: "",
+    student_id_number: "",
+  });
+  const [displayName, setDisplayName] = useState({
+    first_name: "",
+    last_name: "",
+  });
+  const StudentInfo = useQuery({
+    queryKey: ["user"],
+    queryFn: UserInfo,
+    onSuccess: (data: UserInfoParams) => {
+      //  console.log(data[1]);
+      setUser({
+        ...user,
+        first_name: data[1].first_name,
+        last_name: data[1].last_name,
+        year_level: data[1].year_level,
+        semester: data[1].semester,
+        course: data[1].course,
+        avatar: data[1].avatar,
+        student_id_number: data[1].student_id_number,
+      });
+      setDisplayName({
+        first_name: data[1].first_name,
+        last_name: data[1].last_name,
+      });
+      setSelectedCourse(data[1].course);
+      setSelectedSemester(data[1].semester);
+      setSelectedYearLevel(data[1].year_level);
+    },
+  });
+  const mutation = useMutation({
+    mutationFn: PatchUserInfo,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["user"] });
+      queryClient.invalidateQueries({ queryKey: ["subjects"] });
+    },
+  });
+
+  // Semester
+  const [selected_semester, setSelectedSemester] = useState("");
+  const [semesterOpen, setSemesterOpen] = useState(false);
+  const [semesters, setSemesters] = useState<OptionType[]>([]);
+  const Semesters = useQuery({
+    queryKey: ["semesters"],
+    queryFn: GetSemesters,
+    onSuccess: (data: SemesterParams) => {
+      let semestersData = data[1].map((semester: Semester) => ({
+        label: semester.name,
+        value: semester.name,
+        shortname: semester.shortname,
+      }));
+      // Update the 'semesters' state
+      setSemesters(semestersData);
+    },
+  });
+
+  // Year Level
+  const [selected_yearlevel, setSelectedYearLevel] = useState("");
+  const [yearLevelOpen, setYearLevelOpen] = useState(false);
+  const [year_levels, setYearLevels] = useState<OptionType[]>([]);
+  const yearlevel_query = useQuery({
+    queryKey: ["year_levels"],
+    queryFn: GetYearLevels,
+    onSuccess: (data) => {
+      let year_levels = data[1].map((yearlevel: YearLevel) => ({
+        label: yearlevel.name,
+        value: yearlevel.name,
+      }));
+      setYearLevels(year_levels);
+    },
+  });
+
+  // Course
+  const [selected_course, setSelectedCourse] = useState("");
+  const [courseOpen, setCourseOpen] = useState(false);
+  const [courses, setCourses] = useState<OptionType[]>([]);
+  const course_query = useQuery({
+    queryKey: ["courses"],
+    queryFn: GetCourses,
+    onSuccess: (data) => {
+      let courses = data[1].map((course: Course) => ({
+        label: course.name,
+        value: course.name,
+      }));
+      setCourses(courses);
+    },
+  });
+  // Toggle editing of profile
+  const [isEditable, setIsEditable] = useState(false);
+  // Profile photo
+  function Avatar() {
+    if (user.avatar) {
+      return <Image source={{ uri: user.avatar }} style={styles.profile} />;
+    } else {
+      return (
+        <Image
+          source={require("../../img/user_profile_placeholder.png")}
+          style={{ ...styles.profile, ...{ marginRight: 48 } }}
+        />
+      );
+    }
+  }
+
+  return (
+    <View style={styles.background}>
+      <AnimatedContainerNoScroll>
+        <View style={styles.flex_row}>
+          <Avatar />
+          <Text style={{ ...styles.text_white_small, ...{ marginLeft: 16 } }}>
+            {(displayName.first_name || "Undefined") +
+              " " +
+              (displayName.last_name || "User") +
+              "\n" +
+              user.student_id_number}
+          </Text>
+        </View>
+
+        <View style={styles.padding} />
+        <View style={styles.flex_row}>
+          <View style={{ flex: 1 }}>
+            <Text style={styles.text_white_small_bold}>First Name</Text>
+          </View>
+          <View style={{ flex: 3 }}>
+            <TextInput
+              style={styles.input}
+              editable={isEditable}
+              onChange={(
+                e: NativeSyntheticEvent<TextInputChangeEventData>
+              ): void => {
+                setUser({ ...user, first_name: e.nativeEvent.text });
+              }}
+              value={user.first_name}
+            />
+          </View>
+        </View>
+        <View style={styles.flex_row}>
+          <View style={{ flex: 1 }}>
+            <Text style={styles.text_white_small_bold}>Last Name</Text>
+          </View>
+          <View style={{ flex: 3 }}>
+            <TextInput
+              style={styles.input}
+              editable={isEditable}
+              onChange={(
+                e: NativeSyntheticEvent<TextInputChangeEventData>
+              ): void => {
+                setUser({ ...user, last_name: e.nativeEvent.text });
+              }}
+              value={user.last_name}
+            />
+          </View>
+        </View>
+        <View style={styles.flex_row}>
+          <View style={{ flex: 1 }}>
+            <Text style={styles.text_white_small_bold}>Year Level</Text>
+          </View>
+          <View style={{ flex: 3 }}>
+            <DropDownPicker
+              disabled={!isEditable}
+              zIndex={4000}
+              open={yearLevelOpen}
+              value={selected_yearlevel}
+              items={year_levels}
+              setOpen={(open) => {
+                setYearLevelOpen(open);
+                setSemesterOpen(false);
+                setCourseOpen(false);
+              }}
+              setValue={setSelectedYearLevel}
+              placeholder={user.year_level}
+              placeholderStyle={{
+                ...styles.text_white_tiny_bold,
+                ...{ textAlign: "left" },
+              }}
+              style={styles.input}
+              textStyle={{
+                ...styles.text_white_tiny_bold,
+                ...{ textAlign: "left" },
+              }}
+              dropDownContainerStyle={{
+                backgroundColor: colors.primary_2,
+                zIndex: 4000,
+                borderWidth: 0,
+              }}
+              dropDownDirection="TOP"
+            />
+          </View>
+        </View>
+        <View style={styles.flex_row}>
+          <View style={{ flex: 1 }}>
+            <Text style={styles.text_white_small_bold}>Semester</Text>
+          </View>
+          <View style={{ flex: 3 }}>
+            <DropDownPicker
+              disabled={!isEditable}
+              zIndex={3000}
+              open={semesterOpen}
+              value={selected_semester}
+              items={semesters}
+              setOpen={(open) => {
+                setYearLevelOpen(false);
+                setSemesterOpen(open);
+                setCourseOpen(false);
+              }}
+              setValue={setSelectedSemester}
+              placeholder={user.semester}
+              placeholderStyle={{
+                ...styles.text_white_tiny_bold,
+                ...{ textAlign: "left" },
+              }}
+              style={styles.input}
+              textStyle={{
+                ...styles.text_white_tiny_bold,
+                ...{ textAlign: "left" },
+              }}
+              dropDownContainerStyle={{
+                backgroundColor: colors.primary_2,
+                zIndex: 3000,
+                borderWidth: 0,
+              }}
+              dropDownDirection="TOP"
+            />
+          </View>
+        </View>
+        <View style={styles.flex_row}>
+          <View style={{ flex: 1 }}>
+            <Text style={styles.text_white_small_bold}>Course</Text>
+          </View>
+          <View style={{ flex: 3 }}>
+            <DropDownPicker
+              disabled={!isEditable}
+              zIndex={2000}
+              open={courseOpen}
+              value={selected_course}
+              items={courses}
+              setOpen={(open) => {
+                setYearLevelOpen(false);
+                setSemesterOpen(false);
+                setCourseOpen(open);
+              }}
+              setValue={setSelectedCourse}
+              placeholder={user.course}
+              placeholderStyle={{
+                ...styles.text_white_tiny_bold,
+                ...{ textAlign: "left" },
+              }}
+              style={styles.input}
+              textStyle={{
+                ...styles.text_white_tiny_bold,
+                ...{ textAlign: "left" },
+              }}
+              dropDownContainerStyle={{
+                backgroundColor: colors.primary_2,
+                zIndex: 2000,
+                borderWidth: 0,
+              }}
+              dropDownDirection="TOP"
+            />
+          </View>
+        </View>
+        <View style={styles.padding} />
+        <View style={{ zIndex: -1 }}>
+          <Button
+            color={colors.secondary_3}
+            onPress={() => {
+              if (isEditable) {
+                setYearLevelOpen(false);
+                setSemesterOpen(false);
+                setCourseOpen(false);
+                mutation.mutate({
+                  first_name: user.first_name,
+                  last_name: user.last_name,
+                  course: selected_course,
+                  semester: selected_semester,
+                  year_level: selected_yearlevel,
+                });
+              }
+              setIsEditable(!isEditable);
+            }}
+          >
+            <Text style={styles.text_white_small}>
+              {isEditable && StudentInfo.isSuccess ? "Save" : "Edit Profile"}
+            </Text>
+          </Button>
+        </View>
+      </AnimatedContainerNoScroll>
+    </View>
+  );
+}
--- a/src/styles.tsx
+++ b/src/styles.tsx
@ -1,39 +1,39 @@
 import { StyleSheet, Dimensions } from "react-native";

-const width = Dimensions.get("window").width;
-const height = Dimensions.get("window").height;
-
-const containerWidth = width - width * 0.08;
-const containerHeight = height - height * 0.01;
+export const Viewport = {
+  width: Dimensions.get("window").width,
+  height: Dimensions.get("window").height,
+};

 export const colors = {
-  orange_1: "#FFDEAD",
-  orange_2: "#FFE2C1",
-  orange_3: "#C07624",
-  blue_1: "#E3963E",
-  blue_2: "#FFAC1C",
-  blue_3: "#FFAC1C",
-  text_default: "white",
+  primary_1: "#1C2C3F",
+  primary_2: "#445467",
+  primary_3: "#606F81",
+  primary_4: "#b4d0f3",
+  secondary_1: "#1E1F3D",
+  secondary_2: "#626297",
+  secondary_3: "#7a7abd",
+  secondary_4: "#FFE9CE",
+  secondary_5: "#FFF5E9",
+  text_default: "#FFFF",
  text_error: "#e32d1e",
-  text_success: "green",
-  icon_color: "white",
-  login_color: "#0047AB",
-  reg_color: "#0096FF",
-  head: "white",
-  blue_disabled: "#C07624",
+  text_success: "#2ecc71",
+  icon_color: "#FFFF",
+  head: "#FFFF",
 };

 export const font_sizes = {
  tiny: 12,
  small: 16,
  medium: 24,
+  medium_large: 30,
  large: 36,
  xl: 48,
 };

 const styles = StyleSheet.create({
  background: {
-    backgroundColor: colors.orange_1,
+    backgroundColor: colors.secondary_1,
    height: "100%",
    width: "100%",
  },
@ -75,6 +75,12 @@ const styles = StyleSheet.create({
    fontWeight: "bold",
    textAlign: "center",
  },
+  text_white_medium_large: {
+    color: colors.text_default,
+    fontSize: font_sizes.medium_large,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
  text_white_large: {
    color: colors.text_default,
    fontSize: font_sizes.large,
@ -87,6 +93,18 @@ const styles = StyleSheet.create({
    fontWeight: "bold",
    textAlign: "center",
  },
+  text_white_small_bold: {
+    color: colors.text_default,
+    fontSize: font_sizes.small,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  text_white_tiny_bold: {
+    color: colors.text_default,
+    fontSize: font_sizes.tiny,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
  button_template: {
    justifyContent: "center",
    alignSelf: "center",
@ -98,63 +116,47 @@ const styles = StyleSheet.create({
    marginHorizontal: 8,
    padding: 8,
    borderRadius: 16,
-    width: width * 0.4,
+    width: Viewport.width * 0.4,
  },
  text_input: {
    color: colors.text_default,
-    backgroundColor: colors.blue_1,
+    backgroundColor: colors.primary_2,
+    borderColor: colors.primary_4,
+    borderWidth: 1,
    padding: 10,
    borderRadius: 8,
-    width: width * 0.5,
+    width: Viewport.width * 0.5,
  },
  dropdown_template: {
-    borderRadius: 16,
+    backgroundColor: colors.primary_2,
+    containerStyle: colors.primary_2,
+    borderRadius: 8,
    width: "70%",
-    marginVertical: 6,
  },
  map: {
-    flex: 1,
-    height: containerHeight,
-    width: containerWidth,
+    height: Viewport.height * 0.8,
+    width: Viewport.width * 0.8,
    alignSelf: "center",
  },
  profile: {
-    height: 80,
-    width: 80, 
-    alignSelf: 'center',
-  }, 
+    height: 64,
+    width: 64,
+    alignSelf: "center",
+    borderRadius: 150 / 2,
+    overflow: "hidden",
+    padding: 0,
+  },
  input: {
-    height: 40,
-    margin: 12,
-    marginRight: 30,
+    paddingHorizontal: 8,
+    marginVertical: 2,
    borderWidth: 1,
    color: colors.text_default,
-    backgroundColor: colors.blue_1,
+    backgroundColor: colors.primary_2,
    borderRadius: 8,
-    borderColor: '#FFAC1C',
-    padding: 8, 
+    borderColor: colors.primary_3,
  },
-  formGroup: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  text: {
-    marginLeft: 5,
-    color: colors.text_default,
-    fontSize: font_sizes.small,
-    fontWeight: "bold", 
-  }, 
-  button: {
-    padding: 10,
-    backgroundColor: colors.blue_2,
-    borderRadius: 5,
-  },
-  activeText: {
-    color: 'green',
-  },
-  inactiveText: {
-    color: 'white',
+  padding: {
+    paddingVertical: 8,
  },
 });
 export default styles;