From ea5003fc5d6024eabd2b86172fbe80bb210aea20 Mon Sep 17 00:00:00 2001
From: Linna Luo <linnaluo18@gmail.com>
Date: Sun, 22 Aug 2021 22:09:26 -0400
Subject: [PATCH] reuse Advice component, modify changing advice subheading
 colour

---
 pages/resources/advice/academic.tsx    | 30 ++------------------------
 pages/resources/advice/coop.module.css |  6 +++---
 pages/resources/advice/coop.tsx        | 27 ++++++++++++++++++++---
 pages/resources/advice/misc.tsx        | 30 ++------------------------
 4 files changed, 31 insertions(+), 62 deletions(-)

diff --git a/pages/resources/advice/academic.tsx b/pages/resources/advice/academic.tsx
index b901fd7c..eca6c66d 100644
--- a/pages/resources/advice/academic.tsx
+++ b/pages/resources/advice/academic.tsx
@@ -1,11 +1,8 @@
-import Link from "next/link";
-import React, { ReactNode } from "react";
-
-import { Image } from "@/components/Image";
+import React from "react";
 
 import Content from "../../../content/advice/academic-advice.mdx";
 
-import styles from "./coop.module.css";
+import { Advice } from "./coop";
 
 export default function CoopAdvice() {
   return (
@@ -14,26 +11,3 @@ export default function CoopAdvice() {
     </Advice>
   );
 }
-
-export function Advice(props: { children: ReactNode }) {
-  return (
-    <>
-      <div className={styles.titleContainer}>
-        <h1 className={styles.title}>Waterloo Undergraduate Advice</h1>
-        <Image src="/resources/advice/codey.svg" />
-      </div>
-      <div className={styles.adviceBarContainer}>
-        <Link href="/resources/advice/coop">
-          <a>Coop Advice</a>
-        </Link>
-        <Link href="/resources/advice/academic">
-          <a className={styles.currentAdvice}>Academic Advice</a>
-        </Link>
-        <Link href="/resources/advice/misc">
-          <a>Additional Resources</a>
-        </Link>
-      </div>
-      <div className={styles.content}>{props.children}</div>
-    </>
-  );
-}
diff --git a/pages/resources/advice/coop.module.css b/pages/resources/advice/coop.module.css
index 5259c0cb..660cabae 100644
--- a/pages/resources/advice/coop.module.css
+++ b/pages/resources/advice/coop.module.css
@@ -19,15 +19,15 @@
 
 .adviceBarContainer > a {
   padding-right: calc(48rem / 16);
-  color: black;
+  color: var(--text);
 }
 
 .adviceBarContainer a:link {
   text-decoration: none;
 }
 
-.currentAdvice {
-  color: var(--primary-accent) !important;
+a.currentAdvice {
+  color: var(--primary-accent);
 }
 
 .content {
diff --git a/pages/resources/advice/coop.tsx b/pages/resources/advice/coop.tsx
index ea5cb849..8562315c 100644
--- a/pages/resources/advice/coop.tsx
+++ b/pages/resources/advice/coop.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { useRouter } from "next/router";
 import React, { ReactNode } from "react";
 
 import { Image } from "@/components/Image";
@@ -16,6 +17,8 @@ export default function CoopAdvice() {
 }
 
 export function Advice(props: { children: ReactNode }) {
+  const router = useRouter();
+  const path = router.pathname;
   return (
     <>
       <div className={styles.titleContainer}>
@@ -24,13 +27,31 @@ export function Advice(props: { children: ReactNode }) {
       </div>
       <div className={styles.adviceBarContainer}>
         <Link href="/resources/advice/coop">
-          <a className={styles.currentAdvice}>Coop Advice</a>
+          <a
+            className={
+              path == "/resources/advice/coop" ? styles.currentAdvice : ""
+            }
+          >
+            Coop Advice
+          </a>
         </Link>
         <Link href="/resources/advice/academic">
-          <a>Academic Advice</a>
+          <a
+            className={
+              path == "/resources/advice/academic" ? styles.currentAdvice : ""
+            }
+          >
+            Academic Advice
+          </a>
         </Link>
         <Link href="/resources/advice/misc">
-          <a>Additional Resources</a>
+          <a
+            className={
+              path == "/resources/advice/misc" ? styles.currentAdvice : ""
+            }
+          >
+            Additional Resources
+          </a>
         </Link>
       </div>
       <div className={styles.content}>{props.children}</div>
diff --git a/pages/resources/advice/misc.tsx b/pages/resources/advice/misc.tsx
index 175d43fe..21eb3d10 100644
--- a/pages/resources/advice/misc.tsx
+++ b/pages/resources/advice/misc.tsx
@@ -1,11 +1,8 @@
-import Link from "next/link";
-import React, { ReactNode } from "react";
-
-import { Image } from "@/components/Image";
+import React from "react";
 
 import Content from "../../../content/advice/misc-advice.mdx";
 
-import styles from "./coop.module.css";
+import { Advice } from "./coop";
 
 export default function CoopAdvice() {
   return (
@@ -14,26 +11,3 @@ export default function CoopAdvice() {
     </Advice>
   );
 }
-
-export function Advice(props: { children: ReactNode }) {
-  return (
-    <>
-      <div className={styles.titleContainer}>
-        <h1 className={styles.title}>Waterloo Undergraduate Advice</h1>
-        <Image src="/resources/advice/codey.svg" />
-      </div>
-      <div className={styles.adviceBarContainer}>
-        <Link href="/resources/advice/coop">
-          <a>Coop Advice</a>
-        </Link>
-        <Link href="/resources/advice/academic">
-          <a>Academic Advice</a>
-        </Link>
-        <Link href="/resources/advice/misc">
-          <a className={styles.currentAdvice}>Additional Resources</a>
-        </Link>
-      </div>
-      <div className={styles.content}>{props.children}</div>
-    </>
-  );
-}