diff --git a/frontend/src/components/App.scss b/frontend/src/components/App.scss
index 8898c2c203c1c04cddc1e3f0a7a516d993d37925..f7fce5ad5ad82e572ec89a09d32a194f001dabda 100644
--- a/frontend/src/components/App.scss
+++ b/frontend/src/components/App.scss
@@ -14,3 +14,306 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
+
+//-----------------------------------Top Bar-----------------------------------
+
+.top-bar {
+ padding: 12px 16px;
+ background: #fff;
+ border-bottom: 1px solid #cdd4db;
+}
+
+//------------------------------------Brand------------------------------------
+
+.brand-image {
+ margin-right: 10px;
+}
+
+.brand-container {
+ font-family: "IBM Plex Sans";
+ font-weight: 500;
+ font-size: 24px;
+ color: #000;
+ text-align: left;
+ padding: 0px;
+ display: flex;
+ justify-content: left;
+ align-items: center;
+ margin: 0px;
+}
+
+.brand-container a{
+ color: #000;
+}
+//--------------------------------Page Buttons---------------------------------
+
+@media (min-width: 992px) {
+ .page-button {
+ background: $gray-100;
+ border-radius: 5px;
+ font-family: "IBM Plex Sans";
+ font-size: 18px;
+ color: $black !important;
+ text-align: center;
+ line-height: 22px;
+ width: 120px;
+ height: 36px;
+ margin-right: 10px;
+ margin-left: 10px;
+ }
+
+ .page-button:hover {
+ background: $gray-200;
+ color: $black !important;
+ }
+
+ .page-button.active {
+ background: $black !important;
+ font-weight: 500 !important;
+ color: $white !important;
+ }
+
+ .page-button-group {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+}
+
+@media (max-width: 992px) {
+ .page-button-group {
+ display: none;
+ }
+}
+
+//----------------Bottom Bar -------------------------
+@media (max-width: 992px) {
+ .bottom-bar {
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ height: 60px;
+ background-color: #fff;
+ border-top: 1px solid #cdd4db;
+ padding: 0px;
+ }
+
+ .bottom-bar-buttons,
+ .block {
+ height: 100%;
+ width: 100%;
+ }
+
+ .btn:active,
+ .btn.active {
+ border: 0;
+ background-color: #000 !important;
+ color: #fff;
+ }
+
+ .bottom-bar-buttons .btn {
+ border: 0;
+ box-shadow: none !important;
+ outline: 0 !important;
+ border-radius: 0px;
+ width: 25%;
+ margin-left: 0;
+ color: #000;
+ background-color: #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .btn:focus {
+ border: 0;
+ box-shadow: 0 0 0 0px;
+ }
+
+ .bottom-bar-buttons .btn:hover {
+ border: 0px;
+ background-color: #ced4da;
+ }
+}
+
+@media (min-width: 992px) {
+ .bottom-bar {
+ display: none;
+ }
+}
+
+//--------------------- Left Bar -----------------
+//TODO: tidy, change classNames away from examen, and make more modular
+#wrapper {
+ padding-left: 0;
+ -webkit-transition: all 0.5s ease;
+ -moz-transition: all 0.5s ease;
+ -o-transition: all 0.5s ease;
+ transition: all 0.5s ease;
+}
+
+#sidebar-wrapper {
+ position: fixed;
+ left: 250px;
+ width: 0;
+ margin-left: -250px;
+ height: 100%;
+ margin-bottom: 61px;
+ overflow-y: auto;
+ background: #fff;
+ background: #ffffff;
+ box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+ -webkit-transition: all 0.5s ease;
+ -moz-transition: all 0.5s ease;
+ -o-transition: all 0.5s ease;
+ transition: all 0.5s ease;
+}
+
+.exam-outline-button {
+ margin-bottom: 10px;
+}
+
+.exam-outline-button-a {
+ margin-bottom: 10px;
+ border-radius: 8px;
+ font-weight: 500;
+}
+
+#sidebar-wrapper .btn-primary:not(:disabled):not(.disabled).active,
+#sidebar-wrapper .btn-primary:not(:disabled):not(.disabled):active{
+ color: #fff;
+ background-color: #000;
+ border-radius: 5px;
+ text-align: left;
+ border-width: 0px;
+ height: 40px;
+}
+
+#sidebar-wrapper .btn-primary {
+ color: #000;
+ background: #f6f8fa;
+ font-size: 17px;
+ color: #000000;
+ letter-spacing: 0;
+ border-width: 0px;
+ height: 40px;
+ border-radius: 5px;
+ text-align: left;
+}
+
+#sidebar-wrapper .btn-group-vertical > .btn-group:not(:last-child) > .btn,
+#sidebar-wrapper
+ .btn-group-vertical
+ > .btn:not(:last-child):not(.dropdown-toggle) {
+ border-radius: 5px;
+}
+
+#sidebar-wrapper
+ .btn-group-vertical
+ > .btn-group:not(:first-child)
+ > #sidebar-wrapper
+ .btn,
+.btn-group-vertical > .btn:not(:first-child) {
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+}
+
+#sidebar-wrapper .btn-primary:hover {
+ color: #000;
+ background-color: #e5e5e5;
+ border-color: #fff;
+}
+
+#wrapper.toggled {
+ padding-left: 250px;
+}
+
+#wrapper.toggled #sidebar-wrapper {
+ width: 250px;
+}
+
+@media (max-width: 992px) {
+ .sidebar-status {
+ margin-top: 30px;
+ margin-left: 16px;
+ margin-right: 16px;
+ margin-bottom: 0px;
+ font-size: 16px;
+ font-weight: 500;
+ font-family: "IBM Plex Sans";
+ color: #000000;
+ letter-spacing: 0;
+ position: absolute;
+ width: max-content;
+ text-transform: uppercase;
+ }
+
+ .exam-outline-heading {
+ font-size: 24px;
+ color: #000000;
+ text-align: left;
+ margin-top: 64px;
+ margin-left: 16px;
+ margin-right: 16px;
+ position: absolute;
+ width: max-content;
+ margin-bottom: 0px;
+ }
+
+ #exam-outline-button-group {
+ margin-top: 102px;
+ margin-left: 16px;
+ margin-right: 16px;
+ width: 218px;
+ }
+}
+
+@media (min-width: 992px) {
+ #wrapper {
+ padding-left: 250px;
+ }
+
+ #sidebar-wrapper {
+ width: 250px;
+ }
+
+ .sidebar-status {
+ margin-top: 30px;
+ margin-left: 32px;
+ margin-right: 32px;
+ margin-bottom: 0px;
+ font-size: 16px;
+ color: #000000;
+ letter-spacing: 0;
+ position: absolute;
+ width: max-content;
+ }
+
+ .exam-outline-heading {
+ font-size: 24px;
+ color: #000000;
+ text-align: left;
+ margin-top: 64px;
+ margin-left: 32px;
+ margin-right: 32px;
+ position: absolute;
+ width: max-content;
+ margin-bottom: 0px;
+ }
+
+ #exam-outline-button-group {
+ margin-top: 102px;
+ margin-left: 32px;
+ margin-right: 32px;
+ width: 186px;
+ }
+
+ #wrapper.toggled {
+ padding-left: 0;
+ }
+
+ #wrapper.toggled #sidebar-wrapper {
+ width: 0;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index cc6e0090738acbee6abef62944c6b54901e3e9f1..1eb7ab212422bea3881dc104ba44dffa2198b4b6 100644
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@@ -30,6 +30,7 @@ const App: React.FC = () => {
return (
<>
<TopBar pages={horizontalBarPages} />
+
<div id="wrapper">
<LeftBar/>
<Switch>
@@ -37,6 +38,7 @@ const App: React.FC = () => {
{topBarRoutes}
</Switch>
</div>
+
<BottomBar pages={horizontalBarPages} />
</>
);
diff --git a/frontend/src/components/organisms/BottomBar/index.tsx b/frontend/src/components/organisms/BottomBar/index.tsx
index d7c29480f1fec06f2b7ea7ddd9f9223d918c1eef..c84d30d21c34c26cddcd0db92c720b62c9d7f826 100644
--- a/frontend/src/components/organisms/BottomBar/index.tsx
+++ b/frontend/src/components/organisms/BottomBar/index.tsx
@@ -2,7 +2,6 @@ import React from "react";
import Navbar from "react-bootstrap/Navbar";
import Button from "react-bootstrap/Button";
import ButtonGroup from "react-bootstrap/ButtonGroup";
-import "./style.scss";
import {
IconDefinition
} from "@fortawesome/free-solid-svg-icons";
diff --git a/frontend/src/components/organisms/BottomBar/style.scss b/frontend/src/components/organisms/BottomBar/style.scss
deleted file mode 100644
index dbd10841a65c2cfedddd764625ab533cf2fa9918..0000000000000000000000000000000000000000
--- a/frontend/src/components/organisms/BottomBar/style.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-@media (max-width: 992px) {
- .bottom-bar {
- position: fixed;
- bottom: 0;
- width: 100%;
- height: 60px;
- background-color: #fff;
- border-top: 1px solid #cdd4db;
- padding: 0px;
- }
-
- .bottom-bar-buttons,
- .block {
- height: 100%;
- width: 100%;
- }
-
- .btn:active,
- .btn.active {
- border: 0;
- background-color: #000 !important;
- color: #fff;
- }
-
- .bottom-bar-buttons .btn {
- border: 0;
- box-shadow: none !important;
- outline: 0 !important;
- border-radius: 0px;
- width: 25%;
- margin-left: 0;
- color: #000;
- background-color: #fff;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .btn:focus {
- border: 0;
- box-shadow: 0 0 0 0px;
- }
-
- .bottom-bar-buttons .btn:hover {
- border: 0px;
- background-color: #ced4da;
- }
-}
-
-@media (min-width: 992px) {
- .bottom-bar {
- display: none;
- }
-}
diff --git a/frontend/src/components/organisms/LeftBar/index.tsx b/frontend/src/components/organisms/LeftBar/index.tsx
index f54d53eed356cd1ad2bde5feaeee38c21f64d2af..c8fab87e6d5bba87332e99b845c4c97128c2a6dd 100644
--- a/frontend/src/components/organisms/LeftBar/index.tsx
+++ b/frontend/src/components/organisms/LeftBar/index.tsx
@@ -1,8 +1,7 @@
import React from "react";
-import "./style.scss";
+import Button from "react-bootstrap/Button";
const LeftBar: React.FC = () => {
- // TODO: change to using react components
return (
<div id="sidebar-wrapper">
<div>
@@ -14,21 +13,21 @@ const LeftBar: React.FC = () => {
role="group"
id="exam-outline-button-group"
>
- <button className="btn btn-primary exam-outline-button" type="button">
+ <Button className="exam-outline-button">
Progress
- </button>
- <button
- className="btn btn-primary exam-outline-button-a active"
+ </Button>
+ <Button
+ className="exam-outline-button-a active"
type="button"
>
Course Title
- </button>
- <button className="btn btn-primary exam-outline-button" type="button">
+ </Button>
+ <Button className="exam-outline-button">
Course Code
- </button>
- <button className="btn btn-primary exam-outline-button" type="button">
+ </Button>
+ <Button className="exam-outline-button">
Term
- </button>
+ </Button>
</div>
</div>
);
diff --git a/frontend/src/components/organisms/LeftBar/style.scss b/frontend/src/components/organisms/LeftBar/style.scss
deleted file mode 100644
index 76faac7eac101736a32aac3d8ce9106f9a24c3e1..0000000000000000000000000000000000000000
--- a/frontend/src/components/organisms/LeftBar/style.scss
+++ /dev/null
@@ -1,174 +0,0 @@
-//TODO: tidy, change classNames away from examen, and make more modular
-#wrapper {
- padding-left: 0;
- -webkit-transition: all 0.5s ease;
- -moz-transition: all 0.5s ease;
- -o-transition: all 0.5s ease;
- transition: all 0.5s ease;
-}
-
-#sidebar-wrapper {
- position: fixed;
- left: 250px;
- width: 0;
- margin-left: -250px;
- height: 100%;
- margin-bottom: 61px;
- overflow-y: auto;
- background: #fff;
- background: #ffffff;
- box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
- -webkit-transition: all 0.5s ease;
- -moz-transition: all 0.5s ease;
- -o-transition: all 0.5s ease;
- transition: all 0.5s ease;
-}
-
-.exam-outline-button {
- margin-bottom: 10px;
-}
-
-.exam-outline-button-a {
- margin-bottom: 10px;
- border-radius: 8px;
- font-weight: 500;
-}
-
-#sidebar-wrapper .btn-primary:not(:disabled):not(.disabled).active,
-#sidebar-wrapper .btn-primary:not(:disabled):not(.disabled):active,
-#sidebar-wrapper .show > .btn-primary.dropdown-toggle {
- color: #fff;
- background-color: #000;
- border-radius: 5px;
- text-align: left;
- border-width: 0px;
- height: 40px;
-}
-
-#sidebar-wrapper .btn-primary {
- color: #000;
- background: #f6f8fa;
- font-size: 17px;
- color: #000000;
- letter-spacing: 0;
- border-width: 0px;
- height: 40px;
- border-radius: 5px;
- text-align: left;
-}
-
-#sidebar-wrapper .btn-group-vertical > .btn-group:not(:last-child) > .btn,
-#sidebar-wrapper
- .btn-group-vertical
- > .btn:not(:last-child):not(.dropdown-toggle) {
- border-radius: 5px;
-}
-
-#sidebar-wrapper
- .btn-group-vertical
- > .btn-group:not(:first-child)
- > #sidebar-wrapper
- .btn,
-.btn-group-vertical > .btn:not(:first-child) {
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
-}
-
-#sidebar-wrapper .btn-primary:hover {
- color: #000;
- background-color: #e5e5e5;
- border-color: #fff;
-}
-
-#wrapper.toggled {
- padding-left: 250px;
-}
-
-#wrapper.toggled #sidebar-wrapper {
- width: 250px;
-}
-
-@media (max-width: 992px) {
- .sidebar-status {
- margin-top: 30px;
- margin-left: 16px;
- margin-right: 16px;
- margin-bottom: 0px;
- font-size: 16px;
- font-weight: 500;
- font-family: "IBM Plex Sans";
- color: #000000;
- letter-spacing: 0;
- position: absolute;
- width: max-content;
- text-transform: uppercase;
- }
-
- .exam-outline-heading {
- font-size: 24px;
- color: #000000;
- text-align: left;
- margin-top: 64px;
- margin-left: 16px;
- margin-right: 16px;
- position: absolute;
- width: max-content;
- margin-bottom: 0px;
- }
-
- #exam-outline-button-group {
- margin-top: 102px;
- margin-left: 16px;
- margin-right: 16px;
- width: 218px;
- }
-}
-
-@media (min-width: 992px) {
- #wrapper {
- padding-left: 250px;
- }
-
- #sidebar-wrapper {
- width: 250px;
- }
-
- .sidebar-status {
- margin-top: 30px;
- margin-left: 32px;
- margin-right: 32px;
- margin-bottom: 0px;
- font-size: 16px;
- color: #000000;
- letter-spacing: 0;
- position: absolute;
- width: max-content;
- }
-
- .exam-outline-heading {
- font-size: 24px;
- color: #000000;
- text-align: left;
- margin-top: 64px;
- margin-left: 32px;
- margin-right: 32px;
- position: absolute;
- width: max-content;
- margin-bottom: 0px;
- }
-
- #exam-outline-button-group {
- margin-top: 102px;
- margin-left: 32px;
- margin-right: 32px;
- width: 186px;
- }
-
- #wrapper.toggled {
- padding-left: 0;
- }
-
- #wrapper.toggled #sidebar-wrapper {
- width: 0;
- }
-}
diff --git a/frontend/src/components/organisms/TopBar/index.tsx b/frontend/src/components/organisms/TopBar/index.tsx
index 32fd79b8026a67d28f5d28aee9fb39655c2f182e..2704b81ce8368bffbcd46e180cc2d63cdf214e92 100644
--- a/frontend/src/components/organisms/TopBar/index.tsx
+++ b/frontend/src/components/organisms/TopBar/index.tsx
@@ -4,7 +4,6 @@ import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import logo from "images/logo.svg";
import userPic from "images/user.png";
-import "./style.scss";
import { Link, NavLink } from "react-router-dom";
export interface TopBarProps {
diff --git a/frontend/src/components/organisms/TopBar/style.scss b/frontend/src/components/organisms/TopBar/style.scss
deleted file mode 100644
index 9c58821f847ba30f476d0eaa2d1880dbf010f59a..0000000000000000000000000000000000000000
--- a/frontend/src/components/organisms/TopBar/style.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-@import "scss/custom";
-
-//-----------------------------------Top Bar-----------------------------------
-
-.top-bar {
- padding: 12px 16px;
- background: #fff;
- border-bottom: 1px solid #cdd4db;
-}
-
-//------------------------------------Brand------------------------------------
-
-.brand-image {
- margin-right: 10px;
-}
-
-.brand-container {
- font-family: "IBM Plex Sans";
- font-weight: 500;
- font-size: 24px;
- color: #000;
- text-align: left;
- padding: 0px;
- display: flex;
- justify-content: left;
- align-items: center;
- margin: 0px;
-}
-
-.brand-container a{
- color: #000;
-}
-//--------------------------------Page Buttons---------------------------------
-
-@media (min-width: 992px) {
- .page-button {
- background: $gray-100;
- border-radius: 5px;
- font-family: "IBM Plex Sans";
- font-size: 18px;
- color: $black !important;
- text-align: center;
- line-height: 22px;
- width: 120px;
- height: 36px;
- margin-right: 10px;
- margin-left: 10px;
- }
-
- .page-button:hover {
- background: $gray-200;
- color: $black !important;
- }
-
- .page-button.active {
- background: $black !important;
- font-weight: 500 !important;
- color: $white !important;
- }
-
- .page-button-group {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
-}
-
-@media (max-width: 992px) {
- .page-button-group {
- display: none;
- }
-}