From 55a61394ce8afdac115ef2ace5c180719890cf0a Mon Sep 17 00:00:00 2001 From: adityapat24 Date: Tue, 2 Dec 2025 18:04:39 -0500 Subject: [PATCH 01/11] changes --- frontend/src/main-page/header/AccountInfo.tsx | 78 ++++++++ frontend/src/main-page/header/UserButton.tsx | 38 +++- .../main-page/header/styles/AccountInfo.css | 179 ++++++++++++++++++ .../main-page/header/styles/UserButton.css | 26 +++ 4 files changed, 314 insertions(+), 7 deletions(-) create mode 100644 frontend/src/main-page/header/AccountInfo.tsx create mode 100644 frontend/src/main-page/header/styles/AccountInfo.css create mode 100644 frontend/src/main-page/header/styles/UserButton.css diff --git a/frontend/src/main-page/header/AccountInfo.tsx b/frontend/src/main-page/header/AccountInfo.tsx new file mode 100644 index 00000000..1cc6e7e0 --- /dev/null +++ b/frontend/src/main-page/header/AccountInfo.tsx @@ -0,0 +1,78 @@ +import React from 'react'; +import './styles/AccountInfo.css'; +import { logoutUser } from '@/external/bcanSatchel/actions'; + +interface AccountInfoProps { + email: string; + username: string; + role: string; +} + +const handleUserListClick = () => { + console.log("Navigate to user list"); + setShowAccountInfo(false); + // Add your navigation logic here +}; + +const handleLogoutClick = () => { + logoutUser(); +}; + + +const handleClose = () => { + setShowAccountInfo(false); +}; + +const AccountInfo: React.FC = ({ + email, + username, + role, + +}) => { + return ( + <> +
+
e.stopPropagation()}> +
+

Account Info

+ +
+
+ E-mail: + {email} +
+
+ Username: + {username} +
+
+ Role: + {role} +
+
+ +
+ + +
+
+
+ + ); +}; + +export default AccountInfo; + +function setShowAccountInfo(arg0: boolean) { + throw new Error('Function not implemented.'); +} diff --git a/frontend/src/main-page/header/UserButton.tsx b/frontend/src/main-page/header/UserButton.tsx index 2f04e77c..705ed4ab 100644 --- a/frontend/src/main-page/header/UserButton.tsx +++ b/frontend/src/main-page/header/UserButton.tsx @@ -1,16 +1,40 @@ +import { useState } from "react"; import { faUser } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import AccountInfo from "./AccountInfo"; +import { + logoutUser, +} from "../../external/bcanSatchel/actions.ts"; + +import "./styles/UserButton.css"; +import { useAuthContext } from "../../context/auth/authContext"; + const UserButton = () => { + const [showAccountInfo, setShowAccountInfo] = useState(false); + const { user } = useAuthContext(); + const toggleAccountInfo = () => { + setShowAccountInfo(!showAccountInfo); + }; + return ( -
- - - +
+ + + {showAccountInfo && ( + + )}
); }; -export default UserButton; +export default UserButton; \ No newline at end of file diff --git a/frontend/src/main-page/header/styles/AccountInfo.css b/frontend/src/main-page/header/styles/AccountInfo.css new file mode 100644 index 00000000..2b891dd0 --- /dev/null +++ b/frontend/src/main-page/header/styles/AccountInfo.css @@ -0,0 +1,179 @@ +.account-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.3); + z-index: 1000; +} + +.account-modal { + position: fixed; + top: 70px; + right: 20px; + z-index: 9999; + min-width: 320px; + max-width: 480px; + z-index: 1000; +} + +.account-popup { + padding: 20px 40px; + background-color: white; + border: 3px solid #2d2d2d; + border-radius: 16px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); + z-index: 1000; +} + +.popup-header { + color: #000; + font-family: Montserrat; + font-size: 22px; + font-style: normal; + font-weight: 100; + line-height: normal; + margin-bottom: 16px; + margin-top: 0; + letter-spacing: -0.5px; + z-index: 1000; +} + +.account-info { + display: flex; + flex-direction: column; + gap: 10px; + margin-bottom: 20px; + border-left: 4px solid #ff6b35; + padding-left: 20px; + z-index: 1000; +} + +.info-row { + display: flex; + align-items: center; + font-size: 14px; + gap: 12px; + z-index: 1000; +} + +.info-label { + color: #646464; + font-family: Montserrat; + font-size: 15px; + font-style: normal; + font-weight: 700; + line-height: normal; + z-index: 1000; +} + +.info-value { + color: #000; +font-family: Montserrat; +font-size: 15px; +font-style: normal; +font-weight: 400; +line-height: normal; +z-index: 1000; +} + +.button-container { + display: flex; + justify-content: space-between; + align-items: center; + gap: 16px; + margin-top: 16px; + z-index: 1000; +} + +.user-list-btn { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 20px; + background: white; + border: 2px solid #2d2d2d; + border-radius: 10px; + font-size: 14px; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; + color: #2d2d2d; +} + +.user-list-btn:hover { + background: #f8f8f8; + transform: translateY(-1px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.user-icon { + width: 18px; + height: 18px; +} + +.logout-btn { + padding: 10px 26px; + background: #ffb3b3; + border: 2px solid #ff8888; + border-radius: 10px; + color: #d63031; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; +} + +.logout-btn:hover { + background: #ff9999; + color: white; + border-color: #ff7777; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(255, 119, 119, 0.3); +} + +/* Responsive design */ +@media (max-width: 768px) { + .account-modal { + min-width: 280px; + max-width: 360px; + right: 10px; + z-index: 1000; + } + + .account-popup { + padding: 18px 32px; + z-index: 1000; + } + + .popup-header { + font-size: 20px; + z-index: 1000; + } + + .info-row { + font-size: 12px; + flex-direction: column; + align-items: flex-start; + gap: 5px; + z-index: 1000; + } + + .info-label { + min-width: auto; + z-index: 1000; + } + + .button-container { + flex-direction: column; + z-index: 1000; + } + + .user-list-btn, + .logout-btn { + width: 100%; + justify-content: center; + font-size: 12px; + } +} \ No newline at end of file diff --git a/frontend/src/main-page/header/styles/UserButton.css b/frontend/src/main-page/header/styles/UserButton.css new file mode 100644 index 00000000..2402f04d --- /dev/null +++ b/frontend/src/main-page/header/styles/UserButton.css @@ -0,0 +1,26 @@ +@import "tailwindcss/base"; +@import "tailwindcss/components"; +@import "tailwindcss/utilities"; + +.user-container { + display: inline-block; +} + +.user-container button { + background-color: transparent; + border: none; + cursor: pointer; + transition: background-color 0.3s, color 0.3s; + padding: 8px; + border-radius: 5px; +} + +.user-button.hovered { + background-color: #f39c12; + color: white; +} + +.user-button:hover { + background-color: #f39c12; + color: white; +} \ No newline at end of file From 3b809b3fcf1459c1dc9c3ad4be0e85292dec6551 Mon Sep 17 00:00:00 2001 From: adityapat24 Date: Tue, 2 Dec 2025 18:31:21 -0500 Subject: [PATCH 02/11] changes --- frontend/src/main-page/header/AccountInfo.tsx | 59 ++++++++----------- frontend/src/main-page/header/UserButton.tsx | 17 +++--- 2 files changed, 33 insertions(+), 43 deletions(-) diff --git a/frontend/src/main-page/header/AccountInfo.tsx b/frontend/src/main-page/header/AccountInfo.tsx index 1cc6e7e0..7cfa06ca 100644 --- a/frontend/src/main-page/header/AccountInfo.tsx +++ b/frontend/src/main-page/header/AccountInfo.tsx @@ -1,41 +1,42 @@ -import React from 'react'; +import React, { useState } from 'react'; import './styles/AccountInfo.css'; -import { logoutUser } from '@/external/bcanSatchel/actions'; - +import { + logoutUser, +} from "../../external/bcanSatchel/actions.ts"; interface AccountInfoProps { email: string; username: string; role: string; + setShowAccountInfo: (show: boolean) => void; } -const handleUserListClick = () => { - console.log("Navigate to user list"); - setShowAccountInfo(false); - // Add your navigation logic here -}; - -const handleLogoutClick = () => { - logoutUser(); -}; - - -const handleClose = () => { - setShowAccountInfo(false); -}; - const AccountInfo: React.FC = ({ email, username, role, - + setShowAccountInfo, }) => { + const handleOverlayClick = () => { + setShowAccountInfo(false); // closes the modal + }; + + const handleUserListClick = () => { + console.log("Navigate to user list"); + setShowAccountInfo(false); // close modal if navigating + }; + + const handleLogoutClick = () => { + logoutUser(); + setShowAccountInfo(false); // close modal after logout + }; + return ( <> -
+
e.stopPropagation()}>

Account Info

- +
E-mail: @@ -52,15 +53,8 @@ const AccountInfo: React.FC = ({
- + @@ -71,8 +65,5 @@ const AccountInfo: React.FC = ({ ); }; -export default AccountInfo; -function setShowAccountInfo(arg0: boolean) { - throw new Error('Function not implemented.'); -} +export default AccountInfo; diff --git a/frontend/src/main-page/header/UserButton.tsx b/frontend/src/main-page/header/UserButton.tsx index 705ed4ab..f2923a2e 100644 --- a/frontend/src/main-page/header/UserButton.tsx +++ b/frontend/src/main-page/header/UserButton.tsx @@ -2,9 +2,6 @@ import { useState } from "react"; import { faUser } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import AccountInfo from "./AccountInfo"; -import { - logoutUser, -} from "../../external/bcanSatchel/actions.ts"; import "./styles/UserButton.css"; import { useAuthContext } from "../../context/auth/authContext"; @@ -27,12 +24,14 @@ const UserButton = () => { {showAccountInfo && ( - - )} + +)} +
); }; From 4b0885e449618f93fef8ec73b3e97813567e958e Mon Sep 17 00:00:00 2001 From: adityapat24 Date: Tue, 2 Dec 2025 18:50:44 -0500 Subject: [PATCH 03/11] changes --- frontend/src/main-page/header/AccountInfo.tsx | 3 +-- frontend/src/main-page/header/styles/UserButton.css | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/main-page/header/AccountInfo.tsx b/frontend/src/main-page/header/AccountInfo.tsx index 7cfa06ca..88b1ec7d 100644 --- a/frontend/src/main-page/header/AccountInfo.tsx +++ b/frontend/src/main-page/header/AccountInfo.tsx @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import './styles/AccountInfo.css'; -import { - logoutUser, +import { logoutUser, } from "../../external/bcanSatchel/actions.ts"; interface AccountInfoProps { email: string; diff --git a/frontend/src/main-page/header/styles/UserButton.css b/frontend/src/main-page/header/styles/UserButton.css index 2402f04d..b71e5011 100644 --- a/frontend/src/main-page/header/styles/UserButton.css +++ b/frontend/src/main-page/header/styles/UserButton.css @@ -23,4 +23,4 @@ .user-button:hover { background-color: #f39c12; color: white; -} \ No newline at end of file +} \ No newline at end of file From 9dc2673ad2f6ede6d3d3e08fda3f88edabb5342e Mon Sep 17 00:00:00 2001 From: adityapat24 Date: Tue, 2 Dec 2025 18:55:37 -0500 Subject: [PATCH 04/11] change --- .../main-page/header/styles/AccountInfo.css | 45 ------------------- 1 file changed, 45 deletions(-) diff --git a/frontend/src/main-page/header/styles/AccountInfo.css b/frontend/src/main-page/header/styles/AccountInfo.css index 2b891dd0..2f36da4f 100644 --- a/frontend/src/main-page/header/styles/AccountInfo.css +++ b/frontend/src/main-page/header/styles/AccountInfo.css @@ -132,48 +132,3 @@ z-index: 1000; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255, 119, 119, 0.3); } - -/* Responsive design */ -@media (max-width: 768px) { - .account-modal { - min-width: 280px; - max-width: 360px; - right: 10px; - z-index: 1000; - } - - .account-popup { - padding: 18px 32px; - z-index: 1000; - } - - .popup-header { - font-size: 20px; - z-index: 1000; - } - - .info-row { - font-size: 12px; - flex-direction: column; - align-items: flex-start; - gap: 5px; - z-index: 1000; - } - - .info-label { - min-width: auto; - z-index: 1000; - } - - .button-container { - flex-direction: column; - z-index: 1000; - } - - .user-list-btn, - .logout-btn { - width: 100%; - justify-content: center; - font-size: 12px; - } -} \ No newline at end of file From feb111bb79b9f5d6b44e61849c187864a975f4f2 Mon Sep 17 00:00:00 2001 From: adityapat24 Date: Tue, 2 Dec 2025 19:16:14 -0500 Subject: [PATCH 05/11] changes --- frontend/src/main-page/header/AccountInfo.tsx | 8 +++++--- frontend/src/main-page/header/styles/AccountInfo.css | 1 + frontend/src/main-page/header/styles/UserButton.css | 3 --- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/main-page/header/AccountInfo.tsx b/frontend/src/main-page/header/AccountInfo.tsx index 88b1ec7d..afca188d 100644 --- a/frontend/src/main-page/header/AccountInfo.tsx +++ b/frontend/src/main-page/header/AccountInfo.tsx @@ -31,8 +31,7 @@ const AccountInfo: React.FC = ({ return ( <> -
-
e.stopPropagation()}> +
e.stopPropagation()} >

Account Info

@@ -53,7 +52,10 @@ const AccountInfo: React.FC = ({
+ + + + User List diff --git a/frontend/src/main-page/header/styles/AccountInfo.css b/frontend/src/main-page/header/styles/AccountInfo.css index 2f36da4f..62202e3d 100644 --- a/frontend/src/main-page/header/styles/AccountInfo.css +++ b/frontend/src/main-page/header/styles/AccountInfo.css @@ -19,6 +19,7 @@ } .account-popup { + position: relative; padding: 20px 40px; background-color: white; border: 3px solid #2d2d2d; diff --git a/frontend/src/main-page/header/styles/UserButton.css b/frontend/src/main-page/header/styles/UserButton.css index b71e5011..1273aa99 100644 --- a/frontend/src/main-page/header/styles/UserButton.css +++ b/frontend/src/main-page/header/styles/UserButton.css @@ -1,6 +1,3 @@ -@import "tailwindcss/base"; -@import "tailwindcss/components"; -@import "tailwindcss/utilities"; .user-container { display: inline-block; From 8149c1a1af3d1fc492a053473ce265f26edc2429 Mon Sep 17 00:00:00 2001 From: adityapat24 Date: Tue, 2 Dec 2025 19:24:26 -0500 Subject: [PATCH 06/11] account info --- frontend/src/main-page/header/AccountInfo.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/frontend/src/main-page/header/AccountInfo.tsx b/frontend/src/main-page/header/AccountInfo.tsx index afca188d..c06129af 100644 --- a/frontend/src/main-page/header/AccountInfo.tsx +++ b/frontend/src/main-page/header/AccountInfo.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import './styles/AccountInfo.css'; import { logoutUser, } from "../../external/bcanSatchel/actions.ts"; +import { Link } from 'react-router-dom'; interface AccountInfoProps { email: string; username: string; @@ -15,13 +16,11 @@ const AccountInfo: React.FC = ({ role, setShowAccountInfo, }) => { - const handleOverlayClick = () => { - setShowAccountInfo(false); // closes the modal - }; + const handleUserListClick = () => { - console.log("Navigate to user list"); - setShowAccountInfo(false); // close modal if navigating + + }; const handleLogoutClick = () => { From 00b5e07cff159959edc235e4b4e1d20ecedc5cff Mon Sep 17 00:00:00 2001 From: adityapat24 Date: Tue, 2 Dec 2025 19:26:01 -0500 Subject: [PATCH 07/11] change --- frontend/src/main-page/header/AccountInfo.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/main-page/header/AccountInfo.tsx b/frontend/src/main-page/header/AccountInfo.tsx index c06129af..0eaa0329 100644 --- a/frontend/src/main-page/header/AccountInfo.tsx +++ b/frontend/src/main-page/header/AccountInfo.tsx @@ -20,7 +20,8 @@ const AccountInfo: React.FC = ({ const handleUserListClick = () => { - + + }; const handleLogoutClick = () => { From 6bd1f7143317f438373b0a3a460b21bb7b72a8d3 Mon Sep 17 00:00:00 2001 From: adityapat24 Date: Tue, 2 Dec 2025 19:42:39 -0500 Subject: [PATCH 08/11] route fix --- frontend/src/main-page/header/AccountInfo.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/frontend/src/main-page/header/AccountInfo.tsx b/frontend/src/main-page/header/AccountInfo.tsx index 0eaa0329..372a2b61 100644 --- a/frontend/src/main-page/header/AccountInfo.tsx +++ b/frontend/src/main-page/header/AccountInfo.tsx @@ -2,7 +2,10 @@ import React, { useState } from 'react'; import './styles/AccountInfo.css'; import { logoutUser, } from "../../external/bcanSatchel/actions.ts"; -import { Link } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; + + + interface AccountInfoProps { email: string; username: string; @@ -17,11 +20,10 @@ const AccountInfo: React.FC = ({ setShowAccountInfo, }) => { + const navigate = useNavigate(); const handleUserListClick = () => { - - - + navigate('users'); }; const handleLogoutClick = () => { From cc474c35e5be2e50b87f49aac151962d27cd4191 Mon Sep 17 00:00:00 2001 From: adityapat24 Date: Tue, 2 Dec 2025 20:20:05 -0500 Subject: [PATCH 09/11] final changes Co-authored-by: Lyanne Xu --- frontend/src/animations/AnimatedRoutes.tsx | 11 ++---- frontend/src/custom/RingButton.tsx | 12 +++---- frontend/src/main-page/header/AccountInfo.tsx | 28 ++++++++------- frontend/src/main-page/header/Header.tsx | 27 +-------------- frontend/src/main-page/header/UserButton.tsx | 34 +++++++++++-------- .../main-page/header/styles/AccountInfo.css | 16 ++------- frontend/src/styles/button.css | 1 + 7 files changed, 50 insertions(+), 79 deletions(-) diff --git a/frontend/src/animations/AnimatedRoutes.tsx b/frontend/src/animations/AnimatedRoutes.tsx index 86216747..52d4dfa1 100644 --- a/frontend/src/animations/AnimatedRoutes.tsx +++ b/frontend/src/animations/AnimatedRoutes.tsx @@ -5,7 +5,6 @@ import { Routes, Route, useLocation, Navigate } from "react-router-dom"; import "./transitions.css"; import { observer } from "mobx-react-lite"; -import Account from "../Account"; import { useAuthContext } from "../context/auth/authContext"; import MainPage from "../main-page/MainPage"; import Login from "../Login"; @@ -25,12 +24,12 @@ const AnimatedRoutes = observer(() => { : } + element={isAuthenticated ? : } /> : + isAuthenticated ? : } /> { } /> - : } - /> } /> + } /> diff --git a/frontend/src/custom/RingButton.tsx b/frontend/src/custom/RingButton.tsx index f162a457..eed8ab07 100644 --- a/frontend/src/custom/RingButton.tsx +++ b/frontend/src/custom/RingButton.tsx @@ -25,28 +25,28 @@ export default function RingButton({ text, color }: RingButtonProps) { return ( <> {ButtonColorOption.GREEN === color && ( - +
)} {ButtonColorOption.ORANGE === color && ( - +
)} {ButtonColorOption.GRAY === color && ( - +
)} ); diff --git a/frontend/src/main-page/header/AccountInfo.tsx b/frontend/src/main-page/header/AccountInfo.tsx index 372a2b61..64a42c5f 100644 --- a/frontend/src/main-page/header/AccountInfo.tsx +++ b/frontend/src/main-page/header/AccountInfo.tsx @@ -3,8 +3,8 @@ import './styles/AccountInfo.css'; import { logoutUser, } from "../../external/bcanSatchel/actions.ts"; import { useNavigate } from 'react-router-dom'; - - +import { useAuthContext } from "../../context/auth/authContext"; +import { createPortal } from 'react-dom'; interface AccountInfoProps { email: string; @@ -21,19 +21,22 @@ const AccountInfo: React.FC = ({ }) => { const navigate = useNavigate(); + const {user} = useAuthContext(); + + const [isAdmin] = useState(user?.position === 'Admin'); const handleUserListClick = () => { navigate('users'); + setShowAccountInfo(false); }; const handleLogoutClick = () => { logoutUser(); - setShowAccountInfo(false); // close modal after logout + setShowAccountInfo(false); }; - return ( - <> -
e.stopPropagation()} > + return createPortal( +
e.stopPropagation()}>

Account Info

@@ -51,20 +54,21 @@ const AccountInfo: React.FC = ({ {role}
- + {isAdmin &&
+ + + User List
+ }
-
- +
, + document.body ); }; diff --git a/frontend/src/main-page/header/Header.tsx b/frontend/src/main-page/header/Header.tsx index 20e498d6..97d139f6 100644 --- a/frontend/src/main-page/header/Header.tsx +++ b/frontend/src/main-page/header/Header.tsx @@ -7,11 +7,8 @@ import { } from "../../../../middle-layer/types/Status.ts"; import { updateFilter, - logoutUser, } from "../../external/bcanSatchel/actions.ts"; import { observer } from "mobx-react-lite"; -import { Menu, Button } from "@chakra-ui/react"; -import { FaCog } from "react-icons/fa"; import BellButton from "./Bell.tsx"; import { useLocation } from 'react-router-dom'; import UserButton from "./UserButton.tsx"; @@ -45,10 +42,7 @@ const Header: React.FC = observer(() => { } } - const handleLogout = () => { - logoutUser(); - }; - + return (
@@ -77,25 +71,6 @@ const Header: React.FC = observer(() => {
- - - - - - - - My Account - - - - Logout - - - - -
diff --git a/frontend/src/main-page/header/UserButton.tsx b/frontend/src/main-page/header/UserButton.tsx index f2923a2e..a5609856 100644 --- a/frontend/src/main-page/header/UserButton.tsx +++ b/frontend/src/main-page/header/UserButton.tsx @@ -14,24 +14,30 @@ const UserButton = () => { setShowAccountInfo(!showAccountInfo); }; + return (
- - - {showAccountInfo && ( - -)} + + {showAccountInfo && ( + + )} +
); }; diff --git a/frontend/src/main-page/header/styles/AccountInfo.css b/frontend/src/main-page/header/styles/AccountInfo.css index 62202e3d..c73064bf 100644 --- a/frontend/src/main-page/header/styles/AccountInfo.css +++ b/frontend/src/main-page/header/styles/AccountInfo.css @@ -1,31 +1,21 @@ -.account-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.3); - z-index: 1000; -} .account-modal { position: fixed; top: 70px; right: 20px; z-index: 9999; - min-width: 320px; + min-width: 350px; max-width: 480px; - z-index: 1000; } .account-popup { - position: relative; + position: absolute; padding: 20px 40px; background-color: white; border: 3px solid #2d2d2d; border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); - z-index: 1000; + z-index: 9999; } .popup-header { diff --git a/frontend/src/styles/button.css b/frontend/src/styles/button.css index 28585e1b..b9392dd3 100644 --- a/frontend/src/styles/button.css +++ b/frontend/src/styles/button.css @@ -41,6 +41,7 @@ text-align: center; padding: 0.5rem 0; border-radius: 15px; + z-index: 0; } /* Custom button color classes */ From 900d4653b527555d3b05e9bbea4c79e1951e6932 Mon Sep 17 00:00:00 2001 From: lyannne Date: Tue, 2 Dec 2025 21:15:07 -0500 Subject: [PATCH 10/11] made it so that only one modal can be viewed at a time --- frontend/src/main-page/header/AccountInfo.tsx | 8 +-- frontend/src/main-page/header/Bell.tsx | 71 ++++++++++--------- frontend/src/main-page/header/Header.tsx | 10 ++- frontend/src/main-page/header/UserButton.tsx | 15 ++-- .../notifications/NotificationPopup.tsx | 6 +- package-lock.json | 13 ++++ package.json | 5 +- 7 files changed, 76 insertions(+), 52 deletions(-) diff --git a/frontend/src/main-page/header/AccountInfo.tsx b/frontend/src/main-page/header/AccountInfo.tsx index 64a42c5f..b35e54a0 100644 --- a/frontend/src/main-page/header/AccountInfo.tsx +++ b/frontend/src/main-page/header/AccountInfo.tsx @@ -10,14 +10,14 @@ interface AccountInfoProps { email: string; username: string; role: string; - setShowAccountInfo: (show: boolean) => void; + setOpenModal: (modal: string | null) => void; } const AccountInfo: React.FC = ({ email, username, role, - setShowAccountInfo, + setOpenModal, }) => { const navigate = useNavigate(); @@ -27,12 +27,12 @@ const AccountInfo: React.FC = ({ const handleUserListClick = () => { navigate('users'); - setShowAccountInfo(false); + setOpenModal(null); }; const handleLogoutClick = () => { logoutUser(); - setShowAccountInfo(false); + setOpenModal(null); }; return createPortal( diff --git a/frontend/src/main-page/header/Bell.tsx b/frontend/src/main-page/header/Bell.tsx index 759ce534..35cbf68b 100644 --- a/frontend/src/main-page/header/Bell.tsx +++ b/frontend/src/main-page/header/Bell.tsx @@ -6,19 +6,23 @@ import NotificationPopup from "../notifications/NotificationPopup"; import { setNotifications as setNotificationsAction } from "../../external/bcanSatchel/actions"; import { getAppStore } from "../../external/bcanSatchel/store"; import { observer } from "mobx-react-lite"; +import { api } from "../../api"; // get current user id // const currUserID = sessionStorage.getItem('userId'); // const currUserID = "bcanuser33"; -const BellButton = observer(() => { +interface BellButtonProps { + // onClick handler to open notification popup + setOpenModal: (modal: string | null) => void; + openModal: string | null; +} + +const BellButton: React.FC = observer(({ setOpenModal, openModal }) => { // stores notifications for the current user const store = getAppStore(); const notifications = store.notifications ?? []; - // 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); @@ -27,36 +31,33 @@ const BellButton = observer(() => { // function that handles when button is clicked and fetches notifications const handleClick = async () => { //temporary dummy data for now - const dummyNotifications = [ - { - id: 1, - title: "Grant Deadline", - message: "Grant A deadline approaching in 3 days", - }, - { id: 2, title: "Grant Deadline", message: "Grant B deadline tomorrow!" }, - { - id: 3, - title: "Grant Deadline", - message: "Grant C deadline passed yesterday!", - }, - { id: 4, title: "Grant Deadline", message: "Grant D deadline tomorrow!" }, - ]; - //previous api logic (for later) - //const response = await api( - //`/notifications/user/${currUserID}`, - //{ - //method: "GET", - //} - //); - //console.log(response); - //const currNotifications = await response.json(); - setNotificationsAction(dummyNotifications); - setClicked(!isClicked); + // const dummyNotifications = [ + // { + // id: 1, + // title: "Grant Deadline", + // message: "Grant A deadline approaching in 3 days", + // }, + // { id: 2, title: "Grant Deadline", message: "Grant B deadline tomorrow!" }, + // { + // id: 3, + // title: "Grant Deadline", + // message: "Grant C deadline passed yesterday!", + // }, + // { id: 4, title: "Grant Deadline", message: "Grant D deadline tomorrow!" }, + // ]; + const response = await api( + `/notifications/user/${store.user?.userId}`, + { + method: "GET", + } + ); + console.log(response); + const currNotifications = await response.json(); + setNotificationsAction(currNotifications); + setOpenModal(openModal === "bell" ? null : "bell"); return notifications; }; - const handleClose = () => setClicked(false); - return (
{ style={{ position: "relative", display: "inline-block" }} >
- {isClicked && ( + {(openModal === "bell" ? ( - )} + ) : null)}
); }); diff --git a/frontend/src/main-page/header/Header.tsx b/frontend/src/main-page/header/Header.tsx index 97d139f6..506b48e5 100644 --- a/frontend/src/main-page/header/Header.tsx +++ b/frontend/src/main-page/header/Header.tsx @@ -12,6 +12,7 @@ import { observer } from "mobx-react-lite"; import BellButton from "./Bell.tsx"; import { useLocation } from 'react-router-dom'; import UserButton from "./UserButton.tsx"; +import { useState } from "react"; interface NavBarProps { name: string; @@ -30,6 +31,7 @@ const linkList: NavBarProps[] = [ * The cog displays a dropdown with "My Account" and "Logout" options. */ const Header: React.FC = observer(() => { + const [openModal, setOpenModal] = useState(null); function categoryClicked( e: React.MouseEvent, @@ -68,10 +70,12 @@ const Header: React.FC = observer(() => { ))}
-
- +
setOpenModal(openModal === "bell" ? null : "bell")}> + +
+
setOpenModal(openModal === "user" ? null : "user")}> +
-
diff --git a/frontend/src/main-page/header/UserButton.tsx b/frontend/src/main-page/header/UserButton.tsx index a5609856..190efcc2 100644 --- a/frontend/src/main-page/header/UserButton.tsx +++ b/frontend/src/main-page/header/UserButton.tsx @@ -6,12 +6,15 @@ import AccountInfo from "./AccountInfo"; import "./styles/UserButton.css"; import { useAuthContext } from "../../context/auth/authContext"; +interface UserButtonProps { + setOpenModal: (modal: string | null) => void; + openModal: string | null; +} -const UserButton = () => { - const [showAccountInfo, setShowAccountInfo] = useState(false); +const UserButton: React.FC = ({ setOpenModal, openModal }) => { const { user } = useAuthContext(); const toggleAccountInfo = () => { - setShowAccountInfo(!showAccountInfo); + setOpenModal(openModal === "user" ? null : "user"); }; @@ -22,19 +25,19 @@ const UserButton = () => { style={{ position: "relative", display: "inline-block" }} > - {showAccountInfo && ( + {openModal === "user" && ( )}
diff --git a/frontend/src/main-page/notifications/NotificationPopup.tsx b/frontend/src/main-page/notifications/NotificationPopup.tsx index 26f2be59..0e0a1f9d 100644 --- a/frontend/src/main-page/notifications/NotificationPopup.tsx +++ b/frontend/src/main-page/notifications/NotificationPopup.tsx @@ -4,18 +4,18 @@ import '../../styles/notification.css'; interface NotificationPopupProps { notifications: { id: number; title: string; message: string }[]; - onClose: () => void; + setOpenModal: (value: string | null) => void; } const NotificationPopup: React.FC = ({ notifications, - onClose + setOpenModal }) => { return createPortal(

Alerts

-
diff --git a/package-lock.json b/package-lock.json index a643330a..18ba706c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,9 @@ "recharts": "^3.2.1", "ts-morph": "^23.0.0", "typescript": "^5.7.3" + }, + "devDependencies": { + "baseline-browser-mapping": "^2.8.32" } }, "node_modules/@nodelib/fs.scandir": { @@ -174,6 +177,16 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "license": "MIT" }, + "node_modules/baseline-browser-mapping": { + "version": "2.8.32", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.32.tgz", + "integrity": "sha512-OPz5aBThlyLFgxyhdwf/s2+8ab3OvT7AdTNvKHBwpXomIYeXqpUUuT8LrdtxZSsWJ4R4CU1un4XGh5Ez3nlTpw==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "baseline-browser-mapping": "dist/cli.js" + } + }, "node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", diff --git a/package.json b/package.json index aa7149c0..ad0a61ee 100644 --- a/package.json +++ b/package.json @@ -16,5 +16,8 @@ }, "keywords": [], "author": "", - "license": "ISC" + "license": "ISC", + "devDependencies": { + "baseline-browser-mapping": "^2.8.32" + } } From 237967e825ecd7422ce4403f48088e814f0ffb27 Mon Sep 17 00:00:00 2001 From: adityapat24 Date: Tue, 2 Dec 2025 23:27:18 -0500 Subject: [PATCH 11/11] remove unused imports --- frontend/src/custom/RingButton.tsx | 1 - frontend/src/main-page/header/Bell.tsx | 2 +- frontend/src/main-page/header/UserButton.tsx | 1 - 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/src/custom/RingButton.tsx b/frontend/src/custom/RingButton.tsx index eed8ab07..04a94318 100644 --- a/frontend/src/custom/RingButton.tsx +++ b/frontend/src/custom/RingButton.tsx @@ -1,4 +1,3 @@ -import { Button } from "@chakra-ui/react"; import "../styles/button.css"; /* Maintained with button.css */ diff --git a/frontend/src/main-page/header/Bell.tsx b/frontend/src/main-page/header/Bell.tsx index 35cbf68b..3ba3887f 100644 --- a/frontend/src/main-page/header/Bell.tsx +++ b/frontend/src/main-page/header/Bell.tsx @@ -1,6 +1,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faBell } from "@fortawesome/free-solid-svg-icons"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; //import { api } from "../../api"; //todo: swap out dummy data with real api fetch when backend is ready import NotificationPopup from "../notifications/NotificationPopup"; import { setNotifications as setNotificationsAction } from "../../external/bcanSatchel/actions"; diff --git a/frontend/src/main-page/header/UserButton.tsx b/frontend/src/main-page/header/UserButton.tsx index 190efcc2..1b6ff1ca 100644 --- a/frontend/src/main-page/header/UserButton.tsx +++ b/frontend/src/main-page/header/UserButton.tsx @@ -1,4 +1,3 @@ -import { useState } from "react"; import { faUser } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import AccountInfo from "./AccountInfo";