Repository: gitify-app/gitify
Pull request #857 (2024-03-05 16:16:30)

feat: simplify icon colors and improve accessibility when in light-mode
Closes #841

setchy: Coverage drop is linked to the code simplification.  All lines are covered
setchy: Not really sure how to mock document.querySelector....

Patch:
diff --git a/package.json b/package.json
index 18ed43f8..85ac3b12 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
   ],
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/manosim/gitify/issues"
+    "url": "https://github.com/gitify-app/gitify/issues"
   },
   "homepage": "https://www.gitify.io/",
   "build": {
@@ -121,7 +121,7 @@
     "@types/jest": "29.5.12",
     "@types/node": "20.11.24",
     "@types/nprogress": "0.2.3",
-    "@types/react": "18.2.61",
+    "@types/react": "18.2.63",
     "@types/react-router-dom": "5.3.3",
     "@types/react-test-renderer": "18.0.7",
     "@types/react-transition-group": "4.4.10",
@@ -148,4 +148,4 @@
   "lint-staged": {
     "*.{md,js,ts,tsx}": "prettier --write"
   }
-}
\ No newline at end of file
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 021c21e7..56fed1d3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,8 +71,8 @@ devDependencies:
     specifier: 0.2.3
     version: 0.2.3
   '@types/react':
-    specifier: 18.2.61
-    version: 18.2.61
+    specifier: 18.2.63
+    version: 18.2.63
   '@types/react-router-dom':
     specifier: 5.3.3
     version: 5.3.3
@@ -1127,14 +1127,14 @@ packages:
   /@types/react-dom@18.2.8:
     resolution: {integrity: sha512-bAIvO5lN/U8sPGvs1Xm61rlRHHaq5rp5N3kp9C+NJ/Q41P8iqjkXSu0+/qu8POsjH9pNWb0OYabFez7taP7omw==}
     dependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.2.63
     dev: true
 
   /@types/react-router-dom@5.3.3:
     resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==}
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 18.2.61
+      '@types/react': 18.2.63
       '@types/react-router': 5.1.20
     dev: true
 
@@ -1142,23 +1142,23 @@ packages:
     resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==}
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 18.2.61
+      '@types/react': 18.2.63
     dev: true
 
   /@types/react-test-renderer@18.0.7:
     resolution: {integrity: sha512-1+ANPOWc6rB3IkSnElhjv6VLlKg2dSv/OWClUyZimbLsQyBn8Js9Vtdsi3UICJ2rIQ3k2la06dkB+C92QfhKmg==}
     dependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.2.63
     dev: true
 
   /@types/react-transition-group@4.4.10:
     resolution: {integrity: sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==}
     dependencies:
-      '@types/react': 18.2.61
+      '@types/react': 18.2.63
     dev: true
 
-  /@types/react@18.2.61:
-    resolution: {integrity: sha512-NURTN0qNnJa7O/k4XUkEW2yfygA+NxS0V5h1+kp9jPwhzZy95q3ADoGMP0+JypMhrZBTTgjKAUlTctde1zzeQA==}
+  /@types/react@18.2.63:
+    resolution: {integrity: sha512-ppaqODhs15PYL2nGUOaOu2RSCCB4Difu4UFrP4I3NHLloXC/ESQzQMi9nvjfT1+rudd0d2L3fQPJxRSey+rGlQ==}
     dependencies:
       '@types/prop-types': 15.7.5
       '@types/scheduler': 0.16.4
diff --git a/src/utils/appearance.ts b/src/utils/appearance.ts
index 8eeab5ff..bce783d5 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 8370352f..f237040f 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 = {
@@ -157,33 +159,23 @@ 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';
+      const appearance = getAppearance();
+      if (appearance == Appearance.DARK) {
+        return 'text-gray-300';
+      }
+      return 'text-gray-500';
   }
 }


Test patch:
diff --git a/src/utils/__snapshots__/github-api.test.ts.snap b/src/utils/__snapshots__/github-api.test.ts.snap
index 0b472531..2ad7e8e9 100644
--- a/src/utils/__snapshots__/github-api.test.ts.snap
+++ b/src/utils/__snapshots__/github-api.test.ts.snap
@@ -120,7 +120,7 @@ exports[`getNotificationTypeIconColor should format the notification color for c
 
 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-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-600"`;
+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-300"`;
+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-300"`;
+exports[`getNotificationTypeIconColor should format the notification color for state 10`] = `"text-gray-500"`;