Fix conflicts in ModuleResources component

frontend/src/assets/scss/custom.scss

 // Override default variables before the import
 $nav-pills-link-active-color: black;
 
+
+//* bootstrap 5's grid. To use, import the following line in the .module.scss */
+// @import "assets/scss/bootstrap5/bootstrap-grid";
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 2000px
+);
+
 //Bootstrap 5 scss from: https://github.com/twbs/bootstrap/tree/main/scss
 @import "bootstrap5/functions";
 @import "bootstrap5/variables";
-@import "bootstrap5/mixins";
\ No newline at end of file
+@import "bootstrap5/mixins";

frontend/src/components/atoms/FileCard/index.tsx

+import React from "react";
+import styles from "./style.module.scss";
+
+import classNames from "classnames";
+
+import graphIllustration from "assets/images/graph-illustration.svg";
+import Badge from "react-bootstrap/Badge";
+import Card from "react-bootstrap/Card";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+
+export interface FileCardProps {
+  title: string;
+  type: string;
+  tags: string[];
+  icon: IconDefinition;
+  onIconClick: (event: React.MouseEvent) => void;
+  onClick: (event: React.MouseEvent) => void;
+  onMouseOver: (event: React.MouseEvent) => void;
+  onMouseOut: (event: React.MouseEvent) => void;
+}
+
+const FileCard: React.FC<FileCardProps> = ({
+  title,
+  type,
+  tags,
+  icon,
+  onIconClick,
+  onClick,
+  onMouseOver,
+  onMouseOut,
+}: FileCardProps) => {
+  return (
+    <Card className={styles.quickViewCard} onClick={onClick}>
+      <Card.Img variant="top" src={graphIllustration} />
+      <Card.Body>
+        <Card.Title>{title}</Card.Title>
+        <FontAwesomeIcon
+          style={{ fontSize: "1.125rem" }}
+          icon={icon}
+          onMouseOver={onMouseOver}
+          onMouseOut={onMouseOut}
+          onClick={onIconClick}
+        />
+      </Card.Body>
+      <Card.Footer>
+        {tags.map((tag) => (
+          <Badge
+            pill
+            key={tag}
+            className={classNames(
+              styles.quickViewTag,
+              tag === "new" ? styles.tagTeal : styles.tagBlue
+            )}
+          >
+            {tag}
+          </Badge>
+        ))}
+      </Card.Footer>
+    </Card>
+  );
+};
+
+export default FileCard;

frontend/src/components/atoms/FileCard/style.module.scss

+@import "assets/scss/custom";
+
+.quickViewCard {
+  border-radius: 0.5rem;
+  border-color: $gray-300;
+  transition: transform 0.2s;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.quickViewCard:hover {
+  transform: scale(1.03);
+}
+
+.quickViewCard :global(.card-body) {
+  padding: 0.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid $gray-300;
+}
+
+.quickViewCard :global(.card-footer) {
+  border-radius: 0.5rem !important;
+  background: #fff;
+  border-width: 0rem;
+  padding: 0.5rem;
+  display: flex;
+  align-items: flex-end;
+}
+
+.quickViewCard :global(.card-title) {
+  font-size: 1.125rem;
+  font-weight: 400;
+  margin-bottom: 0px;
+}
+
+.quickViewCard :global(.card-img-top) {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+
+$blue-tag-background: transparentize($blue-100, 0.5);
+$teal-tag-background: transparentize($teal-100, 0.5);
+
+.quickViewTag {
+  text-transform: uppercase;
+  font-size: 0.8rem;
+  font-weight: 500;
+  border-radius: 0.33rem;
+  margin-right: 0.5rem;
+}
+
+.tagBlue {
+  color: $blue-700;
+  background: $blue-tag-background;
+}
+
+.tagTeal {
+  color: $teal-700;
+  background: $teal-tag-background;
+}
+
+.quickAccessRow {
+  scrollbar-width: thin;
+	scrollbar-color: $white $white;
+	margin-top: 10px;
+	// margin-left: 0; // leave space before card
+}
\ No newline at end of file

frontend/src/components/atoms/FolderCard/index.tsx

+import React from "react";
+import styles from "./style.module.scss";
+import Card from "react-bootstrap/Card";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+
+export interface FolderCardProps {
+  title: string;
+  icon: IconDefinition;
+  onIconClick: (event: React.MouseEvent) => void;
+  onClick: (event: React.MouseEvent) => void;
+  onMouseOver: (event: React.MouseEvent) => void;
+  onMouseOut: (event: React.MouseEvent) => void;
+}
+
+const FolderCard: React.FC<FolderCardProps> = ({
+  title,
+  icon,
+  onIconClick,
+  onClick,
+  onMouseOver,
+  onMouseOut,
+}: FolderCardProps) => {
+  return (
+    <Card className={styles.folderCard} onClick={onClick}>
+      <Card.Body style={{ padding: ".6rem" }}>
+        <Card.Text style={{ marginBottom: 0 }}>{title}</Card.Text>
+        <FontAwesomeIcon
+          style={{ fontSize: "1.125rem" }}
+          icon={icon}
+          onMouseOver={onMouseOver}
+          onMouseOut={onMouseOut}
+          onClick={onIconClick}
+        />
+      </Card.Body>
+    </Card>
+  );
+};
+
+export default FolderCard;

frontend/src/components/atoms/FolderCard/style.module.scss

+@import "assets/scss/custom";
+
+.folderCard {
+  border-radius: 0.5rem;
+  transition: transform 0.2s;
+  margin-top: 0.67rem;
+}
+
+.folderCard:hover {
+  transform: scale(1.03);
+}
+
+.folderCard :global(.card-body) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
\ No newline at end of file

frontend/src/components/molecules/QuickAccess/index.tsx

+import React from "react";
+import styles from "./style.module.scss";
+
+import classNames from "classnames";
+import Row from "react-bootstrap/esm/Row";
+import Col from "react-bootstrap/esm/Col";
+import ResourceSectionHeader from "../ResourceSectionHeader";
+import FileCard from "components/atoms/FileCard";
+import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
+import { faFile } from "@fortawesome/free-solid-svg-icons";
+
+export interface QuickAccessProps {
+  quickAccessItems: {
+    title: string;
+    type: string;
+    tags: string[];
+    id: number;
+  }[];
+}
+
+type idBooleanMap = { [key: number]: boolean };
+interface MyState {
+  isSelected: idBooleanMap;
+  isHoveringOver: idBooleanMap;
+  isHoveringTitle: Boolean;
+}
+
+class QuickAccess extends React.Component<QuickAccessProps, MyState> {
+  constructor(props: QuickAccessProps) {
+    super(props);
+    this.state = { isSelected: [], isHoveringOver: [], isHoveringTitle: false };
+  }
+
+  componentDidMount() {
+    let isSelected: idBooleanMap = [];
+    let isHoveringOver: idBooleanMap = [];
+    this.props.quickAccessItems.forEach(({ id }: { id: number }) => {
+      isSelected[id] = false;
+      isHoveringOver[id] = false;
+    });
+    this.setState({ isSelected, isHoveringOver });
+  }
+
+  isAnySelected(): boolean {
+    let items = this.props.quickAccessItems;
+    let isSelected = this.state.isSelected;
+    for (let item in items) {
+      if (isSelected[items[item].id]) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  isAllSelected(): boolean {
+    let items = this.props.quickAccessItems;
+    let isSelected = this.state.isSelected;
+    for (let item in items) {
+      if (!isSelected[items[item].id]) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  handleIconClick(id: number) {
+    let isSelected = JSON.parse(JSON.stringify(this.state.isSelected));
+    let isHoveringOver = JSON.parse(JSON.stringify(this.state.isHoveringOver));
+    isSelected[id] = !isSelected[id];
+    isHoveringOver[id] = false;
+    this.setState({ isSelected, isHoveringOver });
+  }
+
+  handleSelectAllClick() {
+    let items = this.props.quickAccessItems;
+    let isSelected = JSON.parse(JSON.stringify(this.state.isSelected));
+    let setValue = !this.isAllSelected();
+    for (let item in items) {
+      isSelected[items[item].id] = setValue;
+    }
+    this.setState({ isSelected ,isHoveringTitle: false});
+  }
+
+  handleCardClick(id: number) {
+    if (this.isAnySelected()) {
+      this.handleIconClick(id);
+    }
+  }
+
+  handleMouseOver(id: number) {
+    let isHoveringOver = JSON.parse(JSON.stringify(this.state.isHoveringOver));
+    isHoveringOver[id] = true;
+    this.setState({ isHoveringOver });
+  }
+
+  handleMouseOut(id: number) {
+    let isHoveringOver = JSON.parse(JSON.stringify(this.state.isHoveringOver));
+    isHoveringOver[id] = false;
+    this.setState({ isHoveringOver });
+  }
+
+  render() {
+    return (
+      <>
+        <ResourceSectionHeader
+          heading="Quick Access"
+          onMouseOver={() => {
+            this.setState({ isHoveringTitle: true });
+          }}
+          onMouseOut={() => {
+            this.setState({ isHoveringTitle: false });
+          }}
+          showDownload={this.isAnySelected()}
+          showSelectAll={this.state.isHoveringTitle || this.isAnySelected()}
+          onSelectAllClick={() => this.handleSelectAllClick()}
+          selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
+        />
+
+        <Row
+          className={classNames(
+            "d-flex",
+            "flex-row",
+            "flex-nowrap",
+            styles.quickAccessRow
+          )}
+        >
+          {this.props.quickAccessItems.map(({ title, type, tags, id }) => (
+            <Col
+              xs={7}
+              sm={5}
+              md={5}
+              lg={4}
+              xl={3}
+              key={id}
+              style={{ marginBottom: ".5rem" }}
+            >
+              <FileCard
+                title={title}
+                type={type}
+                tags={tags}
+                icon={
+                  this.isAnySelected() || this.state.isHoveringOver[id]
+                    ? this.state.isSelected[id]
+                      ? faCheckSquare
+                      : faSquare
+                    : faFile
+                }
+                onClick={() => this.handleCardClick(id)}
+                onIconClick={() => this.handleIconClick(id)}
+                onMouseOver={() => this.handleMouseOver(id)}
+                onMouseOut={() => this.handleMouseOut(id)}
+              />
+            </Col>
+          ))}
+        </Row>
+      </>
+    );
+  }
+}
+
+export default QuickAccess;

frontend/src/components/molecules/QuickAccess/style.module.scss

+@import "assets/scss/custom";
+
+.quickAccessRow {
+  scrollbar-width: thin;
+	scrollbar-color: $white $white;
+	margin-top: 10px;
+	// margin-left: 0; // leave space before card
+}
+
+.quickAccessRow::-webkit-scrollbar {
+	width: 1rem;
+  height: 0.5rem;
+}
+.quickAccessRow::-webkit-scrollbar-track {
+  background: $white;
+	margin-left: 15px; 
+	margin-right: 15px; 
+}
+.quickAccessRow::-webkit-scrollbar-thumb {
+  background-color: $white;
+  border-radius: .5rem;
+}
+
+.quickAccessRow:hover {
+	scrollbar-color: $gray-400 $white;
+}
+
+.quickAccessRow:hover::-webkit-scrollbar-thumb {
+	background-color: $gray-400;
+}
+
+.quickAccessRow {
+	overflow-y: visible;
+	overflow-x: auto;
+	white-space: nowrap;
+	height: max-content;
+}

frontend/src/components/molecules/ResourceFolders/index.tsx

+import React from "react";
+import Row from "react-bootstrap/esm/Row";
+import Col from "react-bootstrap/esm/Col";
+import ResourceSectionHeader from "../ResourceSectionHeader";
+import FolderCard from "components/atoms/FolderCard";
+import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
+import { faFolder } from "@fortawesome/free-solid-svg-icons";
+export interface ResourceFoldersProps {
+  folderItems: {
+    title: string;
+    id: number;
+  }[];
+}
+
+type idBooleanMap = { [key: number]: boolean };
+interface MyState {
+  isSelected: idBooleanMap;
+  isHoveringOver: idBooleanMap;
+  isHoveringTitle: Boolean;
+}
+
+class ResourceFolders extends React.Component<ResourceFoldersProps, MyState> {
+  constructor(props: ResourceFoldersProps) {
+    super(props);
+    this.state = { isSelected: [], isHoveringOver: [], isHoveringTitle: false };
+  }
+
+  componentDidMount() {
+    let isSelected: idBooleanMap = [];
+    this.props.folderItems.forEach(({ id }: { id: number }) => {
+      isSelected[id] = false;
+    });
+    this.setState({ isSelected });
+  }
+
+  isAnySelected(): boolean {
+    let items = this.props.folderItems;
+    let isSelected = this.state.isSelected;
+    for (let item in items) {
+      if (isSelected[items[item].id]) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  isAllSelected(): boolean {
+    let items = this.props.folderItems;
+    let isSelected = this.state.isSelected;
+    for (let item in items) {
+      if (!isSelected[items[item].id]) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  handleIconClick(id: number) {
+    let isSelected = JSON.parse(JSON.stringify(this.state.isSelected));
+    let isHoveringOver = JSON.parse(JSON.stringify(this.state.isHoveringOver));
+    isSelected[id] = !isSelected[id];
+    isHoveringOver[id] = false;
+    this.setState({ isSelected, isHoveringOver });
+  }
+
+  handleSelectAllClick() {
+    let items = this.props.folderItems;
+    let isSelected = JSON.parse(JSON.stringify(this.state.isSelected));
+    let setValue = !this.isAllSelected();
+    for (let item in items) {
+      isSelected[items[item].id] = setValue;
+    }
+    this.setState({ isSelected, isHoveringTitle: false });
+  }
+
+  handleCardClick(id: number) {
+    if (this.isAnySelected()) {
+      this.handleIconClick(id);
+    }
+  }
+
+  handleMouseOver(id: number) {
+    let isHoveringOver = JSON.parse(JSON.stringify(this.state.isHoveringOver));
+    isHoveringOver[id] = true;
+    this.setState({ isHoveringOver });
+  }
+
+  handleMouseOut(id: number) {
+    let isHoveringOver = JSON.parse(JSON.stringify(this.state.isHoveringOver));
+    isHoveringOver[id] = false;
+    this.setState({ isHoveringOver });
+  }
+
+  render() {
+    return (
+      <>
+        <ResourceSectionHeader
+          heading="Folders"
+          onMouseOver={() => {
+            this.setState({ isHoveringTitle: true });
+          }}
+          onMouseOut={() => {
+            this.setState({ isHoveringTitle: false });
+          }}
+          showDownload={this.isAnySelected()}
+          showSelectAll={this.isAnySelected() || this.state.isHoveringTitle}
+          onSelectAllClick={() => this.handleSelectAllClick()}
+          selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
+        />
+
+        <Row style={{ marginTop: "10px" }}>
+          {this.props.folderItems.map(({ title, id }) => (
+            <Col xs={6} sm={6} md={3} key={id}>
+              <FolderCard
+                title={title}
+                icon={
+                  this.isAnySelected() || this.state.isHoveringOver[id]
+                    ? this.state.isSelected[id]
+                      ? faCheckSquare
+                      : faSquare
+                    : faFolder
+                }
+                onIconClick={() => this.handleIconClick(id)}
+                onClick={() => this.handleCardClick(id)}
+                onMouseOver={() => this.handleMouseOver(id)}
+                onMouseOut={() => this.handleMouseOut(id)}
+              />
+            </Col>
+          ))}
+        </Row>
+      </>
+    );
+  }
+}
+
+export default ResourceFolders;

frontend/src/components/molecules/ResourceFolders/style.module.scss

+@import "assets/scss/custom";
\ No newline at end of file

frontend/src/components/molecules/ResourceSectionHeader/index.tsx

+import React from "react";
+import styles from "./style.module.scss";
+
+import Button from "react-bootstrap/Button";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faDownload, IconDefinition } from "@fortawesome/free-solid-svg-icons";
+
+export interface SectionHeaderProps {
+  heading: string;
+  selectAllIcon: IconDefinition;
+  showDownload: Boolean;
+  showSelectAll: Boolean;
+  onSelectAllClick: (event: React.MouseEvent) => void;
+  onMouseOver: (event: React.MouseEvent) => void;
+  onMouseOut: (event: React.MouseEvent) => void;
+}
+
+const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({
+  heading,
+  showDownload,
+  selectAllIcon,
+  showSelectAll,
+  onSelectAllClick,
+  onMouseOver,
+  onMouseOut,
+}: SectionHeaderProps) => {
+  return (
+    <>
+      <div
+        className={styles.sectionHeaderContainer}
+        onMouseOut={onMouseOut}
+				onMouseOver={onMouseOver}
+      >
+        <span className={styles.sectionHeader} onClick={onSelectAllClick}>
+          {heading}
+        </span>
+        <div className={styles.sectionHeaderButtonGroup}>
+          <Button
+						className={styles.sectionHeaderButton}
+						onClick= {() => {}}
+            style={{ visibility: showDownload ? "visible" : "hidden" }}
+          >
+            <FontAwesomeIcon className={styles.buttonIcon} icon={faDownload} />
+          </Button>
+
+          <Button
+            style={{ visibility: showSelectAll ? "visible" : "hidden" }}
+            className={styles.sectionHeaderButton}
+            onClick={onSelectAllClick}
+          >
+            <FontAwesomeIcon
+              className={styles.buttonIcon}
+              icon={selectAllIcon}
+            />
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ResourceSectionHeader;

frontend/src/components/molecules/ResourceSectionHeader/style.module.scss

+@import "assets/scss/custom";
+
+.sectionHeaderContainer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1.875rem;  
+  align-items: center;
+}
+
+.sectionHeader {
+  font-weight: 500;
+	font-size: 20px;
+	display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sectionHeaderButtonGroup {
+  // display: none;
+}
+
+.sectionHeaderButton {
+  background: $white;
+  color: #000;
+  border-width: 0px;
+  border-radius: 8px;
+  margin-left: 20px;
+  justify-content: space-between;
+  height: 2.25rem;
+  transition: 0.2s background;
+  -webkit-transition: 0.2s background;
+  -moz-transition: 0.2s background;
+  font-size: 1.05rem;
+}
+
+.buttonIcon {
+  margin-top: 0.22rem;
+}
+
+.buttonCheckbox :global(.form-check-input) {
+  margin: 0px;
+}
+
+.sectionHeaderButton:active:hover,
+.sectionHeaderButton:global(.active):hover {
+  background-color: $gray-900 !important;
+}
+
+.sectionHeaderButton:global(.active),
+.sectionHeaderButton:active {
+  color: #fff;
+  background: #000 !important;
+  font-weight: 500;
+  text-align: left;
+  border-width: 0rem;
+  height: 2.25rem;
+  line-height: 1.375rem;
+}
+
+.sectionHeaderButton:hover {
+  background: #e5e5e5;
+  border-color: #fff;
+  color: #000;
+}
\ No newline at end of file

frontend/src/components/organisms/LeftBarModule/index.tsx

@@ -13,7 +13,12 @@ const LeftBarModule: React.FC = () => {
     CO140: "k0r3c04qwhj3e",
     CO142: "k0r3c156mj35b",
     CO112: "k0r3by316kp6",
-    CO145: "k0r3c1h4zik5y",
+		CO145: "k0r3c1h4zik5y",
+		"CO120.2": "k0r3bzfpcno23",
+		CO150: "k0r3c1t4x8k6l",
+		CO113: "k0r3byq0f68t",
+		CO141: "k0r3c0t7dak4o",
+		CO130: "k0r3bzsith2r",
   };
 
   let piazzaLink = "https://piazza.com/class/";

frontend/src/components/pages/ModuleOverview/index.tsx

@@ -4,9 +4,54 @@ import { useParams } from "react-router-dom";
 
 const ModuleOverview: React.FC = () => {
   let { id } = useParams();
+  let modules = [
+    {
+      title: "Introduction to Logic",
+      code: "CO140",
+    },
+    {
+      title: "Discrete Mathematics",
+      code: "CO142",
+    },
+    {
+      title: "Introduction to Computer Systems",
+      code: "CO112",
+    },
+    {
+      title: "Mathematical Methods",
+      code: "CO145",
+    },
+    {
+      title: "Java",
+      code: "CO120.2",
+    },
+    {
+      title: "Graphs and Algorithms",
+      code: "CO150",
+    },
+    {
+      title: "Introduction to Computer Architecture",
+      code: "CO113",
+    },
+    {
+      title: "Reasoning About Programs",
+      code: "CO141",
+    },
+    {
+      title: "Introduction to Databases",
+      code: "CO130",
+    },
+  ];
+  let heading = id;
+  for (let i in modules) {
+    if (modules[i].code === id) {
+      heading = modules[i].title;
+      break;
+    }
+  }
   return (
     <>
-      <Dandruff heading={id} />
+      <Dandruff heading={heading} />
     </>
   );
 };

frontend/src/components/pages/ModuleResources/index.tsx

@@ -6,21 +6,13 @@ import { request } from "../../../utils/api"
 import { api } from "../../../constants/routes"
 import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
 
-import graphIllustration from "assets/images/graph-illustration.svg";
 import InputGroup from "react-bootstrap/InputGroup";
 import FormControl from "react-bootstrap/FormControl";
 import Button from "react-bootstrap/Button";
-import Badge from "react-bootstrap/Badge";
-import Card from "react-bootstrap/Card";
-import Row from "react-bootstrap/esm/Row";
-import Col from "react-bootstrap/esm/Col";
-import Container from "react-bootstrap/Container";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faInfoCircle,
-  faFile,
-  faFolder
-} from "@fortawesome/free-solid-svg-icons";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import QuickAccess from "components/molecules/QuickAccess";
+import ResourceFolders from "components/molecules/ResourceFolders";
 
 const ModuleResources: React.FC<{ year: string, module_code: string }> = ({ year, module_code }) => {
   // TODO: Use these state variables in component
@@ -44,6 +36,72 @@ const ModuleResources: React.FC<{ year: string, module_code: string }> = ({ year
       "course": module_code
     })
   }, [year, module_code]);
+  
+  let folderItems = [
+    {
+      title: "Lecture Materials",
+      id: 0,
+    },
+    {
+      title: "Panopto Videos",
+      id: 1,
+    },
+    {
+      title: "Tutorial Sheets",
+      id: 2,
+    },
+    {
+      title: "Code",
+      id: 3,
+    },
+    {
+      title: "Useful Links",
+      id: 4,
+    },
+    {
+      title: "Other",
+      id: 5,
+    },
+	];
+	
+	let quickAccessItems = [
+    {
+			title: "Notes 1",
+			type: "File",
+			tags:["new", "Week 1"],
+      id: 0,
+		},
+		{
+			title: "Slides 1 - 1UP",
+			type: "File",
+			tags:["new", "Week 2"],
+      id: 1,
+		},
+		{
+			title: "Circuit simulator",
+			type: "Link",
+			tags:["new", "Week 2"],
+      id: 2,
+		},
+		{
+			title: "C - Lecture 1",
+			type: "Panopto",
+			tags:["new"],
+      id: 3,
+		},
+		{
+			title: "Translation Validity",
+			type: "Link",
+			tags:["Week 2"],
+      id: 4,
+		},
+		{
+			title: "Revision Exercises",
+			type: "File",
+			tags:["Week 3"],
+      id: 5,
+		},
+	]
 
   return (
     <>
@@ -61,58 +119,10 @@ const ModuleResources: React.FC<{ year: string, module_code: string }> = ({ year
         </InputGroup.Append>
       </InputGroup>
 
-      <h5 className={classNames(styles.moduleSectionHeader)}>Quick Access</h5>
-
-      {/* TODO: add scroll listener once code is refactored */}
-      <Container className={classNames(styles.quickAccessRow)}>
-        {[...Array(6)].map((e, i) => (
-          <Card className={styles.quickViewCard}>
-            <Card.Img variant="top" src={graphIllustration} />
-            <Card.Body>
-              <Card.Title>Document {i}</Card.Title>
-              <FontAwesomeIcon style={{ fontSize: "1.125rem" }} icon={faFile} />
-            </Card.Body>
-            <Card.Footer>
-              <Badge
-                pill
-                className={classNames(styles.quickViewTag, styles.tagTeal)}
-              >
-                New
-              </Badge>
-              <Badge
-                pill
-                className={classNames(styles.quickViewTag, styles.tagBlue)}
-              >
-                Week 1
-              </Badge>
-            </Card.Footer>
-          </Card>
-        ))}
-      </Container>
-
-      <h5
-        style={{ marginTop: "30px", marginBottom: "10px" }}
-        className={classNames(styles.moduleSectionHeader)}
-      >
-        Folders
-      </h5>
-      <Row>
-        {[...Array(10)].map((e, i) => (
-          <Col xs={6} sm={6} md={3} key={i}>
-            <Card className={styles.folderCard}>
-              <Card.Body style={{ padding: ".6rem" }}>
-                <Card.Text style={{ marginBottom: 0 }}>Folder {i}</Card.Text>
-                <FontAwesomeIcon
-                  style={{ fontSize: "1.125rem" }}
-                  icon={faFolder}
-                />
-              </Card.Body>
-            </Card>
-          </Col>
-        ))}
-      </Row>
+      <QuickAccess quickAccessItems={quickAccessItems}/>
+      <ResourceFolders folderItems={folderItems}/>
     </>
   );
 };
 
-export default ModuleResources;
+export default ModuleResources;
\ No newline at end of file

frontend/src/components/pages/ModuleResources/style.module.scss

 @import "assets/scss/custom";
 
-.moduleSectionHeader {
-  margin-top: 1.875rem;
-}
-
-.moduleParagraph {
-  margin-top: 1rem;
-}
 
 .searchBar {
   border-radius: 0.5rem;
@@ -59,141 +52,3 @@
   color: $white !important;
   border-color: $black;
 }
-
-.quickViewCard {
-  margin-top: 1.25rem;
-  border-radius: 0.5rem;
-  border-color: $gray-300;
-  transition: transform 0.2s;
-}
-
-.quickViewCard:hover {
-  transform: scale(1.03);
-}
-
-.quickViewCard :global(.card-body) {
-  padding: 0.5rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-top: 1px solid $gray-300;
-}
-
-.quickViewCard :global(.card-footer) {
-  border-radius: 0.5rem !important;
-  background: #fff;
-  border-width: 0rem;
-  padding: 0.5rem;
-  display: flex;
-  align-items: flex-end;
-}
-
-.quickViewCard :global(.card-title) {
-  font-size: 1.125rem;
-  font-weight: 400;
-  margin-bottom: 0px;
-}
-
-.quickViewCard :global(.card-img-top) {
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 0.5rem;
-}
-
-$blue-tag-background: transparentize($blue-100, 0.5);
-$teal-tag-background: transparentize($teal-100, 0.5);
-
-.quickViewTag {
-  text-transform: uppercase;
-  font-size: 0.8rem;
-  font-weight: 500;
-  border-radius: 0.33rem;
-  margin-right: 0.5rem;
-}
-
-.tagBlue {
-  color: $blue-700;
-  background: $blue-tag-background;
-}
-
-.tagTeal {
-  color: $teal-700;
-  background: $teal-tag-background;
-}
-
-.folderCard {
-  border-radius: 0.5rem;
-  transition: transform 0.2s;
-  margin-top: 0.67rem;
-}
-
-.folderCard:hover {
-  transform: scale(1.03);
-}
-
-.folderCard :global(.card-body) {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.quickAccessRow::-webkit-scrollbar {
-  width: 1rem;
-  height: 0.5rem;
-}
-.quickAccessRow::-webkit-scrollbar-track {
-  background: $white;
-}
-.quickAccessRow::-webkit-scrollbar-thumb {
-  background-color: $white;
-  border-radius: 0.5rem;
-}
-
-.quickAccessRow:hover {
-  scrollbar-color: $gray-400 $white;
-}
-
-.quickAccessRow:hover::-webkit-scrollbar-thumb {
-  background-color: $gray-400;
-}
-
-.quickAccessRow {
-  overflow-y: hidden;
-  overflow-x: scroll;
-  height: max-content;
-
-  scrollbar-width: thin;
-  scrollbar-color: $white $white;
-
-  margin-top: 1rem;
-  display: grid;
-  grid-gap: 20px;
-  grid-template-rows: minmax(max-width, 1fr);
-  grid-auto-flow: column;
-  padding-left: 0px;
-
-  overflow-x: scroll;
-  scroll-snap-type: x proximity;
-  padding-bottom: calc(0.75 * 20px);
-  margin-bottom: calc(-0.25 * 20px);
-  // margin-left: 0; // leave space before card
-}
-
-.quickAccessRow::before,
-.quickAccessRow::after {
-  content: ‘’;
-  width: 10px;
-}
-
-@media (max-width: 62rem) {
-  .quickAccessRow {
-    grid-auto-columns: minmax(44%, 1fr);
-    grid-template-columns: repeat(auto-fill, minmax(44%, 1fr));
-  }
-}
-
-@media (min-width: 62rem) {
-  .quickAccessRow {
-    grid-auto-columns: minmax(20%, 1fr);
-    grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
-  }
-}

frontend/src/components/pages/StandardView/index.tsx

@@ -52,7 +52,7 @@ const StandardView: React.FC<StandardViewProps> = ({
       </Switch>
 
       <div id="sidenav-overlay" onClick={(e) => onOverlayClick(e)}></div>
-      <Container className={classNames("px-3", "pageContainer")}>
+      <Container className={classNames("pageContainer")}>
         <Switch>
           <Route path="/dashboard">
             <ExamplePage name="Dashboard" />

frontend/src/components/pages/StandardView/style.scss

@@ -51,4 +51,6 @@
 .pageContainer {
   padding-top: 1.875rem;
   margin-bottom: 10rem !important;
+  padding-left: 30px;
+  padding-right: 30px;
 }