Repository: gitify-app/gitify
Pull request #1214 (2024-06-10 12:40:36)

refactor: move custom styles into class
Move style constants into dedicated class.




Patch:
diff --git a/biome.json b/biome.json
index b14e36ec..b417c560 100644
--- a/biome.json
+++ b/biome.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.8.0/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.8.1/schema.json",
   "organizeImports": {
     "enabled": true
   },
diff --git a/package.json b/package.json
index 7da24840..a22290b4 100644
--- a/package.json
+++ b/package.json
@@ -124,7 +124,7 @@
     "typescript": "5.4.5"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.8.0",
+    "@biomejs/biome": "1.8.1",
     "@electron/notarize": "2.3.2",
     "@testing-library/react": "16.0.0",
     "@types/jest": "29.5.12",
@@ -153,7 +153,7 @@
     "webpack-cli": "5.1.4",
     "webpack-merge": "5.10.0"
   },
-  "packageManager": "pnpm@9.2.0",
+  "packageManager": "pnpm@9.3.0",
   "lint-staged": {
     "*.{html,js,json,ts,tsx}": "biome format --fix"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 316bb821..16ef5d76 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -55,8 +55,8 @@ importers:
         version: 5.4.5
     devDependencies:
       '@biomejs/biome':
-        specifier: 1.8.0
-        version: 1.8.0
+        specifier: 1.8.1
+        version: 1.8.1
       '@electron/notarize':
         specifier: 2.3.2
         version: 2.3.2
@@ -323,55 +323,55 @@ packages:
   '@bcoe/v8-coverage@0.2.3':
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
 
-  '@biomejs/biome@1.8.0':
-    resolution: {integrity: sha512-34xcE2z8GWrIz1sCFEmlHT/+4d+SN7YOqqvzlAKXKvaWPRJ2/NUwxPbRsP01P9QODkQ5bvGvc9rpBihmP+7RJQ==}
+  '@biomejs/biome@1.8.1':
+    resolution: {integrity: sha512-fQXGfvq6DIXem12dGQCM2tNF+vsNHH1qs3C7WeOu75Pd0trduoTmoO7G4ntLJ2qDs5wuw981H+cxQhi1uHnAtA==}
     engines: {node: '>=14.21.3'}
     hasBin: true
 
-  '@biomejs/cli-darwin-arm64@1.8.0':
-    resolution: {integrity: sha512-dBAYzfIJ1JmWigKlWourT3sJ3I60LZPjqNwwlsyFjiv5AV7vPeWlHVVIImV2BpINwNjZQhpXnwDfVnGS4vr7AA==}
+  '@biomejs/cli-darwin-arm64@1.8.1':
+    resolution: {integrity: sha512-XLiB7Uu6GALIOBWzQ2aMD0ru4Ly5/qSeQF7kk3AabzJ/kwsEWSe33iVySBP/SS2qv25cgqNiLksjGcw2bHT3mw==}
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [darwin]
 
-  '@biomejs/cli-darwin-x64@1.8.0':
-    resolution: {integrity: sha512-ZTTSD0bP0nn9UpRDGQrQNTILcYSj+IkxTYr3CAV64DWBDtQBomlk2oVKWzDaA1LOhpAsTh0giLCbPJaVk2jfMQ==}
+  '@biomejs/cli-darwin-x64@1.8.1':
+    resolution: {integrity: sha512-uMTSxVLMfqkBVqyc25hSn83jBbp+wtWjzM/pHFlKXt3htJuw7FErVGW0nmQ9Sxa9vJ7GcqoltLMl28VQRIMYzg==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [darwin]
 
-  '@biomejs/cli-linux-arm64-musl@1.8.0':
-    resolution: {integrity: sha512-+ee/pZWsvhDv6eRI00krRNSgAg8DKSxzOv3LUsCjto6N1VzqatTASeQv2HRfG1nitf79rRKM75LkMJbqEfiKww==}
+  '@biomejs/cli-linux-arm64-musl@1.8.1':
+    resolution: {integrity: sha512-UQ8Wc01J0wQL+5AYOc7qkJn20B4PZmQL1KrmDZh7ot0DvD6aX4+8mmfd/dG5b6Zjo/44QvCKcvkFGCMRYuhWZA==}
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [linux]
 
-  '@biomejs/cli-linux-arm64@1.8.0':
-    resolution: {integrity: sha512-cx725jTlJS6dskvJJwwCQaaMRBKE2Qss7ukzmx27Rn/DXRxz6tnnBix4FUGPf1uZfwrERkiJlbWM05JWzpvvXg==}
+  '@biomejs/cli-linux-arm64@1.8.1':
+    resolution: {integrity: sha512-3SzZRuC/9Oi2P2IBNPsEj0KXxSXUEYRR2kfRF/Ve8QAfGgrt4qnwuWd6QQKKN5R+oYH691qjm+cXBKEcrP1v/Q==}
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [linux]
 
-  '@biomejs/cli-linux-x64-musl@1.8.0':
-    resolution: {integrity: sha512-VPA4ocrAOak50VYl8gOAVnjuFFDpIUolShntc/aWM0pZfSIMbRucxnrfUfp44EVwayxjK6ruJTR5xEWj93WvDA==}
+  '@biomejs/cli-linux-x64-musl@1.8.1':
+    resolution: {integrity: sha512-fYbP/kNu/rtZ4kKzWVocIdqZOtBSUEg9qUhZaao3dy3CRzafR6u6KDtBeSCnt47O+iLnks1eOR1TUxzr5+QuqA==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [linux]
 
-  '@biomejs/cli-linux-x64@1.8.0':
-    resolution: {integrity: sha512-cmgmhlD4QUxMhL1VdaNqnB81xBHb3R7huVNyYnPYzP+AykZ7XqJbPd1KcWAszNjUk2AHdx0aLKEBwCOWemxb2g==}
+  '@biomejs/cli-linux-x64@1.8.1':
+    resolution: {integrity: sha512-AeBycVdNrTzsyYKEOtR2R0Ph0hCD0sCshcp2aOnfGP0hCZbtFg09D0SdKLbyzKntisY41HxKVrydYiaApp+2uw==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [linux]
 
-  '@biomejs/cli-win32-arm64@1.8.0':
-    resolution: {integrity: sha512-J31spvlh39FfRHQacYXxJX9PvTCH/a8+2Jx9D1lxw+LSF0JybqZcw/4JrlFUWUl4kF3yv8AuYUK0sENScc3g9w==}
+  '@biomejs/cli-win32-arm64@1.8.1':
+    resolution: {integrity: sha512-6tEd1H/iFKpgpE3OIB7oNgW5XkjiVMzMRPL8zYoZ036YfuJ5nMYm9eB9H/y81+8Z76vL48fiYzMPotJwukGPqQ==}
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [win32]
 
-  '@biomejs/cli-win32-x64@1.8.0':
-    resolution: {integrity: sha512-uPHHvu76JC1zYe9zZDcOU9PAg+1MZmPuNgWkb5jljaDeATvzLFPB+0nuJTilf603LXL+E8IdPQAO61Wy2VuEJA==}
+  '@biomejs/cli-win32-x64@1.8.1':
+    resolution: {integrity: sha512-g2H31jJzYmS4jkvl6TiyEjEX+Nv79a5km/xn+5DARTp5MBFzC9gwceusSSB2AkJKqZzY131AiACAWjKrVt5Ijw==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [win32]
@@ -3382,39 +3382,39 @@ snapshots:
 
   '@bcoe/v8-coverage@0.2.3': {}
 
-  '@biomejs/biome@1.8.0':
+  '@biomejs/biome@1.8.1':
     optionalDependencies:
-      '@biomejs/cli-darwin-arm64': 1.8.0
-      '@biomejs/cli-darwin-x64': 1.8.0
-      '@biomejs/cli-linux-arm64': 1.8.0
-      '@biomejs/cli-linux-arm64-musl': 1.8.0
-      '@biomejs/cli-linux-x64': 1.8.0
-      '@biomejs/cli-linux-x64-musl': 1.8.0
-      '@biomejs/cli-win32-arm64': 1.8.0
-      '@biomejs/cli-win32-x64': 1.8.0
-
-  '@biomejs/cli-darwin-arm64@1.8.0':
+      '@biomejs/cli-darwin-arm64': 1.8.1
+      '@biomejs/cli-darwin-x64': 1.8.1
+      '@biomejs/cli-linux-arm64': 1.8.1
+      '@biomejs/cli-linux-arm64-musl': 1.8.1
+      '@biomejs/cli-linux-x64': 1.8.1
+      '@biomejs/cli-linux-x64-musl': 1.8.1
+      '@biomejs/cli-win32-arm64': 1.8.1
+      '@biomejs/cli-win32-x64': 1.8.1
+
+  '@biomejs/cli-darwin-arm64@1.8.1':
     optional: true
 
-  '@biomejs/cli-darwin-x64@1.8.0':
+  '@biomejs/cli-darwin-x64@1.8.1':
     optional: true
 
-  '@biomejs/cli-linux-arm64-musl@1.8.0':
+  '@biomejs/cli-linux-arm64-musl@1.8.1':
     optional: true
 
-  '@biomejs/cli-linux-arm64@1.8.0':
+  '@biomejs/cli-linux-arm64@1.8.1':
     optional: true
 
-  '@biomejs/cli-linux-x64-musl@1.8.0':
+  '@biomejs/cli-linux-x64-musl@1.8.1':
     optional: true
 
-  '@biomejs/cli-linux-x64@1.8.0':
+  '@biomejs/cli-linux-x64@1.8.1':
     optional: true
 
-  '@biomejs/cli-win32-arm64@1.8.0':
+  '@biomejs/cli-win32-arm64@1.8.1':
     optional: true
 
-  '@biomejs/cli-win32-x64@1.8.0':
+  '@biomejs/cli-win32-x64@1.8.1':
     optional: true
 
   '@cspotcode/source-map-support@0.8.1':
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 76575e2f..7210cba7 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/components/Sidebar.tsx b/src/components/Sidebar.tsx
index a6f10faa..05a156aa 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -8,6 +8,7 @@ import { type FC, useCallback, useContext, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { Logo } from '../components/Logo';
 import { AppContext } from '../context/App';
+import { BUTTON_SIDEBAR_CLASS_NAME } from '../styles/gitify';
 import { openExternalLink, quitApp } from '../utils/comms';
 import { Constants } from '../utils/constants';
 import { getNotificationCount } from '../utils/notifications';
@@ -39,9 +40,6 @@ export const Sidebar: FC = () => {
     return getNotificationCount(notifications);
   }, [notifications]);
 
-  const sidebarButtonClasses =
-    'flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none disabled:text-gray-500 disabled:cursor-default';
-
   return (
     <div className="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-gray-sidebar overflow-y-auto">
       <div className="flex flex-col flex-1 items-center py-4">
@@ -76,7 +74,7 @@ export const Sidebar: FC = () => {
           <>
             <button
               type="button"
-              className={sidebarButtonClasses}
+              className={BUTTON_SIDEBAR_CLASS_NAME}
               title="Refresh Notifications"
               onClick={() => {
                 navigate('/', { replace: true });
@@ -92,7 +90,7 @@ export const Sidebar: FC = () => {
             </button>
             <button
               type="button"
-              className={sidebarButtonClasses}
+              className={BUTTON_SIDEBAR_CLASS_NAME}
               title="Settings"
               onClick={toggleSettings}
             >
@@ -104,7 +102,7 @@ export const Sidebar: FC = () => {
         {!isLoggedIn && (
           <button
             type="button"
-            className={sidebarButtonClasses}
+            className={BUTTON_SIDEBAR_CLASS_NAME}
             title="Quit Gitify"
             aria-label="Quit Gitify"
             onClick={quitApp}
diff --git a/src/routes/Accounts.tsx b/src/routes/Accounts.tsx
index eb2ac487..7ed9a867 100644
--- a/src/routes/Accounts.tsx
+++ b/src/routes/Accounts.tsx
@@ -13,6 +13,7 @@ import { AppContext } from '../context/App';
 
 import { AuthMethodIcon } from '../components/icons/AuthMethodIcon';
 import { PlatformIcon } from '../components/icons/PlatformIcon';
+import { BUTTON_CLASS_NAME } from '../styles/gitify';
 import type { Account } from '../types';
 import { getAccountUUID, getDeveloperSettingsURL } from '../utils/auth/utils';
 import {
@@ -59,9 +60,6 @@ export const AccountsRoute: FC = () => {
     return navigate('/login-oauth-app', { replace: true });
   }, []);
 
-  const buttonClass =
-    'hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none';
-
   return (
     <div
       className="flex flex-1 flex-col h-screen dark:bg-gray-dark dark:text-white"
@@ -134,7 +132,7 @@ export const AccountsRoute: FC = () => {
               <div>
                 <button
                   type="button"
-                  className={buttonClass}
+                  className={BUTTON_CLASS_NAME}
                   title={`Logout ${account.user.login}`}
                   onClick={() => logoutAccount(account)}
                 >
@@ -154,7 +152,7 @@ export const AccountsRoute: FC = () => {
         <div>
           <button
             type="button"
-            className={buttonClass}
+            className={BUTTON_CLASS_NAME}
             title="Login with Personal Access Token"
             onClick={loginWithPersonalAccessToken}
             hidden={isPersonalAccessTokenLoggedIn(auth)}
@@ -164,7 +162,7 @@ export const AccountsRoute: FC = () => {
           </button>
           <button
             type="button"
-            className={buttonClass}
+            className={BUTTON_CLASS_NAME}
             title="Login with OAuth App"
             onClick={loginWithOAuthApp}
             hidden={isOAuthAppLoggedIn(auth)}
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index 31c75b65..c55271c0 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -21,6 +21,7 @@ import { useNavigate } from 'react-router-dom';
 import { Checkbox } from '../components/fields/Checkbox';
 import { RadioGroup } from '../components/fields/RadioGroup';
 import { AppContext } from '../context/App';
+import { BUTTON_CLASS_NAME } from '../styles/gitify';
 import { Theme } from '../types';
 import { getAppVersion, openExternalLink, quitApp } from '../utils/comms';
 import Constants from '../utils/constants';
@@ -61,9 +62,6 @@ export const SettingsRoute: FC = () => {
     });
   }, [settings.theme]);
 
-  const footerButtonClass =
-    'hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none';
-
   return (
     <div
       className="flex flex-1 flex-col h-screen dark:bg-gray-dark dark:text-white"
@@ -299,7 +297,7 @@ export const SettingsRoute: FC = () => {
         <div>
           <button
             type="button"
-            className={footerButtonClass}
+            className={BUTTON_CLASS_NAME}
             title="Accounts"
             onClick={() => {
               navigate('/accounts');
@@ -310,7 +308,7 @@ export const SettingsRoute: FC = () => {
 
           <button
             type="button"
-            className={`${footerButtonClass} mr-0`}
+            className={BUTTON_CLASS_NAME}
             title="Quit Gitify"
             onClick={quitApp}
           >
diff --git a/src/styles/gitify.ts b/src/styles/gitify.ts
new file mode 100644
index 00000000..f33ad022
--- /dev/null
+++ b/src/styles/gitify.ts
@@ -0,0 +1,10 @@
+export const BUTTON_CLASS_NAME =
+  'hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none';
+
+export const BUTTON_SIDEBAR_CLASS_NAME =
+  'flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none disabled:text-gray-500 disabled:cursor-default';
+
+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';
+
+export const READ_NOTIFICATION_CLASS_NAME = 'opacity-50 dark:opacity-50';
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index a3d607f9..e03028b2 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/notifications.ts b/src/utils/notifications.ts
index 1c7ac742..2c5f2f49 100644
--- a/src/utils/notifications.ts
+++ b/src/utils/notifications.ts
@@ -1,6 +1,5 @@
 import type {
   AccountNotifications,
-  AuthState,
   GitifyState,
   SettingsState,
 } from '../types';
@@ -65,14 +64,11 @@ export const triggerNativeNotifications = (
   }
 
   if (state.settings.showNotifications) {
-    raiseNativeNotification(diffNotifications, state.auth);
+    raiseNativeNotification(diffNotifications);
   }
 };
 
-export const raiseNativeNotification = (
-  notifications: Notification[],
-  auth: AuthState,
-) => {
+export const raiseNativeNotification = (notifications: Notification[]) => {
   let title: string;
   let body: string;
 
diff --git a/src/utils/remove-notification.ts b/src/utils/remove-notification.ts
index 03e0fcd1..3d12ade9 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;
   }
 


Test patch:
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index 4bf0d4b0..fc5aab5f 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -581,7 +581,7 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
         </svg>
       </button>
       <button
-        class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none mr-0"
+        class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
         title="Quit Gitify"
         type="button"
       >
diff --git a/src/utils/notifications.test.ts b/src/utils/notifications.test.ts
index 79a06bff..2979ce4c 100644
--- a/src/utils/notifications.test.ts
+++ b/src/utils/notifications.test.ts
@@ -115,10 +115,9 @@ describe('utils/notifications.ts', () => {
     jest.spyOn(helpers, 'openInBrowser');
 
     const nativeNotification: Notification =
-      notificationsHelpers.raiseNativeNotification(
-        [mockGitHubNotifications[0]],
-        mockAuth,
-      );
+      notificationsHelpers.raiseNativeNotification([
+        mockGitHubNotifications[0],
+      ]);
     nativeNotification.onclick(null);
 
     expect(helpers.openInBrowser).toHaveBeenCalledTimes(1);
@@ -133,7 +132,6 @@ describe('utils/notifications.ts', () => {
 
     const nativeNotification = notificationsHelpers.raiseNativeNotification(
       mockGitHubNotifications,
-      mockAuth,
     );
     nativeNotification.onclick(null);
 
diff --git a/src/utils/remove-notification.test.ts b/src/utils/remove-notification.test.ts
index d0075cdf..c1a73275 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);
   });
 });