From 5eddd7db6acdca644c5ee0a1022296d666bb11cf Mon Sep 17 00:00:00 2001
From: Venkataramanan Venkateswaran <venk@Venkataramanans-MacBook-Air.local>
Date: Tue, 24 Feb 2026 09:02:33 -0800
Subject: [PATCH] Venkataramanan fix: Summary background in dashboard

---
 src/components/SummaryBar/SummaryBar.jsx | 92 +++++++-----------------
 1 file changed, 27 insertions(+), 65 deletions(-)

diff --git a/src/components/SummaryBar/SummaryBar.jsx b/src/components/SummaryBar/SummaryBar.jsx
index eade38a9df..da90a997d6 100644
--- a/src/components/SummaryBar/SummaryBar.jsx
+++ b/src/components/SummaryBar/SummaryBar.jsx
@@ -416,86 +416,48 @@ const SummaryBar = React.forwardRef((props, ref) => {
   };
 
   const renderSummary = () => {
-    // NOT SUBMITTED
-    if (!weeklySummary) {
-      // Weekly Summary Not Required
-      if (weeklySummaryNotReq) {
-        return (
-          <div
-            className={`${styles['border-black']} col-4 ${styles['bg--summary-purple']} no-gutters d-flex justify-content-center align-items-center`}
-            style={{ textAlign: 'center' }}
-          >
-            <font className="text-light" size="3">
-              SUMMARY
-            </font>
-          </div>
-        );
-      }
+    const isCompleted = weeklySummary || props.submittedSummary;
 
-      // Summary Required but Not Submitted (!)
+    // Special case → keep purple
+    if (!weeklySummary && weeklySummaryNotReq) {
       return (
         <div
-          className={`border border-danger col-4 no-gutters d-flex flex-column justify-content-center ${
+          className={`${styles['border-black']} col-4 ${
             darkMode ? 'bg-yinmn-blue' : styles['bg--summary-purple']
-          }`}
+          } d-flex justify-content-center align-items-center`}
         >
-          <div className="py-1"> </div>
-
-          {isAuthUser || canEditData() ? (
-            <div className="d-flex justify-content-center">
-              <button
-                onClick={props.toggleSubmitForm}
-                className={`${styles['summary-toggle']} ${styles['large_text_summary']} text-danger`}
-                style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}
-                aria-label="Toggle submit form"
-                type="button"
-              >
-                !
-              </button>
-            </div>
-          ) : (
-            <p
-              className={`${styles['text-center']} ${styles['summary-toggle']} ${styles['large_text_summary']} text-danger`}
-            >
-              !
-            </p>
-          )}
-
-          <font className={`${styles['text-center']} text-light`} size="3">
-            SUMMARY
-          </font>
+          <span className="text-light">SUMMARY</span>
+        </div>
+      );
+    }
 
-          <div className="py-2"> </div>
+    if (!isCompleted) {
+      return (
+        <div
+          className={`border border-danger col-4 ${
+            darkMode ? 'bg-yinmn-blue' : 'bg-white'
+          } d-flex flex-column justify-content-center`}
+        >
+          <div className="py-1" />
+          <div className="d-flex justify-content-center">
+            <span className={`${styles.large_text_summary} text-danger`}>!</span>
+          </div>
+          <span className="text-center">SUMMARY</span>
+          <div className="py-2" />
         </div>
       );
     }
 
-    // SUBMITTED (✓)
     return (
       <div
-        className={`${styles['border-green']} col-4 ${
-          darkMode ? 'bg-yinmn-blue' : styles['bg--summary-purple']
-        }`}
+        className={`${styles['border-green']} col-4 ${styles['bg--dark-green']} d-flex flex-column justify-content-center`}
       >
-        <div className="py-1"> </div>
-
+        <div className="py-1" />
         <div className="d-flex justify-content-center">
-          <button
-            onClick={props.toggleSubmitForm}
-            className={`${styles['text-center']} ${styles.large_text_summary} ${styles['summary-toggle']} text-light`}
-            style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}
-            aria-label="Toggle submit form"
-            type="button"
-          >
-            ✓
-          </button>
+          <span className={`${styles.large_text_summary} ${styles['text--black']}`}>✓</span>
         </div>
-
-        <font className={`${styles['text-center']} text-light`} size="3">
-          SUMMARY
-        </font>
-
-        <div className="py-2"> </div>
+        <span className="text-center">SUMMARY</span>
+        <div className="py-2" />
       </div>
     );
   };