From 837e782ad5b5c096e7d652fdf8e85b79f8bddf0a Mon Sep 17 00:00:00 2001
From: Rashmika998 <silvarashmika98@gmail.com>
Date: Tue, 7 Jul 2026 15:02:49 +0530
Subject: [PATCH] =?UTF-8?q?[CSM][Web]=20Change=20state=20button=20containe?=
 =?UTF-8?q?d;=20show=20field=20changes=20as=20old=20=E2=86=92=20new?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CaseActionBar: "Change state" button switches from outlined to contained
  primary so the primary action reads as primary at a glance in the action bar
- CaseActivitiesFeed: FieldChangeLine now renders "Old → New" instead of
  "New was ~~Old~~" — the arrow reads left-to-right as a transition, matching
  how users think about state changes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../csm-cases/components/CaseActionBar.tsx        |  3 ++-
 .../components/CaseActivitiesFeed.test.tsx        |  9 ++++-----
 .../csm-cases/components/CaseActivitiesFeed.tsx   | 15 ++++-----------
 3 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActionBar.tsx b/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActionBar.tsx
index 13472e26df..cdbc54e36a 100644
--- a/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActionBar.tsx
+++ b/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActionBar.tsx
@@ -313,7 +313,8 @@ export default function CaseActionBar({
         <>
           <Button
             size="small"
-            variant="outlined"
+            variant="contained"
+            color="primary"
             endIcon={<ChevronDown size={16} />}
             onClick={(e) => setStateMenuAnchor(e.currentTarget)}
           >
diff --git a/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.test.tsx b/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.test.tsx
index c7199b5f2a..c5fafcebf3 100644
--- a/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.test.tsx
+++ b/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.test.tsx
@@ -43,12 +43,11 @@ describe("CaseActivitiesFeed", () => {
     );
 
     expect(screen.getByText("State:")).toBeInTheDocument();
-    // The line reads "State: Resolved was In Progress" across sibling text
-    // nodes (new value, then the struck-through old value in its own span) —
-    // assert on the row's combined text rather than a single text node.
-    expect(container.textContent).toContain("Resolved");
-    expect(container.textContent).toContain("was");
+    // The line reads "State: In Progress → Resolved" across sibling text nodes
+    // (muted old value, arrow, then new value) — assert on combined row text.
     expect(container.textContent).toContain("In Progress");
+    expect(container.textContent).toContain("→");
+    expect(container.textContent).toContain("Resolved");
     expect(screen.getByText(/Jane Doe/)).toBeInTheDocument();
   });
 
diff --git a/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx b/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx
index 3e0c02e074..8ecf16fe50 100644
--- a/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx
+++ b/apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx
@@ -97,7 +97,7 @@ function formatChangeValue(value: string | undefined): string | undefined {
   return formatAbsoluteForUser(value) ?? value;
 }
 
-/** One "<label>: <new> was <old>" line for a field-change entry's audit strip. */
+/** One "<label>: <old> → <new>" line for a field-change entry's audit strip. */
 function FieldChangeLine({
   field,
 }: {
@@ -108,22 +108,15 @@ function FieldChangeLine({
   return (
     <Typography variant="body2" component="div">
       <strong>{field.fieldLabel}:</strong>{" "}
-      {hasNew ? formatChangeValue(field.newValue) : <em>cleared</em>}
       {hadPrevious && (
         <>
-          {" "}
-          was{" "}
-          <Box
-            component="span"
-            sx={{
-              textDecoration: "line-through",
-              color: "text.secondary",
-            }}
-          >
+          <Box component="span" sx={{ color: "text.secondary" }}>
             {formatChangeValue(field.previousValue)}
           </Box>
+          {" → "}
         </>
       )}
+      {hasNew ? formatChangeValue(field.newValue) : <em>cleared</em>}
     </Typography>
   );
 }