From 6a819722f593a8561acb2aeae8c162d78b801c86 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Wed, 24 Jan 2024 15:05:36 +0800
Subject: [PATCH 01/12] Remove unnecessary type annotations

Since we already explicitly type the containing object, redeclaring the
function parameter types would only lead to worse code readability.
---
 src/features/sicp/parser/ParseJson.tsx | 36 +++++++++++++-------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/features/sicp/parser/ParseJson.tsx b/src/features/sicp/parser/ParseJson.tsx
index 65b061f343..b507cf6506 100644
--- a/src/features/sicp/parser/ParseJson.tsx
+++ b/src/features/sicp/parser/ParseJson.tsx
@@ -211,15 +211,15 @@ const handleLatex = (math: string) => {
 };
 
 export const processingFunctions: Record<string, (obj: JsonType, refs: RefType) => JSX.Element> = {
-  '#text': (obj: JsonType, _refs: RefType) => handleText(obj.body!),
+  '#text': (obj, _refs) => handleText(obj.body!),
 
-  B: (obj: JsonType, refs: RefType) => <b>{parseArr(obj.child!, refs)}</b>,
+  B: (obj, refs) => <b>{parseArr(obj.child!, refs)}</b>,
 
-  BR: (_obj: JsonType, _refs: RefType) => <br />,
+  BR: (_obj, _refs) => <br />,
 
   DISPLAYFOOTNOTE: handleFootnote,
 
-  EM: (obj: JsonType, refs: RefType) => <em>{parseArr(obj.child!, refs)}</em>,
+  EM: (obj, refs) => <em>{parseArr(obj.child!, refs)}</em>,
 
   EPIGRAPH: handleEpigraph,
 
@@ -227,35 +227,35 @@ export const processingFunctions: Record<string, (obj: JsonType, refs: RefType)
 
   FIGURE: handleFigure,
 
-  FOOTNOTE_REF: (obj: JsonType, refs: RefType) => (
+  FOOTNOTE_REF: (obj, refs) => (
     <sup ref={ref => (refs.current[obj.id!] = ref)}>{handleRef(obj, refs)}</sup>
   ),
 
-  JAVASCRIPTINLINE: (obj: JsonType, _refs: RefType) => <Code>{obj.body}</Code>,
+  JAVASCRIPTINLINE: (obj, _refs) => <Code>{obj.body}</Code>,
 
-  LATEX: (obj: JsonType, _refs: RefType) => handleLatex(obj.body!),
+  LATEX: (obj, _refs) => handleLatex(obj.body!),
 
-  LI: (obj: JsonType, refs: RefType) => <li>{parseArr(obj.child!, refs)}</li>,
+  LI: (obj, refs) => <li>{parseArr(obj.child!, refs)}</li>,
 
-  LINK: (obj: JsonType, _refs: RefType) => <a href={obj.href}>{obj.body}</a>,
+  LINK: (obj, _refs) => <a href={obj.href}>{obj.body}</a>,
 
-  META: (obj: JsonType, _refs: RefType) => <em>{obj.body}</em>,
+  META: (obj, _refs) => <em>{obj.body}</em>,
 
-  OL: (obj: JsonType, refs: RefType) => <OL>{parseArr(obj.child!, refs)}</OL>,
+  OL: (obj, refs) => <OL>{parseArr(obj.child!, refs)}</OL>,
 
   REF: handleRef,
 
   REFERENCE: handleReference,
 
-  SNIPPET: (obj: JsonType, _refs: RefType) => handleSnippet(obj),
+  SNIPPET: (obj, _refs) => handleSnippet(obj),
 
-  SUBHEADING: (obj: JsonType, refs: RefType) => (
+  SUBHEADING: (obj, refs) => (
     <AnchorLink id={obj.id} refs={refs} top={2}>
       <H2>{parseArr(obj.child!, refs)}</H2>
     </AnchorLink>
   ),
 
-  SUBSUBHEADING: (obj: JsonType, refs: RefType) => (
+  SUBSUBHEADING: (obj, refs) => (
     <AnchorLink id={obj.id} refs={refs} top={16}>
       <H4>
         <br />
@@ -264,13 +264,13 @@ export const processingFunctions: Record<string, (obj: JsonType, refs: RefType)
     </AnchorLink>
   ),
 
-  TABLE: (obj: JsonType, refs: RefType) => (
+  TABLE: (obj, refs) => (
     <table>
       <tbody>{obj.child!.map((x, index) => handleTR(x, refs, index))}</tbody>
     </table>
   ),
 
-  TEXT: (obj: JsonType, refs: RefType) => (
+  TEXT: (obj, refs) => (
     <AnchorLink id={obj.id} refs={refs} top={-3}>
       <p className="sicp-text">{parseArr(obj.child!, refs)}</p>
     </AnchorLink>
@@ -278,9 +278,9 @@ export const processingFunctions: Record<string, (obj: JsonType, refs: RefType)
 
   TITLE: handleTitle,
 
-  TT: (obj: JsonType, refs: RefType) => <Code>{parseArr(obj.child!, refs)}</Code>,
+  TT: (obj, refs) => <Code>{parseArr(obj.child!, refs)}</Code>,
 
-  UL: (obj: JsonType, refs: RefType) => <UL>{parseArr(obj.child!, refs)}</UL>
+  UL: (obj, refs) => <UL>{parseArr(obj.child!, refs)}</UL>
 };
 
 // Parse array of objects. An array of objects represent sibling nodes.

From fc1210737cd7547b18edf75a4a506598c64346de Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Wed, 24 Jan 2024 15:29:03 +0800
Subject: [PATCH 02/12] Remove unused styles

These styles seem to have been duplicated to
`_achievementdashboard.scss` and not used anywhere.
---
 src/styles/_achievementcontrol.scss | 108 ----------------------------
 1 file changed, 108 deletions(-)

diff --git a/src/styles/_achievementcontrol.scss b/src/styles/_achievementcontrol.scss
index 4fc7ba08b3..6dccc7865b 100644
--- a/src/styles/_achievementcontrol.scss
+++ b/src/styles/_achievementcontrol.scss
@@ -172,114 +172,6 @@
           }
         }
       }
-
-      .task {
-        .achievement-card {
-          cursor: pointer;
-          display: flex;
-          flex-direction: row;
-          height: $card-height;
-          transition: box-shadow 0.2s ease-out;
-          width: $card-width;
-
-          .dropdown-button {
-            align-items: center;
-            display: flex;
-            height: $card-height;
-            padding: 0 0 0 0.5em;
-            width: $card-height;
-          }
-
-          .content {
-            display: flex;
-            flex-direction: column;
-            height: $card-height;
-            width: $card-width - $card-height;
-
-            .heading {
-              align-items: center;
-              display: flex;
-              flex-direction: row;
-              height: math.div($card-height * 3, 5);
-            }
-
-            .details {
-              display: flex;
-              flex-direction: row;
-              font-size: 0.8em;
-
-              p {
-                margin: 0;
-              }
-
-              .ability {
-                align-items: center;
-                display: flex;
-                flex: 1 1 50%;
-              }
-
-              .deadline,
-              .xp {
-                align-items: center;
-                display: flex;
-                flex: 1 1 25%;
-
-                p {
-                  padding: 0 0 0 0.3em;
-                }
-              }
-            }
-
-            .progress {
-              height: 0.2em;
-              margin: 0.2em 0 0 0;
-              width: 95%;
-            }
-          }
-        }
-
-        .achievement-card:hover {
-          box-shadow: 0 0 10px black;
-          transition: box-shadow 0.2s ease-in;
-        }
-
-        .prerequisite-container {
-          $shrink-factor: 0.9;
-          $line-width: 1em;
-          // remaining-width is the empty space between line and card
-          $remaining-width: math.div((1 - $shrink-factor) * $card-width - 2 * $line-width, 2);
-          $top-spacing: 0.2em;
-          $line-extension: 0.1em;
-
-          display: flex;
-          flex-direction: column;
-
-          .prerequisite {
-            display: flex;
-            flex-direction: row;
-            max-width: $card-width;
-
-            .dropdown-lines {
-              height: $top-spacing + $card-height + $remaining-width + $line-extension;
-              margin: -#{math.div($card-height, 1.6)} -#{$line-width + $remaining-width} 0
-                $line-width;
-              min-width: $line-width;
-            }
-
-            .achievement-card {
-              margin: $top-spacing 0 0 0;
-              transform: scale($shrink-factor);
-            }
-          }
-
-          .prerequisite:first-child {
-            .dropdown-lines {
-              height: $top-spacing + math.div($card-height, 2) + $remaining-width;
-              margin-top: 0;
-            }
-          }
-        }
-      }
     }
   }
 

From 143e97142e021d05371f6d3397d8dce956933f0b Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Wed, 24 Jan 2024 15:31:09 +0800
Subject: [PATCH 03/12] Move some academy styles to use CSS modules

---
 src/pages/academy/Academy.tsx   |  5 +++--
 src/styles/_academy.module.scss | 17 +++++++++++++++++
 src/styles/_academy.scss        | 16 ----------------
 src/styles/_global.scss         |  2 ++
 4 files changed, 22 insertions(+), 18 deletions(-)
 create mode 100644 src/styles/_academy.module.scss

diff --git a/src/pages/academy/Academy.tsx b/src/pages/academy/Academy.tsx
index 5b1a8bf931..222b216f77 100644
--- a/src/pages/academy/Academy.tsx
+++ b/src/pages/academy/Academy.tsx
@@ -7,6 +7,7 @@ import { Role } from 'src/commons/application/ApplicationTypes';
 import ResearchAgreementPrompt from 'src/commons/researchAgreementPrompt/ResearchAgreementPrompt';
 import Constants from 'src/commons/utils/Constants';
 import { useSession } from 'src/commons/utils/Hooks';
+import classes from 'src/styles/_academy.module.scss';
 
 import {
   fetchNotifications,
@@ -48,7 +49,7 @@ const Academy: React.FC<{}> = () => {
         ]
       : null;
   return (
-    <div className="Academy">
+    <div className={classes['Academy']}>
       {/* agreedToResearch has a default value of undefined in the store.
             It will take on null/true/false when the backend returns. */}
       {Constants.showResearchPrompt && agreedToResearch === null && <ResearchAgreementPrompt />}
@@ -112,7 +113,7 @@ const CourseSelectingAcademy: React.FC<{}> = () => {
   ) : routeCourseId === courseId ? (
     <Academy />
   ) : (
-    <div className={classNames('Academy-switching-courses', Classes.DARK)}>
+    <div className={classNames(classes['Academy-switching-courses'], Classes.DARK)}>
       <Card className={Classes.ELEVATION_4}>
         <NonIdealState
           description="Switching courses..."
diff --git a/src/styles/_academy.module.scss b/src/styles/_academy.module.scss
new file mode 100644
index 0000000000..88adf782b2
--- /dev/null
+++ b/src/styles/_academy.module.scss
@@ -0,0 +1,17 @@
+@import '_global';
+
+.Academy {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 100%;
+}
+
+.Academy-switching-courses {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/styles/_academy.scss b/src/styles/_academy.scss
index 47038b3755..e504c33ba0 100644
--- a/src/styles/_academy.scss
+++ b/src/styles/_academy.scss
@@ -14,22 +14,6 @@
   }
 }
 
-.Academy {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 100%;
-}
-
-.Academy-switching-courses {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 // Fixes excessive margins in hint notifications that contain <Markdown> elements
 .markdown-notification {
   *:first-child {
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index 5922a82b6e..d15641caaf 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -1,3 +1,5 @@
+$ns: 'bp4';
+
 // Global variables
 $cadet-color-1: #1a2530;
 $cadet-color-2: #2c3e50;

From 752c55b67d71eb7676a3a802596807449217a2cf Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Wed, 24 Jan 2024 15:40:07 +0800
Subject: [PATCH 04/12] Move AchievementCommentCard styles to CSS modules

---
 .../achievement/AchievementCommentCard.tsx       | 16 ++++++++++------
 ...s.scss => AchievementCommentCard.module.scss} |  0
 src/styles/index.scss                            |  1 -
 3 files changed, 10 insertions(+), 7 deletions(-)
 rename src/styles/{_assessmentComments.scss => AchievementCommentCard.module.scss} (100%)

diff --git a/src/commons/achievement/AchievementCommentCard.tsx b/src/commons/achievement/AchievementCommentCard.tsx
index fe8cc768d4..ae259c2650 100644
--- a/src/commons/achievement/AchievementCommentCard.tsx
+++ b/src/commons/achievement/AchievementCommentCard.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { useNavigate } from 'react-router';
+import classes from 'src/styles/AchievementCommentCard.module.scss';
 
 import { Assessment } from '../assessment/AssessmentTypes';
 import { useTypedSelector } from '../utils/Hooks';
@@ -28,22 +29,25 @@ const AchievementCommentCard: React.FC<{
 
   return (
     <div>
-      <h1 className="assessment-feedback">Feedback</h1>
-      <div className="feedback-list">
+      <h1 className={classes['assessment-feedback']}>Feedback</h1>
+      <div className={classes['feedback-list']}>
         {assessment &&
           assessment.questions.map((question, index) => (
-            <div className="assessment-comments" key={index}>
+            <div className={classes['assessment-comments']} key={index}>
               <span>
-                <h2 className="question-header">{'Q' + (index + 1)}</h2>
+                <h2 className={classes['question-header']}>{'Q' + (index + 1)}</h2>
               </span>
 
-              <div className="box-comment">
+              <div className={classes['box-comment']}>
                 <p>{question.comments === null ? 'No Comments' : question.comments}</p>
                 <p className="xp">{'XP: ' + question.xp + '/' + question.maxXp}</p>
               </div>
 
               {showToQuestion && (
-                <button className="to-assessment-button" onClick={() => toMission(index)}>
+                <button
+                  className={classes['to-assessment-button']}
+                  onClick={() => toMission(index)}
+                >
                   {'To Question'}
                 </button>
               )}
diff --git a/src/styles/_assessmentComments.scss b/src/styles/AchievementCommentCard.module.scss
similarity index 100%
rename from src/styles/_assessmentComments.scss
rename to src/styles/AchievementCommentCard.module.scss
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 6e1e2a7367..57a55a401a 100755
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -51,4 +51,3 @@
 @import 'variableHighlighting';
 @import 'workspaceGreen';
 @import 'workspace';
-@import 'assessmentComments';

From 20742846a9626714f4ff3c76faa0f1662f85c007 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Wed, 24 Jan 2024 15:41:06 +0800
Subject: [PATCH 05/12] Remove CSS selector nesting

Prevents unnecessary selector specificity. Since we now use CSS modules,
there is no risk of style conflicts.
---
 src/styles/AchievementCommentCard.module.scss | 58 +++++++++----------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/styles/AchievementCommentCard.module.scss b/src/styles/AchievementCommentCard.module.scss
index 8793fa407f..2dce1a13d4 100644
--- a/src/styles/AchievementCommentCard.module.scss
+++ b/src/styles/AchievementCommentCard.module.scss
@@ -5,42 +5,42 @@
 .feedback-list {
   padding-left: 2rem;
   padding-right: 2rem;
+}
 
-  .assessment-comments {
-    display: flex;
-    margin-bottom: 0.5rem;
+.assessment-comments {
+  display: flex;
+  margin-bottom: 0.5rem;
+}
 
-    .question-header {
-      margin-top: 0;
-    }
+.question-header {
+  margin-top: 0;
+}
 
-    .box-comment {
-      flex-grow: 1;
-      display: block;
-      padding-top: 0.1rem;
-      padding-left: 1rem;
-      padding-right: 1rem;
+.box-comment {
+  flex-grow: 1;
+  display: block;
+  padding-top: 0.1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
 
-      white-space: pre-wrap;
-      word-break: break-word;
+  white-space: pre-wrap;
+  word-break: break-word;
 
-      .xp {
-        font-weight: 700;
-        color: orange;
-      }
-    }
+  .xp {
+    font-weight: 700;
+    color: orange;
+  }
+}
 
-    .to-assessment-button {
-      flex: none;
+.to-assessment-button {
+  flex: none;
 
-      height: 2rem;
-      width: 6rem;
+  height: 2rem;
+  width: 6rem;
 
-      margin-top: 0.1rem;
-      margin-bottom: 1rem;
-      border-radius: 5px;
+  margin-top: 0.1rem;
+  margin-bottom: 1rem;
+  border-radius: 5px;
 
-      cursor: pointer;
-    }
-  }
+  cursor: pointer;
 }

From 7f985b91c35da739761e4d4da10b89371c2860b2 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Wed, 24 Jan 2024 15:54:34 +0800
Subject: [PATCH 06/12] Move Contributors to use CSS modules

---
 .../subcomponents/ContributorsDetails.tsx     |  33 ++---
 .../subcomponents/ContributorsList.tsx        |   7 +-
 src/styles/Contributors.module.scss           | 130 ++++++++++++++++++
 src/styles/_contributors.scss                 | 128 -----------------
 4 files changed, 151 insertions(+), 147 deletions(-)
 create mode 100644 src/styles/Contributors.module.scss

diff --git a/src/pages/contributors/subcomponents/ContributorsDetails.tsx b/src/pages/contributors/subcomponents/ContributorsDetails.tsx
index 446e8ab202..16a615f72d 100644
--- a/src/pages/contributors/subcomponents/ContributorsDetails.tsx
+++ b/src/pages/contributors/subcomponents/ContributorsDetails.tsx
@@ -1,22 +1,23 @@
 import { Card, Elevation, H3, H5 } from '@blueprintjs/core';
 import React from 'react';
+import classes from 'src/styles/Contributors.module.scss';
 
 import { Links } from '../../../commons/utils/Constants';
 
-const dot = <span className="dot">&bull;</span>;
+const dot = <span className={classes['dot']}>&bull;</span>;
 
 const ContributorsDetails: React.FC = () => (
-  <div className="outsideDetails">
-    <Card className="contributorsDetails" elevation={Elevation.ONE}>
+  <div className={classes['outsideDetails']}>
+    <Card className={classes['contributorsDetails']} elevation={Elevation.ONE}>
       <H3>The Team behind the Source Academy</H3>
-      <p className="description">
+      <p className={classes['description']}>
         The <i>Source Academy</i> is designed and developed by a team of students, most of who have
         used the system to learn the fundamentals of computing and enjoyed it. This page includes
         all developers who contributed to the Source Academy <i>Merlin</i> (2023) and its precursors{' '}
         <i>Rook</i> (2022), <i>Knight</i> (2020) and <i>Cadet</i> (2018). These versions succeeded
         Source Academy 2 (2017) and ultimately the original Source Academy (2016).
       </p>
-      <div className="leadership">
+      <div className={classes['leadership']}>
         <H5>
           <strong>
             <u>2023 Leadership (Merlin)</u>
@@ -86,7 +87,7 @@ const ContributorsDetails: React.FC = () => (
           <strong>(Coordination)</strong>
         </p>
       </div>
-      <div className="hallOfFame">
+      <div className={classes['hallOfFame']}>
         <H5>
           <strong>
             <u>Hall of Fame</u>
@@ -110,7 +111,7 @@ const ContributorsDetails: React.FC = () => (
           Ng Tse Pei {dot} Joey Yeo {dot} Tan Yu Wei {dot} Sigmund Chianasta
         </p>
       </div>
-      <div className="leadership">
+      <div className={classes['leadership']}>
         <p>
           <strong>2019 Leadership</strong>
         </p>
@@ -145,8 +146,8 @@ const ContributorsDetails: React.FC = () => (
           (Tools)
         </p>
       </div>
-      <div className="leadership">
-        <p className="evenWider">
+      <div className={classes['leadership']}>
+        <p className={classes['evenWider']}>
           <strong>2020 Leadership (Knight)</strong>
         </p>
         <br />
@@ -180,13 +181,13 @@ const ContributorsDetails: React.FC = () => (
           (Source)
         </p>
         {dot}
-        <p className="wider">
+        <p className={classes['wider']}>
           Tee Hao Wei
           <br />
           (Backend &amp; DevOps)
         </p>
       </div>
-      <div className="leadership">
+      <div className={classes['leadership']}>
         <p>
           <strong>2021 Leadership</strong>
         </p>
@@ -203,20 +204,20 @@ const ContributorsDetails: React.FC = () => (
           (Frontend)
         </p>
         {dot}
-        <p className="evenWider">
+        <p className={classes['evenWider']}>
           Daryl Tan, Thomas Tan
           <br />
           (Source)
         </p>
         {dot}
-        <p className="wider">
+        <p className={classes['wider']}>
           Tee Hao Wei
           <br />
           (Backend &amp; DevOps)
         </p>
       </div>
-      <div className="leadership">
-        <p className="evenWider">
+      <div className={classes['leadership']}>
+        <p className={classes['evenWider']}>
           <strong>2022 Leadership (Rook)</strong>
         </p>
         <br />
@@ -270,7 +271,7 @@ const ContributorsDetails: React.FC = () => (
           (Modules)
         </p>
       </div>
-      <div className="contributors">
+      <div className={classes['contributors']}>
         <H5>
           <strong>
             <u>All Contributors</u>
diff --git a/src/pages/contributors/subcomponents/ContributorsList.tsx b/src/pages/contributors/subcomponents/ContributorsList.tsx
index cea6cd6ee0..373f2d67cc 100644
--- a/src/pages/contributors/subcomponents/ContributorsList.tsx
+++ b/src/pages/contributors/subcomponents/ContributorsList.tsx
@@ -1,5 +1,6 @@
 import { Card, Elevation, H2, H3, H5 } from '@blueprintjs/core';
 import React, { useEffect, useState } from 'react';
+import classes from 'src/styles/Contributors.module.scss';
 
 import { Contributor, Repo } from '../../../features/contributors/ContributorsTypes';
 import { fetchContributors, fetchRepos } from './ContributorsGithubApi';
@@ -34,12 +35,12 @@ const ContributorsList: React.FC = () => {
         );
       });
       return (
-        <Card key={repo.key} className="containerPermalink" elevation={Elevation.ONE}>
-          <div className="repoDetailsPermalink">
+        <Card key={repo.key} className={classes['containerPermalink']} elevation={Elevation.ONE}>
+          <div className={classes['repoDetailsPermalink']}>
             <H3>{repo.name}</H3>
             <H5>{repo.description}</H5>
           </div>
-          <div className="inPermalink">{arrayMapped}</div>
+          <div className={classes['inPermalink']}>{arrayMapped}</div>
         </Card>
       );
     })
diff --git a/src/styles/Contributors.module.scss b/src/styles/Contributors.module.scss
new file mode 100644
index 0000000000..903a27d6dd
--- /dev/null
+++ b/src/styles/Contributors.module.scss
@@ -0,0 +1,130 @@
+@import "_global";
+
+// Styling components of the ContributorsDetails
+
+.outsideDetails {
+  text-align: center;
+
+  .contributorsDetails {
+    background-color: $cadet-color-4;
+    display: inline-block;
+    margin-top: 2%;
+    margin-bottom: 2%;
+    padding: 1% 1% 1% 1%;
+
+    h3 {
+      font-weight: bold;
+      font-style: oblique;
+    }
+
+    p {
+      margin-right: 0.5%;
+      margin-left: 0.5%;
+    }
+
+    p.description {
+      text-align: justify;
+      text-align-last: center;
+    }
+
+    span.dot {
+      padding: 0 0.2rem 0 0.2rem;
+    }
+
+    div.leadership {
+      margin-top: 10px;
+      text-align: center;
+
+      p {
+        vertical-align: top;
+        display: inline-block;
+        width: 120px;
+        &.wider {
+          width: 140px;
+        }
+        &.evenWider {
+          width: 180px;
+        }
+      }
+    }
+
+    div.hallOfFame {
+      margin-top: 10px;
+      text-align: center;
+    }
+
+    div.contributors {
+      margin-top: 10px;
+      text-align: center;
+
+      h5 {
+        text-align: center;
+      }
+    }
+  }
+}
+
+// Styling components of the ContributorsList
+
+.containerPermalink {
+  background-color: $cadet-color-4;
+  margin-bottom: 2%;
+}
+
+div.inPermalink {
+  background-color: $cadet-color-4;
+  text-align: justify;
+
+  div {
+    text-align: center;
+    vertical-align: top;
+    display: inline-block;
+    width: 20%;
+    height: 20%;
+    margin-top: 1%;
+    margin-bottom: 0.5%;
+
+    @media screen and (max-width: 1000px) {
+      width: 33.3%;
+      height: 33.3%;
+    }
+  }
+
+  img {
+    width: 90%;
+    height: 90%;
+  }
+
+  p {
+    margin-bottom: 0.2rem;
+    color: $cadet-color-2;
+  }
+
+  a {
+    text-decoration: none;
+    font-weight: bold;
+    color: $cadet-color-1;
+    &:hover {
+      color: $cadet-color-3;
+    }
+  }
+}
+
+div.repoDetailsPermalink {
+  text-align: center;
+
+  h3 {
+    margin: 0% 2% 0.5% 2%;
+    color: $cadet-color-2;
+  }
+
+  h3::first-letter {
+    text-transform: uppercase;
+  }
+
+  h5 {
+    margin: 0% 2% 1% 2%;
+    font-style: italic;
+    color: $cadet-color-1;
+  }
+}
diff --git a/src/styles/_contributors.scss b/src/styles/_contributors.scss
index ae71e58eb7..56b7dbc4fe 100644
--- a/src/styles/_contributors.scss
+++ b/src/styles/_contributors.scss
@@ -24,131 +24,3 @@
     }
   }
 }
-
-// Styling components of the ContributorsDetails
-
-.outsideDetails {
-  text-align: center;
-
-  .contributorsDetails {
-    background-color: $cadet-color-4;
-    display: inline-block;
-    margin-top: 2%;
-    margin-bottom: 2%;
-    padding: 1% 1% 1% 1%;
-
-    h3 {
-      font-weight: bold;
-      font-style: oblique;
-    }
-
-    p {
-      margin-right: 0.5%;
-      margin-left: 0.5%;
-    }
-
-    p.description {
-      text-align: justify;
-      text-align-last: center;
-    }
-
-    span.dot {
-      padding: 0 0.2rem 0 0.2rem;
-    }
-
-    div.leadership {
-      margin-top: 10px;
-      text-align: center;
-
-      p {
-        vertical-align: top;
-        display: inline-block;
-        width: 120px;
-        &.wider {
-          width: 140px;
-        }
-        &.evenWider {
-          width: 180px;
-        }
-      }
-    }
-
-    div.hallOfFame {
-      margin-top: 10px;
-      text-align: center;
-    }
-
-    div.contributors {
-      margin-top: 10px;
-      text-align: center;
-
-      h5 {
-        text-align: center;
-      }
-    }
-  }
-}
-
-// Styling components of the ContributorsList
-
-.containerPermalink {
-  background-color: $cadet-color-4;
-  margin-bottom: 2%;
-}
-
-div.inPermalink {
-  background-color: $cadet-color-4;
-  text-align: justify;
-
-  div {
-    text-align: center;
-    vertical-align: top;
-    display: inline-block;
-    width: 20%;
-    height: 20%;
-    margin-top: 1%;
-    margin-bottom: 0.5%;
-    @include mQ(1000px) {
-      width: 33.3%;
-      height: 33.3%;
-    }
-  }
-
-  img {
-    width: 90%;
-    height: 90%;
-  }
-
-  p {
-    margin-bottom: 0.2rem;
-    color: $cadet-color-2;
-  }
-
-  a {
-    text-decoration: none;
-    font-weight: bold;
-    color: $cadet-color-1;
-    &:hover {
-      color: $cadet-color-3;
-    }
-  }
-}
-
-div.repoDetailsPermalink {
-  text-align: center;
-
-  h3 {
-    margin: 0% 2% 0.5% 2%;
-    color: $cadet-color-2;
-  }
-
-  h3::first-letter {
-    text-transform: uppercase;
-  }
-
-  h5 {
-    margin: 0% 2% 1% 2%;
-    font-style: italic;
-    color: $cadet-color-1;
-  }
-}

From 8e3bb9c64d75f5fbedafc76f67ab2a46eb355e1b Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Wed, 24 Jan 2024 16:39:22 +0800
Subject: [PATCH 07/12] Fix regressions due to `Academy` CSS module

---
 src/pages/githubAssessments/GitHubClassroom.tsx | 3 ++-
 src/pages/missionControl/MissionControl.tsx     | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/githubAssessments/GitHubClassroom.tsx b/src/pages/githubAssessments/GitHubClassroom.tsx
index ca6448c799..f696ca13a8 100644
--- a/src/pages/githubAssessments/GitHubClassroom.tsx
+++ b/src/pages/githubAssessments/GitHubClassroom.tsx
@@ -8,6 +8,7 @@ import { useDispatch } from 'react-redux';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 import { loginGitHub, logoutGitHub } from 'src/commons/application/actions/SessionActions';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
+import academyClasses from 'src/styles/_academy.module.scss';
 
 import ContentDisplay from '../../commons/ContentDisplay';
 import { MissionRepoData } from '../../commons/githubAssessments/GitHubMissionTypes';
@@ -101,7 +102,7 @@ const GitHubClassroom: React.FC = () => {
   );
 
   return (
-    <div className="Academy" style={{ overflow: 'hidden' }}>
+    <div className={academyClasses['Academy']} style={{ overflow: 'hidden' }}>
       <GitHubAssessmentsNavigationBar
         changeCourseHandler={changeCourseHandler}
         handleGitHubLogIn={handleGitHubLogIn}
diff --git a/src/pages/missionControl/MissionControl.tsx b/src/pages/missionControl/MissionControl.tsx
index 1bda71eb53..a9cb9da18b 100644
--- a/src/pages/missionControl/MissionControl.tsx
+++ b/src/pages/missionControl/MissionControl.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Navigate, useParams } from 'react-router';
 import { useSession } from 'src/commons/utils/Hooks';
 import { numberRegExp } from 'src/features/academy/AcademyTypes';
+import academyClasses from 'src/styles/_academy.module.scss';
 
 import { AssessmentStatuses } from '../../commons/assessment/AssessmentTypes';
 import ContentDisplay from '../../commons/ContentDisplay';
@@ -50,7 +51,7 @@ const MissionControl: React.FC = () => {
       closeDate: overview.closeAt
     };
     return (
-      <div className="Academy">
+      <div className={academyClasses['Academy']}>
         <EditingWorkspace {...assessmentProps} />
       </div>
     );

From 5896c73277a138424f2885c788d175735a67446d Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Wed, 24 Jan 2024 16:56:06 +0800
Subject: [PATCH 08/12] Move some navigation bar styles to CSS modules

---
 src/commons/navigationBar/NavigationBar.tsx | 19 +++++++++++--------
 src/styles/NavigationBar.module.scss        |  7 +++++++
 src/styles/_blueprint.scss                  |  9 ---------
 src/styles/index.scss                       |  1 -
 4 files changed, 18 insertions(+), 18 deletions(-)
 create mode 100644 src/styles/NavigationBar.module.scss
 delete mode 100644 src/styles/_blueprint.scss

diff --git a/src/commons/navigationBar/NavigationBar.tsx b/src/commons/navigationBar/NavigationBar.tsx
index 1ad361a2b7..3a8a331886 100644
--- a/src/commons/navigationBar/NavigationBar.tsx
+++ b/src/commons/navigationBar/NavigationBar.tsx
@@ -18,6 +18,7 @@ import classNames from 'classnames';
 import { Location } from 'history';
 import { useCallback, useMemo, useState } from 'react';
 import { NavLink, Route, Routes, useLocation } from 'react-router-dom';
+import classes from 'src/styles/NavigationBar.module.scss';
 
 import Dropdown from '../dropdown/Dropdown';
 import NotificationBadge from '../notificationBadge/NotificationBadge';
@@ -304,7 +305,14 @@ const NavigationBar: React.FC = () => {
 
   return (
     <>
-      <Navbar className={classNames('NavigationBar', 'primary-navbar', Classes.DARK)}>
+      <Navbar
+        className={classNames(
+          'NavigationBar',
+          'primary-navbar',
+          classes['primary-navbar'],
+          Classes.DARK
+        )}
+      >
         {Constants.playgroundOnly
           ? isMobileBreakpoint
             ? renderPlaygroundOnlyNavbarLeftMobile()
@@ -376,7 +384,7 @@ export const renderNavlinksFromInfo = (
 export const createDesktopNavlink: CreateNavlinkFunction = navbarEntry => (
   <NavLink
     className={({ isActive }) =>
-      classNames('NavigationBar__link', Classes.BUTTON, Classes.MINIMAL, {
+      classNames(Classes.BUTTON, Classes.MINIMAL, {
         [Classes.ACTIVE]: isActive
       })
     }
@@ -385,12 +393,7 @@ export const createDesktopNavlink: CreateNavlinkFunction = navbarEntry => (
     title={navbarEntry.text}
   >
     <Icon icon={navbarEntry.icon} />
-    <div
-      className={classNames(
-        'navbar-button-text',
-        navbarEntry.hiddenInBreakpoints?.map(bp => `hidden-${bp}`)
-      )}
-    >
+    <div className={classNames(navbarEntry.hiddenInBreakpoints?.map(bp => `hidden-${bp}`))}>
       {navbarEntry.text}
     </div>
     {navbarEntry.hasNotifications && (
diff --git a/src/styles/NavigationBar.module.scss b/src/styles/NavigationBar.module.scss
new file mode 100644
index 0000000000..2891e6304e
--- /dev/null
+++ b/src/styles/NavigationBar.module.scss
@@ -0,0 +1,7 @@
+@import "_global";
+
+.primary-navbar {
+  background: #141e30; /* fallback for old browsers */
+  background: -webkit-linear-gradient(to right, #141e30, #243b55); /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(to right, $cadet-color-1, $cadet-color-2);
+}
diff --git a/src/styles/_blueprint.scss b/src/styles/_blueprint.scss
deleted file mode 100644
index 3a7a52af01..0000000000
--- a/src/styles/_blueprint.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.#{$ns}-navbar.#{$ns}-dark {
-  background: #141e30; /* fallback for old browsers */
-  background: -webkit-linear-gradient(to right, #141e30, #243b55); /* Chrome 10-25, Safari 5.1-6 */
-  background: linear-gradient(
-    to right,
-    $cadet-color-1,
-    $cadet-color-2
-  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 57a55a401a..356edba2fe 100755
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -19,7 +19,6 @@
 
 @import '../../node_modules/@blueprintjs/core/lib/scss/variables';
 @import 'global';
-@import 'blueprint';
 
 @import 'academy';
 @import 'achievementcontrol';

From 1f96912e6607071c6377e92e3bff715e3817e107 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Wed, 24 Jan 2024 16:56:24 +0800
Subject: [PATCH 09/12] Fix format

---
 src/styles/Contributors.module.scss  | 2 +-
 src/styles/NavigationBar.module.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/Contributors.module.scss b/src/styles/Contributors.module.scss
index 903a27d6dd..fb49f38b01 100644
--- a/src/styles/Contributors.module.scss
+++ b/src/styles/Contributors.module.scss
@@ -1,4 +1,4 @@
-@import "_global";
+@import '_global';
 
 // Styling components of the ContributorsDetails
 
diff --git a/src/styles/NavigationBar.module.scss b/src/styles/NavigationBar.module.scss
index 2891e6304e..64102990b5 100644
--- a/src/styles/NavigationBar.module.scss
+++ b/src/styles/NavigationBar.module.scss
@@ -1,4 +1,4 @@
-@import "_global";
+@import '_global';
 
 .primary-navbar {
   background: #141e30; /* fallback for old browsers */

From b536d7ede0a49239d112c8222b30c966d6d9fd2b Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Wed, 24 Jan 2024 17:31:40 +0800
Subject: [PATCH 10/12] Move GitHub assessment styles to CSS modules

Also deleted some unused styles. Further refactoring awaits to properly
separate out and group the relevant styles to relevant files.
---
 .../githubAssessments/GitHubMissionCreateDialog.tsx    |  3 ++-
 .../githubAssessments/GitHubMissionSaveDialog.tsx      |  3 ++-
 .../githubAssessments/SideContentMissionEditor.tsx     |  9 +++++----
 .../githubAssessments/GitHubAssessmentWorkspace.tsx    |  3 ++-
 ...bAssessments.scss => GithubAssessments.module.scss} | 10 ++--------
 src/styles/index.scss                                  |  1 -
 6 files changed, 13 insertions(+), 16 deletions(-)
 rename src/styles/{_githubAssessments.scss => GithubAssessments.module.scss} (86%)

diff --git a/src/commons/githubAssessments/GitHubMissionCreateDialog.tsx b/src/commons/githubAssessments/GitHubMissionCreateDialog.tsx
index 9f81e9038c..6388f43797 100644
--- a/src/commons/githubAssessments/GitHubMissionCreateDialog.tsx
+++ b/src/commons/githubAssessments/GitHubMissionCreateDialog.tsx
@@ -1,6 +1,7 @@
 import { AnchorButton, Button, Classes, Dialog, InputGroup, Intent } from '@blueprintjs/core';
 import classNames from 'classnames';
 import React, { useState } from 'react';
+import classes from 'src/styles/GithubAssessments.module.scss';
 
 import { showWarningMessage } from '../utils/notifications/NotificationsHelper';
 
@@ -19,7 +20,7 @@ export const GitHubMissionCreateDialog: React.FC<GitHubMissionCreateDialogProps>
   const [repositoryName, setrepositoryName] = useState('sa-new-mission-repository');
 
   return (
-    <Dialog className="missionBrowser" isOpen={true}>
+    <Dialog className={classes['missionBrowser']} isOpen={true}>
       <div className={classNames('githubDialogHeader', Classes.DIALOG_HEADER)}>
         <h3>Please confirm your save</h3>
       </div>
diff --git a/src/commons/githubAssessments/GitHubMissionSaveDialog.tsx b/src/commons/githubAssessments/GitHubMissionSaveDialog.tsx
index 558085e322..09537c5dde 100644
--- a/src/commons/githubAssessments/GitHubMissionSaveDialog.tsx
+++ b/src/commons/githubAssessments/GitHubMissionSaveDialog.tsx
@@ -1,6 +1,7 @@
 import { AnchorButton, Button, Classes, Dialog, InputGroup, Intent } from '@blueprintjs/core';
 import classNames from 'classnames';
 import React, { useState } from 'react';
+import classes from 'src/styles/GithubAssessments.module.scss';
 
 export type GitHubMissionSaveDialogResolution = {
   confirmSave: boolean;
@@ -23,7 +24,7 @@ export const GitHubMissionSaveDialog: React.FC<GitHubMissionSaveDialogProps> = p
   const [commitMessage, setCommitMessage] = useState('');
 
   return (
-    <Dialog className="missionBrowser" isOpen={true}>
+    <Dialog className={classes['missionBrowser']} isOpen={true}>
       <div className={classNames('githubDialogHeader', Classes.DIALOG_HEADER)}>
         <h3>Please confirm your save</h3>
       </div>
diff --git a/src/commons/sideContent/githubAssessments/SideContentMissionEditor.tsx b/src/commons/sideContent/githubAssessments/SideContentMissionEditor.tsx
index 2705e57179..296ae5901b 100644
--- a/src/commons/sideContent/githubAssessments/SideContentMissionEditor.tsx
+++ b/src/commons/sideContent/githubAssessments/SideContentMissionEditor.tsx
@@ -1,6 +1,7 @@
 import { Label } from '@blueprintjs/core';
 import { Chapter } from 'js-slang/dist/types';
 import React from 'react';
+import classes from 'src/styles/GithubAssessments.module.scss';
 
 import { SALanguage } from '../../application/ApplicationTypes';
 import { ControlBarChapterSelect } from '../../controlBar/ControlBarChapterSelect';
@@ -15,12 +16,12 @@ export type SideContentMissionEditorProps = {
 
 const SideContentMissionEditor: React.FC<SideContentMissionEditorProps> = props => {
   return (
-    <div className="SideContentMissionEditor">
-      <div className="SideContentMissionEditorRow">
-        <div className="SideContentMissionEditorLabelColumn">
+    <div className={classes['SideContentMissionEditor']}>
+      <div className={classes['SideContentMissionEditorRow']}>
+        <div className={classes['SideContentMissionEditorLabelColumn']}>
           <Label>Source Version</Label>
         </div>
-        <div className="SideContentMissionEditorOptionColumn">
+        <div className={classes['SideContentMissionEditorOptionColumn']}>
           <ControlBarChapterSelect
             isFolderModeEnabled={props.isFolderModeEnabled}
             sourceChapter={props.missionMetadata.sourceVersion}
diff --git a/src/pages/githubAssessments/GitHubAssessmentWorkspace.tsx b/src/pages/githubAssessments/GitHubAssessmentWorkspace.tsx
index 18db93619c..08f29202ec 100644
--- a/src/pages/githubAssessments/GitHubAssessmentWorkspace.tsx
+++ b/src/pages/githubAssessments/GitHubAssessmentWorkspace.tsx
@@ -35,6 +35,7 @@ import {
   updateReplValue,
   updateWorkspace
 } from 'src/commons/workspace/WorkspaceActions';
+import classes from 'src/styles/GithubAssessments.module.scss';
 
 import { ExternalLibraryName } from '../../commons/application/types/ExternalTypes';
 import { Testcase } from '../../commons/assessment/AssessmentTypes';
@@ -1139,7 +1140,7 @@ const GitHubAssessmentWorkspace: React.FC = () => {
 
   if (isLoading) {
     return (
-      <div className={classNames('missionLoading', Classes.DARK)}>
+      <div className={classNames(classes['missionLoading'], Classes.DARK)}>
         <NonIdealState description="Loading" icon={<Spinner size={SpinnerSize.LARGE} />} />
       </div>
     );
diff --git a/src/styles/_githubAssessments.scss b/src/styles/GithubAssessments.module.scss
similarity index 86%
rename from src/styles/_githubAssessments.scss
rename to src/styles/GithubAssessments.module.scss
index 7b6a11edba..99ddeea726 100644
--- a/src/styles/_githubAssessments.scss
+++ b/src/styles/GithubAssessments.module.scss
@@ -1,3 +1,5 @@
+@import '_global';
+
 .missionBrowser {
   background-color: $cadet-color-3;
   min-width: 600px;
@@ -17,14 +19,6 @@
   flex-direction: column;
   flex: 1 1 100%;
 
-  .workspace {
-    .ControlBar {
-      .ControlBar_editingWorkspace {
-        width: 0;
-      }
-    }
-  }
-
   .SideContentMissionEditorRow {
     display: flex;
     flex-direction: row;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 356edba2fe..7332203cf8 100755
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -35,7 +35,6 @@
 @import 'fileSystemView';
 @import 'game';
 @import 'github';
-@import 'githubAssessments';
 @import 'storysimulator';
 @import 'groundcontrol';
 @import 'login';

From a642b1a37c28eb893b5f55aef34e8aadcde36a1f Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Wed, 24 Jan 2024 17:38:03 +0800
Subject: [PATCH 11/12] Standardise CSS module filenames to use PascalCase

---
 src/pages/academy/Academy.tsx                            | 2 +-
 src/pages/githubAssessments/GitHubClassroom.tsx          | 2 +-
 src/pages/missionControl/MissionControl.tsx              | 2 +-
 src/styles/{_academy.module.scss => Academy.module.scss} | 0
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename src/styles/{_academy.module.scss => Academy.module.scss} (100%)

diff --git a/src/pages/academy/Academy.tsx b/src/pages/academy/Academy.tsx
index 222b216f77..8d375d7436 100644
--- a/src/pages/academy/Academy.tsx
+++ b/src/pages/academy/Academy.tsx
@@ -7,7 +7,7 @@ import { Role } from 'src/commons/application/ApplicationTypes';
 import ResearchAgreementPrompt from 'src/commons/researchAgreementPrompt/ResearchAgreementPrompt';
 import Constants from 'src/commons/utils/Constants';
 import { useSession } from 'src/commons/utils/Hooks';
-import classes from 'src/styles/_academy.module.scss';
+import classes from 'src/styles/Academy.module.scss';
 
 import {
   fetchNotifications,
diff --git a/src/pages/githubAssessments/GitHubClassroom.tsx b/src/pages/githubAssessments/GitHubClassroom.tsx
index f696ca13a8..77e32a787e 100644
--- a/src/pages/githubAssessments/GitHubClassroom.tsx
+++ b/src/pages/githubAssessments/GitHubClassroom.tsx
@@ -8,7 +8,7 @@ import { useDispatch } from 'react-redux';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 import { loginGitHub, logoutGitHub } from 'src/commons/application/actions/SessionActions';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
-import academyClasses from 'src/styles/_academy.module.scss';
+import academyClasses from 'src/styles/Academy.module.scss';
 
 import ContentDisplay from '../../commons/ContentDisplay';
 import { MissionRepoData } from '../../commons/githubAssessments/GitHubMissionTypes';
diff --git a/src/pages/missionControl/MissionControl.tsx b/src/pages/missionControl/MissionControl.tsx
index a9cb9da18b..c0b8f98d7f 100644
--- a/src/pages/missionControl/MissionControl.tsx
+++ b/src/pages/missionControl/MissionControl.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Navigate, useParams } from 'react-router';
 import { useSession } from 'src/commons/utils/Hooks';
 import { numberRegExp } from 'src/features/academy/AcademyTypes';
-import academyClasses from 'src/styles/_academy.module.scss';
+import academyClasses from 'src/styles/Academy.module.scss';
 
 import { AssessmentStatuses } from '../../commons/assessment/AssessmentTypes';
 import ContentDisplay from '../../commons/ContentDisplay';
diff --git a/src/styles/_academy.module.scss b/src/styles/Academy.module.scss
similarity index 100%
rename from src/styles/_academy.module.scss
rename to src/styles/Academy.module.scss

From 90f6c204f34ca052b17d4e97314b3bfcd26cd42e Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Wed, 24 Jan 2024 17:52:05 +0800
Subject: [PATCH 12/12] Update test snapshots

---
 .../__snapshots__/NavigationBar.tsx.snap      | 36 +++++------
 .../AcademyNavigationBar.tsx.snap             | 60 +++++++++----------
 2 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/src/commons/navigationBar/__tests__/__snapshots__/NavigationBar.tsx.snap b/src/commons/navigationBar/__tests__/__snapshots__/NavigationBar.tsx.snap
index bd1b775d42..04091d52bc 100644
--- a/src/commons/navigationBar/__tests__/__snapshots__/NavigationBar.tsx.snap
+++ b/src/commons/navigationBar/__tests__/__snapshots__/NavigationBar.tsx.snap
@@ -3,7 +3,7 @@
 exports[`NavigationBar Renders "Not logged in" correctly 1`] = `
 <React.Fragment>
   <Blueprint4.Navbar
-    className="NavigationBar primary-navbar bp4-dark"
+    className="NavigationBar primary-navbar primary-navbar bp4-dark"
   >
     <Blueprint4.NavbarGroup
       align="left"
@@ -64,7 +64,7 @@ exports[`NavigationBar Renders "Not logged in" correctly 1`] = `
           icon="briefcase"
         />
         <div
-          className="navbar-button-text"
+          className=""
         >
           Classroom
         </div>
@@ -134,7 +134,7 @@ exports[`NavigationBar Renders "Not logged in" correctly 1`] = `
 exports[`NavigationBar Renders correctly for student with course 1`] = `
 <React.Fragment>
   <Blueprint4.Navbar
-    className="NavigationBar primary-navbar bp4-dark"
+    className="NavigationBar primary-navbar primary-navbar bp4-dark"
   >
     <Blueprint4.NavbarGroup
       align="left"
@@ -156,7 +156,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
                   icon="flame"
                 />
                 <div
-                  className="navbar-button-text hidden-xs hidden-sm"
+                  className="hidden-xs hidden-sm"
                 >
                   Missions
                 </div>
@@ -174,7 +174,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
                   icon="lightbulb"
                 />
                 <div
-                  className="navbar-button-text hidden-xs hidden-sm"
+                  className="hidden-xs hidden-sm"
                 >
                   Quests
                 </div>
@@ -192,7 +192,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
                   icon="predictive-analysis"
                 />
                 <div
-                  className="navbar-button-text hidden-xs hidden-sm"
+                  className="hidden-xs hidden-sm"
                 >
                   Paths
                 </div>
@@ -210,7 +210,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
                   icon="comparison"
                 />
                 <div
-                  className="navbar-button-text hidden-xs hidden-sm"
+                  className="hidden-xs hidden-sm"
                 >
                   Contests
                 </div>
@@ -228,7 +228,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
                   icon="manual"
                 />
                 <div
-                  className="navbar-button-text hidden-xs hidden-sm"
+                  className="hidden-xs hidden-sm"
                 >
                   Missions
                 </div>
@@ -286,7 +286,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
           icon="music"
         />
         <div
-          className="navbar-button-text"
+          className=""
         >
           Sourcecast
         </div>
@@ -300,7 +300,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
           icon="code"
         />
         <div
-          className="navbar-button-text"
+          className=""
         >
           Playground
         </div>
@@ -314,7 +314,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
           icon="briefcase"
         />
         <div
-          className="navbar-button-text"
+          className=""
         >
           Classroom
         </div>
@@ -328,7 +328,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
           icon="book"
         />
         <div
-          className="navbar-button-text"
+          className=""
         >
           SICP JS
         </div>
@@ -342,7 +342,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
           icon="mountain"
         />
         <div
-          className="navbar-button-text"
+          className=""
         >
           Achievements
         </div>
@@ -356,7 +356,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
           icon="git-repo"
         />
         <div
-          className="navbar-button-text"
+          className=""
         >
           Stories
         </div>
@@ -438,7 +438,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
 exports[`NavigationBar Renders correctly for student without course 1`] = `
 <React.Fragment>
   <Blueprint4.Navbar
-    className="NavigationBar primary-navbar bp4-dark"
+    className="NavigationBar primary-navbar primary-navbar bp4-dark"
   >
     <Blueprint4.NavbarGroup
       align="left"
@@ -499,7 +499,7 @@ exports[`NavigationBar Renders correctly for student without course 1`] = `
           icon="briefcase"
         />
         <div
-          className="navbar-button-text"
+          className=""
         >
           Classroom
         </div>
@@ -513,7 +513,7 @@ exports[`NavigationBar Renders correctly for student without course 1`] = `
           icon="book"
         />
         <div
-          className="navbar-button-text"
+          className=""
         >
           SICP JS
         </div>
@@ -527,7 +527,7 @@ exports[`NavigationBar Renders correctly for student without course 1`] = `
           icon="git-repo"
         />
         <div
-          className="navbar-button-text"
+          className=""
         >
           Stories
         </div>
diff --git a/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/AcademyNavigationBar.tsx.snap b/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/AcademyNavigationBar.tsx.snap
index 6da5e2b8a0..15ca97ab04 100644
--- a/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/AcademyNavigationBar.tsx.snap
+++ b/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/AcademyNavigationBar.tsx.snap
@@ -16,7 +16,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
         icon="flame"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm"
+        className="hidden-xs hidden-sm"
       >
         Missions
       </div>
@@ -34,7 +34,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
         icon="lightbulb"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm"
+        className="hidden-xs hidden-sm"
       >
         Quests
       </div>
@@ -52,7 +52,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
         icon="predictive-analysis"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm"
+        className="hidden-xs hidden-sm"
       >
         Paths
       </div>
@@ -70,7 +70,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
         icon="comparison"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm"
+        className="hidden-xs hidden-sm"
       >
         Contests
       </div>
@@ -88,7 +88,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
         icon="manual"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm"
+        className="hidden-xs hidden-sm"
       >
         Others
       </div>
@@ -110,7 +110,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
         icon="satellite"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm"
+        className="hidden-xs hidden-sm"
       >
         Ground Control
       </div>
@@ -124,7 +124,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
         icon="globe"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm"
+        className="hidden-xs hidden-sm"
       >
         Dashboard
       </div>
@@ -138,7 +138,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
         icon="mobile-video"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm hidden-md"
+        className="hidden-xs hidden-sm hidden-md"
       >
         Sourcereel
       </div>
@@ -152,7 +152,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
         icon="endorsed"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm hidden-md"
+        className="hidden-xs hidden-sm hidden-md"
       >
         Grading
       </div>
@@ -170,7 +170,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
         icon="crown"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm hidden-md"
+        className="hidden-xs hidden-sm hidden-md"
       >
         Game Simulator
       </div>
@@ -184,7 +184,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
         icon="notifications"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm hidden-md hidden-lg"
+        className="hidden-xs hidden-sm hidden-md hidden-lg"
       >
         Notifications
       </div>
@@ -209,7 +209,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         icon="flame"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm"
+        className="hidden-xs hidden-sm"
       >
         Missions
       </div>
@@ -227,7 +227,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         icon="lightbulb"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm"
+        className="hidden-xs hidden-sm"
       >
         Quests
       </div>
@@ -245,7 +245,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         icon="predictive-analysis"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm"
+        className="hidden-xs hidden-sm"
       >
         Paths
       </div>
@@ -263,7 +263,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         icon="comparison"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm"
+        className="hidden-xs hidden-sm"
       >
         Contests
       </div>
@@ -281,7 +281,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         icon="manual"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm"
+        className="hidden-xs hidden-sm"
       >
         Others
       </div>
@@ -303,7 +303,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         icon="notifications"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm hidden-md hidden-lg"
+        className="hidden-xs hidden-sm hidden-md hidden-lg"
       >
         Notifications
       </div>
@@ -328,7 +328,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         icon="flame"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm"
+        className="hidden-xs hidden-sm"
       >
         Missions
       </div>
@@ -346,7 +346,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         icon="lightbulb"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm"
+        className="hidden-xs hidden-sm"
       >
         Quests
       </div>
@@ -364,7 +364,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         icon="predictive-analysis"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm"
+        className="hidden-xs hidden-sm"
       >
         Paths
       </div>
@@ -382,7 +382,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         icon="comparison"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm"
+        className="hidden-xs hidden-sm"
       >
         Contests
       </div>
@@ -400,7 +400,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         icon="manual"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm"
+        className="hidden-xs hidden-sm"
       >
         Others
       </div>
@@ -422,7 +422,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         icon="satellite"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm"
+        className="hidden-xs hidden-sm"
       >
         Ground Control
       </div>
@@ -436,7 +436,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         icon="globe"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm"
+        className="hidden-xs hidden-sm"
       >
         Dashboard
       </div>
@@ -450,7 +450,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         icon="mobile-video"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm hidden-md"
+        className="hidden-xs hidden-sm hidden-md"
       >
         Sourcereel
       </div>
@@ -464,7 +464,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         icon="endorsed"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm hidden-md"
+        className="hidden-xs hidden-sm hidden-md"
       >
         Grading
       </div>
@@ -482,7 +482,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         icon="crown"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm hidden-md"
+        className="hidden-xs hidden-sm hidden-md"
       >
         Game Simulator
       </div>
@@ -496,7 +496,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         icon="calculator"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm hidden-md hidden-lg"
+        className="hidden-xs hidden-sm hidden-md hidden-lg"
       >
         XP Calculation
       </div>
@@ -510,7 +510,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         icon="settings"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm hidden-md hidden-lg"
+        className="hidden-xs hidden-sm hidden-md hidden-lg"
       >
         Admin Panel
       </div>
@@ -524,7 +524,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         icon="notifications"
       />
       <div
-        className="navbar-button-text hidden-xs hidden-sm hidden-md hidden-lg"
+        className="hidden-xs hidden-sm hidden-md hidden-lg"
       >
         Notifications
       </div>