add partially implemented app bar

ubclaunchpad · Nov 27, 2024 · f97a53c · f97a53c
1 parent d277a85
commit f97a53c
Show file tree

Hide file tree

Showing 12 changed files with 170 additions and 47 deletions.
diff --git a/frontend/src/assets/logo.svg → frontend/src/assets/flow-leaflets-logo.svg b/frontend/src/assets/logo.svg → frontend/src/assets/flow-leaflets-logo.svg
diff --git a/frontend/src/assets/magnifying-glass.jpg b/frontend/src/assets/magnifying-glass.jpg
diff --git a/frontend/src/components/AppBar/AppBar.css b/frontend/src/components/AppBar/AppBar.css
@@ -0,0 +1,84 @@
+.app-bar {
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 120px;
+  width: 100vw;
+  padding: 1rem 3rem 1rem 2rem;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  padding: 0px;
+  height: 85px;
+  width: 85px;
+}
+
+.icon-search-filter-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 100px;
+}
+
+.search-filter-container {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+}
+
+.search-input {
+  height: 18px;
+  font-size: 16px;
+  padding: 12px 20px 12px 40px;
+  background-color: white;
+  background-image: url('../../assets/magnifying-glass.jpg');
+  background-position: 10px 10px; 
+  background-repeat: no-repeat;
+  background-size: 20px 20px;
+  background-color: #FBFCFE;
+  border: none;
+  border-radius: 20px;
+  box-shadow: 0px 0px 10px #e3e8f2;
+}
+
+.filter-button {
+  display: flex;
+  height: 40px;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  color: #2F3C50 !important;
+  background-color: #FBFCFE !important;
+  box-shadow: 0px 0px 10px #e3e8f2;
+  border-radius: 20px !important;
+  gap: 10px;
+}
+
+.small-icon-buttons-container {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+}
+
+.small-icon-button {
+  display: flex;
+  height: 48px;
+  width: 54px;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  color: #2F3C50;
+  background-color: #FBFCFE;
+  box-shadow: 0px 0px 10px #e3e8f2;
+  border-radius: 20px;
+}
+
+.app-bar-icon {
+  height: 24px;
+  width: 24px;
+}
diff --git a/frontend/src/components/AppBar/AppBar.jsx b/frontend/src/components/AppBar/AppBar.jsx
@@ -0,0 +1,34 @@
+import Logo from "../../assets/flow-leaflets-logo.svg";
+import {
+  AdjustmentsHorizontalIcon,
+  BellIcon,
+  UserCircleIcon
+} from '@heroicons/react/24/outline';
+import "./AppBar.css"
+
+export const AppBar = () => {
+  return (
+    <div className="app-bar">
+      <div className="icon-search-filter-container">
+        <img src={Logo} className="logo" />
+        <div className="search-filter-container">
+          <input type="text" className="search-input" name="search" placeholder="Search..." />
+          <button className="filter-button">
+            <AdjustmentsHorizontalIcon className="app-bar-icon" />
+            <p>Filter</p>
+          </button>
+        </div>
+      </div>
+      <div>
+      <div className="small-icon-buttons-container">
+        <button className="small-icon-button">
+          <BellIcon className="app-bar-icon" />
+        </button>
+        <button className="small-icon-button">
+          <UserCircleIcon className="app-bar-icon" />
+        </button>
+      </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/Buttons/CLButtons.jsx b/frontend/src/components/Buttons/CLButtons.jsx
@@ -51,6 +51,7 @@ export const CLButtonSecondary = ({
   width = DEFAULT_WIDTH,
   onClick = DEFAULT_ON_CLICK
 }) => {
+
   return (
     <button 
       onClick={onClick}

diff --git a/frontend/src/components/Navbar/Navbar.css b/frontend/src/components/Navbar/Navbar.css
@@ -1,35 +1,38 @@
-.navbar {
+.nav-bar {
     display: flex;
     flex-direction: column;
     position: absolute;
-    top: 20%;
-    left: 52px;
-    height: 600px;
+    top: 24%;
+    left: 32px;
+    height: 540px;
     width: 100px;
     justify-content: space-between;
     align-items: center;
 }
 
 .nav-button-container {
-    height: 400px;
-    width: 100px;
+    height: 350px;
+    width: 80px;
     padding: 24px 0 24px 0;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
     background-color: white;
     border-radius: 50px;
-    box-shadow: 0px 0px 10px #CDD8F0;
+    box-shadow: 0px 0px 10px #e3e8f2;
 }
 
 .nav-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     background-color: transparent;
 }
 
 .nav-button-icon-container {
-    height: 74px;
-    width: 74px;
+    height: 64px;
+    width: 64px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -39,8 +42,8 @@
 }
 
 .nav-button-icon-container-selected {
-    height: 74px;
-    width: 74px;
+    height: 60px;
+    width: 60px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -66,25 +69,22 @@
 }
 
 .logout-button {
-    height: 74px;
-    width: 74px;
+    height: 60px;
+    width: 60px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 40px;
     color: #244B94;
     background-color: white;
-    box-shadow: 0px 0px 10px #CDD8F0
+    box-shadow: 0px 0px 10px #e3e8f2
 }
 
-.icon {
-    height: 40px;
-    width: 40px;
+.logout-button:hover {
+    background-color: #CDD8F0;
 }
 
-/* .nav-buttons-container {
-    display: flex;
-    gap: 8px;
-    margin-top: 10px;
-    margin-right: 30px;
-} */
+.nav-icon {
+    height: 34px !important;
+    width: 34px !important;
+}
diff --git a/frontend/src/components/Navbar/Navbar.jsx b/frontend/src/components/Navbar/Navbar.jsx
@@ -1,42 +1,42 @@
-// import Logo from "../Logo/Logo";
 // import HomeButton from "../Buttons/HomeButton";
 // import SignInButton from "../Buttons/SignInButton";
+// import SignOutButton from "../Buttons/SignOutButton";
 // import { useAuth } from "../../contexts/AuthContext";
-import "./Navbar.css";
+import { NavLink } from 'react-router-dom';
 import {
   HomeIcon,
   BookOpenIcon,
   ClockIcon,
   ArrowLeftStartOnRectangleIcon
 } from '@heroicons/react/24/outline';
-// import SignOutButton from "../Buttons/SignOutButton";
+import "./Navbar.css";
 
-export default function Navbar() {
+export const Navbar = () => {
   return (
-    <div className="navbar">
+    <nav className="nav-bar">
       <div className="nav-button-container">
-        <button className="nav-button">
+        <NavLink className="nav-button" to="/dashboard">
           <div className="nav-button-icon-container-selected">
-            <HomeIcon className="icon"/>
+            <HomeIcon className="nav-icon"/>
           </div>
           <p className="nav-button-text-selected">Home</p>
-        </button>
-        <button className="nav-button">
+        </NavLink>
+        <NavLink className="nav-button" to="/newLog">
           <div className="nav-button-icon-container">
-            <BookOpenIcon className="icon"/>
+            <BookOpenIcon className="nav-icon"/>
           </div>
           <p className="nav-button-text">Logs</p>
-        </button>
-        <button className="nav-button">
+        </NavLink>
+        <NavLink className="nav-button" to="/logHistory">
           <div className="nav-button-icon-container">
-            <ClockIcon className="icon"/>
+            <ClockIcon className="nav-icon"/>
           </div>
           <p className="nav-button-text">History</p>
-        </button>
+        </NavLink>
       </div>
       <button className="logout-button">
-        <ArrowLeftStartOnRectangleIcon className="icon"/>
+        <ArrowLeftStartOnRectangleIcon className="nav-icon"/>
       </button>
-    </div>
+    </nav>
   );
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -3,7 +3,7 @@
   line-height: 1.5;
   font-weight: 400;
 
-  color-scheme: light dark;
+  color-scheme: light;
   color: #1E1E1E;
   background-color: #F7FAFF;
 

diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
@@ -1,14 +1,18 @@
-import Navbar from "../components/Navbar/Navbar";
+import { AppBar } from "../components/AppBar/AppBar"
+import { Navbar } from "../components/Navbar/Navbar";
 import { CLButtonPrimary, CLButtonSecondary } from "../components/Buttons/CLButtons";
 import { useNavigate } from "react-router-dom";
 import "./styles/Dashboard.css";
 
 export default function Dashboard() {
   return (
-    <div className="page-container">
+    <div>
+      <AppBar />
       <Navbar />
-      <div className="main-content">
-        <MainContent />
+      <div className="page-container">
+        <div className="main-content">
+          <MainContent />
+        </div>
       </div>
     </div>
   );

diff --git a/frontend/src/pages/Homepage.jsx b/frontend/src/pages/Homepage.jsx
@@ -1,5 +1,5 @@
 import SignUpButton from "../components/Buttons/SignUpButton";
-import Navbar from "../components/Navbar/Navbar";
+import { Navbar } from "../components/Navbar/Navbar";
 
 const mainColour = "#646cff";
 

diff --git a/frontend/src/pages/LogHistory.jsx b/frontend/src/pages/LogHistory.jsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import Navbar from "../components/Navbar/Navbar";
+import { Navbar } from "../components/Navbar/Navbar";
 import SearchFilterSort from "../components/LogHistory/SearchFilterSort";
 import LogTable from "../components/LogHistory/LogTable";
 import Pagination from "../components/LogHistory/Pagination";

diff --git a/frontend/src/pages/NewLog.jsx b/frontend/src/pages/NewLog.jsx
@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import ImageIcon from "@mui/icons-material/Image";
 import ModeIcon from "@mui/icons-material/Mode";
-import Navbar from "../components/Navbar/Navbar";
+import { Navbar } from "../components/Navbar/Navbar";
 import "./styles/NewLog.css";
 
 export default function NewLog() {