From 784eb3d750a3f9be750cbab070279f9815403823 Mon Sep 17 00:00:00 2001 From: Jane Kamata Date: Sun, 16 Feb 2025 17:57:56 -0500 Subject: [PATCH] Completed header styling - might need to move My Account next to bell or separate out from other links? --- frontend/src/Bell.tsx | 117 +++++++++--------- frontend/src/Header.tsx | 54 ++++++++ .../src/grant-info/components/GrantPage.tsx | 48 ++++--- frontend/src/grant-info/components/Header.tsx | 34 ----- .../components => }/images/bcan_logo.png | Bin frontend/src/images/bcan_logo.svg | 9 ++ frontend/src/index.css | 2 +- .../components => }/styles/Header.css | 22 +++- 8 files changed, 164 insertions(+), 122 deletions(-) create mode 100644 frontend/src/Header.tsx delete mode 100644 frontend/src/grant-info/components/Header.tsx rename frontend/src/{grant-info/components => }/images/bcan_logo.png (100%) create mode 100644 frontend/src/images/bcan_logo.svg rename frontend/src/{grant-info/components => }/styles/Header.css (63%) diff --git a/frontend/src/Bell.tsx b/frontend/src/Bell.tsx index ed965e88..1cb60330 100644 --- a/frontend/src/Bell.tsx +++ b/frontend/src/Bell.tsx @@ -3,71 +3,74 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faBell } from "@fortawesome/free-solid-svg-icons"; import { useEffect, useState } from "react"; - // get current user id // const currUserID = sessionStorage.getItem('userId'); -const currUserID = 'bcanuser33' +const currUserID = "bcanuser33"; const BellButton = () => { + // stores notifications for the current user + const [notifications, setNotifications] = useState([]); + // determines whether bell has been clicked + const [isClicked, setClicked] = useState(false); - // stores notifications for the current user - const [notifications, setNotifications] = useState([]) - - // determines whether bell has been clicked - const [isClicked, setClicked] = useState(false) - - // logs the notifications for the current user whenever they are fetched - useEffect(() => { - console.log(notifications) - }, [notifications]); + // logs the notifications for the current user whenever they are fetched + useEffect(() => { + console.log(notifications); + }, [notifications]); + // function that handles when button is clicked and fetches notifications + const handleClick = async () => { + const response = await fetch( + `http://localhost:3001/notifications/user/${currUserID}`, + { + method: "GET", + } + ); + console.log(response); + const currNotifications = await response.json(); + setNotifications(currNotifications); + setClicked(!isClicked); + return notifications; + }; - // function that handles when button is clicked and fetches notifications - const handleClick = async () => { - const response = await fetch(`http://localhost:3001/notifications/user/${currUserID}`, { - method: 'GET' - }); - console.log(response) - const currNotifications = await response.json() - setNotifications(currNotifications) - setClicked(!isClicked) - return notifications - } - - return ( - <> - + {isClicked && ( +
+
+

+ {currUserID ? `Notifications for ${currUserID}` : "Notifications"} +

+ {notifications.length > 0 ? ( +
    + {notifications.map((notification, index) => ( +
  • + {notification.message}
    + Alert Time: {notification.alertTime} +
    • + ))} +
+ ) : ( +

No new notifications

+ )} + - {isClicked && -
-
-

- {currUserID ? `Notifications for ${currUserID}` : "Notifications"} -

- {notifications.length > 0 ? ( -
    - {notifications.map((notification, index) => ( -
  • - {notification.message}
    - Alert Time: {notification.alertTime} -
    • - ))} -
- ) : ( -

No new notifications

- )} - -
-
} - - ); +
+
+ )} + + ); }; -export default BellButton; \ No newline at end of file +export default BellButton; diff --git a/frontend/src/Header.tsx b/frontend/src/Header.tsx new file mode 100644 index 00000000..6983bcc4 --- /dev/null +++ b/frontend/src/Header.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import "./styles/Header.css"; +import { useState } from "react"; +import logo from "./images/bcan_logo.svg"; + +interface NavBarProps { + name: string; + linkTo?: string; +} + +const linkList: NavBarProps[] = [ + { name: "All Grants" }, + { name: "My Grants" }, + { name: "Active Grants" }, + { name: "Inactive Grants" }, + { name: "My Account", linkTo: "/account" }, +]; + +/** + * Header + * @returns HTML for the header component + */ +const Header: React.FC = () => { + const [selected, setSelected] = useState("All Grants"); + + return ( +
+
+ BCAN Logo +
+
+
    + {linkList.map((item, index) => ( +
  • + setSelected(item.name)} + style={{ + color: selected === item.name ? "#3191CF" : "#000000", + textDecoration: selected === item.name ? "underline" : "none", + }} + to={item.linkTo || ""} + > + {item.name} + +
    • + ))} +
+
+
+ ); +}; + +export default Header; diff --git a/frontend/src/grant-info/components/GrantPage.tsx b/frontend/src/grant-info/components/GrantPage.tsx index 3a1828eb..538697ad 100644 --- a/frontend/src/grant-info/components/GrantPage.tsx +++ b/frontend/src/grant-info/components/GrantPage.tsx @@ -1,31 +1,27 @@ -import './styles/GrantPage.css' -import Header from './Header.js'; -import GrantList from './GrantList.js'; -import Footer from './Footer.js'; -import BellButton from '../../Bell.js'; -import '../../Bell.css' - +import "./styles/GrantPage.css"; +import Header from "../../Header.js"; +import GrantList from "./GrantList.js"; +import Footer from "./Footer.js"; +import BellButton from "../../Bell.js"; +import "../../Bell.css"; function GrantPage() { - - return ( -
-
-
- -
-
- -
-
-
- -
-
-
+ return ( +
+
+
+
+
+ +
+
+
+
- - ); +
+
+
+ ); } -export default GrantPage; \ No newline at end of file +export default GrantPage; diff --git a/frontend/src/grant-info/components/Header.tsx b/frontend/src/grant-info/components/Header.tsx deleted file mode 100644 index 082ef9d8..00000000 --- a/frontend/src/grant-info/components/Header.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; -import { Link } from "react-router-dom"; -import "./styles/Header.css"; - -/** - * Header - * @returns HTML for the header component - */ -const Header: React.FC = () => { - return ( -
-
-
  • - BCAN Logo -
    • -
    -
    -
      -
    • All Grants
      • -
    • My Grants
      • -
    • Active Grants
      • -
    • Inactive Grants
      • -
    • - - My Account - -
      • -
    -
    -
    - ); -}; - -export default Header; diff --git a/frontend/src/grant-info/components/images/bcan_logo.png b/frontend/src/images/bcan_logo.png similarity index 100% rename from frontend/src/grant-info/components/images/bcan_logo.png rename to frontend/src/images/bcan_logo.png diff --git a/frontend/src/images/bcan_logo.svg b/frontend/src/images/bcan_logo.svg new file mode 100644 index 00000000..67c5c6bf --- /dev/null +++ b/frontend/src/images/bcan_logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/index.css b/frontend/src/index.css index 4afd79ee..680be246 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -24,7 +24,7 @@ a:hover { body { margin: 0; - display: flex; + display: block; place-items: center; min-width: 320px; min-height: 100vh; diff --git a/frontend/src/grant-info/components/styles/Header.css b/frontend/src/styles/Header.css similarity index 63% rename from frontend/src/grant-info/components/styles/Header.css rename to frontend/src/styles/Header.css index f2218636..0fc6c9e0 100644 --- a/frontend/src/grant-info/components/styles/Header.css +++ b/frontend/src/styles/Header.css @@ -1,16 +1,18 @@ .header { - background-color: #F26624; display: flex; justify-content: space-between; align-items: center; height: 100%; /* Fill up entire container */ - margin: 0; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); + margin: 4rem 2.5rem; + font-size: 1.2rem; } .header-right-comp { display: flex; + width:100%; justify-content: space-between; + align-items: center; + text-align: center; } .header-left-comp { @@ -21,11 +23,23 @@ .grant-buttons { display: flex; + width:100%; margin: 0; + padding: 0 0 0 5rem; color: black; list-style-type: none; } +.grant-buttons a { + color: black; +} + .grant-buttons li { - padding: 0 1rem; + flex-basis: 20%; +} + + +.logo { + max-width: 100%; + height: 100px; } \ No newline at end of file