From ba455cc4a2109f5ef87af3443a02e4c11f2d8abf Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Mon, 3 Aug 2020 19:06:28 +0100
Subject: [PATCH] Refactor button bar with modular css
---
.../components/atoms/BottomBarItem/index.tsx | 6 ++--
.../atoms/BottomBarItem/style.module.scss | 32 +++++++++++++++++++
.../components/organisms/BottomBar/index.tsx | 5 +--
.../organisms/BottomBar/style.module.scss | 24 ++++++++++++++
4 files changed, 63 insertions(+), 4 deletions(-)
create mode 100644 frontend/src/components/atoms/BottomBarItem/style.module.scss
create mode 100644 frontend/src/components/organisms/BottomBar/style.module.scss
diff --git a/frontend/src/components/atoms/BottomBarItem/index.tsx b/frontend/src/components/atoms/BottomBarItem/index.tsx
index 45876cd7b..387c84afd 100644
--- a/frontend/src/components/atoms/BottomBarItem/index.tsx
+++ b/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">
diff --git a/frontend/src/components/atoms/BottomBarItem/style.module.scss b/frontend/src/components/atoms/BottomBarItem/style.module.scss
new file mode 100644
index 000000000..75e502c4d
--- /dev/null
+++ b/frontend/src/components/atoms/BottomBarItem/style.module.scss
@@ -0,0 +1,32 @@
+@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
diff --git a/frontend/src/components/organisms/BottomBar/index.tsx b/frontend/src/components/organisms/BottomBar/index.tsx
index 24d66f20e..e646a000f 100644
--- a/frontend/src/components/organisms/BottomBar/index.tsx
+++ b/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} />
))}
diff --git a/frontend/src/components/organisms/BottomBar/style.module.scss b/frontend/src/components/organisms/BottomBar/style.module.scss
new file mode 100644
index 000000000..b92b2709a
--- /dev/null
+++ b/frontend/src/components/organisms/BottomBar/style.module.scss
@@ -0,0 +1,24 @@
+@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;
+ }
+}
--
GitLab