Merge pull request #2143 from topcoder-platform/PM-5854

PM-5854: Make challenge link visually distinct

Author: jmgasper

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 {

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('identifies the support staff member who closed the ticket', () => {
         mockUseSWR.mockReturnValue({
             data: {