From 42d3366760d997c7424d3363aca494e28cfe2c15 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Mon, 3 Aug 2020 17:57:51 +0100
Subject: [PATCH] Refactor top bar to use modular css
---
frontend/package.json | 1 +
frontend/src/components/App.scss | 73 -------------------
.../components/atoms/NavBarTabItem/index.tsx | 5 +-
.../atoms/NavBarTabItem/style.module.scss | 28 +++++++
.../molecules/NavBarBrand/index.tsx | 16 ++--
.../molecules/NavBarBrand/style.module.scss | 24 ++++++
.../molecules/NavBarTabGroup/index.tsx | 4 +-
.../NavBarTabGroup/style.module.scss | 16 ++++
.../src/components/organisms/TopBar/index.tsx | 3 +-
.../organisms/TopBar/style.module.scss | 7 ++
frontend/src/components/pages/.gitkeep | 0
frontend/src/scss/custom.scss | 7 +-
12 files changed, 98 insertions(+), 86 deletions(-)
create mode 100644 frontend/src/components/atoms/NavBarTabItem/style.module.scss
create mode 100644 frontend/src/components/molecules/NavBarBrand/style.module.scss
create mode 100644 frontend/src/components/molecules/NavBarTabGroup/style.module.scss
create mode 100644 frontend/src/components/organisms/TopBar/style.module.scss
delete mode 100644 frontend/src/components/pages/.gitkeep
diff --git a/frontend/package.json b/frontend/package.json
index 9212ddc5b..9b108a822 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/components/App.scss b/frontend/src/components/App.scss
index f7fce5ad5..70f1fc1e2 100644
--- a/frontend/src/components/App.scss
+++ b/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 {
diff --git a/frontend/src/components/atoms/NavBarTabItem/index.tsx b/frontend/src/components/atoms/NavBarTabItem/index.tsx
index 7058c9b6f..cbe1ae416 100644
--- a/frontend/src/components/atoms/NavBarTabItem/index.tsx
+++ b/frontend/src/components/atoms/NavBarTabItem/index.tsx
@@ -1,6 +1,7 @@
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>
diff --git a/frontend/src/components/atoms/NavBarTabItem/style.module.scss b/frontend/src/components/atoms/NavBarTabItem/style.module.scss
new file mode 100644
index 000000000..aa1ea8aa3
--- /dev/null
+++ b/frontend/src/components/atoms/NavBarTabItem/style.module.scss
@@ -0,0 +1,28 @@
+@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
diff --git a/frontend/src/components/molecules/NavBarBrand/index.tsx b/frontend/src/components/molecules/NavBarBrand/index.tsx
index e4e9ac7d5..556d0398f 100644
--- a/frontend/src/components/molecules/NavBarBrand/index.tsx
+++ b/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>
);
};
diff --git a/frontend/src/components/molecules/NavBarBrand/style.module.scss b/frontend/src/components/molecules/NavBarBrand/style.module.scss
new file mode 100644
index 000000000..a0a262767
--- /dev/null
+++ b/frontend/src/components/molecules/NavBarBrand/style.module.scss
@@ -0,0 +1,24 @@
+@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;
+}
+
diff --git a/frontend/src/components/molecules/NavBarTabGroup/index.tsx b/frontend/src/components/molecules/NavBarTabGroup/index.tsx
index 0984caed5..219e2d6be 100644
--- a/frontend/src/components/molecules/NavBarTabGroup/index.tsx
+++ b/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} />
diff --git a/frontend/src/components/molecules/NavBarTabGroup/style.module.scss b/frontend/src/components/molecules/NavBarTabGroup/style.module.scss
new file mode 100644
index 000000000..ea064d351
--- /dev/null
+++ b/frontend/src/components/molecules/NavBarTabGroup/style.module.scss
@@ -0,0 +1,16 @@
+@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
diff --git a/frontend/src/components/organisms/TopBar/index.tsx b/frontend/src/components/organisms/TopBar/index.tsx
index d7aec3863..1fce71864 100644
--- a/frontend/src/components/organisms/TopBar/index.tsx
+++ b/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} />
diff --git a/frontend/src/components/organisms/TopBar/style.module.scss b/frontend/src/components/organisms/TopBar/style.module.scss
new file mode 100644
index 000000000..9c069a1a6
--- /dev/null
+++ b/frontend/src/components/organisms/TopBar/style.module.scss
@@ -0,0 +1,7 @@
+@import "scss/custom";
+
+ .navBar {
+ padding: 12px 16px;
+ background: #fff;
+ border-bottom: 1px solid #cdd4db;
+}
\ No newline at end of file
diff --git a/frontend/src/components/pages/.gitkeep b/frontend/src/components/pages/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/frontend/src/scss/custom.scss b/frontend/src/scss/custom.scss
index 699d0cdfc..a37357f8c 100644
--- a/frontend/src/scss/custom.scss
+++ b/frontend/src/scss/custom.scss
@@ -1,10 +1,11 @@
// 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';
--
GitLab