Refactor cards into separate components

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 { faFile } from "@fortawesome/free-solid-svg-icons";
+
+const FileCard: React.FC = () => {
+  return (
+    <Card className={styles.quickViewCard}>
+      <Card.Img variant="top" src={graphIllustration} />
+      <Card.Body>
+        <Card.Title>Document</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>
+  );
+};
+
+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 { faFolder } from "@fortawesome/free-solid-svg-icons";
+
+const FolderCard: React.FC = () => {
+  return (
+    <Card className={styles.folderCard}>
+      <Card.Body style={{ padding: ".6rem" }}>
+        <Card.Text style={{ marginBottom: 0 }}>Folder</Card.Text>
+        <FontAwesomeIcon style={{ fontSize: "1.125rem" }} icon={faFolder} />
+      </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

@@ -2,22 +2,15 @@ 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 Row from "react-bootstrap/esm/Row";
 import Col from "react-bootstrap/esm/Col";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faFile,
-} from "@fortawesome/free-solid-svg-icons";
 import ResourceSectionHeader from "../ResourceSectionHeader";
+import FileCard from "components/atoms/FileCard";
 
 const QuickAccess: React.FC = () => {
   return (
     <>
-      <ResourceSectionHeader/>
+      <ResourceSectionHeader heading="Quick Access"/>
 
       <Row
         className={classNames(
@@ -37,30 +30,7 @@ const QuickAccess: React.FC = () => {
 						key={i}
 						style={{marginBottom: ".5rem"}}
           >
-            <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>
+            <FileCard/>
           </Col>
         ))}
       </Row>

frontend/src/components/molecules/QuickAccess/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;

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

 import React from "react";
-import styles from "./style.module.scss";
-import Card from "react-bootstrap/Card";
 import Row from "react-bootstrap/esm/Row";
 import Col from "react-bootstrap/esm/Col";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faFolder,  
-} from "@fortawesome/free-solid-svg-icons";
 import ResourceSectionHeader from "../ResourceSectionHeader";
+import FolderCard from "components/atoms/FolderCard";
 
 const ResourceFolders: React.FC = () => {
   return (
     <>
-      <ResourceSectionHeader/>
+      <ResourceSectionHeader heading="Folders" />
 
       <Row style={{ marginTop: "10px" }}>
         {[...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>
+            <FolderCard/>
           </Col>
         ))}
       </Row>

frontend/src/components/molecules/ResourceFolders/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
+@import "assets/scss/custom";
\ No newline at end of file

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

@@ -8,11 +8,15 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { faSquare , faCheckSquare} from "@fortawesome/free-regular-svg-icons";
 
-const ResourceSectionHeader: React.FC = () => {
+export interface SectionHeaderProps {
+  heading: string;
+}
+
+const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({heading}: SectionHeaderProps) => {
   return (
     <>
       <div className={styles.sectionHeaderContainer}>
-        <span className={styles.sectionHeader}>Quick Access</span>
+        <span className={styles.sectionHeader}>{heading}</span>
         <div className={styles.sectionHeaderButtonGroup}>
           <Button className={styles.sectionHeaderButton}>
             <FontAwesomeIcon className={styles.buttonIcon} icon={faDownload} />