From e37f55115681041b5c5dc430efbb75dcd9ad9f85 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Tue, 5 Mar 2024 11:14:57 -0500 Subject: [PATCH 1/2] feat: simplify icon colors and improve accessibility when in light-mode --- .../__snapshots__/github-api.test.ts.snap | 10 ++++---- src/utils/github-api.ts | 24 +++++-------------- 2 files changed, 11 insertions(+), 23 deletions(-) diff --git a/src/utils/__snapshots__/github-api.test.ts.snap b/src/utils/__snapshots__/github-api.test.ts.snap index 0b472531e..e92b97cdc 100644 --- a/src/utils/__snapshots__/github-api.test.ts.snap +++ b/src/utils/__snapshots__/github-api.test.ts.snap @@ -116,11 +116,11 @@ exports[`getNotificationTypeIconColor should format the notification color for c exports[`getNotificationTypeIconColor should format the notification color for check suite 2`] = `"text-red-500"`; -exports[`getNotificationTypeIconColor should format the notification color for check suite 3`] = `"text-gray-500"`; +exports[`getNotificationTypeIconColor should format the notification color for check suite 3`] = `"text-gray-400"`; exports[`getNotificationTypeIconColor should format the notification color for check suite 4`] = `"text-green-500"`; -exports[`getNotificationTypeIconColor should format the notification color for check suite 5`] = `"text-gray-300"`; +exports[`getNotificationTypeIconColor should format the notification color for check suite 5`] = `"text-gray-400"`; exports[`getNotificationTypeIconColor should format the notification color for state 1`] = `"text-green-500"`; @@ -128,11 +128,11 @@ exports[`getNotificationTypeIconColor should format the notification color for s exports[`getNotificationTypeIconColor should format the notification color for state 3`] = `"text-purple-500"`; -exports[`getNotificationTypeIconColor should format the notification color for state 4`] = `"text-gray-600"`; +exports[`getNotificationTypeIconColor should format the notification color for state 4`] = `"text-gray-400"`; exports[`getNotificationTypeIconColor should format the notification color for state 5`] = `"text-purple-500"`; -exports[`getNotificationTypeIconColor should format the notification color for state 6`] = `"text-gray-300"`; +exports[`getNotificationTypeIconColor should format the notification color for state 6`] = `"text-gray-400"`; exports[`getNotificationTypeIconColor should format the notification color for state 7`] = `"text-green-500"`; @@ -140,4 +140,4 @@ exports[`getNotificationTypeIconColor should format the notification color for s exports[`getNotificationTypeIconColor should format the notification color for state 9`] = `"text-purple-500"`; -exports[`getNotificationTypeIconColor should format the notification color for state 10`] = `"text-gray-300"`; +exports[`getNotificationTypeIconColor should format the notification color for state 10`] = `"text-gray-400"`; diff --git a/src/utils/github-api.ts b/src/utils/github-api.ts index 8370352f6..47d2e197d 100644 --- a/src/utils/github-api.ts +++ b/src/utils/github-api.ts @@ -157,33 +157,21 @@ export function getNotificationTypeIcon( export function getNotificationTypeIconColor(subject: Subject): string { switch (subject.state) { + case 'open': + case 'reopened': case 'ANSWERED': + case 'success': return 'text-green-500'; case 'cancelled': return 'text-gray-500'; case 'closed': - return 'text-red-500'; - case 'completed': - return 'text-purple-500'; - case 'draft': - return 'text-gray-600'; case 'failure': return 'text-red-500'; - case 'merged': - return 'text-purple-500'; - case 'not_planned': - return 'text-gray-300'; - case 'open': - return 'text-green-500'; - case 'reopened': - return 'text-green-500'; + case 'completed': case 'RESOLVED': + case 'merged': return 'text-purple-500'; - case 'skipped': - return 'text-gray-500'; - case 'success': - return 'text-green-500'; default: - return 'text-gray-300'; + return 'text-gray-400'; } } From fcfecb204723d430d37f1faa4716d5f157525feb Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Tue, 5 Mar 2024 12:45:30 -0500 Subject: [PATCH 2/2] feat: change gray color based on theme --- src/utils/__snapshots__/github-api.test.ts.snap | 10 +++++----- src/utils/appearance.ts | 8 ++++++++ src/utils/github-api.ts | 10 +++++++--- 3 files changed, 20 insertions(+), 8 deletions(-) diff --git a/src/utils/__snapshots__/github-api.test.ts.snap b/src/utils/__snapshots__/github-api.test.ts.snap index e92b97cdc..2ad7e8e99 100644 --- a/src/utils/__snapshots__/github-api.test.ts.snap +++ b/src/utils/__snapshots__/github-api.test.ts.snap @@ -116,11 +116,11 @@ exports[`getNotificationTypeIconColor should format the notification color for c exports[`getNotificationTypeIconColor should format the notification color for check suite 2`] = `"text-red-500"`; -exports[`getNotificationTypeIconColor should format the notification color for check suite 3`] = `"text-gray-400"`; +exports[`getNotificationTypeIconColor should format the notification color for check suite 3`] = `"text-gray-500"`; exports[`getNotificationTypeIconColor should format the notification color for check suite 4`] = `"text-green-500"`; -exports[`getNotificationTypeIconColor should format the notification color for check suite 5`] = `"text-gray-400"`; +exports[`getNotificationTypeIconColor should format the notification color for check suite 5`] = `"text-gray-500"`; exports[`getNotificationTypeIconColor should format the notification color for state 1`] = `"text-green-500"`; @@ -128,11 +128,11 @@ exports[`getNotificationTypeIconColor should format the notification color for s exports[`getNotificationTypeIconColor should format the notification color for state 3`] = `"text-purple-500"`; -exports[`getNotificationTypeIconColor should format the notification color for state 4`] = `"text-gray-400"`; +exports[`getNotificationTypeIconColor should format the notification color for state 4`] = `"text-gray-500"`; exports[`getNotificationTypeIconColor should format the notification color for state 5`] = `"text-purple-500"`; -exports[`getNotificationTypeIconColor should format the notification color for state 6`] = `"text-gray-400"`; +exports[`getNotificationTypeIconColor should format the notification color for state 6`] = `"text-gray-500"`; exports[`getNotificationTypeIconColor should format the notification color for state 7`] = `"text-green-500"`; @@ -140,4 +140,4 @@ exports[`getNotificationTypeIconColor should format the notification color for s exports[`getNotificationTypeIconColor should format the notification color for state 9`] = `"text-purple-500"`; -exports[`getNotificationTypeIconColor should format the notification color for state 10`] = `"text-gray-400"`; +exports[`getNotificationTypeIconColor should format the notification color for state 10`] = `"text-gray-500"`; diff --git a/src/utils/appearance.ts b/src/utils/appearance.ts index 8eeab5fff..bce783d5e 100644 --- a/src/utils/appearance.ts +++ b/src/utils/appearance.ts @@ -1,5 +1,13 @@ import { Appearance } from '../types'; +export function getAppearance(): Appearance { + if (document.querySelector('html').classList.contains('dark')) { + return Appearance.DARK; + } + + return Appearance.LIGHT; +} + export const setLightMode = () => document.querySelector('html').classList.remove('dark'); diff --git a/src/utils/github-api.ts b/src/utils/github-api.ts index 47d2e197d..f237040fd 100644 --- a/src/utils/github-api.ts +++ b/src/utils/github-api.ts @@ -25,6 +25,8 @@ import { XIcon, } from '@primer/octicons-react'; import { Reason, Subject } from '../typesGithub'; +import { Appearance } from '../types'; +import { getAppearance } from './appearance'; // prettier-ignore const DESCRIPTIONS = { @@ -162,8 +164,6 @@ export function getNotificationTypeIconColor(subject: Subject): string { case 'ANSWERED': case 'success': return 'text-green-500'; - case 'cancelled': - return 'text-gray-500'; case 'closed': case 'failure': return 'text-red-500'; @@ -172,6 +172,10 @@ export function getNotificationTypeIconColor(subject: Subject): string { case 'merged': return 'text-purple-500'; default: - return 'text-gray-400'; + const appearance = getAppearance(); + if (appearance == Appearance.DARK) { + return 'text-gray-300'; + } + return 'text-gray-500'; } }