Change order of module outline

src/components/organisms/LeftBarModule/index.tsx

 import React from "react";
 import LeftBar from "components/organisms/LeftBar";
 import SideBarTabGroup from "components/molecules/SideBarTabGroup";
-import { faUserFriends } from "@fortawesome/free-solid-svg-icons";
+import { faUserFriends, faList, faTasks, faSpinner, faArchive, faHighlighter } from "@fortawesome/free-solid-svg-icons";
 import { useParams } from "react-router-dom";
 import WorkDueGroup from "components/molecules/WorkDueGroup";
 
@@ -30,15 +30,23 @@ const LeftBarModule: React.FC = () => {
   let outlineButtons = [
     {
       title: "Overview",
-      activeURL: `/modules/${id}/overview`
-    },
-    {
-      title: "Feedback",
-      activeURL: `/modules/${id}/feedback`
+			activeURL: `/modules/${id}/overview`,
+			icon: faList,
+		},
+		{
+      title: "Progress",
+			activeURL: `/modules/${id}/progress`,
+			icon: faSpinner,
     },
     {
       title: "Resources",
-      activeURL: `/modules/${id}/resources`
+			activeURL: `/modules/${id}/resources`,
+			icon: faArchive,
+		},
+		{
+      title: "Feedback",
+			activeURL: `/modules/${id}/feedback`,
+			icon: faHighlighter,
     },
     {
       title: "Piazza",

src/components/pages/ModuleOverview/index.tsx

@@ -9,9 +9,6 @@ import PageButtonGroup from "components/molecules/PageButtonGroup";
 import { request } from "../../../utils/api";
 import { api, methods } from "../../../constants/routes";
 
-import ProgressBar from "react-bootstrap/ProgressBar";
-import Accordion from "react-bootstrap/Accordion";
-import Card from "react-bootstrap/Card";
 
 import TutorCard from "components/atoms/TutorCard";
 import tutorImage1 from "assets/images/tutor-1.png";
@@ -106,42 +103,13 @@ const ModuleOverview: React.FC = () => {
         </ul>
       </p>
 
-      <h4 className={classNames(styles.moduleSectionHeader)}>Links</h4>
-      <PageButtonGroup buttons={buttons} style={{ marginTop: "1.25rem" }} />
-
       <h4 className={classNames(styles.moduleSectionHeader)}>Module Leaders</h4>
       <Row>
-        
       {leaderCards}
       </Row>
 
-      <h4 className={classNames(styles.moduleSectionHeader)}>Progress</h4>
-      { <ProgressBar
-				now={50}
-				className={styles.progress}
-      /> }
-      <Accordion
-        defaultActiveKey="0"
-        style={{ marginTop: "1.25rem", borderRadius: ".5rem" }}
-        className={styles.progressAccordion}
-      >
-        {[...Array(9)].map((e, i) => (
-          <Card className={styles.weekCard}>
-            <Accordion.Toggle
-              className={styles.weekCardHeader}
-              as={Card.Header}
-              eventKey={`${i}`}
-            >
-              Week {i + 1}
-            </Accordion.Toggle>
-            <Accordion.Collapse eventKey={`${i}`}>
-              <Card.Body className={styles.weekCardBody}>
-                Hello! I'm the body of week {i + 1}
-              </Card.Body>
-            </Accordion.Collapse>
-          </Card>
-        ))}
-      </Accordion>
+			<h4 className={classNames(styles.moduleSectionHeader)}>Links</h4>
+      <PageButtonGroup buttons={buttons} style={{ marginTop: "1.25rem" }} />
     </>
   );
 };

src/components/pages/ModuleOverview/style.module.scss

@@ -8,50 +8,6 @@
   margin-top: 1rem;
 }
 
-.progress {
-  background-color: $gray-100;
-  margin-top: 1.25rem;
-  border-radius: 0.5rem;
-  height: 0.75rem;
-}
-
-:global(.progress-bar) {
-  background-color: $teal-500;
-  border-radius: 0.5rem;
-}
-
-.progressAccordion {
-  border-radius: 0.5rem;
-}
-
-.weekCard {
-  background: $white;
-  border-width: 0rem;
-  margin-bottom: 0.5rem;
-  transition: 0.2s transform;
-  border-radius: 0.5rem !important;
-}
-
-.weekCardHeader {
-  background: $gray-100;
-  transition: 0.2s background;
-  -webkit-transition: 0.2s background;
-  -moz-transition: 0.2s background;
-  border-radius: 0.5rem !important;
-  font-size: 1.125rem;
-  margin-bottom: 0px !important;
-  padding: 0.5rem 0.75rem;
-  border-width: 0px;
-}
-
-.weekCardHeader:hover {
-  background: $gray-200;
-}
-
-.weekCardBody {
-  border-radius: 0.5rem;
-}
-
 @media (max-width: 62rem) {
 }
 

src/components/pages/ModuleProgress/index.tsx

+import React, { useEffect, useState } from "react";
+import Dandruff from "components/molecules/Dandruff";
+import { useParams } from "react-router-dom";
+import styles from "./style.module.scss";
+import classNames from "classnames";
+
+import { request } from "../../../utils/api";
+import { api, methods } from "../../../constants/routes";
+
+import ProgressBar from "react-bootstrap/ProgressBar";
+import Accordion from "react-bootstrap/Accordion";
+import Card from "react-bootstrap/Card";
+import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
+
+const ModuleProgress: React.FC = () => {
+  let { id } = useParams();
+  let moduleCode = id.startsWith("CO") ? id.slice(2) : id;
+
+  return (
+    <>
+			<MyBreadcrumbs />
+			<h3>Progress</h3>
+
+      <ProgressBar
+				now={50}
+				className={styles.progress}
+      /> 
+      <Accordion
+        defaultActiveKey="0"
+        style={{ marginTop: "1.25rem", borderRadius: ".5rem" }}
+        className={styles.progressAccordion}
+      >
+        {[...Array(9)].map((e, i) => (
+          <Card className={styles.weekCard}>
+            <Accordion.Toggle
+              className={styles.weekCardHeader}
+              as={Card.Header}
+              eventKey={`${i}`}
+            >
+              Week {i + 1}
+            </Accordion.Toggle>
+            <Accordion.Collapse eventKey={`${i}`}>
+              <Card.Body className={styles.weekCardBody}>
+                Hello! I'm the body of week {i + 1}
+              </Card.Body>
+            </Accordion.Collapse>
+          </Card>
+        ))}
+      </Accordion>
+    </>
+  );
+};
+
+export default ModuleProgress;
\ No newline at end of file

src/components/pages/ModuleProgress/style.module.scss

+@import "assets/scss/custom";
+
+.moduleSectionHeader {
+  margin-top: 1.875rem;
+}
+
+.moduleParagraph {
+  margin-top: 1rem;
+}
+
+.progress {
+  background-color: $gray-100;
+  margin-top: 1.25rem;
+  border-radius: 0.5rem;
+  height: 0.75rem;
+}
+
+:global(.progress-bar) {
+  background-color: $teal-500;
+  border-radius: 0.5rem;
+}
+
+.progressAccordion {
+  border-radius: 0.5rem;
+}
+
+.weekCard {
+  background: $white;
+  border-width: 0rem;
+  margin-bottom: 0.5rem;
+  transition: 0.2s transform;
+  border-radius: 0.5rem !important;
+}
+
+.weekCardHeader {
+  background: $gray-100;
+  transition: 0.2s background;
+  -webkit-transition: 0.2s background;
+  -moz-transition: 0.2s background;
+  border-radius: 0.5rem !important;
+  font-size: 1.125rem;
+  margin-bottom: 0px !important;
+  padding: 0.5rem 0.75rem;
+  border-width: 0px;
+}
+
+.weekCardHeader:hover {
+  background: $gray-200;
+}
+
+.weekCardBody {
+  border-radius: 0.5rem;
+}
+
+@media (max-width: 62rem) {
+}
+
+@media (min-width: 62rem) {
+}

src/components/pages/StandardView/index.tsx

@@ -20,6 +20,7 @@ import Container from "react-bootstrap/esm/Container";
 import ExamRubrics from "../Exams/Rubrics";
 import ExamGrading from "../Exams/Grading";
 import ExamPastPapers from "../Exams/PastPapers";
+import ModuleProgress from "../ModuleProgress";
 
 interface StandardViewProps {
   toggledLeft: boolean;
@@ -82,6 +83,10 @@ const StandardView: React.FC<StandardViewProps> = ({
             <ModuleOverview />
           </Route>
 
+					<Route path="/modules/:id/progress">
+            <ModuleProgress />
+          </Route>
+
           <Route
             path="/modules/:id/resources/:scope?"
             render={props => (