From f4346bcf25ec14a699b52f00d01a90e2c7ad10a2 Mon Sep 17 00:00:00 2001 From: adityapat24 Date: Fri, 17 Apr 2026 16:38:25 -0400 Subject: [PATCH 1/4] changed colors and added missing confirmations --- .../src/components/ActionConfirmation.tsx | 26 ++++++---- .../cash-flow/components/CashAddEditCost.tsx | 47 ++++++++++++++++--- 2 files changed, 57 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/ActionConfirmation.tsx b/frontend/src/components/ActionConfirmation.tsx index 59e847dd..40b61c0c 100644 --- a/frontend/src/components/ActionConfirmation.tsx +++ b/frontend/src/components/ActionConfirmation.tsx @@ -37,20 +37,24 @@ const ActionConfirmation = ({ labelClass: "text-green", textClass: "text-green-dark", cancelClass: - "text-grey-700 border-grey-500 hover:border-grey-600 hover:bg-grey-150 active:bg-grey-200", + "!border-2 border-grey-500 bg-white text-black hover:!border-grey-600 hover:bg-grey-150 active:bg-grey-200", + confirmClass: + "!border-0 bg-green text-white hover:!border-green hover:bg-green-dark active:bg-green-dark", } : variant === "update" ? { - panel: "border-t-4 border-grey-400 bg-grey-150", - stripe: "bg-grey-500", - box: "bg-grey-200", + panel: "border-t-4 border-yellow bg-yellow-light/50", + stripe: "bg-yellow", + box: "bg-yellow-light", Icon: FaInfoCircle, - iconClass: "text-grey-700", + iconClass: "text-yellow-dark", label: "Review", - labelClass: "text-grey-800", - textClass: "text-grey-800", + labelClass: "text-yellow-dark", + textClass: "text-yellow-dark", cancelClass: - "text-grey-700 border-grey-500 hover:border-grey-600 hover:bg-grey-200 active:bg-grey-300", + "!border-2 border-grey-500 bg-white text-black hover:!border-grey-600 hover:bg-grey-150 active:bg-grey-200", + confirmClass: + "!border-0 bg-yellow text-white hover:!border-yellow hover:bg-yellow-dark active:bg-yellow-dark", } : { panel: "border-t-4 border-red bg-red-lightest/40", @@ -62,7 +66,9 @@ const ActionConfirmation = ({ labelClass: "text-red", textClass: "text-red", cancelClass: - "text-red border-red hover:border-red hover:bg-red-light active:bg-red", + "!border-0 bg-red text-white hover:!border-red hover:bg-red-dark active:bg-red-dark", + confirmClass: + "!border-2 border-grey-500 bg-white text-black hover:!border-grey-600 hover:bg-grey-150 active:bg-grey-200", }; const { Icon } = styles; @@ -111,7 +117,7 @@ const ActionConfirmation = ({ onConfirmDelete(); onCloseDelete(); }} - className="border-grey-500" + className={styles.confirmClass} /> diff --git a/frontend/src/main-page/cash-flow/components/CashAddEditCost.tsx b/frontend/src/main-page/cash-flow/components/CashAddEditCost.tsx index ccc09cda..94542dcb 100644 --- a/frontend/src/main-page/cash-flow/components/CashAddEditCost.tsx +++ b/frontend/src/main-page/cash-flow/components/CashAddEditCost.tsx @@ -8,6 +8,7 @@ import { createNewCost, saveCostEdits } from "../processCashflowDataEditSave"; import { Frequency } from "../../../../../middle-layer/types/Frequency"; import { TDateISO } from "../../../../../backend/src/utils/date"; import { getAppStore } from "../../../external/bcanSatchel/store"; +import ActionConfirmation from "../../../components/ActionConfirmation"; type FieldErrors = { type?: string; @@ -45,6 +46,8 @@ export default function CashAddEditCost({ const [errors, setErrors] = useState({}); const [isSubmitting, setIsSubmitting] = useState(false); const [successMessage, setSuccessMessage] = useState(null); + const [showConfirmModal, setShowConfirmModal] = useState(false); + const [pendingCost, setPendingCost] = useState(null); const { cashflowSettings } = getAppStore(); @@ -108,18 +111,25 @@ export default function CashAddEditCost({ setErrors({}); }; - const handleSubmit = async () => { + const requestConfirm = () => { setSuccessMessage(null); const payload = buildPayload(); if (!payload) { return; } + setPendingCost(payload); + setShowConfirmModal(true); + }; + + const handleConfirmedSubmit = async () => { + if (!pendingCost) return; + const payload = pendingCost; setIsSubmitting(true); setErrors((previous) => ({ ...previous, submit: undefined })); const result = costItem - ? await saveCostEdits(payload, costItem!.name) + ? await saveCostEdits(payload, costItem.name) : await createNewCost(payload); if (!result.success) { setErrors((previous) => ({ @@ -142,6 +152,30 @@ export default function CashAddEditCost({ return (
+ { + setShowConfirmModal(false); + setPendingCost(null); + }} + onConfirmDelete={() => { + void handleConfirmedSubmit(); + setPendingCost(null); + }} + title={costItem ? "Update cost source" : "Create cost source"} + subtitle={ + costItem + ? "Are you sure you want to save changes to" + : "Are you sure you want to add" + } + boldSubtitle={pendingCost?.name ?? costItem?.name ?? ""} + warningMessage={ + costItem + ? "This will update this cost line in your cash flow." + : "This will create a new cost line in your cash flow." + } + variant={costItem ? "update" : "create"} + /> {!costItem && (
{"Add Cost Source"} @@ -239,9 +273,9 @@ export default function CashAddEditCost({ {!costItem ? (
From a075fd4cf62a37fd9e7d6ce9bda27aabb71851d9 Mon Sep 17 00:00:00 2001 From: Jane Kamata Date: Fri, 17 Apr 2026 23:29:01 -0400 Subject: [PATCH 2/4] Styling fixes --- .../src/components/ActionConfirmation.tsx | 26 +++++++++---------- .../cash-flow/components/CashAddEditCost.tsx | 2 +- .../cash-flow/components/CashAddRevenue.tsx | 2 +- .../cash-flow/components/CashEditRevenue.tsx | 2 +- frontend/src/main-page/navbar/NavBar.tsx | 2 +- .../notifications/NotificationPopup.tsx | 4 +-- .../settings/ChangePasswordModal.tsx | 2 +- .../settings/ProfilePictureModal.tsx | 2 +- 8 files changed, 21 insertions(+), 21 deletions(-) diff --git a/frontend/src/components/ActionConfirmation.tsx b/frontend/src/components/ActionConfirmation.tsx index 40b61c0c..04cc23e2 100644 --- a/frontend/src/components/ActionConfirmation.tsx +++ b/frontend/src/components/ActionConfirmation.tsx @@ -28,7 +28,7 @@ const ActionConfirmation = ({ const styles = variant === "create" ? { - panel: "border-t-4 border-green bg-green-light/30", + panel: "border-t-4 border-green", stripe: "bg-green", box: "bg-green-light", Icon: FaCheckCircle, @@ -37,13 +37,13 @@ const ActionConfirmation = ({ labelClass: "text-green", textClass: "text-green-dark", cancelClass: - "!border-2 border-grey-500 bg-white text-black hover:!border-grey-600 hover:bg-grey-150 active:bg-grey-200", + "!border-2 active:!border-grey-500 border-grey-500 bg-white text-black active:!text-grey-600 hover:!border-grey-600 hover:bg-grey-150 active:bg-grey-200", confirmClass: - "!border-0 bg-green text-white hover:!border-green hover:bg-green-dark active:bg-green-dark", + "!border-0 bg-green text-white hover:!border-green hover:bg-green-dark active:bg-green-dark active:!bg-opacity-75", } : variant === "update" ? { - panel: "border-t-4 border-yellow bg-yellow-light/50", + panel: "border-t-4 border-yellow", stripe: "bg-yellow", box: "bg-yellow-light", Icon: FaInfoCircle, @@ -52,12 +52,12 @@ const ActionConfirmation = ({ labelClass: "text-yellow-dark", textClass: "text-yellow-dark", cancelClass: - "!border-2 border-grey-500 bg-white text-black hover:!border-grey-600 hover:bg-grey-150 active:bg-grey-200", + "!border-2 active:!border-grey-500 border-grey-500 bg-white text-black active:!text-grey-600 hover:!border-grey-600 hover:bg-grey-150 active:bg-grey-200", confirmClass: - "!border-0 bg-yellow text-white hover:!border-yellow hover:bg-yellow-dark active:bg-yellow-dark", + "!border-0 bg-yellow text-white hover:!border-yellow hover:bg-opacity-75 active:bg-yellow", } : { - panel: "border-t-4 border-red bg-red-lightest/40", + panel: "border-t-4 border-red", stripe: "bg-red", box: "bg-red-light", Icon: IoIosWarning, @@ -66,9 +66,9 @@ const ActionConfirmation = ({ labelClass: "text-red", textClass: "text-red", cancelClass: - "!border-0 bg-red text-white hover:!border-red hover:bg-red-dark active:bg-red-dark", + "!border-0 bg-red text-white hover:!border-red hover:bg-opacity-75 active:bg-red", confirmClass: - "!border-2 border-grey-500 bg-white text-black hover:!border-grey-600 hover:bg-grey-150 active:bg-grey-200", + "!border-2 active:!border-grey-500 border-grey-500 bg-white text-black active:!text-grey-600 hover:!border-grey-600 hover:bg-grey-150 active:bg-grey-200", }; const { Icon } = styles; @@ -79,7 +79,7 @@ const ActionConfirmation = ({ onClick={onCloseDelete} >
e.stopPropagation()} >

{title}

@@ -92,11 +92,11 @@ const ActionConfirmation = ({
-
+
- -

+ +

{styles.label}

diff --git a/frontend/src/main-page/cash-flow/components/CashAddEditCost.tsx b/frontend/src/main-page/cash-flow/components/CashAddEditCost.tsx index 94542dcb..bc28487b 100644 --- a/frontend/src/main-page/cash-flow/components/CashAddEditCost.tsx +++ b/frontend/src/main-page/cash-flow/components/CashAddEditCost.tsx @@ -162,7 +162,7 @@ export default function CashAddEditCost({ void handleConfirmedSubmit(); setPendingCost(null); }} - title={costItem ? "Update cost source" : "Create cost source"} + title={costItem ? "Update Cost Source" : "Create Cost Source"} subtitle={ costItem ? "Are you sure you want to save changes to" diff --git a/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx index 73d42225..ed615113 100644 --- a/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx +++ b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx @@ -214,7 +214,7 @@ export default function CashAddRevenue() { void handleConfirmedSubmit(); setPendingRevenue(null); }} - title="Create revenue source" + title="Create Revenue Source" subtitle="Are you sure you want to add" boldSubtitle={pendingRevenue?.name ?? ""} warningMessage="This will create a new revenue line in your cash flow." diff --git a/frontend/src/main-page/cash-flow/components/CashEditRevenue.tsx b/frontend/src/main-page/cash-flow/components/CashEditRevenue.tsx index 05af6821..bc59df2f 100644 --- a/frontend/src/main-page/cash-flow/components/CashEditRevenue.tsx +++ b/frontend/src/main-page/cash-flow/components/CashEditRevenue.tsx @@ -241,7 +241,7 @@ export default function CashEditRevenue({ void handleConfirmedSave(); setPendingRevenue(null); }} - title="Update revenue source" + title="Update Revenue Source" subtitle="Are you sure you want to save changes to" boldSubtitle={pendingRevenue?.name ?? revenueItem.name} warningMessage="This will update this revenue line in your cash flow." diff --git a/frontend/src/main-page/navbar/NavBar.tsx b/frontend/src/main-page/navbar/NavBar.tsx index e73ae05d..b8b91906 100644 --- a/frontend/src/main-page/navbar/NavBar.tsx +++ b/frontend/src/main-page/navbar/NavBar.tsx @@ -47,7 +47,7 @@ const NavBar: React.FC = observer(() => { onConfirmDelete={() => { void performLogout(); }} - title="Sign out" + title="Sign Out" subtitle="Are you sure you want to" boldSubtitle="sign out" warningMessage="Your cash flow settings will be saved to the server, then you will be logged out." diff --git a/frontend/src/main-page/notifications/NotificationPopup.tsx b/frontend/src/main-page/notifications/NotificationPopup.tsx index 3e17ec7a..c667bfd4 100644 --- a/frontend/src/main-page/notifications/NotificationPopup.tsx +++ b/frontend/src/main-page/notifications/NotificationPopup.tsx @@ -81,8 +81,8 @@ const NotificationPopup: React.FC = observer( }} title={ confirm.kind === "all" - ? "Delete all notifications" - : "Delete notification" + ? "Delete All Notifications" + : "Delete Notification" } subtitle="Are you sure you want to delete" boldSubtitle={ diff --git a/frontend/src/main-page/settings/ChangePasswordModal.tsx b/frontend/src/main-page/settings/ChangePasswordModal.tsx index a5e6e7da..72012fd3 100644 --- a/frontend/src/main-page/settings/ChangePasswordModal.tsx +++ b/frontend/src/main-page/settings/ChangePasswordModal.tsx @@ -80,7 +80,7 @@ export default function ChangePasswordModal({ isOpen={showConfirm} onCloseDelete={() => setShowConfirm(false)} onConfirmDelete={handleConfirmedSave} - title="Change password" + title="Change Password" subtitle="Are you sure you want to change" boldSubtitle="your password" warningMessage="You will use your new password the next time you sign in." diff --git a/frontend/src/main-page/settings/ProfilePictureModal.tsx b/frontend/src/main-page/settings/ProfilePictureModal.tsx index a80c8325..7203b124 100644 --- a/frontend/src/main-page/settings/ProfilePictureModal.tsx +++ b/frontend/src/main-page/settings/ProfilePictureModal.tsx @@ -165,7 +165,7 @@ export default function ProfilePictureModal({ onConfirmDelete={() => { void performUpload(); }} - title="Update profile picture" + title="Update Profile Picture" subtitle="Are you sure you want to upload" boldSubtitle="this profile picture" warningMessage="This will replace your current profile picture for your account." From 9e67efb7d7b5622318e141901eaab67b94eebdc4 Mon Sep 17 00:00:00 2001 From: lyannne Date: Fri, 17 Apr 2026 23:48:24 -0400 Subject: [PATCH 3/4] prioritize adding errors over action confirmation modal --- .../main-page/grants/edit-grant/EditGrant.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/frontend/src/main-page/grants/edit-grant/EditGrant.tsx b/frontend/src/main-page/grants/edit-grant/EditGrant.tsx index e84842f3..776aab32 100644 --- a/frontend/src/main-page/grants/edit-grant/EditGrant.tsx +++ b/frontend/src/main-page/grants/edit-grant/EditGrant.tsx @@ -172,6 +172,20 @@ const EditGrant: React.FC<{ }; + const handleSaveClick = () => { + const error = validateInputs(); + + if (error) { + setErrorMessage(error); + setShowSaveModal(false); + setShowErrorPopup(true); + return; + } + + setShowErrorPopup(false); + setShowSaveModal(true); + }; + return (
@@ -188,7 +202,7 @@ const EditGrant: React.FC<{
From b2e04328233f3c50492f2825dc4548dc77279e0a Mon Sep 17 00:00:00 2001 From: Jane Kamata Date: Sat, 18 Apr 2026 00:17:58 -0400 Subject: [PATCH 4/4] Updating yellow --- frontend/src/styles/index.css | 3 ++- frontend/tailwind.config.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css index c72dc773..f90c7050 100644 --- a/frontend/src/styles/index.css +++ b/frontend/src/styles/index.css @@ -34,7 +34,8 @@ --color-blue: #006ca1; --color-blue-light: #d0edff; - --color-yellow-dark: #9b6000; + --color-yellow-dark: #9B6000; + --color-yellow: #B87F2C; --color-yellow-light: #fff0d3; --color-red-dark: #c80000; diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts index d889a7b3..de543b22 100644 --- a/frontend/tailwind.config.ts +++ b/frontend/tailwind.config.ts @@ -18,7 +18,7 @@ export default { yellow: { dark: "#9B6000", - DEFAULT: "#9B6000", + DEFAULT: "#B87F2C", light: "#FFF0D3", },