Merge branch 'master' into resources-staff-view

src/assets/scss/global.scss

@@ -54,7 +54,7 @@
 
 .sectionHeaderButton:global(.active),
 .sectionHeaderButton:active {
-  background: $gray-400 !important;
+  background:var(--secondary-text-color) !important;
   font-weight: 500;
   text-align: left;
   border-width: 0rem;
@@ -63,7 +63,7 @@
 }
 
 .sectionHeaderButton:hover, .sectionHeaderButton:focus {
-  color: var(--tertiary-text-color) !important;
+	color: var(--secondary-text-color) !important;
   background-color: var(--secondary-background-color) !important;
 	box-shadow: none !important;
 }

src/components/App.scss

@@ -18,12 +18,18 @@ code {
 
 :root {
   --background-color: #{$white};
-  --secondary-background-color: #{$gray-100};
+  --secondary-background-color: #{$gray-200};
+
+  --checker-even-color: #{$gray-100};
+  --checker-odd-color: #{$gray-200};
 
   --primary-text-color: #{$black};
   --secondary-text-color: #{$gray-700};
   --tertiary-text-color: #{$gray-500};
 
+  --primary-text-color-inverse: #{$white};
+  --background-color-inverse: #{$black};
+
   --border-color: #{$gray-200};
   --border-color-hover: #{$gray-300};
   --border-color-focus: #{$gray-300};
@@ -60,23 +66,35 @@ code {
   --scrollbar: #{$gray-400};
   --email-text: #{$blue-500};
 
-  --lecture-background: #{rgba($blue-100, 0.5)}; 
+  --lecture-background: #{rgba($blue-100, 0.5)};
   --labs-background: #{rgba($pink-100, 0.5)};
   --deadline-background: #{rgba($teal-100, 0.5)};
+  --tutorial-background: #{scale-color($blue-100, $lightness: +50%)};
+  --coursework-background: #{scale-color($teal-100, $lightness: +50%)};
 
   --lecture-text: #{$blue-700};
   --labs-text: #{$pink-700};
   --deadline-text: #{$teal-700};
+  --tutorial-text: #{$blue-700};
+  --coursework-text: #{$teal-700};
+
+  --day-indicator-column: #{rgba($gray-500, 0.25)};
 }
 
 [data-theme="dark"] {
   --background-color: #{$gray-900};
   --secondary-background-color: #{$gray-800};
 
+  --checker-even-color: #{$gray-800};
+  --checker-odd-color: #{rgba($gray-800, 0.5)};
+
   --primary-text-color: #{$white};
   --secondary-text-color: #{$gray-300};
   --tertiary-text-color: #{$gray-500};
 
+  --primary-text-color-inverse: #{$black};
+  --background-color-inverse: #{$white};
+
   --border-color: #{$gray-700};
   --border-color-hover: #{$gray-600};
   --border-color-focus: #{$gray-600};
@@ -113,13 +131,19 @@ code {
   --scrollbar: #{$gray-700};
   --email-text: #{$blue-400};
 
-  --lecture-background: #{rgba($blue-800, 0.5)}; 
+  --lecture-background: #{rgba($blue-800, 0.5)};
   --labs-background: #{rgba($pink-800, 0.5)};
   --deadline-background: #{rgba($teal-800, 0.5)};
+  --tutorial-background: #{scale-color($blue-800, $lightness: -10%)};
+  --coursework-background: #{scale-color($teal-800, $lightness: -10%)};
 
   --lecture-text: #{$blue-300};
   --labs-text: #{$pink-300};
   --deadline-text: #{$teal-300};
+  --tutorial-text: #{$blue-300};
+  --coursework-text: #{$teal-300};
+
+  --day-indicator-column: #{rgba($gray-500, 0.25)};
 }
 
 .btn-primary.focus,

src/components/App.tsx

@@ -22,6 +22,8 @@ type AppState = {
 
 class App extends React.Component<{}, AppState> {
   width = window.innerWidth;
+	isTimelineView = false;
+	
   constructor(props: {}) {
     super(props);
     this.state = {
@@ -38,7 +40,7 @@ class App extends React.Component<{}, AppState> {
     }%`;
 
     const currentTheme = localStorage.getItem("theme");
-    if (currentTheme == "light" || currentTheme == "dark") {
+    if (currentTheme === "light" || currentTheme === "dark") {
       document.documentElement.setAttribute("data-theme", currentTheme);
     } else {
       let mq = window.matchMedia("(prefers-color-scheme: dark)");
@@ -52,7 +54,7 @@ class App extends React.Component<{}, AppState> {
         this.showOrHideSideBars();
       }
     });
-    this.showOrHideSideBars();
+		this.showOrHideSideBars();
   }
 
   setDarkTheme(toSet: boolean) {
@@ -85,7 +87,7 @@ class App extends React.Component<{}, AppState> {
   }
 
   showOrHideSideBars() {
-    if (window.innerWidth <= 1024) {
+    if (window.innerWidth <= 1024 || this.isTimelineView) {
       this.setState({
         toggledLeft: false,
         toggledRight: false,
@@ -144,10 +146,22 @@ class App extends React.Component<{}, AppState> {
               onSettingsClick={() => this.setState({ showSettings: true })}
               toggledLeft={this.state.toggledLeft}
               toggledRight={this.state.toggledRight}
+              initTimelineSideBar={() => {
+								this.isTimelineView = true;
+                this.showOrHideSideBars();
+							}}
+							revertTimelineSideBar={() => {
+                this.isTimelineView = false;
+                this.showOrHideSideBars();
+              }}
               onOverlayClick={(e) => {
                 e.preventDefault();
-                this.setState({ toggledLeft: false, toggledRight: false });
+                this.setState({
+                  toggledLeft: false,
+                  toggledRight: false,
+                });
               }}
+
               fileView={this.state.fileView}
             />
 

src/components/atoms/FileCard/index.tsx

@@ -5,6 +5,7 @@ import classNames from "classnames";
 
 import applicationPDF from "assets/images/pdf-banner.png";
 import applicationDocument from "assets/images/document-banner.png";
+import applicationLink from "assets/images/link-banner.png";
 import applicationVideo from "assets/images/video-banner.png";
 
 import Badge from "react-bootstrap/Badge";
@@ -42,7 +43,10 @@ const FileCard: React.FC<FileCardProps> = ({
       break;
     case "video":
 			banner = applicationVideo;
-      break;
+			break;
+		case "link":
+			banner = applicationLink;
+			break;
     default:
       banner = applicationDocument;
       break;

src/components/atoms/ModuleCard/index.tsx

@@ -6,18 +6,9 @@ import Col from "react-bootstrap/Col";
 import { Link } from "react-router-dom";
 import { faSun, faLeaf, faSeedling } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Term, ProgressStatus } from "constants/types";
 
-export enum Term {
-  AUTUMN,
-  SPRING,
-  SUMMER
-}
 
-export enum ProgressStatus {
-  NOT_STARTED = "Not Started",
-  IN_PROGRESS = "In Progress",
-  COMPLETED = "Completed"
-}
 
 export interface ModuleCardProps {
   module: {

src/components/molecules/CategoryHeader/index.tsx

@@ -30,7 +30,8 @@ const CategoryHeader: React.FC<CategoryHeaderProps> = ({
             variant="secondary"
           >
             <FontAwesomeIcon
-              icon={selectAllIcon}
+							icon={selectAllIcon}
+							style={{color: checkBoxColor}}
             />
           </Button>
         </div>

src/components/molecules/CategoryList/index.tsx

@@ -5,8 +5,8 @@ import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
 
 import FileListItem from "components/atoms/FileListItem";
 import { SelectionProps } from "components/molecules/SelectionView";
-import { Resource, resourceTypeToIcon } from "../../pages/ModuleResources/utils";
-import { idBooleanMap } from "utils/types";
+import { resourceTypeToIcon } from "../../pages/ModuleResources/utils";
+import { idBooleanMap, Resource } from "constants/types";
 import { staffRequest } from "utils/api";
 import { api, methods } from "constants/routes";
 

src/components/molecules/LoadingScreen/index.tsx

@@ -18,7 +18,7 @@ const LoadingScreen: React.FC<LoadingScreenProps> = ({ isLoaded, error, successf
           transform: "translate(-50%, -50%)",
         }}
       >
-        <Spinner animation="border" />
+        <Spinner animation="border" variant={document.documentElement.getAttribute("data-theme") === "dark" ? "light" : "dark"} />
       </div>
     );
   if (error) return <> Error retrieving data: {error} </>;

src/components/molecules/SelectionView/components/SectionHeader/index.tsx

@@ -39,7 +39,8 @@ const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({
                 onClick={onDownloadClick}
               >
                 <FontAwesomeIcon
-                  className={styles.buttonIcon}
+									className={styles.buttonIcon}
+									style={{color: checkBoxColur}}
                   icon={faDownload}
                 />
               </Button>
@@ -53,7 +54,8 @@ const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({
             aria-expanded={show}
           >
             <FontAwesomeIcon
-              className={styles.buttonIcon}
+							className={styles.buttonIcon}
+							style={{color: checkBoxColur}}
               icon={selectAllIcon}
             />
           </Button>

src/components/molecules/SelectionView/index.tsx

 import React from "react";
 import ResourceSectionHeader from "./components/SectionHeader";
 import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
-import { idBooleanMap } from "utils/types"
+import { idBooleanMap } from "constants/types"
 
 export interface SelectionItem {
   title: string;
   id: number;
   folder?: string;
   type?: string;
-	tags?: string[];
-	thumbnail?: string;
+  tags?: string[];
+  thumbnail?: string;
 }
 
 export interface SelectionProps {
@@ -127,23 +127,27 @@ class SelectionView extends React.Component<MyProps, MyState> {
     let selection: SelectionProps = {
       selectionItems: this.props.selectionItems,
       state: this.state,
-      setIsSelected: selection => this.setState({ isSelected: selection }),
+      setIsSelected: (selection) => this.setState({ isSelected: selection }),
       isAnySelected: () => this.isAnySelected(),
       handleCardClick: (id: number) => this.handleCardClick(id),
       handleIconClick: (id: number) => this.handleIconClick(id),
       handleMouseOver: (id: number) => this.handleMouseOver(id),
-      handleMouseOut: (id: number) => this.handleMouseOut(id)
+      handleMouseOut: (id: number) => this.handleMouseOut(id),
     };
 
     return (
       <>
         <ResourceSectionHeader
           heading={this.props.heading}
-          onDownloadClick={e => this.handleDownloadClick(e)}
+          onDownloadClick={(e) => this.handleDownloadClick(e)}
           showDownload={this.isAnySelected()}
           onSelectAllClick={() => this.handleSelectAllClick()}
           selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
-          checkBoxColur={this.isAnySelected() ? "#495057" : "#e9ecef"}
+          checkBoxColur={
+            this.isAnySelected()
+              ? "var(--secondary-text-color)"
+              : "var(--secondary-button-active)"
+          }
         />
 
         {this.props.render(selection)}

src/components/molecules/TutorCardGroup/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import TutorCard from "components/atoms/TutorCard";
 import Col from "react-bootstrap/Col";
 import Row from "react-bootstrap/esm/Row";
+import styles from "./style.module.scss";
 
 export interface TutorCardGroupProps {
 	title: string;
@@ -30,10 +31,10 @@ const TutorCardGroup: React.FC<TutorCardGroupProps> = ({title
 
   return (
     <>
-      <h4>{title}</h4>
+      <h4 className={styles.groupTitle}>{title}</h4>
       <Row>{tutorCards}</Row>
     </>
   );
 };
 
-export default TutorCardGroup;
\ No newline at end of file
+export default TutorCardGroup;

src/components/molecules/TutorCardGroup/style.module.scss

 @import "assets/scss/custom";
 
-.tutorImage {
-  border-radius: 50%;
-  margin-right: 1.25rem;
-}
-
-.tutorName,
-.tutorEmail,
-.tutorAddress {
-  font-size: 1.125rem;
+.groupTitle {
+  color: var(--primary-text-color);
   margin-bottom: 0rem;
-  line-height: 1.5rem !important;
-}
-
-.tutorName {
-  color: $blue-500;
-}
-
-.tutorEmail {
-  color: var(--secondary-text-color);
-}
-
-.tutorAddress {
-  color: var(--tertiary-text-color);
 }

src/components/organisms/BottomBar/BottomBarItem/style.module.scss → src/components/organisms/BottomBar/components/BottomBarItem/style.module.scss

@@ -15,7 +15,7 @@
     width: 25%;
     margin-left: 0;
     color: var(--primary-button-text);
-    background-color: var(--primary-button);
+    background-color: var(--background-color);
     display: flex;
     align-items: center;
     justify-content: center;

src/components/organisms/BottomBar/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Navbar from "react-bootstrap/Navbar";
 import ButtonGroup from "react-bootstrap/ButtonGroup";
 import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
-import BottomBarItem from "components/organisms/BottomBar/BottomBarItem";
+import BottomBarItem from "components/organisms/BottomBar/components/BottomBarItem";
 import styles from "./style.module.scss";
 
 export interface BottomBarProps {

src/components/organisms/EditModal/index.tsx

@@ -5,7 +5,7 @@ import Button from "react-bootstrap/Button";
 import ButtonGroup from "react-bootstrap/ButtonGroup";
 
 import ResourceDetailForm, { ResourceDetails } from "components/molecules/ResourceDetailForm"
-import { Resource } from "components/pages/ModuleResources/utils";
+import { Resource } from "constants/types";
 import { staffRequest } from "utils/api"
 import { api, methods } from "constants/routes"
 

src/components/organisms/LeftBar/index.tsx

 import React from "react";
 import styles from "./style.module.scss";
-import { Link } from "react-router-dom";
+import { Route, Switch } from "react-router-dom";
+import LeftBarDashboard from "components/organisms/LeftBarDashboard";
+import LeftBarModuleList from "components/organisms/LeftBarModuleList";
+import LeftBarModule from "components/organisms/LeftBarModule";
+import LeftBarExams from "components/organisms/LeftBarExams";
+import LeftBarTimeline from "components/organisms/LeftBarTimeline";
+import { Term } from "constants/types";
 
-export interface LeftBarProps {
-  children: React.ReactNode;
+interface LeftBarProps {
+  modulesFilter: string;
+  setModulesFilter: Function;
+  timelineTerm: Term;
+  setTimelineTerm: React.Dispatch<React.SetStateAction<Term>>;
 }
 
-const LeftBar: React.FC<LeftBarProps> = ({ children }: LeftBarProps) => {
+const LeftBar: React.FC<LeftBarProps> = ({
+  modulesFilter,
+	setModulesFilter,
+	timelineTerm,
+	setTimelineTerm,
+}) => {
   return (
     <div id={styles.leftbarWrapper}>
-      <p className={styles.leftbarStatus}>
-        <Link to="/Dashboard">1 NOTICE</Link>
-      </p>
-      {children}
+      <p className={styles.leftbarStatus}>2020 - 2021</p>
+      <Switch>
+        <Route path="/modules/:id">
+          <LeftBarModule />
+        </Route>
+
+        <Route exact path="/modules">
+          <LeftBarModuleList
+            modulesFilter={modulesFilter}
+            setModulesFilter={setModulesFilter}
+          />
+        </Route>
+
+        <Route path="/exams">
+          <LeftBarExams />
+        </Route>
+
+        <Route path="/timeline">
+          <LeftBarTimeline
+            term={timelineTerm}
+            setTerm={setTimelineTerm}
+          />
+        </Route>
+
+        <Route path="/">
+          <LeftBarDashboard />
+        </Route>
+      </Switch>
     </div>
   );
 };

src/components/organisms/LeftBarDashboard/index.tsx

 import React from "react";
-import LeftBar from "components/organisms/LeftBar";
 import SideBarTabGroup from "components/molecules/SideBarTabGroup";
 import { faGitlab } from "@fortawesome/free-brands-svg-icons";
 import {
@@ -46,10 +45,10 @@ const LeftBarDashboard: React.FC = () => {
   ];
 
   return (
-    <LeftBar>
+    <>
       <SideBarTabGroup title="Links" buttons={linkButtons} />
       <WorkDueGroup />
-    </LeftBar>
+    </>
   );
 };
 

src/components/organisms/LeftBarExams/index.tsx

 import React from "react";
-import LeftBar from "components/organisms/LeftBar";
 import SideBarTabGroup from "components/molecules/SideBarTabGroup";
 import {
   faCalendarAlt,
@@ -45,9 +44,9 @@ const LeftBarExams: React.FC = () => {
   ];
 
   return (
-    <LeftBar>
+    <>
       <SideBarTabGroup title="Pages" buttons={examButtons} />
-    </LeftBar>
+    </>
   );
 };