From 82b11f7d3bef9c748c136ad3114cea5987c36c5d Mon Sep 17 00:00:00 2001 From: camila-carrillo Date: Mon, 3 Nov 2025 00:11:42 -0500 Subject: [PATCH 01/11] Implement frontend for notifications --- .../main-page/notifications/GrantNotification.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 frontend/src/main-page/notifications/GrantNotification.tsx diff --git a/frontend/src/main-page/notifications/GrantNotification.tsx b/frontend/src/main-page/notifications/GrantNotification.tsx new file mode 100644 index 0000000..f37daf5 --- /dev/null +++ b/frontend/src/main-page/notifications/GrantNotification.tsx @@ -0,0 +1,13 @@ +interface GrantNotificationProps { + message: string; +} + +const GrantNotification: React.FC = ({ message }) => { + return ( +
+ {message} +
+ ); +}; + +export default GrantNotification; \ No newline at end of file From 4003fcf7f111c9f78db4df652648a48f17cf1ee9 Mon Sep 17 00:00:00 2001 From: camila-carrillo Date: Mon, 3 Nov 2025 00:26:59 -0500 Subject: [PATCH 02/11] grantnotif, notifpopup, notifcss, modified bell --- frontend/src/main-page/header/Bell.tsx | 57 ++++++--------- .../notifications/GrantNotification.tsx | 2 +- .../notifications/NotificationPopup.tsx | 42 +++++++++++ frontend/src/styles/notification.css | 71 +++++++++++++++++++ 4 files changed, 137 insertions(+), 35 deletions(-) create mode 100644 frontend/src/main-page/notifications/NotificationPopup.tsx create mode 100644 frontend/src/styles/notification.css diff --git a/frontend/src/main-page/header/Bell.tsx b/frontend/src/main-page/header/Bell.tsx index 8253c61..bd4001a 100644 --- a/frontend/src/main-page/header/Bell.tsx +++ b/frontend/src/main-page/header/Bell.tsx @@ -2,6 +2,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faBell } from "@fortawesome/free-solid-svg-icons"; import { useEffect, useState } from "react"; import { api } from "../../api"; +import NotificationPopup from "../notifications/NotificationPopup"; // get current user id // const currUserID = sessionStorage.getItem('userId'); @@ -21,19 +22,27 @@ const BellButton = () => { // function that handles when button is clicked and fetches notifications const handleClick = async () => { - const response = await api( - `/notifications/user/${currUserID}`, - { - method: "GET", - } - ); - console.log(response); - const currNotifications = await response.json(); - setNotifications(currNotifications); + //temporary dummy data for now + const dummyNotifications = [ + {id: 1, message: "Grant A deadline approaching in 3 days"}, + {id: 2, message: "Grant B deadline tomorrow!"}, + {id: 3, message: "Grant C deadline passed yesterday!"}, + ]; + //const response = await api( + //`/notifications/user/${currUserID}`, + //{ + //method: "GET", + //} + //); + //console.log(response); + //const currNotifications = await response.json(); + setNotifications(dummyNotifications); setClicked(!isClicked); return notifications; }; + const handleClose = () => setClicked(false); + return ( <> + {isClicked && ( -
-
-

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

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

No new notifications

- )} - -
-
+ )} ); diff --git a/frontend/src/main-page/notifications/GrantNotification.tsx b/frontend/src/main-page/notifications/GrantNotification.tsx index f37daf5..28075cc 100644 --- a/frontend/src/main-page/notifications/GrantNotification.tsx +++ b/frontend/src/main-page/notifications/GrantNotification.tsx @@ -10,4 +10,4 @@ const GrantNotification: React.FC = ({ message }) => { ); }; -export default GrantNotification; \ No newline at end of file +export default GrantNotification; diff --git a/frontend/src/main-page/notifications/NotificationPopup.tsx b/frontend/src/main-page/notifications/NotificationPopup.tsx new file mode 100644 index 0000000..50ba80e --- /dev/null +++ b/frontend/src/main-page/notifications/NotificationPopup.tsx @@ -0,0 +1,42 @@ +import GrantNotification from "./GrantNotification"; +import { FaTrash } from "react-icons/fa"; + +interface NotificationPopupProps { + notifications: any[]; + onClose: () => void; +} + +const NotificationPopup: React.FC = ({ + notifications, + onClose +}) => { + return ( +
+
+

Grant Deadlines

+ +
+ +
+ {notifications.length > 0 ? ( + notifications.map((n) => ( + + )) + ) : ( +

No new notifications

+ )} +
+ +
+ +
+
+ ); +}; + +export default NotificationPopup; \ No newline at end of file diff --git a/frontend/src/styles/notification.css b/frontend/src/styles/notification.css new file mode 100644 index 0000000..fa9974f --- /dev/null +++ b/frontend/src/styles/notification.css @@ -0,0 +1,71 @@ +.notification-popup { + position: absolute; + right: 0; + top: 40px; + width: 320px; + background-color: white; + border: 1px solid #ddd; + border-radius: 12px; + box-shadow: 0 4px 10px rgba(0,0,0,0.1); + padding: 1rem; + z-index: 1000; +} + +.popup-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.popup-header h3 { + font-size: 1.1rem; + font-weight: 600; + color: #333; + margin: 0; +} + +.close-button { + background: none; + border: none; + font-size: 1.2rem; + cursor: pointer; + color: #777; +} +.close-button:hover { + color: #e74c3c; +} + +.notification-list { + max-height: 200px; + overflow-y: auto; + margin-top: 10px; +} + +.grant-notification { + background-color: #f9f9f9; + border: 1px solid #eee; + border-radius: 8px; + padding: 8px 10px; + margin-bottom: 8px; + font-size: 0.9rem; + transition: background-color 0.2s ease; +} + +.grant-notification:hover { + background-color: #f1f1f1; +} + +.trash-container { + display: flex; + justify-content: flex-end; + margin-top: 12px; +} + +.trash-icon { + color: #aaa; + cursor: pointer; + font-size: 1.2rem; +} +.trash-icon:hover { + color: #e74c3c; +} \ No newline at end of file From 5b9a354aad6a68d8aadddd1c46fc189fcbe01070 Mon Sep 17 00:00:00 2001 From: camila-carrillo Date: Mon, 3 Nov 2025 02:17:21 -0500 Subject: [PATCH 03/11] css changes --- .../src/main-page/notifications/NotificationPopup.tsx | 9 ++++++--- frontend/src/styles/notification.css | 4 ++-- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/frontend/src/main-page/notifications/NotificationPopup.tsx b/frontend/src/main-page/notifications/NotificationPopup.tsx index 50ba80e..03da3a5 100644 --- a/frontend/src/main-page/notifications/NotificationPopup.tsx +++ b/frontend/src/main-page/notifications/NotificationPopup.tsx @@ -1,5 +1,7 @@ +import { createPortal } from 'react-dom'; import GrantNotification from "./GrantNotification"; import { FaTrash } from "react-icons/fa"; +import '../../styles/notification.css'; interface NotificationPopupProps { notifications: any[]; @@ -10,10 +12,10 @@ const NotificationPopup: React.FC = ({ notifications, onClose }) => { - return ( + return createPortal(
-

Grant Deadlines

+

Alerts

@@ -35,7 +37,8 @@ const NotificationPopup: React.FC = ({ title="Delete all notifications (coming later)" />
-
+ , + document.body ); }; diff --git a/frontend/src/styles/notification.css b/frontend/src/styles/notification.css index fa9974f..45ff597 100644 --- a/frontend/src/styles/notification.css +++ b/frontend/src/styles/notification.css @@ -4,7 +4,7 @@ top: 40px; width: 320px; background-color: white; - border: 1px solid #ddd; + border: 1px solid #343131; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); padding: 1rem; @@ -64,7 +64,7 @@ .trash-icon { color: #aaa; cursor: pointer; - font-size: 1.2rem; + font-size: 1.0rem; } .trash-icon:hover { color: #e74c3c; From 06790b8a4e8ccea943e136de950f0cf33f5a5f84 Mon Sep 17 00:00:00 2001 From: camila-carrillo Date: Mon, 3 Nov 2025 16:01:10 -0500 Subject: [PATCH 04/11] working version, needs more formatting changes --- frontend/src/main-page/header/Bell.tsx | 10 ++-- .../notifications/GrantNotification.tsx | 10 ++-- .../notifications/NotificationPopup.tsx | 10 ++-- frontend/src/styles/notification.css | 47 +++++++++++++++---- 4 files changed, 55 insertions(+), 22 deletions(-) diff --git a/frontend/src/main-page/header/Bell.tsx b/frontend/src/main-page/header/Bell.tsx index bd4001a..a394a9a 100644 --- a/frontend/src/main-page/header/Bell.tsx +++ b/frontend/src/main-page/header/Bell.tsx @@ -24,9 +24,9 @@ const BellButton = () => { const handleClick = async () => { //temporary dummy data for now const dummyNotifications = [ - {id: 1, message: "Grant A deadline approaching in 3 days"}, - {id: 2, message: "Grant B deadline tomorrow!"}, - {id: 3, message: "Grant C deadline passed yesterday!"}, + {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!"}, ]; //const response = await api( //`/notifications/user/${currUserID}`, @@ -44,7 +44,7 @@ const BellButton = () => { const handleClose = () => setClicked(false); return ( - <> +
); }; diff --git a/frontend/src/main-page/notifications/GrantNotification.tsx b/frontend/src/main-page/notifications/GrantNotification.tsx index 28075cc..9c3474e 100644 --- a/frontend/src/main-page/notifications/GrantNotification.tsx +++ b/frontend/src/main-page/notifications/GrantNotification.tsx @@ -1,11 +1,15 @@ interface GrantNotificationProps { + title: string; message: string; } -const GrantNotification: React.FC = ({ message }) => { +const GrantNotification: React.FC = ({ title, message }) => { return ( -
- {message} +
+
+
{title}
+
{message}
+
); }; diff --git a/frontend/src/main-page/notifications/NotificationPopup.tsx b/frontend/src/main-page/notifications/NotificationPopup.tsx index 03da3a5..62e9280 100644 --- a/frontend/src/main-page/notifications/NotificationPopup.tsx +++ b/frontend/src/main-page/notifications/NotificationPopup.tsx @@ -4,7 +4,7 @@ import { FaTrash } from "react-icons/fa"; import '../../styles/notification.css'; interface NotificationPopupProps { - notifications: any[]; + notifications: { id: string; title: string; message: string }[]; onClose: () => void; } @@ -13,18 +13,18 @@ const NotificationPopup: React.FC = ({ onClose }) => { return createPortal( -
+

Alerts

-
- {notifications.length > 0 ? ( + {notifications && notifications.length > 0 ? ( notifications.map((n) => ( - + )) ) : (

No new notifications

diff --git a/frontend/src/styles/notification.css b/frontend/src/styles/notification.css index 45ff597..096d60f 100644 --- a/frontend/src/styles/notification.css +++ b/frontend/src/styles/notification.css @@ -1,22 +1,26 @@ .notification-popup { position: absolute; right: 0; - top: 40px; - width: 320px; + top: 75px; + width: 360px; background-color: white; border: 1px solid #343131; - border-radius: 12px; + border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); - padding: 1rem; + padding: 0.7rem; z-index: 1000; } + .popup-header { display: flex; justify-content: space-between; align-items: center; + padding: 0.5rem 0.5rem; + border-bottom: 1px solid #ddd; } + .popup-header h3 { font-size: 1.1rem; font-weight: 600; @@ -24,10 +28,11 @@ margin: 0; } + .close-button { background: none; border: none; - font-size: 1.2rem; + font-size: 1rem; cursor: pointer; color: #777; } @@ -35,32 +40,56 @@ color: #e74c3c; } + .notification-list { max-height: 200px; overflow-y: auto; margin-top: 10px; } + .grant-notification { background-color: #f9f9f9; - border: 1px solid #eee; - border-radius: 8px; + border: 1px solid #b3afaf; + border-radius: 0px; padding: 8px 10px; - margin-bottom: 8px; + margin-bottom: 2px; font-size: 0.9rem; transition: background-color 0.2s ease; } +.notification-title { + font-weight: 600; + font-size: 13px; + color: #101010; + line-height: 1.15; +} + +.notification-message { + font-size: 12.5px; + color: #555; + margin-top: 4px; + line-height: 1.2; +} + .grant-notification:hover { background-color: #f1f1f1; } + +.bell-container { + position: relative; + display: inline-block; +} + + .trash-container { display: flex; justify-content: flex-end; margin-top: 12px; } + .trash-icon { color: #aaa; cursor: pointer; @@ -68,4 +97,4 @@ } .trash-icon:hover { color: #e74c3c; -} \ No newline at end of file +} From 18f0d4375fd4f7fff003640093d4939f72b53101 Mon Sep 17 00:00:00 2001 From: camila-carrillo Date: Mon, 3 Nov 2025 21:24:45 -0500 Subject: [PATCH 05/11] css final changes --- frontend/src/main-page/header/Bell.tsx | 1 + .../notifications/GrantNotification.tsx | 14 +++++++++---- frontend/src/styles/notification.css | 21 +++++++++++-------- 3 files changed, 23 insertions(+), 13 deletions(-) diff --git a/frontend/src/main-page/header/Bell.tsx b/frontend/src/main-page/header/Bell.tsx index a394a9a..f7b5dd4 100644 --- a/frontend/src/main-page/header/Bell.tsx +++ b/frontend/src/main-page/header/Bell.tsx @@ -27,6 +27,7 @@ const BellButton = () => { {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/${currUserID}`, diff --git a/frontend/src/main-page/notifications/GrantNotification.tsx b/frontend/src/main-page/notifications/GrantNotification.tsx index 9c3474e..354b16a 100644 --- a/frontend/src/main-page/notifications/GrantNotification.tsx +++ b/frontend/src/main-page/notifications/GrantNotification.tsx @@ -1,3 +1,6 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faBell } from "@fortawesome/free-solid-svg-icons"; + interface GrantNotificationProps { title: string; message: string; @@ -6,10 +9,13 @@ interface GrantNotificationProps { const GrantNotification: React.FC = ({ title, message }) => { return (
-
-
{title}
-
{message}
-
+
+ +
+
+
{title}
+
{message}
+
); }; diff --git a/frontend/src/styles/notification.css b/frontend/src/styles/notification.css index 096d60f..fba1192 100644 --- a/frontend/src/styles/notification.css +++ b/frontend/src/styles/notification.css @@ -1,13 +1,14 @@ .notification-popup { position: absolute; right: 0; + left: 48rem; top: 75px; width: 360px; background-color: white; border: 1px solid #343131; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); - padding: 0.7rem; + padding: 0.5rem; z-index: 1000; } @@ -49,13 +50,21 @@ .grant-notification { - background-color: #f9f9f9; - border: 1px solid #b3afaf; + border-bottom: 0.2px solid #dfd9d9; border-radius: 0px; padding: 8px 10px; margin-bottom: 2px; font-size: 0.9rem; transition: background-color 0.2s ease; + display: flex; +} + +.bell-notif { + margin-right: 10px; + background-color: rgb(225, 225, 225); + padding: 10px; + border-radius: 100%; + scale: 67%; } .notification-title { @@ -77,12 +86,6 @@ } -.bell-container { - position: relative; - display: inline-block; -} - - .trash-container { display: flex; justify-content: flex-end; From 4a9e24b6aa763d0f6462ee7d8db0b90f2312c013 Mon Sep 17 00:00:00 2001 From: camila-carrillo Date: Tue, 4 Nov 2025 00:20:41 -0500 Subject: [PATCH 06/11] store includes notifs and mutator --- frontend/src/external/bcanSatchel/actions.ts | 7 +++++++ frontend/src/external/bcanSatchel/mutators.ts | 8 +++++++- frontend/src/external/bcanSatchel/store.ts | 4 +++- frontend/src/main-page/header/Bell.tsx | 11 ++++++++--- .../src/main-page/notifications/GrantNotification.tsx | 2 +- .../src/main-page/notifications/NotificationPopup.tsx | 2 +- 6 files changed, 27 insertions(+), 7 deletions(-) diff --git a/frontend/src/external/bcanSatchel/actions.ts b/frontend/src/external/bcanSatchel/actions.ts index 306814f..47c9a78 100644 --- a/frontend/src/external/bcanSatchel/actions.ts +++ b/frontend/src/external/bcanSatchel/actions.ts @@ -66,3 +66,10 @@ export const updateSearchQuery = action( 'updateSearchQuery', (searchQuery: string) => ({searchQuery}) ) + +export const setNotifications = action( + 'setNotifications', + (notifications: {id: number; title: string; message: string }[]) => ({ + notifications, + }) +) diff --git a/frontend/src/external/bcanSatchel/mutators.ts b/frontend/src/external/bcanSatchel/mutators.ts index 2ec5483..fd98e50 100644 --- a/frontend/src/external/bcanSatchel/mutators.ts +++ b/frontend/src/external/bcanSatchel/mutators.ts @@ -7,7 +7,8 @@ import { updateFilter, updateStartDateFilter, updateEndDateFilter, updateSearchQuery, - updateYearFilter + updateYearFilter, + setNotifications } from './actions'; import { getAppStore } from './store'; @@ -80,3 +81,8 @@ mutator(updateYearFilter, (actionMessage) => { const store = getAppStore(); store.yearFilter = actionMessage.yearFilter; }) + +mutator(setNotifications, (actionMessage) => { + const store = getAppStore(); + store.notifications = actionMessage.notifications; +}) diff --git a/frontend/src/external/bcanSatchel/store.ts b/frontend/src/external/bcanSatchel/store.ts index 8586d70..9b0ce34 100644 --- a/frontend/src/external/bcanSatchel/store.ts +++ b/frontend/src/external/bcanSatchel/store.ts @@ -14,6 +14,7 @@ export interface AppState { endDateFilter: Date | null; searchQuery: string; yearFilter:number[] | null; + notifications: { id: number; title: string; message: string; }[]; } // Define initial state @@ -26,7 +27,8 @@ const initialState: AppState = { startDateFilter: null, endDateFilter: null, searchQuery: '', - yearFilter: null + yearFilter: null, + notifications: [] }; const store = createStore('appStore', initialState); diff --git a/frontend/src/main-page/header/Bell.tsx b/frontend/src/main-page/header/Bell.tsx index f7b5dd4..a5fd4d8 100644 --- a/frontend/src/main-page/header/Bell.tsx +++ b/frontend/src/main-page/header/Bell.tsx @@ -1,8 +1,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faBell } from "@fortawesome/free-solid-svg-icons"; import { useEffect, useState } from "react"; -import { api } from "../../api"; +//import { api } from "../../api"; import NotificationPopup from "../notifications/NotificationPopup"; +import { setNotifications as setNotificationsAction } from "../../external/bcanSatchel/actions"; +import { getAppStore } from "../../external/bcanSatchel/store"; +//import { mutatorAction } from "satcheljs"; // get current user id // const currUserID = sessionStorage.getItem('userId'); @@ -10,7 +13,9 @@ const currUserID = "bcanuser33"; const BellButton = () => { // stores notifications for the current user - const [notifications, setNotifications] = useState([]); + //const [notifications, setNotifications] = useState([]); + const store = getAppStore(); + const notifications = store.notifications ?? []; // determines whether bell has been clicked const [isClicked, setClicked] = useState(false); @@ -37,7 +42,7 @@ const BellButton = () => { //); //console.log(response); //const currNotifications = await response.json(); - setNotifications(dummyNotifications); + setNotificationsAction(dummyNotifications); setClicked(!isClicked); return notifications; }; diff --git a/frontend/src/main-page/notifications/GrantNotification.tsx b/frontend/src/main-page/notifications/GrantNotification.tsx index 354b16a..ff68925 100644 --- a/frontend/src/main-page/notifications/GrantNotification.tsx +++ b/frontend/src/main-page/notifications/GrantNotification.tsx @@ -13,7 +13,7 @@ const GrantNotification: React.FC = ({ title, message })
-
{title}
+
{title}
{message}
diff --git a/frontend/src/main-page/notifications/NotificationPopup.tsx b/frontend/src/main-page/notifications/NotificationPopup.tsx index 62e9280..10cfe2b 100644 --- a/frontend/src/main-page/notifications/NotificationPopup.tsx +++ b/frontend/src/main-page/notifications/NotificationPopup.tsx @@ -4,7 +4,7 @@ import { FaTrash } from "react-icons/fa"; import '../../styles/notification.css'; interface NotificationPopupProps { - notifications: { id: string; title: string; message: string }[]; + notifications: { id: number; title: string; message: string }[]; onClose: () => void; } From ac49290fe2b060ef12baf44c7e4a12fdb6143e5a Mon Sep 17 00:00:00 2001 From: camila-carrillo Date: Tue, 4 Nov 2025 14:37:48 -0500 Subject: [PATCH 07/11] accounting for screen size + mutator testing complete --- frontend/src/main-page/header/Bell.tsx | 6 +++--- frontend/src/main-page/notifications/NotificationPopup.tsx | 2 +- frontend/src/styles/notification.css | 5 ++--- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/frontend/src/main-page/header/Bell.tsx b/frontend/src/main-page/header/Bell.tsx index a5fd4d8..f0f3f82 100644 --- a/frontend/src/main-page/header/Bell.tsx +++ b/frontend/src/main-page/header/Bell.tsx @@ -1,11 +1,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faBell } from "@fortawesome/free-solid-svg-icons"; import { useEffect, useState } from "react"; -//import { api } from "../../api"; +//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"; import { getAppStore } from "../../external/bcanSatchel/store"; -//import { mutatorAction } from "satcheljs"; + // get current user id // const currUserID = sessionStorage.getItem('userId'); @@ -13,7 +13,6 @@ const currUserID = "bcanuser33"; const BellButton = () => { // stores notifications for the current user - //const [notifications, setNotifications] = useState([]); const store = getAppStore(); const notifications = store.notifications ?? []; @@ -34,6 +33,7 @@ const BellButton = () => { {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}`, //{ diff --git a/frontend/src/main-page/notifications/NotificationPopup.tsx b/frontend/src/main-page/notifications/NotificationPopup.tsx index 10cfe2b..4a7c315 100644 --- a/frontend/src/main-page/notifications/NotificationPopup.tsx +++ b/frontend/src/main-page/notifications/NotificationPopup.tsx @@ -16,7 +16,7 @@ const NotificationPopup: React.FC = ({

Alerts

-
diff --git a/frontend/src/styles/notification.css b/frontend/src/styles/notification.css index fba1192..a462334 100644 --- a/frontend/src/styles/notification.css +++ b/frontend/src/styles/notification.css @@ -1,9 +1,8 @@ .notification-popup { position: absolute; - right: 0; - left: 48rem; + right: 7.5rem; top: 75px; - width: 360px; + width: min(340px, 70%); background-color: white; border: 1px solid #343131; border-radius: 6px; From 29aa1b9a740b9564555985a6c03dae4d827b467f Mon Sep 17 00:00:00 2001 From: camila-carrillo Date: Thu, 6 Nov 2025 00:03:01 -0500 Subject: [PATCH 08/11] delete trash icon in notif popup --- .../notifications/GrantNotification.tsx | 7 +++- .../notifications/NotificationPopup.tsx | 8 ----- frontend/src/styles/notification.css | 34 ++++++++++++------- 3 files changed, 27 insertions(+), 22 deletions(-) diff --git a/frontend/src/main-page/notifications/GrantNotification.tsx b/frontend/src/main-page/notifications/GrantNotification.tsx index ff68925..ef59f2d 100644 --- a/frontend/src/main-page/notifications/GrantNotification.tsx +++ b/frontend/src/main-page/notifications/GrantNotification.tsx @@ -1,5 +1,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faBell } from "@fortawesome/free-solid-svg-icons"; +import { FaTrash } from "react-icons/fa"; interface GrantNotificationProps { title: string; @@ -16,7 +17,11 @@ const GrantNotification: React.FC = ({ title, message })
{title}
{message}
-
+ +
); }; diff --git a/frontend/src/main-page/notifications/NotificationPopup.tsx b/frontend/src/main-page/notifications/NotificationPopup.tsx index 4a7c315..26f2be5 100644 --- a/frontend/src/main-page/notifications/NotificationPopup.tsx +++ b/frontend/src/main-page/notifications/NotificationPopup.tsx @@ -1,6 +1,5 @@ import { createPortal } from 'react-dom'; import GrantNotification from "./GrantNotification"; -import { FaTrash } from "react-icons/fa"; import '../../styles/notification.css'; interface NotificationPopupProps { @@ -30,13 +29,6 @@ const NotificationPopup: React.FC = ({

No new notifications

)} - -
- -
, document.body ); diff --git a/frontend/src/styles/notification.css b/frontend/src/styles/notification.css index a462334..dd6e0f8 100644 --- a/frontend/src/styles/notification.css +++ b/frontend/src/styles/notification.css @@ -49,9 +49,11 @@ .grant-notification { + position: relative; border-bottom: 0.2px solid #dfd9d9; border-radius: 0px; padding: 8px 10px; + padding-right: 35px; margin-bottom: 2px; font-size: 0.9rem; transition: background-color 0.2s ease; @@ -63,7 +65,17 @@ background-color: rgb(225, 225, 225); padding: 10px; border-radius: 100%; - scale: 67%; + scale: 73%; + flex-shrink: 0; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; +} + +.notification-text { + flex: 1; } .notification-title { @@ -84,19 +96,15 @@ background-color: #f1f1f1; } - -.trash-container { - display: flex; - justify-content: flex-end; - margin-top: 12px; -} - - -.trash-icon { +.notification-trash-icon { + position: absolute; + bottom: 8px; + right: 10px; color: #aaa; cursor: pointer; - font-size: 1.0rem; + font-size: 0.9rem } -.trash-icon:hover { - color: #e74c3c; + +.notification-trash-icon:hover { + color: #e74c3c } From 48a41af99b1027eba14bb90efa4b3902d5cafdc2 Mon Sep 17 00:00:00 2001 From: camila-carrillo Date: Thu, 6 Nov 2025 00:10:42 -0500 Subject: [PATCH 09/11] LAST CSS CHANGE --- frontend/src/styles/notification.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/styles/notification.css b/frontend/src/styles/notification.css index dd6e0f8..63ecc88 100644 --- a/frontend/src/styles/notification.css +++ b/frontend/src/styles/notification.css @@ -44,7 +44,7 @@ .notification-list { max-height: 200px; overflow-y: auto; - margin-top: 10px; + margin-top: 1px; } From a03050c5ea5683e92d16e194f8ea87fde0a02008 Mon Sep 17 00:00:00 2001 From: camila-carrillo Date: Thu, 6 Nov 2025 10:47:54 -0500 Subject: [PATCH 10/11] changed mind- reversed previous css change --- frontend/src/styles/notification.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/styles/notification.css b/frontend/src/styles/notification.css index 63ecc88..dd6e0f8 100644 --- a/frontend/src/styles/notification.css +++ b/frontend/src/styles/notification.css @@ -44,7 +44,7 @@ .notification-list { max-height: 200px; overflow-y: auto; - margin-top: 1px; + margin-top: 10px; } From 6360bf7869713424a26f205ced9dd8ebb123a3ca Mon Sep 17 00:00:00 2001 From: prooflesben Date: Sun, 9 Nov 2025 19:57:08 -0500 Subject: [PATCH 11/11] Everything merged andchecked --- frontend/src/main-page/dashboard/Dashboard.tsx | 2 +- frontend/src/main-page/header/Bell.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/main-page/dashboard/Dashboard.tsx b/frontend/src/main-page/dashboard/Dashboard.tsx index 86f5092..e754827 100644 --- a/frontend/src/main-page/dashboard/Dashboard.tsx +++ b/frontend/src/main-page/dashboard/Dashboard.tsx @@ -32,7 +32,7 @@ const Dashboard = observer(() => { const uniqueYears = Array.from( new Set( - yearFilter?.length > 0 + yearFilter && yearFilter?.length > 0 ? yearFilter : allGrants.map((g) => new Date(g.application_deadline).getFullYear()) ) diff --git a/frontend/src/main-page/header/Bell.tsx b/frontend/src/main-page/header/Bell.tsx index f0f3f82..1aeb811 100644 --- a/frontend/src/main-page/header/Bell.tsx +++ b/frontend/src/main-page/header/Bell.tsx @@ -9,7 +9,7 @@ import { getAppStore } from "../../external/bcanSatchel/store"; // get current user id // const currUserID = sessionStorage.getItem('userId'); -const currUserID = "bcanuser33"; +// const currUserID = "bcanuser33"; const BellButton = () => { // stores notifications for the current user