From 3e4f234ec1740de41bb5e863a7c92836b142e097 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Mon, 10 Jun 2024 08:39:07 -0400
Subject: [PATCH] refactor: move custom styles into class

---
 src/components/NotificationRow.tsx    | 12 ++++++------
 src/styles/gitify.ts                  |  4 ++++
 src/utils/constants.ts                |  5 -----
 src/utils/remove-notification.test.ts |  4 ++--
 src/utils/remove-notification.ts      |  4 ++--
 5 files changed, 14 insertions(+), 15 deletions(-)
 create mode 100644 src/styles/gitify.ts

diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 76575e2fc..7210cba7f 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -17,10 +17,10 @@ import {
 } from 'react';
 
 import { AppContext } from '../context/App';
+import { PILL_CLASS_NAME } from '../styles/gitify';
 import { IconColor } from '../types';
 import type { Notification } from '../typesGitHub';
 import { openExternalLink } from '../utils/comms';
-import Constants from '../utils/constants';
 import {
   formatForDisplay,
   formatNotificationUpdatedAt,
@@ -156,7 +156,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
             <div>
               {notification.subject?.linkedIssues?.length > 0 && (
                 <span title={linkedIssuesPillDescription}>
-                  <button type="button" className={Constants.PILL_CLASS_NAME}>
+                  <button type="button" className={PILL_CLASS_NAME}>
                     <IssueClosedIcon
                       size={12}
                       className={`mr-1 ${IconColor.GREEN}`}
@@ -174,7 +174,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
 
                 return (
                   <span key={review.state} title={icon.description}>
-                    <button type="button" className={Constants.PILL_CLASS_NAME}>
+                    <button type="button" className={PILL_CLASS_NAME}>
                       <icon.type
                         size={12}
                         className={`mr-1 ${icon.color}`}
@@ -187,7 +187,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
               })}
               {notification.subject?.comments > 0 && (
                 <span title={commentsPillDescription}>
-                  <button type="button" className={Constants.PILL_CLASS_NAME}>
+                  <button type="button" className={PILL_CLASS_NAME}>
                     <CommentIcon
                       size={12}
                       className={`mr-1 ${IconColor.GRAY}`}
@@ -199,7 +199,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
               )}
               {notification.subject?.labels?.length > 0 && (
                 <span title={labelsPillDescription}>
-                  <button type="button" className={Constants.PILL_CLASS_NAME}>
+                  <button type="button" className={PILL_CLASS_NAME}>
                     <TagIcon
                       size={12}
                       className={`mr-1 ${IconColor.GRAY}`}
@@ -214,7 +214,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
                   className="ml-1"
                   title={notification.subject.milestone.title}
                 >
-                  <button type="button" className={Constants.PILL_CLASS_NAME}>
+                  <button type="button" className={PILL_CLASS_NAME}>
                     <MilestoneIcon
                       size={12}
                       className={
diff --git a/src/styles/gitify.ts b/src/styles/gitify.ts
new file mode 100644
index 000000000..97419dff1
--- /dev/null
+++ b/src/styles/gitify.ts
@@ -0,0 +1,4 @@
+export const READ_NOTIFICATION_CLASS_NAME = 'opacity-50 dark:opacity-50';
+
+export const PILL_CLASS_NAME =
+  'rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700';
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index a3d607f94..e03028b21 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -22,11 +22,6 @@ export const Constants = {
 
   FETCH_INTERVAL: 60000,
 
-  READ_CLASS_NAME: 'opacity-50 dark:opacity-50',
-
-  PILL_CLASS_NAME:
-    'rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700',
-
   // GitHub Docs
   GITHUB_DOCS: {
     OAUTH_URL:
diff --git a/src/utils/remove-notification.test.ts b/src/utils/remove-notification.test.ts
index d0075cdf5..c1a732751 100644
--- a/src/utils/remove-notification.test.ts
+++ b/src/utils/remove-notification.test.ts
@@ -1,7 +1,7 @@
 import { mockSingleAccountNotifications } from '../__mocks__/notifications-mocks';
 import { mockSettings } from '../__mocks__/state-mocks';
+import { READ_NOTIFICATION_CLASS_NAME } from '../styles/gitify';
 import { mockSingleNotification } from './api/__mocks__/response-mocks';
-import Constants from './constants';
 import { removeNotification } from './remove-notification';
 
 describe('utils/remove-notification.ts', () => {
@@ -39,6 +39,6 @@ describe('utils/remove-notification.ts', () => {
     expect(document.getElementById).toHaveBeenCalledWith(
       mockSingleAccountNotifications[0].notifications[0].id,
     );
-    expect(mockElement.className).toContain(Constants.READ_CLASS_NAME);
+    expect(mockElement.className).toContain(READ_NOTIFICATION_CLASS_NAME);
   });
 });
diff --git a/src/utils/remove-notification.ts b/src/utils/remove-notification.ts
index 03e0fcd15..3d12ade9e 100644
--- a/src/utils/remove-notification.ts
+++ b/src/utils/remove-notification.ts
@@ -1,5 +1,5 @@
+import { READ_NOTIFICATION_CLASS_NAME } from '../styles/gitify';
 import type { AccountNotifications, SettingsState } from '../types';
-import Constants from './constants';
 
 export const removeNotification = (
   settings: SettingsState,
@@ -9,7 +9,7 @@ export const removeNotification = (
 ): AccountNotifications[] => {
   if (settings.delayNotificationState) {
     const notificationRow = document.getElementById(id);
-    notificationRow.className += ` ${Constants.READ_CLASS_NAME}`;
+    notificationRow.className += ` ${READ_NOTIFICATION_CLASS_NAME}`;
     return notifications;
   }