Fix sidebar issues and icon wrapping

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}

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) {

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);

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);

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>

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 {

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>

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

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" />