refactor: move custom styles into class

gitify-app · Jun 10, 2024 · 3e4f234 · 3e4f234
1 parent 4f4a983
commit 3e4f234
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
   }