diff --git a/frontend/src/components/atoms/FileCard/index.tsx b/frontend/src/components/atoms/FileCard/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a2b674889fac23a3ae793bef7439b6c37bc62376
--- /dev/null
+++ b/frontend/src/components/atoms/FileCard/index.tsx
@@ -0,0 +1,32 @@
+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;
diff --git a/frontend/src/components/atoms/FileCard/style.module.scss b/frontend/src/components/atoms/FileCard/style.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4c3395e6c843edd5b13f65899a3b9c1a02b525f7
--- /dev/null
+++ b/frontend/src/components/atoms/FileCard/style.module.scss
@@ -0,0 +1,69 @@
+@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
diff --git a/frontend/src/components/atoms/FolderCard/index.tsx b/frontend/src/components/atoms/FolderCard/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4740e43eca8caaa2dae1650fab4ebf6a49d5aaa7
--- /dev/null
+++ b/frontend/src/components/atoms/FolderCard/index.tsx
@@ -0,0 +1,18 @@
+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;
diff --git a/frontend/src/components/atoms/FolderCard/style.module.scss b/frontend/src/components/atoms/FolderCard/style.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7b3d0722401f5b249cff1203cddf59920fc385a6
--- /dev/null
+++ b/frontend/src/components/atoms/FolderCard/style.module.scss
@@ -0,0 +1,17 @@
+@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
diff --git a/frontend/src/components/molecules/QuickAccess/index.tsx b/frontend/src/components/molecules/QuickAccess/index.tsx
index fc4c2b8b6b8b88ebd5a3897d94cd6de057f1e496..9cef4dfdf1a510cf290de11e754a08070a847bb7 100644
--- a/frontend/src/components/molecules/QuickAccess/index.tsx
+++ b/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>
diff --git a/frontend/src/components/molecules/QuickAccess/style.module.scss b/frontend/src/components/molecules/QuickAccess/style.module.scss
index 45d9cf6d29a4dd83562c783dc986f1f79233a655..00092d3680fa85bc218a34621a95d91e6db7ef36 100644
--- a/frontend/src/components/molecules/QuickAccess/style.module.scss
+++ b/frontend/src/components/molecules/QuickAccess/style.module.scss
@@ -1,66 +1,5 @@
@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;
diff --git a/frontend/src/components/molecules/ResourceFolders/index.tsx b/frontend/src/components/molecules/ResourceFolders/index.tsx
index 192ad1f7513f2f67f76a2170f395ecc5039a4d35..1f1ea0dde089b96fe4b67ce4e6acbf21fd757ab4 100644
--- a/frontend/src/components/molecules/ResourceFolders/index.tsx
+++ b/frontend/src/components/molecules/ResourceFolders/index.tsx
@@ -1,31 +1,18 @@
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>
diff --git a/frontend/src/components/molecules/ResourceFolders/style.module.scss b/frontend/src/components/molecules/ResourceFolders/style.module.scss
index 7b3d0722401f5b249cff1203cddf59920fc385a6..90ea856afd314ce5f5fcb15385a193cded7090ca 100644
--- a/frontend/src/components/molecules/ResourceFolders/style.module.scss
+++ b/frontend/src/components/molecules/ResourceFolders/style.module.scss
@@ -1,17 +1 @@
-@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
diff --git a/frontend/src/components/molecules/ResourceSectionHeader/index.tsx b/frontend/src/components/molecules/ResourceSectionHeader/index.tsx
index c5826576416864b9362c6c7ef96881561366c850..1f772ff7cec29be828141d6d51058180cd90a09a 100644
--- a/frontend/src/components/molecules/ResourceSectionHeader/index.tsx
+++ b/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} />