changed colors and added missing confirmations

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,23 +37,27 @@ 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 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 active:!bg-opacity-75",
         }
       : 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",
+            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 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-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,
@@ -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-opacity-75 active:bg-red",
+            confirmClass:
+              "!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;
@@ -73,7 +79,7 @@ const ActionConfirmation = ({
       onClick={onCloseDelete}
     >
       <div
-        className={`rounded-md shadow-2xl p-8 max-w-xl w-full mx-4 transform transition-all duration-300 !bg-white ${styles.panel}`}
+        className={`rounded-md shadow-2xl p-8 max-w-xl w-full mx-4 transform transition-all duration-300 bg-white ${styles.panel}`}
         onClick={(e) => e.stopPropagation()}
       >
         <h3 className="text-2xl font-bold text-black text-center mb-2">{title}</h3>
@@ -86,11 +92,11 @@ const ActionConfirmation = ({
 
         <div className="max-w-md mx-auto ">
           <div className="flex mb-6">
-            <div className={`w-3 shrink-0 ${styles.stripe}`} />
+            <div className={`w-1 shrink-0 ${styles.stripe}`} />
             <div className={`p-3 flex-1 min-w-0 ${styles.box}`}>
               <div className="flex items-center">
-                <Icon size={24} className={`shrink-0 ${styles.iconClass}`} />
-                <p className={`font-bold px-1 text-lg ${styles.labelClass}`}>
+                <Icon size={20} className={`shrink-0 ${styles.iconClass}`} />
+                <p className={`ml-1 font-bold px-1 text-lg ${styles.labelClass}`}>
                   {styles.label}
                 </p>
               </div>
@@ -111,7 +117,7 @@ const ActionConfirmation = ({
                 onConfirmDelete();
                 onCloseDelete();
               }}
-              className="border-grey-500"
+              className={styles.confirmClass}
             />
           </div>
         </div>

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<FieldErrors>({});
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const [pendingCost, setPendingCost] = useState<CashflowCost | null>(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 (
     <div className="flex flex-col pt-2 px-2 col-span-2 h-full gap-2">
+      <ActionConfirmation
+        isOpen={showConfirmModal}
+        onCloseDelete={() => {
+          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 && (
         <div className="text-lg lg:text-xl w-full text-left font-bold">
           {"Add Cost Source"}
@@ -239,9 +273,9 @@ export default function CashAddEditCost({
       {!costItem ? (
         <Button
           text="Add Cost Item"
-          onClick={handleSubmit}
+          onClick={requestConfirm}
           disabled={isSubmitting}
-          className="bg-primary text-white mt-2 text-sm lg:text-base"
+          className="bg-green hover:!border-green text-white mt-2 text-sm lg:text-base active:!bg-green active:!border-green w-full"
         />
       ) : (
         <div className="flex flex-row justify-end gap-2 mt-2 items-center">
@@ -251,8 +285,9 @@ export default function CashAddEditCost({
             className="bg-white text-black border border-grey-500 mt-2 text-sm lg:text-base"
           />
           <Button
-            text="Save"
-            onClick={() => handleSubmit()}
+            text={isSubmitting ? "Saving..." : "Save"}
+            onClick={requestConfirm}
+            disabled={isSubmitting}
             className="bg-primary-900 text-white mt-2 text-sm lg:text-base"
           />
         </div>

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."

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."

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 (
     <div>
       <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
@@ -188,7 +202,7 @@ const EditGrant: React.FC<{
               <Button
                 text="Save"
                 className="bg-primary-900 text-white px-3 py-1"
-                onClick={() => setShowSaveModal(true)}
+                onClick={handleSaveClick}
                 disabled={saving}
               />
             </div>

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."

frontend/src/main-page/notifications/NotificationPopup.tsx

@@ -81,8 +81,8 @@ const NotificationPopup: React.FC<NotificationPopupProps> = observer(
           }}
           title={
             confirm.kind === "all"
-              ? "Delete all notifications"
-              : "Delete notification"
+              ? "Delete All Notifications"
+              : "Delete Notification"
           }
           subtitle="Are you sure you want to delete"
           boldSubtitle={

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."

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."

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;

frontend/tailwind.config.ts

@@ -18,7 +18,7 @@ export default {
 
       yellow: {
         dark: "#9B6000",
-        DEFAULT: "#9B6000",
+        DEFAULT: "#B87F2C",
         light: "#FFF0D3",
       },