refactor: move custom styles into class

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={

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}

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)}

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

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

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:

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

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