From ecc8ce205b94dc70af24ebb71f72949094526aa1 Mon Sep 17 00:00:00 2001 From: Jane Kamata Date: Sat, 11 Apr 2026 01:32:43 -0400 Subject: [PATCH 01/18] Spacing fixes --- frontend/src/components/InputField.tsx | 2 +- frontend/src/main-page/notifications/NotificationPopup.tsx | 4 ++-- frontend/src/sign-up/PasswordField.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/InputField.tsx b/frontend/src/components/InputField.tsx index 4f850af5..8e498c7a 100644 --- a/frontend/src/components/InputField.tsx +++ b/frontend/src/components/InputField.tsx @@ -23,7 +23,7 @@ export default function InputField({
= observer(({ return createPortal(
setOpenModal(false)}> -
e.stopPropagation()}> +
e.stopPropagation()}>

Your Notifications

@@ -95,7 +95,7 @@ const NotificationPopup: React.FC = observer(({ /> )) ) : ( -

No new notifications

+

No new notifications

)}
diff --git a/frontend/src/sign-up/PasswordField.tsx b/frontend/src/sign-up/PasswordField.tsx index c3dfb499..710108a9 100644 --- a/frontend/src/sign-up/PasswordField.tsx +++ b/frontend/src/sign-up/PasswordField.tsx @@ -71,7 +71,7 @@ export default function PasswordField({
Date: Sat, 11 Apr 2026 01:37:30 -0400 Subject: [PATCH 02/18] Disabling signup button on submit --- frontend/src/sign-up/Register.tsx | 4 ++++ frontend/src/sign-up/SignUpForm.tsx | 6 +++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/frontend/src/sign-up/Register.tsx b/frontend/src/sign-up/Register.tsx index 67de4889..4576d757 100644 --- a/frontend/src/sign-up/Register.tsx +++ b/frontend/src/sign-up/Register.tsx @@ -15,6 +15,7 @@ const Register = observer(() => { const navigate = useNavigate(); const { register } = useAuthContext(); + const [submitting, setSubmitting] = useState(false); const [values, setValues] = useState({ firstName: "", lastName: "", @@ -36,6 +37,7 @@ const Register = observer(() => { }; const handleSubmit = async (e: React.FormEvent) => { + setSubmitting(true); e.preventDefault(); if (!EMAIL_REGEX.test(values.email)) { @@ -77,6 +79,7 @@ const Register = observer(() => { item: "registration", }); } + setSubmitting(false); }; return ( @@ -96,6 +99,7 @@ const Register = observer(() => { values.passwordRe !== "" } passwordsMatch={values.password === values.passwordRe} + submitting={submitting} />
diff --git a/frontend/src/sign-up/SignUpForm.tsx b/frontend/src/sign-up/SignUpForm.tsx index 8f5266fc..f052325e 100644 --- a/frontend/src/sign-up/SignUpForm.tsx +++ b/frontend/src/sign-up/SignUpForm.tsx @@ -16,6 +16,7 @@ export type SignUpFormProps = { values: SignUpFormValues; onChange: (field: keyof SignUpFormValues, value: string) => void; onSubmit: (e: React.FormEvent) => void; + submitted?: boolean; error?: { state: boolean; message: string; item: string }; /** When true, Sign Up button uses primary-900 and is clickable; when false, primary-700 and disabled. */ passwordRequirementsMet?: boolean; @@ -23,6 +24,8 @@ export type SignUpFormProps = { allFieldsFilled?: boolean; /** When true, password and re-enter password are exactly the same. */ passwordsMatch?: boolean; + /** When true, form is in the process of being submitted; disables button and shows loading state. */ + submitting: boolean; }; /** @@ -37,6 +40,7 @@ export default function SignUpForm({ passwordRequirementsMet = false, allFieldsFilled = false, passwordsMatch = false, + submitting = false, }: SignUpFormProps) { const hasError = error?.state ?? false; const errorItem = error?.item ?? ""; @@ -113,7 +117,7 @@ export default function SignUpForm({
)} - +
From c9553080c1747b7980f257ee97428bc295f56020 Mon Sep 17 00:00:00 2001 From: Jane Kamata Date: Sat, 11 Apr 2026 01:43:00 -0400 Subject: [PATCH 03/18] Removing autofill gray background on input --- frontend/src/styles/index.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css index 6bb4e773..9a0da40a 100644 --- a/frontend/src/styles/index.css +++ b/frontend/src/styles/index.css @@ -152,6 +152,11 @@ input:focus { /* outline: transparent; */ } +input:-webkit-autofill, +input:-webkit-autofill:focus { + transition: background-color 0s 600000s, color 0s 600000s !important; +} + textarea:focus { outline: 2px solid var(--color-primary-900); /* outline: transparent; */ From 981f52715bed9da3c5eed1c66fa4eaa0d75db1fb Mon Sep 17 00:00:00 2001 From: Jane Kamata Date: Sat, 11 Apr 2026 01:53:02 -0400 Subject: [PATCH 04/18] Gantt height and chart hover gray box --- .../src/main-page/dashboard/components/BarYearGrantStatus.tsx | 1 + .../main-page/dashboard/components/GanttYearGrantTimeline.tsx | 2 +- .../main-page/dashboard/components/StackedBarMoneyReceived.tsx | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/main-page/dashboard/components/BarYearGrantStatus.tsx b/frontend/src/main-page/dashboard/components/BarYearGrantStatus.tsx index 291cc4c6..453f7064 100644 --- a/frontend/src/main-page/dashboard/components/BarYearGrantStatus.tsx +++ b/frontend/src/main-page/dashboard/components/BarYearGrantStatus.tsx @@ -128,6 +128,7 @@ const BarYearGrantStatus = observer( border: "1px solid lightgray", boxShadow: "0 2px 8px rgba(0,0,0,0.1)", }} + cursor={{ fill: "rgba(0,0,0,0.1)" }} formatter={(value: number) => checked ? `$${value.toLocaleString()}` : `${value}` } diff --git a/frontend/src/main-page/dashboard/components/GanttYearGrantTimeline.tsx b/frontend/src/main-page/dashboard/components/GanttYearGrantTimeline.tsx index a7af8e0f..e0d84d8b 100644 --- a/frontend/src/main-page/dashboard/components/GanttYearGrantTimeline.tsx +++ b/frontend/src/main-page/dashboard/components/GanttYearGrantTimeline.tsx @@ -152,7 +152,7 @@ export const GanttYearGrantTimeline = observer( : ""} {recentYear}
-
+
{ border: "1px solid lightgray", boxShadow: "0 2px 8px rgba(0,0,0,0.1)", }} + cursor={{ fill: "rgba(0,0,0,0.1)" }} formatter={(value: number) => `$${value.toLocaleString()}`} /> From e23276425e0e71fe62c54713c562e691cf28c56b Mon Sep 17 00:00:00 2001 From: Jane Kamata Date: Sat, 11 Apr 2026 02:29:30 -0400 Subject: [PATCH 05/18] Checkbox styling --- .../main-page/dashboard/styles/Dashboard.css | 34 ------------------- .../main-page/grants/filter-bar/FilterBar.tsx | 4 +-- .../filter-bar/components/StatusDropdown.tsx | 2 ++ frontend/src/styles/index.css | 30 ++++++++++++++++ 4 files changed, 34 insertions(+), 36 deletions(-) diff --git a/frontend/src/main-page/dashboard/styles/Dashboard.css b/frontend/src/main-page/dashboard/styles/Dashboard.css index 016d9f6d..fbe56795 100644 --- a/frontend/src/main-page/dashboard/styles/Dashboard.css +++ b/frontend/src/main-page/dashboard/styles/Dashboard.css @@ -8,40 +8,6 @@ body { box-sizing: border-box; } -/* Hide the default checkbox */ -input[type="checkbox"] { - appearance: none; - -webkit-appearance: none; /* For Safari */ - margin: 0; /* Remove default margin */ - /* Additional styling for the custom checkbox container */ - width: 1.2em; - height: 1.2em; - border: 2px solid lightgray; - border-radius: 4px; - display: inline-block; - vertical-align: middle; - position: relative; -} - -/* Style the custom checkmark using a pseudo-element */ -input[type="checkbox"]::before { - content: ""; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%) rotate(45deg); - width: 0.4em; - height: 0.8em; - border: solid white; - border-width: 0 2px 2px 0; - display: none; /* Hidden by default */ -} - -input[type="checkbox"]:checked::before { - display: block; /* Show the checkmark */ - border-color: black; -} - /* Main container styling */ .dashboard-page { display: flex; diff --git a/frontend/src/main-page/grants/filter-bar/FilterBar.tsx b/frontend/src/main-page/grants/filter-bar/FilterBar.tsx index 1858c973..8ae3aabd 100644 --- a/frontend/src/main-page/grants/filter-bar/FilterBar.tsx +++ b/frontend/src/main-page/grants/filter-bar/FilterBar.tsx @@ -165,9 +165,9 @@ const FilterBar: React.FC = observer(() => { const activeButtonClass = - "border-2 border-primary-900 text-primary-900 active:!border-primary-900 active:!text-primary-900 focus:!border-primary-900 focus:!text-primary-900 focus:outline-none focus-visible:outline-none"; + "border-2 border-primary-900 text-primary-900 active:!border-primary-900 active:!text-white focus:!border-primary-900 focus:!text-primary-900 focus:outline-none focus-visible:outline-none"; const inactiveButtonClass = - "border-2 border-grey-500 text-grey-600 active:!border-grey-500 active:!text-grey-600 focus:!border-grey-500 focus:!text-grey-600 focus:outline-none focus-visible:outline-none"; + "border-2 border-grey-500 text-grey-600 active:!border-primary-900 active:!text-white focus:!border-grey-500 focus:!text-grey-600 focus:outline-none focus-visible:outline-none"; return (
diff --git a/frontend/src/main-page/grants/filter-bar/components/StatusDropdown.tsx b/frontend/src/main-page/grants/filter-bar/components/StatusDropdown.tsx index 27456bc9..8e7e8907 100644 --- a/frontend/src/main-page/grants/filter-bar/components/StatusDropdown.tsx +++ b/frontend/src/main-page/grants/filter-bar/components/StatusDropdown.tsx @@ -31,6 +31,7 @@ const StatusDropdown: React.FC = observer(({ selected, onSe aria-label={`Filter by ${String(status)} status`} className="cursor-pointer w-4 h-4 flex-shrink-0" /> + = observer(({ selected, onSe {status} + ))}
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css index 9a0da40a..e24abc86 100644 --- a/frontend/src/styles/index.css +++ b/frontend/src/styles/index.css @@ -188,4 +188,34 @@ input[type="date"]::-webkit-calendar-picker-indicator { ::-webkit-scrollbar-thumb:hover { background-color: var(--color-grey-500); +} + +input[type="checkbox"] { + appearance: none; + -webkit-appearance: none; + width: 1rem; + height: 1rem; + border: 2px solid theme('colors.grey.500'); + border-radius: 50%; + cursor: pointer; + position: relative; + flex-shrink: 0; +} + +input[type="checkbox"]:checked { + background-color: theme('colors.primary.900'); + border-color: theme('colors.primary.900'); +} + +input[type="checkbox"]:checked::after { + content: ''; + display: block; + position: absolute; + left: 50%; + top: 45%; + transform: translate(-50%, -50%) rotate(45deg); + width: 4px; + height: 7px; + border-right: 2px solid white; + border-bottom: 2px solid white; } \ No newline at end of file From 7072cd254dfb034f821ccf15ca74579b6d6ccaa7 Mon Sep 17 00:00:00 2001 From: Jane Kamata Date: Sat, 11 Apr 2026 02:34:09 -0400 Subject: [PATCH 06/18] Fixing clear all spacing --- .../main-page/grants/filter-bar/components/FilterCard.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx b/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx index ab753657..2692e4f7 100644 --- a/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx +++ b/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx @@ -178,11 +178,9 @@ export default function FilterCard({
Direction -
From 88a12b79835d2f209feca4406d7ac77ae6bca12f Mon Sep 17 00:00:00 2001 From: Jane Kamata Date: Sat, 11 Apr 2026 03:27:29 -0400 Subject: [PATCH 10/18] status indicator and grant eligibility --- .../main-page/grants/edit-grant/components/EditGrantInfo.tsx | 4 ++-- .../grants/grant-view/components/StatusIndicator.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/main-page/grants/edit-grant/components/EditGrantInfo.tsx b/frontend/src/main-page/grants/edit-grant/components/EditGrantInfo.tsx index 3e3360c7..eb4b0005 100644 --- a/frontend/src/main-page/grants/edit-grant/components/EditGrantInfo.tsx +++ b/frontend/src/main-page/grants/edit-grant/components/EditGrantInfo.tsx @@ -67,7 +67,7 @@ export default function EditGrantInfo({ form, dispatch }: EditGrantProps) { logo={faCheckSquare} logoPosition="left" text="Yes" - className={`text-gray-700 px-3 py-1 text-sm border-2 hover:border-green active:bg-white ${form.doesBcanQualify === "yes" ? "text-green border-green" : "border-grey-300 text-grey-700"}`} + className={`text-gray-700 px-2 py-1 w-20 text-sm border-2 hover:!border-green active:bg-green ${form.doesBcanQualify === "yes" ? "text-green border-green" : "border-grey-300 text-grey-700"}`} onClick={() => dispatch({ type: "SET_FIELD", @@ -80,7 +80,7 @@ export default function EditGrantInfo({ form, dispatch }: EditGrantProps) { logo={faSquareXmark} logoPosition="left" text="No" - className={`text-gray-700 px-3 py-1 text-sm border-2 hover:border-red active:bg-white ${form.doesBcanQualify === "no" ? "text-red border-red" : "border-grey-300 text-grey-700"}`} + className={`text-gray-700 px-2 py-1 w-20 text-sm border-2 hover:!border-red active:bg-red ${form.doesBcanQualify === "no" ? "text-red border-red" : "border-grey-300 text-grey-700"}`} onClick={() => dispatch({ type: "SET_FIELD", diff --git a/frontend/src/main-page/grants/grant-view/components/StatusIndicator.tsx b/frontend/src/main-page/grants/grant-view/components/StatusIndicator.tsx index 48d57ef0..61c53c3a 100644 --- a/frontend/src/main-page/grants/grant-view/components/StatusIndicator.tsx +++ b/frontend/src/main-page/grants/grant-view/components/StatusIndicator.tsx @@ -19,7 +19,7 @@ const StatusIndicator: React.FC = ({ curStatus, onClick, a return (
); diff --git a/frontend/src/main-page/grants/edit-grant/EditGrant.tsx b/frontend/src/main-page/grants/edit-grant/EditGrant.tsx index 8a0dfc07..55fe61fe 100644 --- a/frontend/src/main-page/grants/edit-grant/EditGrant.tsx +++ b/frontend/src/main-page/grants/edit-grant/EditGrant.tsx @@ -208,7 +208,7 @@ const EditGrant: React.FC<{ title="Delete Grant" subtitle={"Are you sure you want to delete"} boldSubtitle={form.organization} - warningMessage="By deleting this grant, they won't be available in the system anymore." + warningMessage="If you delete this grant, it will be permanently removed from the system." />
)}
diff --git a/frontend/src/main-page/users/components/UserMenu.tsx b/frontend/src/main-page/users/components/UserMenu.tsx index ba2b95f3..210f0773 100644 --- a/frontend/src/main-page/users/components/UserMenu.tsx +++ b/frontend/src/main-page/users/components/UserMenu.tsx @@ -40,7 +40,7 @@ const UserMenu = ({ user }: UserMenuProps) => { title="Delete User" subtitle="Are you sure you want to delete" boldSubtitle={user.email} - warningMessage="By deleting this user, they won't be available in the system anymore." + warningMessage="If you delete this user, they will be permanently removed from the system." />
From ae29040e2aec9ec245657a3e3e37e177d54d8cd7 Mon Sep 17 00:00:00 2001 From: Jane Kamata Date: Sat, 11 Apr 2026 03:43:41 -0400 Subject: [PATCH 12/18] revenue hover color and category dropdown arrow --- frontend/src/components/Button.tsx | 2 +- .../cash-flow/components/CashAddRevenue.tsx | 2 +- .../components/CashCategoryDropdown.tsx | 52 +++++++++++++------ 3 files changed, 37 insertions(+), 19 deletions(-) diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx index 7f75a720..ae7ac580 100644 --- a/frontend/src/components/Button.tsx +++ b/frontend/src/components/Button.tsx @@ -34,7 +34,7 @@ export default function Button({ h-fit flex-grow-0 items-center justify-center hover:border-primary-900 transition-opacity flex whitespace-nowrap ${className} ${ - disabled ? "cursor-not-allowed opacity-50" : "hover:opacity-90" + disabled ? "cursor-not-allowed opacity-50" : "hover:opacity-85" } `} > diff --git a/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx index 2874abf1..5566fe1f 100644 --- a/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx +++ b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx @@ -310,7 +310,7 @@ export default function CashAddRevenue() { text="Add Revenue Source" onClick={handleSubmit} disabled={isSubmitting} - className="bg-green text-white mt-2 text-sm lg:text-base" + className="bg-green hover:!border-green text-white mt-2 text-sm lg:text-base" />
); diff --git a/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx b/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx index c7c36843..ebdfccc7 100644 --- a/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx +++ b/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx @@ -27,23 +27,41 @@ export default function CashCategoryDropdown({ > {"Category"} -
- +
+ + + {/* Custom dropdown arrow */} +
+ + + +
+
-
); } From 1950c0d7f6b42d36b8984785ee5056356f4cdb07 Mon Sep 17 00:00:00 2001 From: Jane Kamata Date: Sat, 11 Apr 2026 03:46:37 -0400 Subject: [PATCH 13/18] Remove sort on click --- .../main-page/grants/filter-bar/components/FilterCard.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx b/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx index 2692e4f7..dede524a 100644 --- a/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx +++ b/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx @@ -188,8 +188,8 @@ export default function FilterCard({ logoPosition="left" text="Increasing" onClick={() => { - setDirection("increasing"); - onDirectionChange("increasing"); + setDirection(direction =="increasing" ? null : "increasing"); + onDirectionChange(direction =="increasing" ? null : "increasing"); }} className={ direction === "increasing" @@ -203,8 +203,8 @@ export default function FilterCard({ logoPosition="left" text="Decreasing" onClick={() => { - setDirection("decreasing"); - onDirectionChange("decreasing"); + setDirection(direction =="decreasing" ? null : "decreasing"); + onDirectionChange(direction =="decreasing" ? null : "decreasing"); }} className={ direction === "decreasing" From 2ddbaa16f43607ca2f738190432adc8999951b08 Mon Sep 17 00:00:00 2001 From: Jane Kamata Date: Sat, 11 Apr 2026 03:59:56 -0400 Subject: [PATCH 14/18] Scroll to top on page switch --- frontend/src/main-page/MainPage.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/main-page/MainPage.tsx b/frontend/src/main-page/MainPage.tsx index e6b694f1..443003ca 100644 --- a/frontend/src/main-page/MainPage.tsx +++ b/frontend/src/main-page/MainPage.tsx @@ -50,10 +50,11 @@ function MainPage() { const [openModal, setOpenModal] = useState(false); const location = useLocation(); + const mainContainer = document.getElementsByClassName('main-container'); - // Clears all store filters when page changes useEffect(() => { clearAllFilters(); + mainContainer[0].scrollTo(0, 0); }, [location]); return ( @@ -61,7 +62,7 @@ function MainPage() {
-
+
From a6695d07a555e2ecb273e647da67144308f82d28 Mon Sep 17 00:00:00 2001 From: Jane Kamata Date: Sun, 12 Apr 2026 14:49:49 -0400 Subject: [PATCH 15/18] Last fixes --- frontend/src/components/Button.tsx | 12 ++++++------ frontend/src/components/InputField.tsx | 2 +- .../main-page/notifications/NotificationPopup.tsx | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx index ae7ac580..5d073dd6 100644 --- a/frontend/src/components/Button.tsx +++ b/frontend/src/components/Button.tsx @@ -39,19 +39,19 @@ export default function Button({ `} > {logo && logoPosition === "left" && ( - - + + )} {text} {logo && logoPosition === "right" && ( - - + + )} {logo && logoPosition === "center" && ( - - + + )} diff --git a/frontend/src/components/InputField.tsx b/frontend/src/components/InputField.tsx index 8e498c7a..71b5e287 100644 --- a/frontend/src/components/InputField.tsx +++ b/frontend/src/components/InputField.tsx @@ -21,7 +21,7 @@ export default function InputField({ }: InputFieldProps) { return (
-