diff --git a/frontend/src/components/atoms/ModuleCard/index.tsx b/frontend/src/components/atoms/ModuleCard/index.tsx
index d66458d7448b18c6beb3dcabe78873932a8d358e..03ae8902e70a1a7a644be1e896fd4d45853ab839 100644
--- a/frontend/src/components/atoms/ModuleCard/index.tsx
+++ b/frontend/src/components/atoms/ModuleCard/index.tsx
@@ -42,7 +42,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module }: ModuleCardProps) => {
textColor = "#000";
}
return (
- <Col xs={12} sm={12} md={6} lg={6} xl={4} style={{ marginTop: "1.875rem" }}>
+ <Col xs={12} sm={12} md={6} lg={4} xl={3} style={{ marginTop: "1.875rem" }}>
<Card
className={classNames(styles.moduleCard)}
as={Link}
diff --git a/frontend/src/components/atoms/ModuleCard/style.module.scss b/frontend/src/components/atoms/ModuleCard/style.module.scss
index f515ea997eb157b7098024630b50f846f99b3774..ab00b579c89ec636773ab825c03b6f72b9641200 100644
--- a/frontend/src/components/atoms/ModuleCard/style.module.scss
+++ b/frontend/src/components/atoms/ModuleCard/style.module.scss
@@ -30,7 +30,6 @@
padding: 0.5rem;
display: flex;
justify-content: space-between;
- font-size: 1.125rem;
}
.moduleCard :global(.card-body) {
diff --git a/frontend/src/components/organisms/LeftBar/style.module.scss b/frontend/src/components/organisms/LeftBar/style.module.scss
index 077de184ae0645bbdcd598cb2b675079dc035db3..4b83558acd62e204fb43a4a02fcfd4c0c66b2f5c 100644
--- a/frontend/src/components/organisms/LeftBar/style.module.scss
+++ b/frontend/src/components/organisms/LeftBar/style.module.scss
@@ -7,8 +7,8 @@
display: block;
top: 0;
left: 0;
- width: 250px;
- height: calc(100vh - 61px);
+ width: 15.625rem;
+ height: calc(100vh - 3.8125rem);
overflow-y: auto;
overflow-x: hidden;
@@ -19,7 +19,7 @@
transition: visibility 0.5s ease-in-out, transform 0.5s ease-in-out;
z-index: 5000;
- margin-top: 61px;
+ margin-top: 3.8125rem;
padding-bottom: 1.875rem;
background: #fff;
box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
diff --git a/frontend/src/components/organisms/RightBar/style.module.scss b/frontend/src/components/organisms/RightBar/style.module.scss
index fc0fd0c429b529f356739350c24ff8c5614b0499..22ff870765b37f553b8dd665bed219e854905670 100644
--- a/frontend/src/components/organisms/RightBar/style.module.scss
+++ b/frontend/src/components/organisms/RightBar/style.module.scss
@@ -7,8 +7,8 @@
display: block;
top: 0;
right: 0;
- width: 250px;
- height: calc(100vh - 61px);
+ width: 15.625rem;
+ height: calc(100vh - 3.813rem);
overflow-y: auto;
overflow-x: hidden;
@@ -19,7 +19,7 @@
transition: visibility 0.5s ease-in-out, transform 0.5s ease-in-out;
z-index: 5000;
- margin-top: 61px;
+ margin-top: 3.813rem;
padding-bottom: 1.875rem;
background: #fff;
box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
diff --git a/frontend/src/components/pages/ModuleFeedback/index.tsx b/frontend/src/components/pages/ModuleFeedback/index.tsx
index d8c15b5ba6968cd0b3b7b4bc4a24d06079e6601b..d5ea5913f43bbe5c456317836f84c212d6310f7e 100644
--- a/frontend/src/components/pages/ModuleFeedback/index.tsx
+++ b/frontend/src/components/pages/ModuleFeedback/index.tsx
@@ -39,12 +39,7 @@ const ModuleFeedback: React.FC = () => {
<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>
+ <span className={styles.assessmentResult}>40 / 50</span>
</Card.Header>
<Card.Img variant="top" src={graphIllustration} />
<Card.Body>
diff --git a/frontend/src/components/pages/ModuleFeedback/style.module.scss b/frontend/src/components/pages/ModuleFeedback/style.module.scss
index d4858c958f798bfe28348139e3d8701902284ce6..9c82a47c8d8e88bd3a444e1fb27b32aea5a321ec 100644
--- a/frontend/src/components/pages/ModuleFeedback/style.module.scss
+++ b/frontend/src/components/pages/ModuleFeedback/style.module.scss
@@ -8,9 +8,8 @@
margin-top: 1rem;
}
-.assessmentIcons > * {
- margin-right: .5rem;
- height: 1.125rem;
+.assessmentResult{
+ float: right;
}
.searchBar {
diff --git a/frontend/src/components/pages/ModuleResources/index.tsx b/frontend/src/components/pages/ModuleResources/index.tsx
index cfd071b66747e58f20f2f08a168aa84de3817b55..3f67e142a33de5c28814552612070a4240264666 100644
--- a/frontend/src/components/pages/ModuleResources/index.tsx
+++ b/frontend/src/components/pages/ModuleResources/index.tsx
@@ -7,13 +7,19 @@ 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 Carousel from "react-bootstrap/Carousel";
+
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 } from "@fortawesome/free-solid-svg-icons";
+import {
+ faInfoCircle,
+ faFile,
+ faFolder,
+} from "@fortawesome/free-solid-svg-icons";
const ModuleResources: React.FC = () => {
useEffect(() => {
@@ -52,10 +58,16 @@ const ModuleResources: React.FC = () => {
/>
</Card.Body>
<Card.Footer>
- <Badge pill className={classNames(styles.quickViewTag, styles.tagTeal)}>
+ <Badge
+ pill
+ className={classNames(styles.quickViewTag, styles.tagTeal)}
+ >
New
</Badge>
- <Badge pill className={classNames(styles.quickViewTag, styles.tagBlue)}>
+ <Badge
+ pill
+ className={classNames(styles.quickViewTag, styles.tagBlue)}
+ >
Week 1
</Badge>
</Card.Footer>
@@ -78,7 +90,7 @@ const ModuleResources: React.FC = () => {
<Card.Text style={{ marginBottom: 0 }}>Folder {i}</Card.Text>
<FontAwesomeIcon
style={{ fontSize: "1.125rem" }}
- icon={faFile}
+ icon={faFolder}
/>
</Card.Body>
</Card>
diff --git a/frontend/src/components/pages/ModuleResources/style.module.scss b/frontend/src/components/pages/ModuleResources/style.module.scss
index 4a0f5c403d0939e1f24643a0c67f200fe5b4ded8..b9554ade2ff809dcae0b4cbeb146ccd2dc9cb3b9 100644
--- a/frontend/src/components/pages/ModuleResources/style.module.scss
+++ b/frontend/src/components/pages/ModuleResources/style.module.scss
@@ -9,10 +9,10 @@
}
.searchBar {
- border-radius: .5rem;
+ border-radius: 0.5rem;
background-color: $gray-100;
- border-color: $gray-100;
- transition: 0.2s background-color;
+ border-color: $gray-100;
+ transition: 0.2s background-color;
-webkit-transition: 0.2s background-color;
-moz-transition: 0.2s back-ground-color;
}
@@ -22,22 +22,22 @@
opacity: 1;
}
-.searchBar:focus + :global(.input-group-append) .searchBarIcon{
- box-shadow: none !important;
- border-left: none;
+.searchBar:focus + :global(.input-group-append) .searchBarIcon {
+ box-shadow: none !important;
+ border-left: none;
border-color: $gray-300;
- background-color: $white;
+ background-color: $white;
}
-.searchBar:focus{
- box-shadow: none !important;
- border-right: none;
+.searchBar:focus {
+ box-shadow: none !important;
+ border-right: none;
border-color: $gray-300;
- background-color: $white;
+ background-color: $white;
}
.searchBarIcon {
- border-radius: .5rem;
+ border-radius: 0.5rem;
background-color: $gray-100;
border-color: $gray-100;
color: $gray-500;
@@ -62,7 +62,7 @@
.quickViewCard {
margin-top: 1.25rem;
- border-radius: .5rem;
+ border-radius: 0.5rem;
border-color: $gray-300;
transition: transform 0.2s;
}
@@ -95,8 +95,8 @@
}
.quickViewCard :global(.card-img-top) {
- border-top-left-radius: .5rem;
- border-top-right-radius: .5rem;
+ border-top-left-radius: 0.5rem;
+ border-top-right-radius: 0.5rem;
}
$blue-tag-background: transparentize($blue-100, 0.5);
@@ -104,10 +104,10 @@ $teal-tag-background: transparentize($teal-100, 0.5);
.quickViewTag {
text-transform: uppercase;
- font-size: .8rem;
+ font-size: 0.8rem;
font-weight: 500;
- border-radius: .33rem;
- margin-right: .5rem;
+ border-radius: 0.33rem;
+ margin-right: 0.5rem;
}
.tagBlue {
@@ -121,7 +121,7 @@ $teal-tag-background: transparentize($teal-100, 0.5);
}
.folderCard {
- border-radius: .5rem;
+ border-radius: 0.5rem;
transition: transform 0.2s;
margin-top: 0.67rem;
}
@@ -140,4 +140,4 @@ $teal-tag-background: transparentize($teal-100, 0.5);
}
@media (min-width: 62rem) {
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/pages/StandardView/index.tsx b/frontend/src/components/pages/StandardView/index.tsx
index 52c443a9a5b186448b9c7ed961c31478bb6d743d..2c4ad1245a1ca89a6f9fead8b4f0707d83020198 100644
--- a/frontend/src/components/pages/StandardView/index.tsx
+++ b/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-4", "pageContainer")}>
+ <Container className={classNames("px-3", "pageContainer")}>
<Switch>
<Route path="/dashboard">
<ExamplePage name="Dashboard" />