Merge pull request #726 from asuc-octo/feat/theme

feat/theme

apps/backend/src/bootstrap/loaders/apollo.ts

@@ -35,7 +35,7 @@ class RedisCache implements KeyValueCache {
 const armor = new ApolloArmor({
   maxDepth: {
     enabled: true,
-    n: 4,
+    n: 5,
   },
 });
 

apps/backend/src/modules/schedule/controller.ts

@@ -59,7 +59,8 @@ export const updateSchedule = async (
 ) => {
   const schedule = await ScheduleModel.findOneAndUpdate(
     { _id: id, createdBy: context.user._id },
-    input
+    input,
+    { new: true }
   );
 
   if (!schedule) throw new Error("Not found");

apps/backend/src/modules/schedule/formatter.ts

@@ -13,10 +13,10 @@ export const formatSchedule = async (schedule: ScheduleType) => {
 
   for (const selectedClass of schedule.classes) {
     const _class = await ClassModel.findOne({
-      number: selectedClass.classNumber,
+      number: selectedClass.number,
       "course.subjectArea.code": selectedClass.subject,
       "course.catalogNumber.formatted": selectedClass.courseNumber,
-      "session.term.name": `${schedule.term.year} ${schedule.term.semester}`,
+      "session.term.name": `${schedule.year} ${schedule.semester}`,
     }).lean();
 
     if (!_class) continue;
@@ -33,8 +33,8 @@ export const formatSchedule = async (schedule: ScheduleType) => {
     createdBy: schedule.createdBy,
     public: schedule.public,
     classes,
-    year: schedule.term.year,
-    semester: schedule.term.semester,
+    year: schedule.year,
+    semester: schedule.semester,
     term: null,
     events: schedule.events,
   } as IntermediateSchedule;

apps/backend/src/modules/schedule/typedefs/schedule.ts

@@ -23,13 +23,13 @@ const typedef = gql`
     semester: String!
     term: Term!
     public: Boolean!
-    classes: [SelectedClass!]
-    events: [Event!]
+    classes: [SelectedClass!]!
+    events: [Event!]!
   }
 
   type Query {
     schedules: [Schedule] @auth
-    schedule(id: String!): Schedule
+    schedule(id: ID!): Schedule
   }
 
   input EventInput {
@@ -44,7 +44,7 @@ const typedef = gql`
   input SelectedClassInput {
     subject: String!
     courseNumber: String!
-    classNumber: String!
+    number: String!
     sections: [String!]!
   }
 
@@ -57,7 +57,8 @@ const typedef = gql`
 
   input CreateScheduleInput {
     name: String!
-    term: TermInput!
+    year: Int!
+    semester: String!
     events: [EventInput!]
     classes: [SelectedClassInput!]
     public: Boolean

apps/frontend/index.html

@@ -5,8 +5,6 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<link rel="shortcut icon" href="/favicon.png" />
 		<link rel="apple-touch-icon" sizes="76x76" href="/favicon.png" />
-    <link rel="preconnect" href="https://rsms.me/">
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
 		<meta name="description" content="Berkeley's online course discovery platform. Berkeleytime is a platform built, maintained, and run by students, just like you. We work hard to simplify and improve the course discovery experience." />
 		<title>Berkeleytime</title>
 	</head>

apps/frontend/package.json

@@ -22,6 +22,7 @@
 		"@radix-ui/react-separator": "^1.1.0",
 		"@radix-ui/react-tabs": "^1.1.0",
 		"@radix-ui/react-tooltip": "^1.1.2",
+		"@repo/theme": "*",
 		"@shopify/draggable": "^1.1.3",
 		"@tanstack/react-virtual": "^3.8.3",
 		"classnames": "^2.5.1",

apps/frontend/src/App.tsx

@@ -3,12 +3,13 @@ import { lazy } from "react";
 import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
 
+import { ThemeProvider } from "@repo/theme";
+
 import Catalog from "@/app/Catalog";
 import Enrollment from "@/app/Enrollment";
 import Grades from "@/app/Grades";
 import Landing from "@/app/Landing";
 import Layout from "@/components/Layout";
-import ThemeProvider from "@/components/ThemeProvider";
 
 const About = lazy(() => import("@/app/About"));
 const CatalogEnrollment = lazy(() => import("@/components/Class/Enrollment"));
@@ -22,7 +23,6 @@ const Compare = lazy(() => import("@/app/Schedule/Compare"));
 const Manage = lazy(() => import("@/app/Schedule/Manage"));
 const Schedules = lazy(() => import("@/app/Schedules"));
 const Map = lazy(() => import("@/app/Map"));
-const Account = lazy(() => import("@/app/Account"));
 
 const router = createBrowserRouter([
   {
@@ -68,10 +68,6 @@ const router = createBrowserRouter([
         element: <About />,
         path: "about",
       },
-      {
-        element: <Account />,
-        path: "account",
-      },
     ],
   },
   {

apps/frontend/src/app/Catalog/Dashboard/Carousel/index.tsx

@@ -4,7 +4,7 @@ import classNames from "classnames";
 import { ArrowRight, NavArrowLeft, NavArrowRight } from "iconoir-react";
 import { Link, To } from "react-router-dom";
 
-import IconButton from "@/components/IconButton";
+import { IconButton } from "@repo/theme";
 
 import styles from "./Carousel.module.scss";
 

apps/frontend/src/app/Catalog/Dashboard/index.tsx

@@ -9,10 +9,7 @@ import {
   Search,
 } from "iconoir-react";
 
-import Button from "@/components/Button";
-import Container from "@/components/Container";
-import IconButton from "@/components/IconButton";
-import Tooltip from "@/components/Tooltip";
+import { Button, Container, IconButton, Tooltip } from "@repo/theme";
 
 import Carousel from "./Carousel";
 import styles from "./Dashboard.module.scss";
@@ -30,14 +27,14 @@ export default function Dashboard({
 }: DashboardProps) {
   return (
     <div className={styles.root}>
-      <Container size="small">
+      <Container size="sm">
         <div className={styles.header}>
-          <Button variant="outline">
+          <Button>
             <ArrowSeparateVertical />
             Switch terms
           </Button>
           <div className={styles.toggle}>
-            <Button onClick={() => setOpen(false)}>
+            <Button variant="solid" onClick={() => setOpen(false)}>
               Search
               <Search />
             </Button>

apps/frontend/src/app/Catalog/index.tsx

@@ -5,11 +5,10 @@ import classNames from "classnames";
 import { Xmark } from "iconoir-react";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 
-import Boundary from "@/components/Boundary";
+import { Boundary, IconButton, LoadingIndicator } from "@repo/theme";
+
 import Class from "@/components/Class";
 import ClassBrowser from "@/components/ClassBrowser";
-import IconButton from "@/components/IconButton";
-import LoadingIndicator from "@/components/LoadingIndicator";
 import {
   GET_CLASS,
   GET_COURSE,
@@ -114,7 +113,7 @@ export default function Catalog() {
 
   return loading ? (
     <Boundary>
-      <LoadingIndicator size={32} />
+      <LoadingIndicator size="lg" />
     </Boundary>
   ) : currentTerm ? (
     <div

apps/frontend/src/app/Discover/index.tsx

@@ -3,9 +3,9 @@ import { FormEvent, useState } from "react";
 import { useApolloClient } from "@apollo/client";
 import { ArrowRight, Calendar } from "iconoir-react";
 
+import { Button, Container } from "@repo/theme";
+
 import AverageGrade from "@/components/AverageGrade";
-import Button from "@/components/Button";
-import Container from "@/components/Container";
 import CourseDrawer from "@/components/CourseDrawer";
 import Footer from "@/components/Footer";
 import NavigationBar from "@/components/NavigationBar";
@@ -78,7 +78,7 @@ export default function Discover() {
               onChange={(event) => setInput(event.target.value)}
             />
             <Placeholder className={styles.placeholder} />
-            <Button className={styles.button}>
+            <Button className={styles.button} variant="solid">
               Search
               <ArrowRight />
             </Button>

apps/frontend/src/app/Landing/Features/index.tsx

@@ -2,7 +2,7 @@ import classNames from "classnames";
 import { ArrowRight } from "iconoir-react";
 import { Link } from "react-router-dom";
 
-import Container from "@/components/Container";
+import { Container } from "@repo/theme";
 
 import styles from "./Features.module.scss";
 import calendar from "./calendar.png";

apps/frontend/src/app/Landing/Hero/index.tsx

@@ -2,7 +2,8 @@ import { FormEvent, useEffect, useMemo, useRef, useState } from "react";
 
 import { ArrowRight, Clock } from "iconoir-react";
 
-import Button from "@/components/Button";
+import { Button } from "@repo/theme";
+
 import NavigationBar from "@/components/NavigationBar";
 
 import styles from "./Hero.module.scss";
@@ -112,7 +113,7 @@ export default function Hero() {
               autoFocus
               placeholder="Search for courses..."
             />
-            <Button className={styles.button}>
+            <Button className={styles.button} variant="solid">
               Go
               <ArrowRight />
             </Button>

apps/frontend/src/app/Landing/Organization/index.tsx

@@ -1,6 +1,7 @@
 import { Minus, Plus } from "iconoir-react";
 
-import Container from "@/components/Container";
+import { Container } from "@repo/theme";
+
 import Footer from "@/components/Footer";
 
 import styles from "./Organization.module.scss";

apps/frontend/src/app/Map/index.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import { Position, ZoomIn, ZoomOut } from "iconoir-react";
 import mapboxgl from "mapbox-gl";
 import "mapbox-gl/dist/mapbox-gl.css";
 
-import IconButton from "@/components/IconButton";
-import usePrefersColorScheme from "@/hooks/usePrefersColorScheme";
+import { IconButton, usePrefersColorScheme, useTheme } from "@repo/theme";
+
 import { buildings } from "@/lib/location";
 
 import styles from "./Map.module.scss";
@@ -21,7 +21,11 @@ const DEFAULT_ZOOM = 15.5;
 mapboxgl.accessToken = TOKEN;
 
 export default function Map() {
-  const colorScheme = usePrefersColorScheme();
+  const { theme } = useTheme();
+
+  const scheme = usePrefersColorScheme();
+
+  const currentTheme = useMemo(() => theme ?? scheme, [theme, scheme]);
 
   const containerRef = useRef<HTMLDivElement | null>(null);
 
@@ -34,7 +38,7 @@ export default function Map() {
     const map = new mapboxgl.Map({
       container: containerRef.current,
       style:
-        colorScheme === "dark"
+        currentTheme === "dark"
           ? "mapbox://styles/mathhulk/clvblbtkd005k01rd1n28b2xt"
           : "mapbox://styles/mathhulk/clbznbvgs000314k8gtwa9q60",
       center: [-122.2592173, 37.8721508],
@@ -95,7 +99,7 @@ export default function Map() {
     return () => {
       mapRef.current?.remove();
     };
-  }, [colorScheme]);
+  }, [currentTheme]);
 
   return (
     <div className={styles.root}>

apps/frontend/src/app/Plan/Term/Catalog/index.tsx

@@ -4,8 +4,9 @@ import * as Dialog from "@radix-ui/react-dialog";
 import { Xmark } from "iconoir-react";
 import { useSearchParams } from "react-router-dom";
 
+import { IconButton } from "@repo/theme";
+
 import CourseBrowser from "@/components/CourseBrowser";
-import IconButton from "@/components/IconButton";
 import { ICourse, Semester } from "@/lib/api";
 
 import styles from "./Catalog.module.scss";

apps/frontend/src/app/Plan/Term/index.tsx

@@ -2,7 +2,8 @@ import { forwardRef } from "react";
 
 import { Plus } from "iconoir-react";
 
-import IconButton from "@/components/IconButton";
+import { IconButton } from "@repo/theme";
+
 import Units from "@/components/Units";
 import { ICourse, Semester } from "@/lib/api";
 

apps/frontend/src/app/Schedule/Compare/index.tsx

@@ -3,8 +3,8 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { DataTransferBoth, Xmark } from "iconoir-react";
 import { Link, useOutletContext } from "react-router-dom";
 
-import IconButton from "@/components/IconButton";
-import Tooltip from "@/components/Tooltip";
+import { IconButton, Tooltip } from "@repo/theme";
+
 import Units from "@/components/Units";
 import Week from "@/components/Week";
 

apps/frontend/src/app/Schedule/Manage/Map/index.tsx

@@ -7,9 +7,13 @@ import { ArrowSeparateVertical, Walking, ZoomIn, ZoomOut } from "iconoir-react";
 import mapboxgl from "mapbox-gl";
 import "mapbox-gl/dist/mapbox-gl.css";
 
-import Button from "@/components/Button";
-import IconButton from "@/components/IconButton";
-import usePrefersColorScheme from "@/hooks/usePrefersColorScheme";
+import {
+  Button,
+  IconButton,
+  usePrefersColorScheme,
+  useTheme,
+} from "@repo/theme";
+
 import { ISection } from "@/lib/api";
 import { buildings } from "@/lib/location";
 
@@ -30,7 +34,11 @@ interface MapProps {
 }
 
 export default function Map({ selectedSections }: MapProps) {
-  const colorScheme = usePrefersColorScheme();
+  const { theme } = useTheme();
+
+  const scheme = usePrefersColorScheme();
+
+  const currentTheme = useMemo(() => theme ?? scheme, [theme, scheme]);
 
   const containerRef = useRef<HTMLDivElement | null>(null);
   const markersRef = useRef<mapboxgl.Marker[]>([]);
@@ -58,7 +66,7 @@ export default function Map({ selectedSections }: MapProps) {
     const map = new mapboxgl.Map({
       container: containerRef.current,
       style:
-        colorScheme === "dark"
+        currentTheme === "dark"
           ? "mapbox://styles/mathhulk/clvblbtkd005k01rd1n28b2xt"
           : "mapbox://styles/mathhulk/clbznbvgs000314k8gtwa9q60",
       center: [-122.2592173, 37.8721508],
@@ -238,7 +246,7 @@ export default function Map({ selectedSections }: MapProps) {
     return () => {
       mapRef.current?.remove();
     };
-  }, [colorScheme]);
+  }, [currentTheme]);
 
   useEffect(() => {
     if (!directions) return;
@@ -264,7 +272,7 @@ export default function Map({ selectedSections }: MapProps) {
   return (
     <div className={styles.root}>
       <div className={styles.toolBar}>
-        <Button variant="outline" className={styles.button}>
+        <Button className={styles.button}>
           <ArrowSeparateVertical />
           Monday
         </Button>