From bc710c2668149b12951e5bd6163daa9553808726 Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Wed, 12 Aug 2026 21:19:42 +1000
Subject: [PATCH] PM-5854: Make challenge link visually distinct

What was broken
The View challenge action on the ticket details page was clickable but appeared as ordinary gray text.

Root cause
The global link reset removes native color and decoration, while the Support app did not define the CSS variable used by this link.

What was changed
Styled the challenge link and its hover state with the shared accessible blue token and a persistent underline.

Any added/updated tests
Added a focused stylesheet regression assertion covering the challenge link's default and hover presentation. The existing semantic link and encoded URL assertions remain in place.
---
 .../ticket-details/TicketDetailPage.module.scss     |  6 ++++--
 .../pages/ticket-details/TicketDetailPage.spec.tsx  | 13 +++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/apps/support/src/pages/ticket-details/TicketDetailPage.module.scss b/src/apps/support/src/pages/ticket-details/TicketDetailPage.module.scss
index 352f4e7b6..415500b69 100644
--- a/src/apps/support/src/pages/ticket-details/TicketDetailPage.module.scss
+++ b/src/apps/support/src/pages/ticket-details/TicketDetailPage.module.scss
@@ -12,9 +12,11 @@
     text-decoration: none;
 }
 
-.challengeLink {
-    color: var(--Actived);
+.challengeLink,
+.challengeLink:hover {
+    color: $link-blue-dark;
     font-weight: 700;
+    text-decoration: underline;
 }
 
 .header {
diff --git a/src/apps/support/src/pages/ticket-details/TicketDetailPage.spec.tsx b/src/apps/support/src/pages/ticket-details/TicketDetailPage.spec.tsx
index 66b321d20..9ea7427e2 100644
--- a/src/apps/support/src/pages/ticket-details/TicketDetailPage.spec.tsx
+++ b/src/apps/support/src/pages/ticket-details/TicketDetailPage.spec.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies, ordered-imports/ordered-imports, react/jsx-no-bind */
+import { readFileSync } from 'fs'
 import {
     fireEvent,
     render,
@@ -17,6 +18,7 @@ import { TicketDetailPage } from './TicketDetailPage'
 const mockMutate = jest.fn()
 const mockUseSWR = jest.fn()
 let mockProfile: { roles: string[]; userId: number | string }
+const ticketDetailStyles = readFileSync(`${__dirname}/TicketDetailPage.module.scss`, 'utf8')
 
 interface Deferred<T> {
     promise: Promise<T>
@@ -196,6 +198,17 @@ describe('TicketDetailPage reply access', () => {
             .toBeTruthy()
     })
 
+    it('styles the challenge anchor as a visible link', () => {
+        const challengeLinkRule = ticketDetailStyles.match(
+            /\.challengeLink,\s*\.challengeLink:hover \{[^}]*\}/,
+        )?.[0]
+
+        expect(challengeLinkRule)
+            .toContain('color: $link-blue-dark;')
+        expect(challengeLinkRule)
+            .toContain('text-decoration: underline;')
+    })
+
     it('preserves freshly revalidated assignees when marking a ticket read completes', async () => {
         const markReadRequest = createDeferred<void>()
         mockedMarkRead.mockReturnValue(markReadRequest.promise)