Refactored main pages as per Figma designs

ubclaunchpad · Nov 28, 2024 · abb8113 · abb8113
1 parent eb7e101
commit abb8113
Show file tree

Hide file tree

Showing 15 changed files with 1,048 additions and 398 deletions.
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -25,3 +25,5 @@ dist-ssr
 
 #env variables
 .env
+
+src/assets/images/
diff --git a/frontend/src/components/ContentHeader/ContentHeader.css b/frontend/src/components/ContentHeader/ContentHeader.css
@@ -0,0 +1,71 @@
+.content-header {
+    position: absolute;
+    left: 230px;
+    top: 18%;
+    display: flex;
+    width: calc(100% - 395px);
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 16px; /* Add padding to create space above border */
+    border-bottom: 1px solid #9AB0E1;
+}
+
+.content-header h2 {
+    font-size: 24px;
+    font-weight: 600;
+    color: #1E1E1E;
+}
+
+.button-group {
+    display: flex;
+    gap: 12px;  /* Space between buttons */
+    align-items: center;
+}
+
+.actions-button {
+    background: white;
+    color: #4F607E;         /* SECONDARY_COLOR */
+    border-radius: 20px;    /* DEFAULT_BORDER_RADIUS */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    height: 40px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.actions-button:hover {
+    background: #f0f5ff;
+}
+
+.add-button {
+    background: #244B94;  /* PRIMARY_BACKGROUND_COLOR */
+    color: #F7FAFF;       /* PRIMARY_COLOR */
+    border-radius: 20px;  /* DEFAULT_BORDER_RADIUS */
+    width: 120px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    cursor: pointer;
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.add-book-button:hover {
+    opacity: 0.9;
+}
+
+.plus-icon {
+    width: 18px;
+    height: 18px;
+}
+
+.down-icon {
+    width: 18px;
+    height: 18px;
+}
diff --git a/frontend/src/components/ContentHeader/ContentHeader.jsx b/frontend/src/components/ContentHeader/ContentHeader.jsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { useLocation } from "react-router-dom";
+import { PlusIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
+import "./ContentHeader.css";
+
+export default function ContentHeader() {
+  const location = useLocation();
+  const isHistory = location.pathname === "/history";
+
+  return (
+    <div className="content-header">
+      <h2>{isHistory ? "Log History" : "Logbooks"}</h2>
+      <div className="button-group">
+        <AddButton
+          variant={isHistory ? "history" : "logbook"}
+          onClick={() => {}}
+        />
+        <ActionsButton onClick={() => {}} />
+      </div>
+    </div>
+  );
+}
+
+function AddButton({ variant = "logbook", onClick = () => {} }) {
+  return (
+    <button onClick={onClick} className="add-button">
+      {variant === "history" ? "Add Logs" : "Add Book"}
+      <PlusIcon className="plus-icon" />
+    </button>
+  );
+}
+
+function ActionsButton({ onClick = () => {} }) {
+  return (
+    <button onClick={onClick} className="actions-button">
+      <span>Actions</span>
+      <ChevronDownIcon className="down-icon" />
+    </button>
+  );
+}
diff --git a/frontend/src/components/Navbar/Navbar.jsx b/frontend/src/components/Navbar/Navbar.jsx
@@ -1,6 +1,6 @@
 "use state";
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useState, useEffect } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
 import "./Navbar.css";
 import {
   HomeIcon,
@@ -11,10 +11,18 @@ import {
 import { useAuth } from "../../contexts/AuthContext";
 
 export default function Navbar() {
-  const [selected, setSelected] = useState("home");
+  const location = useLocation();
   const { logout } = useAuth();
   const navigate = useNavigate();
 
+  // Set initial selected state based on current path
+  const [selected, setSelected] = useState(() => {
+    if (location.pathname === "/logbooks") return "logs";
+    if (location.pathname === "/home") return "home";
+    if (location.pathname === "/history") return "history";
+    return "";
+  });
+
   const handleClickLogout = async () => {
     try {
       await logout();
@@ -24,10 +32,21 @@ export default function Navbar() {
     }
   };
 
+  const handleNavClick = (nav) => {
+    setSelected(nav);
+    if (nav === "logs") {
+      navigate("/logbooks");
+    } else if (nav === "home") {
+      navigate("/home");
+    } else if (nav === "history") {
+      navigate("/history");
+    }
+  };
+
   return (
     <div className="navbar">
       <div className="nav-button-container">
-        <button className="nav-button" onClick={() => setSelected("home")}>
+        <button className="nav-button" onClick={() => handleNavClick("home")}>
           <div
             className={`nav-button-icon-container${
               selected === "home" ? "-selected" : ""
@@ -43,7 +62,7 @@ export default function Navbar() {
             Home
           </p>
         </button>
-        <button className="nav-button" onClick={() => setSelected("logs")}>
+        <button className="nav-button" onClick={() => handleNavClick("logs")}>
           <div
             className={`nav-button-icon-container${
               selected === "logs" ? "-selected" : ""
@@ -59,7 +78,10 @@ export default function Navbar() {
             Logs
           </p>
         </button>
-        <button className="nav-button" onClick={() => setSelected("history")}>
+        <button
+          className="nav-button"
+          onClick={() => handleNavClick("history")}
+        >
           <div
             className={`nav-button-icon-container${
               selected === "history" ? "-selected" : ""

diff --git a/frontend/src/components/TopNav/TopNav.css b/frontend/src/components/TopNav/TopNav.css
@@ -0,0 +1,146 @@
+.top-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.8rem 1.5rem;
+    width: 40px;
+    height: 40px;
+  }
+
+  .nav-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: auto;
+    margin-right: 200px;
+    margin-left: 50px;
+    position: relative;
+    z-index: 1;
+  }
+
+  .nav-logo {
+    width: 70px;
+    height: 70px;
+  }
+
+  .logo-link {
+    position: absolute;
+    top: 0.5rem;
+    left: 1.5rem;
+  }
+
+  .nav-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-right: 1rem;
+    position: absolute;
+    top: 2rem;
+    right: 10%;
+  }
+
+  .notification-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 0.8rem;
+    border: 1px solid #E5E7EB;
+    border-radius: 1rem;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    box-shadow: 0px 0px 10px #e3e8f2;
+    backdrop-filter: blur(8px);
+    background: white;
+    width: 50px;
+    height: 40px;
+  }
+
+  .profile-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 0.8rem;
+    border: 1px solid #E5E7EB;
+    border-radius: 1rem;
+    color: black;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    box-shadow: 0px 0px 10px #e3e8f2;
+    backdrop-filter: blur(8px);
+    background: white;
+    width: 50px;
+    height: 40px;
+  }
+
+  .notification-btn:hover,
+  .profile-btn:hover {
+    background: #E5E7EB;
+  }
+
+  .notification-btn svg,
+  .profile-btn svg {
+    width: 30px;
+    height: 18px;
+  }
+
+  .filter-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.8rem;
+    border: 1px solid #E5E7EB;
+    border-radius: 1rem;
+    background: white;
+    color: #2F3C50;
+    font-size: 14px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: all 0.2s ease-in-out;
+    box-shadow: 0px 0px 10px #e3e8f2;
+    backdrop-filter: blur(8px);
+    height: 40px;
+  }
+
+  .filter-btn:hover {
+    background: #F3F4F6;
+  }
+
+  .MuiTextField-root {
+    width: 300px !important;
+    height: 40px !important;
+    background: #F3F4F6;
+    border-radius: 50px;
+    box-shadow: 0px 0px 10px #e3e8f2;
+    backdrop-filter: blur(8px);
+  }
+
+  .MuiTextField-root .MuiInputBase-root {
+    height: 50px !important;
+    padding: 0 8px !important;
+    background: white;
+  }
+
+  .MuiTextField-root .MuiInputBase-input {
+    padding: 8px 4px !important;
+    font-size: 13px !important;
+  }
+
+  .MuiTextField-root .MuiInputAdornment-root {
+    height: 40px !important;
+    margin-right: 4px !important;
+  }
+
+  .MuiTextField-root .MuiInputAdornment-root .icon {
+    width: 18px !important;
+    height: 18px !important;
+    color: #2F3C50;
+  }
+
+  .filter-btn .icon,
+  .notification-btn .icon,
+  .profile-btn .icon,
+  .search-input .icon {
+    width: 20px;
+    height: 20px;
+    color: #2F3C50;
+  }
diff --git a/frontend/src/components/TopNav/TopNav.jsx b/frontend/src/components/TopNav/TopNav.jsx
@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import Logo from "../../assets/images/logo-small.png";
+import { TextField, InputAdornment } from "@mui/material";
+import {
+  UserCircleIcon,
+  BellIcon,
+  AdjustmentsHorizontalIcon,
+  MagnifyingGlassIcon,
+} from "@heroicons/react/24/outline";
+import "./TopNav.css";
+
+function TopNav() {
+  const [searchQuery, setSearchQuery] = useState("");
+  return (
+    <div>
+      <Link to="/" className="logo-link">
+        <img src={Logo} alt="FlowLeaflets Logo" className="nav-logo" />
+      </Link>
+      <nav className="top-nav">
+        <div className="nav-left">
+          <TextField
+            placeholder="Search logs..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <MagnifyingGlassIcon className="icon search-input" />
+                </InputAdornment>
+              ),
+            }}
+          />
+          <button className="filter-btn">
+            <AdjustmentsHorizontalIcon className="icon" /> Filter
+          </button>
+        </div>
+        <div className="nav-right">
+          <button className="notification-btn">
+            <BellIcon className="icon" />
+          </button>
+          <button className="profile-btn">
+            <UserCircleIcon className="icon" />
+          </button>
+        </div>
+      </nav>
+    </div>
+  );
+}
+
+export default TopNav;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,3 +25,5 @@ dist-ssr

		#env variables
		.env

		src/assets/images/