Refactor top bar to use modular css

frontend/package.json

@@ -15,6 +15,7 @@
     "@types/react-dom": "^16.9.0",
     "@types/react-router-dom": "^5.1.5",
     "bootstrap": "^4.5.0",
+    "classnames": "^2.2.6",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-bootstrap": "^1.3.0",

frontend/src/components/App.scss

@@ -7,7 +7,6 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  // background-color: $teal-300;
 }
 
 code {
@@ -15,78 +14,6 @@ code {
     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 {

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

 import React from "react";
 import Nav from "react-bootstrap/Nav";
 import { NavLink } from "react-router-dom";
+import styles from "./style.module.scss"
 
 export interface NavBarItemProps {
   page: {
@@ -16,9 +17,9 @@ const NavBarTabItem: React.FC<NavBarItemProps> = ({
     <Nav.Item>
       <Nav.Link
         as={NavLink}
-        activeClassName="active"
+        activeClassName={styles.active}
         to={page.path}
-        className="page-button"
+        className={styles.pageButton}
       >
         {page.name}
       </Nav.Link>

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

+@import "scss/custom";
+
+@media (min-width: 992px) {
+  .pageButton {
+    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;
+  }
+
+  .pageButton:hover {
+    background: $gray-200;
+    color: $black !important;
+  }
+
+  .pageButton.active {
+    background: $black !important;
+    font-weight: 500 !important;
+    color: $white !important;
+  }
+}
\ No newline at end of file

frontend/src/components/molecules/NavBarBrand/index.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import Navbar from "react-bootstrap/Navbar";
 import logo from "images/logo.svg";
 import { Link } from "react-router-dom";
+import styles from "./style.module.scss";
+import cx from "classnames";
 
 interface NavBarBrandProps {
   onClick: (event: React.MouseEvent<HTMLImageElement>) => void;
@@ -11,18 +13,20 @@ const NavBarBrand: React.FC<NavBarBrandProps> = ({
   onClick,
 }: NavBarBrandProps) => {
   return (
-    <Navbar.Brand className="brand-container">
+    <Navbar.Brand className={styles.brandContainer}>
       <img
         src={logo}
         width="30"
         height="30"
-        className="d-inline-block align-center brand-image"
+        className={cx(
+          "d-inline-block",
+          "align-center",
+          styles.brandImage
+        )}
         alt="React Bootstrap logo"
         onClick={(e) => onClick(e)}
-      />{" "}
-      <Link to="/" style={{ textDecoration: "none" }}>
-        Scientia
-      </Link>
+      />
+      <Link to="/">Scientia</Link>
     </Navbar.Brand>
   );
 };

frontend/src/components/molecules/NavBarBrand/style.module.scss

+@import "scss/custom";
+
+.brandImage {
+  margin-right: 10px;
+}
+
+.brandContainer {
+  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;
+}
+
+.brandContainer a{
+	color: #000 !important;
+	text-decoration: none !important;
+}
+

frontend/src/components/molecules/NavBarTabGroup/index.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import Navbar from "react-bootstrap/Navbar";
 import Nav from "react-bootstrap/Nav";
 import NavBarTabItem from "components/atoms/NavBarTabItem";
+import styles from "./style.module.scss"
+import cx from "classnames";
 
 export interface NavBarTabGroupProps {
   pages: {
@@ -14,7 +16,7 @@ const NavBarTabGroup: React.FC<NavBarTabGroupProps> = ({
   pages,
 }: NavBarTabGroupProps) => {
   return (
-    <Navbar className="page-button-group m-auto" id="responsive-navbar-nav">
+    <Navbar className={cx("m-auto", styles.pageButtonGroup)} id="responsive-navbar-nav">
       <Nav variant="pills">
         {pages.map((page) => (
           <NavBarTabItem page={page} key={page.name} />

frontend/src/components/molecules/NavBarTabGroup/style.module.scss

+@import "scss/custom";
+
+@media (min-width: 992px) {
+  .pageButtonGroup {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+@media (max-width: 992px) {
+  .pageButtonGroup {
+    display: none;
+  }
+}
\ No newline at end of file

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

@@ -4,6 +4,7 @@ import Navbar from "react-bootstrap/Navbar";
 import userPic from "images/user.png";
 import NavBarTabGroup from "components/molecules/NavBarTabGroup";
 import NavBarBrand from "components/molecules/NavBarBrand";
+import styles from "./style.module.scss";
 
 export interface TopBarProps {
   pages: {
@@ -15,7 +16,7 @@ export interface TopBarProps {
 
 const TopBar: React.FC<TopBarProps> = ({ pages, onIconClick }: TopBarProps) => {
   return (
-    <Navbar className="top-bar" sticky="top" expand="lg" variant="light">
+    <Navbar className={styles.navBar} sticky="top" expand="lg" variant="light">
       <Container fluid>
         <NavBarBrand onClick={onIconClick} />
 

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

+@import "scss/custom";
+
+ .navBar {
+  padding: 12px 16px;
+  background: #fff;
+  border-bottom: 1px solid #cdd4db;
+}
\ No newline at end of file

frontend/src/scss/custom.scss

 // Override default variables before the import
+$nav-pills-link-active-color: black;
 
 //Bootstrap 5 scss from: https://github.com/twbs/bootstrap/tree/main/scss
-@import "./bootstrapV5/bootstrap.scss";
-@import "~bootstrap/dist/css/bootstrap.min.css";
+// @import "./bootstrapV5/bootstrap.scss";
+// @import "~bootstrap/dist/css/bootstrap.min.css";
 
 //Delete bootstrapV5/bootstrap.scss and bootstrap.min.css import
 //and uncomment below to fall back to default scss option
 
-// @import '~bootstrap/scss/bootstrap.scss';
+@import '~bootstrap/scss/bootstrap.scss';