diff --git a/frontend/src/components/pages/ModuleFeedback/index.tsx b/frontend/src/components/pages/ModuleFeedback/index.tsx
index c642e86aea3c4d8633b06c2ad384e97827e688e0..d8c15b5ba6968cd0b3b7b4bc4a24d06079e6601b 100644
--- a/frontend/src/components/pages/ModuleFeedback/index.tsx
+++ b/frontend/src/components/pages/ModuleFeedback/index.tsx
@@ -1,10 +1,99 @@
import React from "react";
-import Dandruff from "components/molecules/Dandruff";
+import styles from "./style.module.scss";
+
+import classNames from "classnames";
+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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faInfoCircle, faFile, faFolder, faClock, faExclamationTriangle, faCalendarPlus } from "@fortawesome/free-solid-svg-icons";
const ModuleFeedback: React.FC = () => {
return (
<>
- <Dandruff heading="Feedback"/>
+ <MyBreadcrumbs />
+ <InputGroup>
+ <FormControl
+ className={styles.searchBar}
+ aria-label="Search"
+ placeholder="Search..."
+ />
+ <InputGroup.Append>
+ <Button className={styles.searchBarIcon}>
+ <FontAwesomeIcon size="1x" icon={faInfoCircle} />
+ </Button>
+ </InputGroup.Append>
+ </InputGroup>
+
+ <h5 className={classNames(styles.moduleSectionHeader)}>Quick Access</h5>
+
+ <Row>
+ {[...Array(4)].map((e, i) => (
+ <Col xs={12} sm={6} md={6} lg={4} xl={3} key={i}>
+ <Card className={styles.quickViewCard}>
+ <Card.Header>
+ <div className={styles.assessmentIcons}>
+ <FontAwesomeIcon icon={faClock} />
+ <FontAwesomeIcon icon={faExclamationTriangle} />
+ <FontAwesomeIcon icon={faCalendarPlus} />
+ </div>
+ <span>40 / 50</span>
+ </Card.Header>
+ <Card.Img variant="top" src={graphIllustration} />
+ <Card.Body>
+ <Card.Title>Feedback {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>
+ </Col>
+ ))}
+ </Row>
+
+ <h5
+ style={{ marginTop: "30px", marginBottom: "10px" }}
+ className={classNames(styles.moduleSectionHeader)}
+ >
+ Folders
+ </h5>
+ <Row>
+ {[...Array(3)].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>
</>
);
};
diff --git a/frontend/src/components/pages/ModuleFeedback/style.module.scss b/frontend/src/components/pages/ModuleFeedback/style.module.scss
index 78be428d894a8424ed8121471de5f17a006c6b55..d4858c958f798bfe28348139e3d8701902284ce6 100644
--- a/frontend/src/components/pages/ModuleFeedback/style.module.scss
+++ b/frontend/src/components/pages/ModuleFeedback/style.module.scss
@@ -5,9 +5,158 @@
}
.moduleParagraph {
- margin-top: 1rem;
+ margin-top: 1rem;
}
+.assessmentIcons > * {
+ margin-right: .5rem;
+ height: 1.125rem;
+}
+
+.searchBar {
+ border-radius: 0.5rem;
+ background-color: $gray-100;
+ border-color: $gray-100;
+ transition: 0.2s background-color;
+ -webkit-transition: 0.2s background-color;
+ -moz-transition: 0.2s back-ground-color;
+}
+
+.serachBar::placeholder {
+ color: #acb5bd;
+ opacity: 1;
+}
+
+.searchBar:focus + :global(.input-group-append) .searchBarIcon {
+ box-shadow: none !important;
+ border-left: none;
+ border-color: $gray-300;
+ background-color: $white;
+}
+
+.searchBar:focus {
+ box-shadow: none !important;
+ border-right: none;
+ border-color: $gray-300;
+ background-color: $white;
+}
+
+.searchBarIcon {
+ border-radius: 0.5rem;
+ background-color: $gray-100;
+ border-color: $gray-100;
+ color: $gray-500;
+ transition: 0.2s background-color;
+ -webkit-transition: 0.2s background-color;
+ -moz-transition: 0.2s back-ground-color;
+}
+
+.searchBarIcon:hover {
+ background: $gray-200;
+ color: $gray-700 !important;
+ border-color: $gray-200;
+}
+
+.searchBarIcon:global(.active),
+.searchBarIcon:active {
+ background: $black !important;
+ font-weight: 500 !important;
+ 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-header) {
+ background: #fff;
+ border-top-left-radius: 0.5rem;
+ border-top-right-radius: 0.5rem;
+ border-width: 0rem;
+ color: #000;
+ font-weight: 500;
+ text-transform: uppercase;
+ text-align: right;
+ padding: 0.5rem;
+ font-size: 1.125rem;
+ border-bottom: 1px solid $gray-300;
+ display: flex;
+ justify-content: space-between;
+}
+
+.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-radius: 0px;
+}
+
+$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;
+ align-items: center;
+ display: flex;
+}
+
+.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;
+}
@media (max-width: 62rem) {
}
diff --git a/frontend/src/components/pages/ModuleResources/style.module.scss b/frontend/src/components/pages/ModuleResources/style.module.scss
index dccf48d52e3e1bff8b0edbf33dde28097faeb546..4a0f5c403d0939e1f24643a0c67f200fe5b4ded8 100644
--- a/frontend/src/components/pages/ModuleResources/style.module.scss
+++ b/frontend/src/components/pages/ModuleResources/style.module.scss
@@ -17,7 +17,7 @@
-moz-transition: 0.2s back-ground-color;
}
-.serachBar::placeholder {
+.searchBar::placeholder {
color: #acb5bd;
opacity: 1;
}
@@ -29,7 +29,6 @@
background-color: $white;
}
-
.searchBar:focus{
box-shadow: none !important;
border-right: none;
@@ -47,7 +46,6 @@
-moz-transition: 0.2s back-ground-color;
}
-
.searchBarIcon:hover {
background: $gray-200;
color: $gray-700 !important;