pr comment fixes

components/TeamMember.module.css

@@ -33,7 +33,7 @@
   }
 
   .caption {
-    font-size: calc(10rem / 16);
+    font-size: calc(11rem / 16);
     margin-top: 1rem;
   }
 }

components/TeamMemberCard.module.css

@@ -38,7 +38,7 @@
   grid-area: role;
   margin: 0;
 
-  color: var(--purple-2);
+  color: var(--primary-heading);
   font-size: calc(24rem / 16);
   line-height: calc(40 / 24);
   font-weight: 600;
@@ -54,9 +54,9 @@
 
 /* Popup */
 
-.popup_background {
+.popupBackground {
   position: fixed;
-  background-color: var(--navbar-gray);
+  background-color: var(--navbar-page-overlay);
   width: 100%;
   height: 100%;
   top: 0;
@@ -64,11 +64,11 @@
   z-index: 1;
 }
 
-.popup_container {
+.popupContainer {
   position: fixed;
   display: flex;
   flex-direction: column;
-  background-color: var(--off-white);
+  background-color: var(--secondary-background);
   padding: calc(20rem / 16) calc(40rem / 16);
   left: 0;
   top: 50%;
@@ -76,7 +76,7 @@
   z-index: 2;
 }
 
-.close_btn {
+.closeBtn {
   align-self: flex-end;
   /* reset default button styling */
   width: min-content;
@@ -87,32 +87,32 @@
   line-height: inherit;
 }
 
-.popup_content {
+.popupContent {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
-.popup_image {
+.popupImage {
   width: 100%;
 }
 
-.popup_name {
-  color: var(--blue-2);
+.popupName {
+  color: var(--primary-accent);
   margin: calc(24rem / 16) 0 0 0;
   font-size: calc(18rem / 16);
   font-weight: 600;
 }
 
-.popup_role {
-  color: var(--purple-2);
+.popupRole {
+  color: var(--primary-heading);
   margin: 0 0 1rem 0;
   text-align: center;
   font-size: calc(18rem / 16);
   font-weight: 600;
 }
 
-.popup_description {
+.popupDescription {
   font-size: calc(14rem / 16);
 }
 

components/TeamMemberCard.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Image } from "./Image";
-import useWindowDimensions from "../hooks/useWindowDimension";
+import { useWindowDimension } from "../hooks/useWindowDimension";
 import styles from "./TeamMemberCard.module.css";
 
 export interface TeamMemberCardProps {
@@ -16,7 +16,7 @@ export function TeamMemberCard({
   role,
   children,
 }: TeamMemberCardProps) {
-  const { width } = useWindowDimensions();
+  const { width } = useWindowDimension();
   const [isOpen, setIsOpen] = useState(false);
   const handleClick = () => {
     if (width <= 768) {
@@ -58,22 +58,22 @@ interface Propup extends TeamMemberCardProps {
 function ExecPopup({ name, image, role, children, handleClick }: Propup) {
   return (
     <>
-      <div className={styles.popup_background} onClick={handleClick} />
-      <div className={styles.popup_container}>
-        <button className={styles.close_btn} onClick={handleClick}>
+      <div className={styles.popupBackground} onClick={handleClick} />
+      <div className={styles.popupContainer}>
+        <button className={styles.closeBtn} onClick={handleClick}>
           <Image src="images/team/popup-close.svg" />
         </button>
-        <div className={styles.popup_content}>
+        <div className={styles.popupContent}>
           <div className={styles.picture}>
             <Image
-              className={styles.popup_image}
+              className={styles.popupImage}
               src={image ?? "/images/team/team-member-placeholder.svg"}
               alt={`Picture of ${name}`}
             />
           </div>
-          <h1 className={styles.popup_name}>{name}</h1>
-          <h2 className={styles.popup_role}>{role}</h2>
-          <div className={styles.popup_description}>{children}</div>
+          <h1 className={styles.popupName}>{name}</h1>
+          <h2 className={styles.popupRole}>{role}</h2>
+          <div className={styles.popupDescription}>{children}</div>
         </div>
       </div>
     </>

content/meet-the-team/elections.mdx

@@ -1,5 +0,0 @@
-To find out when and where the next elections will be held, keep an
-eye on on the [News](https://google.com).
-
-For details on the elections, read our
-[Constitution](/about/constitution).

content/meet-the-team/execs/02-gordon-le.md

@@ -1,7 +1,7 @@
 ---
 name: Gordon Le
 role: Vice President
-image: /images/team/exec/Exec_GordonLe.jpg
+image: /images/team/exec/Exec_GordonLe.JPG
 ---
 
 words words words codey words words words words codey words words words words codey words words words words codey words words words words codey words words words words words codey words words words words codey words words words words codey words words words words codey words words words

content/meet-the-team/programme-committee.json

@@ -47,7 +47,7 @@
   {
     "name": "Yanni Wang",
     "role": "Events",
-    "image": "images/team/programme/Events_YanniWang.jpg"
+    "image": "images/team/programme/Events_YanniWang.JPG"
   },
   {
     "name": "Anjing Li",
@@ -57,7 +57,7 @@
   {
     "name": "Patrick He",
     "role": "Marketing",
-    "image": "images/team/programme/Marketing_PatrickHe.png"
+    "image": "images/team/programme/Marketing_PatrickHe.PNG"
   },
   {
     "name": "Richa Dalal",

content/meet-the-team/website-committee.json

@@ -21,7 +21,7 @@
   {
     "name": "Catherine Wan",
     "role": "Developer",
-    "image": "images/team/website/Website_CatherineWan.jpg"
+    "image": "images/team/website/Website_CatherineWan.JPG"
   },
   {
     "name": "Dora Su",
@@ -36,11 +36,11 @@
   {
     "name": "Linna Luo",
     "role": "Developer",
-    "image": "images/team/website/Website_LinnaLuo.jpg"
+    "image": "images/team/website/Website_LinnaLuo.JPG"
   },
   {
     "name": "William Tran",
     "role": "Developer",
-    "image": "images/team/website/Website_WilliamTran.jpg"
+    "image": "images/team/website/Website_WilliamTran.JPG"
   }
 ]

hooks/useWindowDimension.tsx

@@ -13,7 +13,7 @@ function getWindowDimension() {
   };
 }
 
-function useWindowDimension(): WindowDimension {
+export function useWindowDimension(): WindowDimension {
   const [windowSize, setWindowDimension] = useState<WindowDimension>({
     width: 0,
     height: 0,
@@ -35,5 +35,3 @@ function useWindowDimension(): WindowDimension {
 
   return windowSize;
 }
-
-export default useWindowDimension;

lib/team.ts

@@ -18,7 +18,7 @@ export async function getExecNames() {
     .map((name) => name.slice(0, -1 * fileType.length));
 }
 
-export async function getExecContent(fileName: string, convert = true) {
+export async function getExec(fileName: string, convert = true) {
   const raw = await readFile(path.join(EXECS_PATH, `${fileName}${fileType}`));
   const { content, data: metadata } = matter(raw);
   return {

package.json

@@ -6,8 +6,8 @@
     "build": "next build",
     "start": "next start",
     "export": "next export",
-    "lint": "eslint \"{pages,components,lib}/**/*.{js,ts,tsx,jsx}\" --quiet",
-    "lint:fix": "eslint \"{pages,components,lib}/**/*.{js,ts,tsx,jsx}\" --quiet --fix"
+    "lint": "eslint \"{pages,components,lib,hooks}/**/*.{js,ts,tsx,jsx}\" --quiet",
+    "lint:fix": "eslint \"{pages,components,lib,hooks}/**/*.{js,ts,tsx,jsx}\" --quiet --fix"
   },
   "dependencies": {
     "@mdx-js/loader": "^1.6.22",

pages/about/team.module.css

@@ -1,8 +1,8 @@
-.header_container {
+.headerContainer {
   display: flex;
   flex-direction: row;
   padding-bottom: calc(24rem / 16);
-  border-bottom: calc(1rem / 16) solid var(--purple-2);
+  border-bottom: calc(1rem / 16) solid var(--primary-heading);
   margin-bottom: calc(46rem / 16);
 }
 
@@ -10,23 +10,24 @@
   display: none;
 }
 
-.header_text_container {
+.headerTextContainer {
   margin: auto 0 0 0;
 }
 
 .header {
-  color: var(--purple-2);
+  color: var(--primary-heading);
   font-size: calc(48rem / 16);
   margin: 0 calc(53rem / 16) 0 0;
 }
 
 .subheading {
-  color: var(--purple-2);
+  color: var(--primary-heading);
   font-size: calc(36rem / 16);
   font-weight: 600;
   padding-bottom: calc(22rem / 16);
-  border-bottom: calc(1rem / 16) solid var(--purple-2);
+  border-bottom: calc(1rem / 16) solid var(--primary-heading);
   margin-bottom: calc(46rem / 16);
+  margin-top: calc(86rem / 16);
 }
 
 .codey {
@@ -48,16 +49,12 @@
   justify-items: center;
 }
 
-.members:last-child {
-  margin-bottom: calc(86rem / 16);
-}
-
 .elections {
   margin-top: 6rem;
 }
 
-.election_subheading {
-  color: var(--blue-2);
+.electionSubheading {
+  color: var(--primary-accent);
   font-size: calc(36rem / 16);
   font-weight: 600;
 }
@@ -68,7 +65,7 @@
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {
-  .header_container {
+  .headerContainer {
     flex-direction: column-reverse;
     padding-bottom: 1rem;
   }
@@ -113,7 +110,7 @@
     padding: 2rem;
   }
 
-  .election_subheading {
+  .electionSubheading {
     font-size: calc(24rem / 16);
   }
 }

pages/about/team.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { getExecContent, getExecNames, Metadata } from "../../lib/team";
+import { getExec, getExecNames, Metadata } from "../../lib/team";
 import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
 import { GetStaticProps } from "next";
 import { Image } from "../../components/Image";
@@ -7,7 +7,6 @@ import { TeamMemberCard } from "../../components/TeamMemberCard";
 import { TeamMember } from "../../components/TeamMember";
 import { Link } from "../../components/Link";
 import { Bubble } from "../../components/Bubble";
-import ElectionContent from "../../content/meet-the-team/elections.mdx";
 import programme from "../../content/meet-the-team/programme-committee.json";
 import website from "../../content/meet-the-team/website-committee.json";
 import systems from "../../content/meet-the-team/systems-committee.json";
@@ -25,11 +24,11 @@ interface Props {
   execs: SerializedExec[];
 }
 
-export default function MeetTheTeam({ execs }: Props) {
+export default function Team({ execs }: Props) {
   return (
     <>
-      <div className={styles.header_container}>
-        <div className={styles.header_text_container}>
+      <div className={styles.headerContainer}>
+        <div className={styles.headerTextContainer}>
           <h1 className={styles.header}>Meet the Team!</h1>
           <div className={styles.nav}>
             <Link href="#execs">The Executives</Link>
@@ -57,22 +56,25 @@ export default function MeetTheTeam({ execs }: Props) {
           );
         })}
       </div>
-      <div className={styles.programme} id="programme">
+      <div id="programme">
         <h2 className={styles.subheading}>Programme Committee</h2>
         <MembersList team={programme} />
       </div>
-      <div className={styles.website} id="website">
+      <div id="website">
         <h2 className={styles.subheading}>Website Committee</h2>
         <MembersList team={website} />
       </div>
-      <div className={styles.system} id="system">
+      <div id="system">
         <h2 className={styles.subheading}>Systems Committee</h2>
         <MembersList team={systems} />
       </div>
       <Bubble>
         <div className={styles.elections}>
-          <h2 className={styles.election_subheading}>Elections</h2>
-          <ElectionContent />
+          <h2 className={styles.electionSubheading}>Elections</h2>
+          To find out when and where the next elections will be held, keep an
+          eye on on the <Link href="">News</Link>. <br />
+          For details on the elections, read our
+          <Link href="/about/constitution"> Constitution</Link>
         </div>
       </Bubble>
     </>
@@ -96,7 +98,7 @@ function MembersList(props: MembersProps) {
 export const getStaticProps: GetStaticProps<Props> = async () => {
   const execNames = await getExecNames();
   const execs = (await Promise.all(
-    execNames.map((name) => getExecContent(name))
+    execNames.map((name) => getExec(name))
   )) as SerializedExec[];
 
   return {