Update bottom bar stying (intermediate commit)

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

@@ -8,26 +8,24 @@ import {
   faEllipsisH,
   faCalendarWeek,
   faChalkboardTeacher,
-	IconDefinition,
+  IconDefinition
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { NavLink, Link } from "react-router-dom";
 
 export interface BottomBarProps {
-	pages: {
+  pages: {
     name: string;
     path: string;
     icon: IconDefinition;
-}[];
+  }[];
 }
 
-const BottomBar: React.FC<BottomBarProps> = ({pages}: BottomBarProps) => {
-
-	const BottomBarItems = pages.map(({ name, path, icon }) => (
+const BottomBar: React.FC<BottomBarProps> = ({ pages }: BottomBarProps) => {
+  const BottomBarItems = pages.map(({ name, path, icon }) => (
     <Button
-      active
-      as={Link}
-			// activeClassName="button-active"
+      activeClassName="active"
+      as={NavLink}
       to={path}
       id={"bottom-" + name}
       key={name}
@@ -36,17 +34,12 @@ const BottomBar: React.FC<BottomBarProps> = ({pages}: BottomBarProps) => {
         <FontAwesomeIcon icon={icon} size="lg" />
       </div>
     </Button>
-	));
-	
+  ));
+
   return (
     <Navbar className="bottom-bar footer">
       <ButtonGroup aria-label="Basic example" className="bottom-bar-buttons">
-				{BottomBarItems}
-        <Button active className="button-active" id="bottom-courses">
-          <div className="button-holder">
-            <FontAwesomeIcon icon={faChalkboardTeacher} size="lg" />
-          </div>
-        </Button>
+        {BottomBarItems}
       </ButtonGroup>
     </Navbar>
   );

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

@@ -15,48 +15,32 @@
     width: 100%;
   }
 
-  .bottom-bar-buttons button {
+  .bottom-bar-buttons .btn {
     border: 0;
     border-radius: 0px;
     width: 25%;
     margin-left: 0;
+    color: #000;
+    background-color: #fff !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
-  .bottom-bar-buttons button:active,
-  .button-active {
+  .bottom-bar-buttons .btn-primary .btn:active {
     border: 0;
     background-color: #000 !important;
+    color: #fff;
   }
 
-  .bottom-bar-buttons button:focus {
+  .bottom-bar-buttons .btn:focus {
     border: 0;
     outline: 0;
     box-shadow: 0 0 0 0px;
   }
 
-  .bottom-bar-buttons button:hover {
-    border: 0px;
-  }
-
-  .button-holder {
-    align-items: center;
-  }
-
-  .inactive {
-    display: none;
-  }
-
-  .button-active,
-  .bottom-bar-buttons button:hover,
-  .bottom-bar-buttons button:active,
-  .bottom-bar-buttons button:focus {
-    color: #000;
-  }
-
-  .button-inactive {
+  .bottom-bar-buttons .btn:hover {
     border: 0px;
-    color: #000;
-    background-color: #fff !important;
   }
 }
 
@@ -65,3 +49,5 @@
     display: none;
   }
 }
+
+//style="background-color:white; border-width:0px; color:black; display:flex; align-items:center; justify-content:center;"