Fix hover background colour on buttons

frontend/src/components/App.scss

@@ -10,4 +10,4 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
-}
\ No newline at end of file
+}

frontend/src/components/App.tsx

@@ -5,7 +5,7 @@ import TopBar from "./organisms/TopBar";
 import BottomBar from "./organisms/BottomBar";
 import {
   faBookOpen,
-  faEllipsisH,
+  faHome,
   faCalendarWeek,
   faChalkboardTeacher,
 } from "@fortawesome/free-solid-svg-icons";
@@ -30,10 +30,10 @@ class App extends React.Component<{}, MyState> {
 
   render() {
     const horizontalBarPages = [
+      { name: "Home", path: "/home", icon: faHome },
       { name: "Modules", path: "/modules", icon: faChalkboardTeacher },
       { name: "Timetable", path: "/timetable", icon: faCalendarWeek },
       { name: "Exams", path: "/exams", icon: faBookOpen },
-      { name: "Other", path: "/other", icon: faEllipsisH },
     ];
 
     return (

frontend/src/components/atoms/BottomBarItem/style.module.scss

+@import "assets/scss/custom";
 @media (max-width: 992px) {
   .btn:active,
   .btn:global(.active) {
@@ -28,5 +29,11 @@
   .btn:hover {
     border: 0px;
     background-color: #ced4da;
+    color: #000;
+  }
+
+  .btn:active:hover,
+  .btn:global(.active):hover {
+    background-color: $gray-900 !important;
   }
-}
\ No newline at end of file
+}

frontend/src/components/atoms/NavBarTabItem/style.module.scss

@@ -25,4 +25,9 @@
     font-weight: 500 !important;
     color: $white !important;
   }
-}
\ No newline at end of file
+
+  .pageButton:active:hover,
+  .pageButton:global(.active):hover {
+    background-color: $gray-900 !important;
+  }
+}