= ({ notification }) => {
'group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker',
animateExit &&
'translate-x-full opacity-0 transition duration-[350ms] ease-in-out',
+ showAsRead && 'opacity-50 dark:opacity-50',
)}
>
= ({ notification }) => {
className="h-full hover:text-green-500 focus:outline-none"
title="Mark as Done"
onClick={() => {
- setAnimateExit(true);
+ setAnimateExit(!settings.delayNotificationState);
+ setShowAsRead(settings.delayNotificationState);
markNotificationDone(notification);
}}
>
@@ -239,7 +244,8 @@ export const NotificationRow: FC = ({ notification }) => {
className="h-full hover:text-green-500 focus:outline-none"
title="Mark as Read"
onClick={() => {
- setAnimateExit(true);
+ setAnimateExit(!settings.delayNotificationState);
+ setShowAsRead(settings.delayNotificationState);
markNotificationRead(notification);
}}
>
diff --git a/src/context/App.tsx b/src/context/App.tsx
index c9fa4e19f..6114d3491 100644
--- a/src/context/App.tsx
+++ b/src/context/App.tsx
@@ -122,6 +122,7 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
settings.participating,
settings.showBots,
settings.detailedNotifications,
+ settings.delayNotificationState,
auth.accounts.length,
]);
diff --git a/src/styles/gitify.ts b/src/styles/gitify.ts
index 22be10267..ac91a80b3 100644
--- a/src/styles/gitify.ts
+++ b/src/styles/gitify.ts
@@ -3,5 +3,3 @@ export const BUTTON_CLASS_NAME =
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 READ_NOTIFICATION_CLASS_NAME = 'opacity-50 dark:opacity-50';
diff --git a/src/utils/remove-notification.test.ts b/src/utils/remove-notification.test.ts
index 489fdaaa7..fc80b22cd 100644
--- a/src/utils/remove-notification.test.ts
+++ b/src/utils/remove-notification.test.ts
@@ -1,6 +1,5 @@
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 { removeNotification } from './remove-notification';
@@ -17,11 +16,7 @@ describe('utils/remove-notification.ts', () => {
expect(result[0].notifications.length).toBe(0);
});
- it('should set notification as opaque if delayNotificationState enabled', () => {
- const mockElement = document.createElement('div');
- mockElement.id = mockSingleAccountNotifications[0].notifications[0].id;
- jest.spyOn(document, 'getElementById').mockReturnValue(mockElement);
-
+ it('should skip notification removal if delay state enabled', () => {
expect(mockSingleAccountNotifications[0].notifications.length).toBe(1);
const result = removeNotification(
@@ -31,9 +26,5 @@ describe('utils/remove-notification.ts', () => {
);
expect(result[0].notifications.length).toBe(1);
- expect(document.getElementById).toHaveBeenCalledWith(
- mockSingleAccountNotifications[0].notifications[0].id,
- );
- expect(mockElement.className).toContain(READ_NOTIFICATION_CLASS_NAME);
});
});
diff --git a/src/utils/remove-notification.ts b/src/utils/remove-notification.ts
index aa5c3d217..01e0180b5 100644
--- a/src/utils/remove-notification.ts
+++ b/src/utils/remove-notification.ts
@@ -1,4 +1,3 @@
-import { READ_NOTIFICATION_CLASS_NAME } from '../styles/gitify';
import type { AccountNotifications, SettingsState } from '../types';
import type { Notification } from '../typesGitHub';
import { getAccountUUID } from './auth/utils';
@@ -9,8 +8,6 @@ export const removeNotification = (
notifications: AccountNotifications[],
): AccountNotifications[] => {
if (settings.delayNotificationState) {
- const notificationRow = document.getElementById(notification.id);
- notificationRow.className += ` ${READ_NOTIFICATION_CLASS_NAME}`;
return notifications;
}