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 6d2a1515d..03a275c91 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 { promise: Promise @@ -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: {