From 48befc210d5b2d04b340fed9594c19e028026eb9 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sat, 24 Oct 2026 17:16:38 +0200
Subject: [PATCH] fix(journey): the share link's copy button and its switches
 show their words again

The filled buttons set their label in text-accent-on, the accent used as
text on a plain surface, which on the accent's own ground is the same
colour: a black button with black words. They take text-accent-text, the
colour made for words on the accent, and a test pins it.
---
 .../components/Journey/JourneyShareSection.test.tsx | 13 ++++++++++++-
 .../src/components/Journey/JourneyShareSection.tsx  |  4 ++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Journey/JourneyShareSection.test.tsx b/client/src/components/Journey/JourneyShareSection.test.tsx
index 6c2972fb9..1e45a1163 100644
--- a/client/src/components/Journey/JourneyShareSection.test.tsx
+++ b/client/src/components/Journey/JourneyShareSection.test.tsx
@@ -1,4 +1,4 @@
-// FE-JRN-SHARE-001 to FE-JRN-SHARE-014
+// FE-JRN-SHARE-001 to FE-JRN-SHARE-015
 
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
 import { http, HttpResponse, delay } from 'msw'
@@ -245,4 +245,15 @@ describe('JourneyShareSection', () => {
     expect(plan).toHaveAttribute('aria-pressed', 'false')
     expect(screen.getByRole('button', { name: /Recorded routes/ })).toBeDisabled()
   })
+
+  it('FE-JRN-SHARE-015: a filled accent button sets its words in the colour made for it, not in the accent itself', async () => {
+    server.use(http.get('/api/journeys/7/share-link', () => HttpResponse.json({ link: existingLink() })))
+    render(<JourneyShareSection journeyId={JOURNEY_ID} />)
+
+    const filled = [await screen.findByRole('button', { name: 'Timeline' }), screen.getByRole('button', { name: 'Copy' })]
+    for (const button of filled) {
+      expect(button.className).toContain('text-accent-text')
+      expect(button.className).not.toContain('text-accent-on')
+    }
+  })
 })
diff --git a/client/src/components/Journey/JourneyShareSection.tsx b/client/src/components/Journey/JourneyShareSection.tsx
index a39599286..1d6876fc4 100644
--- a/client/src/components/Journey/JourneyShareSection.tsx
+++ b/client/src/components/Journey/JourneyShareSection.tsx
@@ -69,7 +69,7 @@ export default function JourneyShareSection({ journeyId }: { journeyId: number }
             <span className="flex-1 text-caption text-content-muted truncate">{shareUrl}</span>
             <button type="button"
               onClick={copyLink}
-              className="flex-shrink-0 px-3 py-1.5 rounded-full bg-accent text-accent-on text-caption font-semibold hover:bg-accent-hover transition-colors"
+              className="flex-shrink-0 px-3 py-1.5 rounded-full bg-accent text-accent-text text-caption font-semibold hover:bg-accent-hover transition-colors"
             >
               {copied ? t('journey.share.copied') : t('journey.share.copy')}
             </button>
@@ -94,7 +94,7 @@ export default function JourneyShareSection({ journeyId }: { journeyId: number }
                 onClick={() => togglePerm(key)}
                 className={`flex items-center gap-2.5 px-3 py-2 rounded-xl border text-body font-medium transition-all ${
                   link[key]
-                    ? 'border-accent bg-accent text-accent-on'
+                    ? 'border-accent bg-accent text-accent-text'
                     : 'border-edge text-content-muted hover:border-content-faint'
                 }`}
               >