From fb0fe5244b1c676957726ca01cc79a7dba5ac882 Mon Sep 17 00:00:00 2001
From: Sudarshan Sreeram <sudarshan.sreeram19@imperial.ac.uk>
Date: Fri, 31 Jul 2020 17:01:45 +0530
Subject: [PATCH] Add styling to top navigation bar
Changes:
- Update brand icon size to 40x40
- Add IBM Plex Sans in buttons and brand text
- Fix layout and centering of navbar elements
- Remove navigation pills and items
---
.../components/organisms/TopBar/TopBar.tsx | 41 +++++-------
.../components/organisms/TopBar/style.scss | 63 +++++++++++++++++++
2 files changed, 79 insertions(+), 25 deletions(-)
diff --git a/frontend/src/components/organisms/TopBar/TopBar.tsx b/frontend/src/components/organisms/TopBar/TopBar.tsx
index 3aa6587ff..47e0f9ee3 100644
--- a/frontend/src/components/organisms/TopBar/TopBar.tsx
+++ b/frontend/src/components/organisms/TopBar/TopBar.tsx
@@ -10,41 +10,32 @@ const TopBar: React.FC = () => {
return (
<>
<Navbar
- className="justify-content-center"
+ className="top-bar"
sticky="top"
expand="lg"
variant="light"
- bg="light"
>
- <Container>
- <Navbar.Brand href="#">
- <img
- src={logo}
- width="30"
- height="30"
- className="d-inline-block align-top"
- alt="React Bootstrap logo"
- />{" "}
+ <Container fluid>
+ <Navbar.Brand href="#" className="brand-container">
+ <img
+ src={logo}
+ width="40"
+ height="40"
+ className="d-inline-block align-center brand-image"
+ alt="React Bootstrap logo"
+ />{" "}
Scientia
</Navbar.Brand>
- <Nav variant="pills" activeKey="/">
- <Nav.Item>
- <Nav.Link href="/">Courses</Nav.Link>
- </Nav.Item>
+ <Navbar className="page-button-group m-auto" id="responsive-navbar-nav">
+ <Nav.Link active href="/" className="page-button">Courses</Nav.Link>
- <Nav.Item>
- <Nav.Link eventKey="link-1">Timetable</Nav.Link>
- </Nav.Item>
+ <Nav.Link eventKey="link-1" className="page-button">Timetable</Nav.Link>
- <Nav.Item>
- <Nav.Link eventKey="link-2">Exams</Nav.Link>
- </Nav.Item>
+ <Nav.Link eventKey="link-2" className="page-button">Exams</Nav.Link>
- <Nav.Item>
- <Nav.Link eventKey="link-3">Other</Nav.Link>
- </Nav.Item>
- </Nav>
+ <Nav.Link eventKey="link-3" className="page-button">Other</Nav.Link>
+ </Navbar>
<img
src={userPic}
diff --git a/frontend/src/components/organisms/TopBar/style.scss b/frontend/src/components/organisms/TopBar/style.scss
index e69de29bb..4a0e83755 100644
--- a/frontend/src/components/organisms/TopBar/style.scss
+++ b/frontend/src/components/organisms/TopBar/style.scss
@@ -0,0 +1,63 @@
+@import "scss/custom";
+
+//-----------------------------------Top Bar-----------------------------------
+
+.top-bar {
+ padding: 10px 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: 28px;
+ color: #000;
+ text-align: left;
+ padding: 0px;
+ display: flex;
+ justify-content: left;
+ align-items: center;
+ margin: 0px;
+}
+
+//--------------------------------Page Buttons---------------------------------
+
+.page-button {
+ background: $gray-100;
+ border-radius: 5px;
+ font-family: 'IBM Plex Sans';
+ font-size: 18px;
+ color: $black;
+ text-align: center;
+ line-height: 22px;
+ width: 120px;
+ height: 36px;
+ margin-right: 10px;
+ margin-left: 10px;
+}
+
+.page-button:hover {
+ background: $gray-200;
+ color: $black;
+}
+
+.page-button:active {
+ background: $black;
+ font-weight: 500;
+ color: $white;
+}
+
+.page-button-group {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
--
GitLab