Merge branch 'gql' into cicd

asuc-octo · Sep 26, 2024 · f6a1859 · f6a1859
2 parents 428aa58 + 39ec2e7
commit f6a1859
Show file tree

Hide file tree

Showing 20 changed files with 754 additions and 492 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,39 +1,45 @@
 FROM node:alpine AS base
+RUN ["npm", "install", "-g", "turbo@latest"]
 
 # backend
 FROM base AS backend-builder
 WORKDIR /backend
 COPY . .
-RUN npx turbo prune backend --docker
+RUN ["turbo", "prune", "backend", "--docker"]
 
 FROM base AS backend-dev
 WORKDIR /backend
 
 COPY --from=backend-builder /backend/out/json/ .
 COPY --from=backend-builder /backend/out/package-lock.json ./package-lock.json
-RUN npm install
+RUN ["npm", "install"]
 
 COPY --from=backend-builder /backend/out/full/ .
-ENTRYPOINT npx turbo run dev --filter=backend
+ENTRYPOINT ["turbo", "run", "dev", "--filter=backend"]
 
 FROM backend-dev AS backend-prod
-ENTRYPOINT npx turbo run start --filter=backend --env-mode=loose
+ENTRYPOINT ["turbo", "run", "start", "--filter=backend", "--env-mode=loose"]
 
 # frontend
 FROM base AS frontend-builder
 WORKDIR /frontend
 COPY . .
-RUN npx turbo prune frontend --docker
+RUN ["turbo", "prune", "frontend", "--docker"]
 
 FROM base AS frontend-dev
 WORKDIR /frontend
 
 COPY --from=frontend-builder /frontend/out/json/ .
 COPY --from=frontend-builder /frontend/out/package-lock.json ./package-lock.json
-RUN npm install
+RUN ["npm", "install"]
 
 COPY --from=frontend-builder /frontend/out/full/ .
-ENTRYPOINT npx turbo run dev --filter=frontend
+ENTRYPOINT ["turbo", "run", "dev", "--filter=frontend"]
 
 FROM frontend-dev AS frontend-prod
-ENTRYPOINT npx turbo run start --filter=frontend --env-mode=loose
+WORKDIR /frontend
+
+RUN ["turbo", "run", "build", "--filter=frontend", "--env-mode=loose"]
+
+COPY /apps/frontend/dist ./apps/frontend/dist
+ENTRYPOINT ["turbo", "run", "start", "--filter=frontend"]
diff --git a/apps/frontend/src/App.tsx b/apps/frontend/src/App.tsx
@@ -1,15 +1,14 @@
 import { lazy } from "react";
 
 import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
-import * as Tooltip from "@radix-ui/react-tooltip";
-import { IconoirProvider } from "iconoir-react";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
 
 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"));
@@ -128,17 +127,9 @@ const client = new ApolloClient({
 export default function App() {
   return (
     <ApolloProvider client={client}>
-      <IconoirProvider
-        iconProps={{
-          strokeWidth: 2,
-          width: 16,
-          height: 16,
-        }}
-      >
-        <Tooltip.Provider delayDuration={0}>
-          <RouterProvider router={router} />
-        </Tooltip.Provider>
-      </IconoirProvider>
+      <ThemeProvider>
+        <RouterProvider router={router} />
+      </ThemeProvider>
     </ApolloProvider>
   );
 }
diff --git a/apps/frontend/src/components/Button/Button.module.scss b/apps/frontend/src/components/Button/Button.module.scss
@@ -2,31 +2,39 @@
   height: 32px;
   border-radius: 4px;
   padding: 0 12px;
-  display: flex;
+  display: inline-flex;
   flex-shrink: 0;
   align-items: center;
   font-size: 14px;
   font-weight: 500;
   line-height: 1;
   cursor: pointer;
-  transition: all 100ms ease-in-out;
   gap: 8px;
   user-select: none;
+  transition:
+    border-color 100ms ease-in-out,
+    background-color 100ms ease-in-out,
+    color 100ms ease-in-out;
 
-  &.solid {
+  &[data-disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  &[data-variant="solid"] {
     background-color: var(--blue-500);
     color: white;
 
     &:hover {
       background-color: var(--blue-600);
     }
-  
+
     &:active {
       background-color: var(--blue-700);
     }
   }
 
-  &.outline {
+  &[data-variant="outline"] {
     border: 1px solid var(--border-color);
     color: var(--paragraph-color);
 
@@ -39,4 +47,4 @@
       background-color: var(--button-active-color);
     }
   }
-}
+}
diff --git a/apps/frontend/src/components/Button/index.tsx b/apps/frontend/src/components/Button/index.tsx
@@ -11,6 +11,7 @@ import styles from "./Button.module.scss";
 
 interface Props {
   variant?: "solid" | "outline";
+  disabled?: boolean;
 }
 
 type ButtonProps<C extends ElementType> = PolymorphicComponentPropsWithRef<
@@ -24,6 +25,7 @@ const Button = forwardRef(
       active,
       children,
       className,
+      disabled,
       variant = "solid",
       ...props
     }: ButtonProps<C>,
@@ -32,14 +34,9 @@ const Button = forwardRef(
     return (
       <button
         ref={ref}
-        className={classNames(
-          styles.root,
-          {
-            [styles.solid]: variant === "solid",
-            [styles.outline]: variant === "outline",
-          },
-          className
-        )}
+        data-variant={variant}
+        data-disabled={disabled}
+        className={classNames(styles.root, className)}
         {...props}
       >
         {children}

diff --git a/apps/frontend/src/components/Class/index.tsx b/apps/frontend/src/components/Class/index.tsx
@@ -241,18 +241,26 @@ export default function Class({
             </Tabs.List>
           ) : (
             <div className={styles.menu}>
-              <MenuItem as={NavLink} to={{ pathname: ".", search }} end>
-                Overview
-              </MenuItem>
-              <MenuItem as={NavLink} to={{ pathname: "sections", search }}>
-                Sections
-              </MenuItem>
-              <MenuItem as={NavLink} to={{ pathname: "enrollment", search }}>
-                Enrollment
-              </MenuItem>
-              <MenuItem as={NavLink} to={{ pathname: "grades", search }}>
-                Grades
-              </MenuItem>
+              <NavLink to={{ pathname: ".", search }} end>
+                {({ isActive }) => (
+                  <MenuItem active={isActive}>Overview</MenuItem>
+                )}
+              </NavLink>
+              <NavLink to={{ pathname: "sections", search }}>
+                {({ isActive }) => (
+                  <MenuItem active={isActive}>Sections</MenuItem>
+                )}
+              </NavLink>
+              <NavLink to={{ pathname: "enrollment", search }}>
+                {({ isActive }) => (
+                  <MenuItem active={isActive}>Enrollment</MenuItem>
+                )}
+              </NavLink>
+              <NavLink to={{ pathname: "grades", search }}>
+                {({ isActive }) => (
+                  <MenuItem active={isActive}>Grades</MenuItem>
+                )}
+              </NavLink>
             </div>
           )}
         </Container>

diff --git a/apps/frontend/src/components/Course/index.tsx b/apps/frontend/src/components/Course/index.tsx
@@ -166,18 +166,26 @@ export default function Course({
             </Tabs.List>
           ) : (
             <div className={styles.menu}>
-              <MenuItem as={NavLink} to={{ pathname: ".", search }} end>
-                Overview
-              </MenuItem>
-              <MenuItem as={NavLink} to={{ pathname: "classes", search }}>
-                Classes
-              </MenuItem>
-              <MenuItem as={NavLink} to={{ pathname: "enrollment", search }}>
-                Enrollment
-              </MenuItem>
-              <MenuItem as={NavLink} to={{ pathname: "grades", search }}>
-                Grades
-              </MenuItem>
+              <NavLink to={{ pathname: ".", search }} end>
+                {({ isActive }) => (
+                  <MenuItem active={isActive}>Overview</MenuItem>
+                )}
+              </NavLink>
+              <NavLink to={{ pathname: "classes", search }}>
+                {({ isActive }) => (
+                  <MenuItem active={isActive}>Classes</MenuItem>
+                )}
+              </NavLink>
+              <NavLink to={{ pathname: "enrollment", search }}>
+                {({ isActive }) => (
+                  <MenuItem active={isActive}>Enrollment</MenuItem>
+                )}
+              </NavLink>
+              <NavLink to={{ pathname: "grades", search }}>
+                {({ isActive }) => (
+                  <MenuItem active={isActive}>Grades</MenuItem>
+                )}
+              </NavLink>
             </div>
           )}
         </Container>

diff --git a/apps/frontend/src/components/Footer/Footer.module.scss b/apps/frontend/src/components/Footer/Footer.module.scss
@@ -12,11 +12,17 @@
   &.invert {
     border-color: var(--neutral-700);
 
-    .group .description, .column .label {
+    .icon-button {
       color: var(--neutral-400);
     }
 
-    .column .link, .group .description .link {
+    .group .description,
+    .column .label {
+      color: var(--neutral-400);
+    }
+
+    .column .link,
+    .group .description .link {
       color: white;
 
       &:hover {
@@ -75,15 +81,20 @@
     .brand {
       font-size: 24px;
       font-weight: 580;
-      font-feature-settings: 'cv05' on, 'cv13' on, 'ss07' on, 'cv12' on, 'cv06' on;
+      font-feature-settings:
+        "cv05" on,
+        "cv13" on,
+        "ss07" on,
+        "cv12" on,
+        "cv06" on;
       color: var(--blue-500);
       cursor: pointer;
       transition: all 100ms ease-in-out;
       margin-right: auto;
-  
+
       &:hover {
         color: var(--blue-600);
       }
     }
   }
-}
+}
diff --git a/apps/frontend/src/components/Footer/index.tsx b/apps/frontend/src/components/Footer/index.tsx
@@ -1,8 +1,16 @@
 import classNames from "classnames";
-import { Discord, Facebook, Github, Instagram } from "iconoir-react";
+import {
+  Discord,
+  Facebook,
+  Github,
+  HalfMoon,
+  Instagram,
+  SunLight,
+} from "iconoir-react";
 import { Link } from "react-router-dom";
 
 import Container from "@/components/Container";
+import useTheme from "@/hooks/useTheme";
 
 import IconButton from "../IconButton";
 import styles from "./Footer.module.scss";
@@ -12,6 +20,8 @@ interface FooterProps {
 }
 
 export default function Footer({ invert }: FooterProps) {
+  const { theme, setTheme } = useTheme();
+
   return (
     <Container>
       <div
@@ -35,26 +45,46 @@ export default function Footer({ invert }: FooterProps) {
             project
           </p>
           <div className={styles.row}>
-            <a href="https://www.instagram.com/" target="_blank">
-              <IconButton invert={invert}>
-                <Instagram />
-              </IconButton>
-            </a>
-            <a href="https://discord.gg/uP2bTPh99U" target="_blank">
-              <IconButton invert={invert}>
-                <Discord />
-              </IconButton>
-            </a>
-            <a href="https://facebook.com/berkeleytime" target="_blank">
-              <IconButton invert={invert}>
-                <Facebook />
-              </IconButton>
-            </a>
-            <a href="https://github.com/asuc-octo/berkeleytime" target="_blank">
-              <IconButton invert={invert}>
-                <Github />
-              </IconButton>
-            </a>
+            <IconButton
+              className={styles.iconButton}
+              onClick={() =>
+                setTheme((theme) => (theme === "dark" ? "light" : "dark"))
+              }
+            >
+              {theme === "dark" ? <SunLight /> : <HalfMoon />}
+            </IconButton>
+            <IconButton
+              className={styles.iconButton}
+              as="a"
+              href="https://www.instagram.com/"
+              target="_blank"
+            >
+              <Instagram />
+            </IconButton>
+            <IconButton
+              className={styles.iconButton}
+              as="a"
+              href="https://discord.gg/uP2bTPh99U"
+              target="_blank"
+            >
+              <Discord />
+            </IconButton>
+            <IconButton
+              className={styles.iconButton}
+              href="https://facebook.com/berkeleytime"
+              target="_blank"
+              as="a"
+            >
+              <Facebook />
+            </IconButton>
+            <IconButton
+              className={styles.iconButton}
+              href="https://github.com/asuc-octo/berkeleytime"
+              target="_blank"
+              as="a"
+            >
+              <Github />
+            </IconButton>
           </div>
         </div>
         <div className={styles.column}>