Refactor button bar with modular css

frontend/src/components/atoms/BottomBarItem/index.tsx

@@ -3,6 +3,7 @@ import Button from "react-bootstrap/Button";
 import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { NavLink } from "react-router-dom";
+import styles from "./style.module.scss";
 
 export interface BottomBarItemProps {
   page: {
@@ -17,9 +18,10 @@ const BottomBarItem: React.FC<BottomBarItemProps> = ({
 }: BottomBarItemProps) => {
   return (
     <Button
-      activeClassName="active"
+      activeClassName={"active " + styles.active}
       as={NavLink}
-      to={page.path}
+			to={page.path}
+			className={styles.btn}
       id={"bottom-" + page.name}
     >
       <div className="button-holder">

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

+@media (max-width: 992px) {
+  .btn:active,
+  .btn.active {
+    border: 0;
+    background-color: #000 !important;
+    color: #fff;
+  }
+
+  .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;
+  }
+
+  .btn:hover {
+    border: 0px;
+    background-color: #ced4da;
+  }
+}
\ No newline at end of file

frontend/src/components/organisms/BottomBar/index.tsx

@@ -3,6 +3,7 @@ import Navbar from "react-bootstrap/Navbar";
 import ButtonGroup from "react-bootstrap/ButtonGroup";
 import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 import BottomBarItem from "components/atoms/BottomBarItem";
+import styles from "./style.module.scss"
 
 export interface BottomBarProps {
   pages: {
@@ -14,8 +15,8 @@ export interface BottomBarProps {
 
 const BottomBar: React.FC<BottomBarProps> = ({ pages }: BottomBarProps) => {
   return (
-    <Navbar className="bottom-bar footer">
-      <ButtonGroup aria-label="Basic example" className="bottom-bar-buttons">
+    <Navbar className={"footer " + styles.bottomBar}>
+      <ButtonGroup aria-label="Basic example" className={styles.bottomBarButtons}>
         {pages.map((page) => (
           <BottomBarItem page={page} key={page.name} />
         ))}

frontend/src/components/organisms/BottomBar/style.module.scss

+@import "scss/custom";
+
+@media (max-width: 992px) {
+  .bottomBar {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 60px;
+    background-color: #fff;
+    border-top: 1px solid #cdd4db;
+    padding: 0px;
+  }
+
+  .bottomBarButtons{
+    height: 100%;
+    width: 100%;
+  }
+}
+
+@media (min-width: 992px) {
+  .bottomBar {
+    display: none;
+  }
+}