diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index 690eaa2cb2cb2f4d89e8b95cd771c284c0f8ccd0..9ce41502f3dad64ac6b4b215420161987c2271c0 100644
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@@ -8,8 +8,6 @@ import ExampleTimetable from "./pages/ExampleTimetable";
import TopBar from "./organisms/TopBar/TopBar";
import BottomBar from "./organisms/BottomBar/BottomBar";
import { Redirect, Switch, Route } from "react-router-dom";
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const App: React.FC = () => {
return (
diff --git a/frontend/src/components/organisms/BottomBar/BottomBar.tsx b/frontend/src/components/organisms/BottomBar/BottomBar.tsx
index c7aa9cdd3779efd6ac3c4790877ede3383c0cf20..60bacb30f88a6342c5b16fe346ccd330d8f9ab1e 100644
--- a/frontend/src/components/organisms/BottomBar/BottomBar.tsx
+++ b/frontend/src/components/organisms/BottomBar/BottomBar.tsx
@@ -1,43 +1,43 @@
import React from "react";
-import Container from "react-bootstrap/Container";
import Navbar from "react-bootstrap/Navbar";
-import Nav from "react-bootstrap/Nav";
import Button from "react-bootstrap/Button";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import "./style.scss";
-import { faBookOpen, faEllipsisH, faCalendarWeek, faChalkboardTeacher } from "@fortawesome/free-solid-svg-icons";
+import {
+ faBookOpen,
+ faEllipsisH,
+ faCalendarWeek,
+ faChalkboardTeacher,
+} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const BottomBar: React.FC = () => {
- return (
- <Navbar className="bottom-bar footer">
- <ButtonGroup
- aria-label="Basic example"
- className="bottom-bar-buttons"
- >
- <Button active className="button-active" id="bottom-courses">
- <div className="button-holder">
- <FontAwesomeIcon icon={faChalkboardTeacher} size="lg"/>
- </div>
- </Button>
- <Button className="button-inactive" id="bottom-timetable">
- <div className="button-holder">
- <FontAwesomeIcon icon={faCalendarWeek} size="lg"/>
- </div>
- </Button>
- <Button className="button-inactive" id="bottom-exams">
- <div className="button-holder">
- <FontAwesomeIcon icon={faBookOpen} size="lg"/>
- </div>
- </Button>
- <Button className="button-inactive" id="bottom-other">
- <div className="button-holder">
- <FontAwesomeIcon icon={faEllipsisH} size="lg"/>
- </div>
- </Button>
- </ButtonGroup>
- </Navbar>
- );
+ return (
+ <Navbar className="bottom-bar footer">
+ <ButtonGroup aria-label="Basic example" className="bottom-bar-buttons">
+ <Button active className="button-active" id="bottom-courses">
+ <div className="button-holder">
+ <FontAwesomeIcon icon={faChalkboardTeacher} size="lg" />
+ </div>
+ </Button>
+ <Button className="button-inactive" id="bottom-timetable">
+ <div className="button-holder">
+ <FontAwesomeIcon icon={faCalendarWeek} size="lg" />
+ </div>
+ </Button>
+ <Button className="button-inactive" id="bottom-exams">
+ <div className="button-holder">
+ <FontAwesomeIcon icon={faBookOpen} size="lg" />
+ </div>
+ </Button>
+ <Button className="button-inactive" id="bottom-other">
+ <div className="button-holder">
+ <FontAwesomeIcon icon={faEllipsisH} size="lg" />
+ </div>
+ </Button>
+ </ButtonGroup>
+ </Navbar>
+ );
};
export default BottomBar;
diff --git a/frontend/src/components/organisms/BottomBar/style.scss b/frontend/src/components/organisms/BottomBar/style.scss
index 0a1c8b2c84d7885b6a7fd1bd242a75d39e31dcc5..8d018e7f5dd2522e80b14399f0e6c05643789eec 100644
--- a/frontend/src/components/organisms/BottomBar/style.scss
+++ b/frontend/src/components/organisms/BottomBar/style.scss
@@ -1,67 +1,67 @@
@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 {
+ 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%;
- }
+ .bottom-bar-buttons,
+ .block {
+ height: 100%;
+ width: 100%;
+ }
- .bottom-bar-buttons button {
- border: 0;
- border-radius: 0px;
- width: 25%;
- margin-left: 0;
- }
+ .bottom-bar-buttons button {
+ border: 0;
+ border-radius: 0px;
+ width: 25%;
+ margin-left: 0;
+ }
- .bottom-bar-buttons button:active,
- .button-active {
- border: 0;
- background-color: #000 !important;
- }
+ .bottom-bar-buttons button:active,
+ .button-active {
+ border: 0;
+ background-color: #000 !important;
+ }
- .bottom-bar-buttons button:focus {
- border: 0;
- outline: 0;
- box-shadow: 0 0 0 0px;
- }
+ .bottom-bar-buttons button:focus {
+ border: 0;
+ outline: 0;
+ box-shadow: 0 0 0 0px;
+ }
- .bottom-bar-buttons button:hover {
- border: 0px;
- }
+ .bottom-bar-buttons button:hover {
+ border: 0px;
+ }
- .button-holder {
- align-items: center;
- }
+ .button-holder {
+ align-items: center;
+ }
- .inactive {
- display: none;
- }
+ .inactive {
+ display: none;
+ }
- .button-active,
- .bottom-bar-buttons button:hover,
- .bottom-bar-buttons button:active,
- .bottom-bar-buttons button:focus {
- color: #000;
- }
+ .button-active,
+ .bottom-bar-buttons button:hover,
+ .bottom-bar-buttons button:active,
+ .bottom-bar-buttons button:focus {
+ color: #000;
+ }
- .button-inactive {
- border: 0px;
- color: #000;
- background-color: #fff !important;
- }
+ .button-inactive {
+ border: 0px;
+ color: #000;
+ background-color: #fff !important;
+ }
}
@media (min-width: 992px) {
- .bottom-bar {
- display: none;
- }
+ .bottom-bar {
+ display: none;
+ }
}
diff --git a/frontend/src/components/organisms/TopBar/TopBar.tsx b/frontend/src/components/organisms/TopBar/TopBar.tsx
index a76b43a6e13510d9fcd1368d9bd80462f6c371c9..e08df66fddfd2503d4659e05ba542bfb02c8fb7d 100644
--- a/frontend/src/components/organisms/TopBar/TopBar.tsx
+++ b/frontend/src/components/organisms/TopBar/TopBar.tsx
@@ -25,22 +25,42 @@ const TopBar: React.FC = () => {
<Navbar className="page-button-group m-auto" id="responsive-navbar-nav">
<Nav variant="pills" defaultActiveKey="/timetable">
<Nav.Item>
- <Nav.Link as={NavLink} activeClassName='active' to="/courses" className="page-button">
+ <Nav.Link
+ as={NavLink}
+ activeClassName="active"
+ to="/courses"
+ className="page-button"
+ >
Courses
</Nav.Link>
</Nav.Item>
<Nav.Item>
- <Nav.Link as={NavLink} activeClassName='active' to="/timetable" className="page-button">
+ <Nav.Link
+ as={NavLink}
+ activeClassName="active"
+ to="/timetable"
+ className="page-button"
+ >
Timetable
</Nav.Link>
</Nav.Item>
<Nav.Item>
- <Nav.Link as={NavLink} activeClassName='active' to="/exams" className="page-button">
+ <Nav.Link
+ as={NavLink}
+ activeClassName="active"
+ to="/exams"
+ className="page-button"
+ >
Exams
</Nav.Link>
</Nav.Item>
<Nav.Item>
- <Nav.Link as={NavLink} activeClassName='active' to="/other" className="page-button">
+ <Nav.Link
+ as={NavLink}
+ activeClassName="active"
+ to="/other"
+ className="page-button"
+ >
Other
</Nav.Link>
</Nav.Item>
diff --git a/frontend/src/components/organisms/TopBar/style.scss b/frontend/src/components/organisms/TopBar/style.scss
index da5c03d34c3bf60f5352d0aa6a2494c1f73c85cb..51d09cb7e07f923762ddf41c3f205df8be1b9984 100644
--- a/frontend/src/components/organisms/TopBar/style.scss
+++ b/frontend/src/components/organisms/TopBar/style.scss
@@ -3,38 +3,37 @@
//-----------------------------------Top Bar-----------------------------------
.top-bar {
- padding: 12px 16px;
- background: #FFF;
- border-bottom: 1px solid #CDD4DB;
+ padding: 12px 16px;
+ background: #fff;
+ border-bottom: 1px solid #cdd4db;
}
-
//------------------------------------Brand------------------------------------
.brand-image {
- margin-right: 10px;
+ 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;
+ 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;
}
//--------------------------------Page Buttons---------------------------------
@media (min-width: 992px) {
-.page-button {
+ .page-button {
background: $gray-100;
border-radius: 5px;
- font-family: 'IBM Plex Sans';
+ font-family: "IBM Plex Sans";
font-size: 18px;
color: $black !important;
text-align: center;
@@ -43,29 +42,29 @@
height: 36px;
margin-right: 10px;
margin-left: 10px;
-}
+ }
-.page-button:hover {
+ .page-button:hover {
background: $gray-200;
- color: $black !important;
-}
+ color: $black !important;
+ }
-.page-button.active {
+ .page-button.active {
background: $black !important;
font-weight: 500 !important;
- color: $white !important;
-}
+ color: $white !important;
+ }
-.page-button-group {
+ .page-button-group {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-}
+ }
}
@media (max-width: 992px) {
- .page-button-group {
- display: none;
- }
+ .page-button-group {
+ display: none;
+ }
}