From 8ed104d63808f861a6d656aded4f89f9ee69c91c Mon Sep 17 00:00:00 2001
From: Sudarshan Sreeram <sudarshan.sreeram19@imperial.ac.uk>
Date: Sat, 1 Aug 2020 00:14:17 +0530
Subject: [PATCH] Update bottom bar stying (intermediate commit)
---
.../organisms/BottomBar/BottomBar.tsx | 27 +++++--------
.../components/organisms/BottomBar/style.scss | 38 ++++++-------------
2 files changed, 22 insertions(+), 43 deletions(-)
diff --git a/frontend/src/components/organisms/BottomBar/BottomBar.tsx b/frontend/src/components/organisms/BottomBar/BottomBar.tsx
index 1f3aae152..5cbc61886 100644
--- a/frontend/src/components/organisms/BottomBar/BottomBar.tsx
+++ b/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>
);
diff --git a/frontend/src/components/organisms/BottomBar/style.scss b/frontend/src/components/organisms/BottomBar/style.scss
index 8d018e7f5..aef78ee8c 100644
--- a/frontend/src/components/organisms/BottomBar/style.scss
+++ b/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;"
--
GitLab