From 85e24e04f06a9000d7cfaae836dc1d6e9ad71c78 Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Thu, 26 Aug 2021 19:07:12 -0500
Subject: [PATCH] Styling and changing

---
 pages/events/[year]/[term]/index.module.css |  9 +++
 pages/events/[year]/[term]/index.tsx        | 64 ++++++++++++++-------
 2 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/pages/events/[year]/[term]/index.module.css b/pages/events/[year]/[term]/index.module.css
index f47389fc..f7873912 100644
--- a/pages/events/[year]/[term]/index.module.css
+++ b/pages/events/[year]/[term]/index.module.css
@@ -14,6 +14,15 @@
   }
 }
 
+.header a {
+  color: var(--text);
+  margin-left: calc(30rem / 16);
+}
+
+.header a .curTerm {
+  color: var(--primary-accent);
+}
+
 .blue {
   color: var(--primary-accent);
 }
diff --git a/pages/events/[year]/[term]/index.tsx b/pages/events/[year]/[term]/index.tsx
index 54a28bc7..065cff4a 100644
--- a/pages/events/[year]/[term]/index.tsx
+++ b/pages/events/[year]/[term]/index.tsx
@@ -5,6 +5,7 @@ import { MDXRemote } from "next-mdx-remote";
 import React from "react";
 
 import { EventCard } from "@/components/EventCard";
+import { Link } from "@/components/Link";
 import { MiniEventCard } from "@/components/MiniEventCard";
 import {
   Event,
@@ -34,41 +35,62 @@ export default function Term(props: Props) {
     <div className={styles.main}>
       {!hasPastTerms && hasFutureTerms && (
         <div className={styles.header}>
-          <h3 className={styles.curTerm}>{`${capitalize(props.term)} ${
-            props.year
-          }`}</h3>
-          <h3>{`${capitalize(props.futureTerms[0].term)} ${
+          <Link href={`/events/${props.year}/${props.term}`}>
+            <span className={styles.curTerm}>
+              {`${capitalize(props.term)} ${props.year}`}
+            </span>
+          </Link>
+          <Link
+            href={`/events/${props.futureTerms[0].year}/${props.futureTerms[0].term}`}
+          >{`${capitalize(props.futureTerms[0].term)} ${
             props.futureTerms[0].year
-          }`}</h3>
-          <h3>{`${capitalize(props.futureTerms[1].term)} ${
+          }`}</Link>
+          <Link
+            href={`/events/${props.futureTerms[1].year}/${props.futureTerms[1].term}`}
+          >{`${capitalize(props.futureTerms[1].term)} ${
             props.futureTerms[1].year
-          }`}</h3>
+          }`}</Link>
+          <Link href={"/events/archives"}>Archives</Link>
         </div>
       )}
       {hasPastTerms && hasFutureTerms && (
         <div className={styles.header}>
-          <h3>{`${capitalize(props.pastTerms[0].term)} ${
+          <Link
+            href={`/events/${props.pastTerms[0].year}/${props.pastTerms[0].term}`}
+          >{`${capitalize(props.pastTerms[0].term)} ${
             props.pastTerms[0].year
-          }`}</h3>
-          <h3 className={styles.curTerm}>{`${capitalize(props.term)} ${
-            props.year
-          }`}</h3>
-          <h3>{`${capitalize(props.futureTerms[0].term)} ${
+          }`}</Link>
+          <Link href={`/events/${props.year}/${props.term}`}>
+            <span className={styles.curTerm}>
+              {`${capitalize(props.term)} ${props.year}`}
+            </span>
+          </Link>
+          <Link
+            href={`/events/${props.futureTerms[0].year}/${props.futureTerms[0].term}`}
+          >{`${capitalize(props.futureTerms[0].term)} ${
             props.futureTerms[0].year
-          }`}</h3>
+          }`}</Link>
+          <Link href={"/events/archives"}>Archives</Link>
         </div>
       )}
       {hasPastTerms && !hasFutureTerms && (
         <div className={styles.header}>
-          <h3>{`${capitalize(props.pastTerms[1].term)} ${
+          <Link
+            href={`/events/${props.pastTerms[1].year}/${props.pastTerms[1].term}`}
+          >{`${capitalize(props.pastTerms[1].term)} ${
             props.pastTerms[1].year
-          } `}</h3>
-          <h3>{`${capitalize(props.pastTerms[0].term)} ${
+          } `}</Link>
+          <Link
+            href={`/events/${props.pastTerms[0].year}/${props.pastTerms[0].term}`}
+          >{`${capitalize(props.pastTerms[0].term)} ${
             props.pastTerms[0].year
-          }`}</h3>
-          <h3 className={styles.curTerm}>{`${capitalize(props.term)} ${
-            props.year
-          }`}</h3>
+          }`}</Link>
+          <Link href={`/events/${props.year}/${props.term}`}>
+            <span className={styles.curTerm}>
+              {`${capitalize(props.term)} ${props.year}`}
+            </span>
+          </Link>
+          <Link href={"/events/archives"}>Archives</Link>
         </div>
       )}
       {hasFutureEvents && (