Match Header to Figma

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<any[]>([]);
 
+  // determines whether bell has been clicked
+  const [isClicked, setClicked] = useState(false);
 
-    // stores notifications for the current user
-    const [notifications, setNotifications] = useState<any[]>([])
-
-    // 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 (
-        <>
-            <button className={`bell-button ${isClicked ? 'hovered' : ''}`} onClick={handleClick}>
-                <FontAwesomeIcon icon={faBell} />
+  return (
+    <>
+      <button
+        className={`bell-button ${isClicked ? "hovered" : ""}`}
+        onClick={handleClick}
+      >
+        <FontAwesomeIcon icon={faBell} style={{ color: "black" }} />
+      </button>
+      {isClicked && (
+        <div className="notification-modal">
+          <div className="notification-modal-content">
+            <h4>
+              {currUserID ? `Notifications for ${currUserID}` : "Notifications"}
+            </h4>
+            {notifications.length > 0 ? (
+              <ul>
+                {notifications.map((notification, index) => (
+                  <li key={index} className="notification-item">
+                    {notification.message} <br />
+                    <small>Alert Time: {notification.alertTime}</small>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p>No new notifications</p>
+            )}
+            <button
+              onClick={() => setClicked(false)}
+              className="notification-close-button"
+            >
+              Close
             </button>
-            {isClicked &&
-                <div className="notification-modal">
-                    <div className="notification-modal-content">
-                        <h4>
-                            {currUserID ? `Notifications for ${currUserID}` : "Notifications"}
-                        </h4>
-                        {notifications.length > 0 ? (
-                            <ul>
-                                {notifications.map((notification, index) => (
-                                    <li key={index} className="notification-item">
-                                        {notification.message} <br />
-                                        <small>Alert Time: {notification.alertTime}</small>
-                                    </li>
-                                ))}
-                            </ul>
-                        ) : (
-                            <p>No new notifications</p>
-                        )}
-                        <button
-                            onClick={() => setClicked(false)}
-                            className="notification-close-button"
-                        >
-                            Close
-                        </button>
-                    </div>
-                </div>}
-        </>
-    );
+          </div>
+        </div>
+      )}
+    </>
+  );
 };
 
-export default BellButton;
+export default BellButton;

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 (
+    <header className="header">
+      <header className="header-left-comp">
+        <img className="logo" src={logo} alt="BCAN Logo" />
+      </header>
+      <header className="header-right-comp">
+        <ul className="grant-buttons">
+          {linkList.map((item, index) => (
+            <li key={index}>
+              <Link
+                onClick={() => setSelected(item.name)}
+                style={{
+                  color: selected === item.name ? "#3191CF" : "#000000",
+                  textDecoration: selected === item.name ? "underline" : "none",
+                }}
+                to={item.linkTo || ""}
+              >
+                {item.name}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </header>
+    </header>
+  );
+};
+
+export default Header;

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 (
-        <div className="grant-page">
-            <div className="top-half">
-                <Header />
-
-            </div>
-            <div className="bell-container">
-                <BellButton />
-            </div>
-            <div className="bot-half">
-                <div className="grant-list">
-                    <GrantList />
-                </div>
-                <Footer />
-            </div>
+  return (
+    <div className="grant-page">
+      <div className="top-half">
+        <Header />
+      </div>
+      <div className="bell-container">
+        <BellButton />
+      </div>
+      <div className="bot-half">
+        <div className="grant-list">
+          <GrantList />
         </div>
-
-    );
+        <Footer />
+      </div>
+    </div>
+  );
 }
 
-export default GrantPage;
+export default GrantPage;

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;

frontend/src/grant-info/components/styles/Header.css → 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;
 }