From 01751f58864447f6cf74e023230ea2b7d97e2465 Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Thu, 23 Apr 2026 11:05:15 +1000
Subject: [PATCH] PackageDetail: keep "Compare" label in both states, move tick
 to right

Label stays "Compare" regardless of inCart. Only change between
default and added: a trailing check icon (endIcon) appears when the
package is in the basket. aria-pressed + aria-label still carry the
state for screen readers.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../organisms/PackageDetail/PackageDetail.tsx        | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/organisms/PackageDetail/PackageDetail.tsx b/src/components/organisms/PackageDetail/PackageDetail.tsx
index f52d61c..03c499d 100644
--- a/src/components/organisms/PackageDetail/PackageDetail.tsx
+++ b/src/components/organisms/PackageDetail/PackageDetail.tsx
@@ -220,22 +220,22 @@ export const PackageDetail = React.forwardRef<HTMLDivElement, PackageDetailProps
               {arrangeLabel}
             </Button>
             {onCompare && (
-              // Same soft/secondary chrome in both states; when the package
-              // is in the basket a leading check icon appears and the label
-              // changes to "Added". Click is a toggle — caller decides to
-              // add or remove based on the `inCart` it's passing in.
+              // Same soft/secondary chrome + "Compare" label in both states;
+              // when the package is in the basket a trailing check icon
+              // appears. Click is a toggle — caller decides to add or remove
+              // based on the `inCart` it's passing in.
               <Button
                 variant="soft"
                 color="secondary"
                 size="large"
                 loading={compareLoading}
-                startIcon={inCart ? <CheckRoundedIcon /> : undefined}
+                endIcon={inCart ? <CheckRoundedIcon /> : undefined}
                 onClick={onCompare}
                 aria-pressed={inCart}
                 aria-label={inCart ? 'Remove from comparison' : 'Add to comparison'}
                 sx={{ flexShrink: 0 }}
               >
-                {inCart ? 'Added' : 'Compare'}
+                Compare
               </Button>
             )}
           </Box>