feat: simplify icon colors and improve accessibility when in light-mode (#857)

* feat: simplify icon colors and improve accessibility when in light-mode

* feat: change gray color based on theme

Author: setchy

src/utils/__snapshots__/github-api.test.ts.snap

@@ -120,24 +120,24 @@ 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"`;
 
 exports[`getNotificationTypeIconColor should format the notification color for state 2`] = `"text-red-500"`;
 
 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"`;
 
 exports[`getNotificationTypeIconColor should format the notification color for state 8`] = `"text-green-500"`;
 
 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"`;

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');
 

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';
   }
 }