Apply liquid blue/cyan theme to all notification dropdown components - buttons and badge

Author: whosthatguy

src/components/header/components/notificationsDropdown/NotificationsDropdown.tsx

@@ -106,6 +106,7 @@ export const NotificationsDropdown: React.FC = () => {
               refreshPaymentNotifications({ filter: 'unread' });
               return Promise.resolve();
             }}
+            onClose={() => setOpened(false)}
           />
         </div>
       ),
@@ -135,6 +136,7 @@ export const NotificationsDropdown: React.FC = () => {
               refreshReportNotifications({ filter: 'unread' });
               return Promise.resolve();
             }}
+            onClose={() => setOpened(false)}
           />
         </div>
       ),
@@ -144,6 +146,7 @@ export const NotificationsDropdown: React.FC = () => {
   return (
     <S.StyledNotificationPopover
       trigger="click"
+      open={isOpened}
       content={
         <S.NotificationContent>
           <Tabs

src/components/header/components/notificationsDropdown/PaymentNotificationsOverlay/PaymentNotificationsOverlay.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
 import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
 import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
@@ -12,16 +12,37 @@ interface PaymentNotificationsOverlayProps {
   markAsRead: (id: number) => Promise<void>;
   markAllAsRead: () => Promise<void>;
   onRefresh: () => Promise<void>;
+  onClose?: () => void;
 }
 
 export const PaymentNotificationsOverlay: React.FC<PaymentNotificationsOverlayProps> = ({
   notifications,
   markAsRead,
   markAllAsRead,
   onRefresh,
+  onClose,
   ...props
 }) => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
+  
+  const handleViewAll = useCallback(() => {
+    if (onClose) {
+      onClose();
+    }
+    setTimeout(() => {
+      navigate('/payment-notifications');
+    }, 0);
+  }, [onClose, navigate]);
+  
+  const handleViewDetails = useCallback(() => {
+    if (onClose) {
+      onClose();
+    }
+    setTimeout(() => {
+      navigate('/payment-notifications');
+    }, 0);
+  }, [onClose, navigate]);
 
   const formatDate = (dateString: string): string => {
     const date = new Date(dateString);
@@ -100,9 +121,12 @@ export const PaymentNotificationsOverlay: React.FC<PaymentNotificationsOverlayPr
             {t('payment.notifications.expiration', 'Expires')}: {formatDate(notification.expiration_date)}
           </div> */}
           <S.ActionRow>
-            <Link to="/payment-notifications" style={{ fontSize: '0.85rem', color: 'rgba(255, 255, 255, 0.7)' }}>
+            <a
+              onClick={handleViewDetails}
+              style={{ fontSize: '0.85rem', color: 'rgba(255, 255, 255, 0.7)', cursor: 'pointer' }}
+            >
               {t('payment.notifications.viewDetails', 'View details')}
-            </Link>
+            </a>
           {!notification.is_read && (
             <BaseButton
               type="link"
@@ -164,8 +188,8 @@ export const PaymentNotificationsOverlay: React.FC<PaymentNotificationsOverlayPr
               </S.Btn>
             </BaseCol>
             <BaseCol span={24}>
-              <S.Btn type="link">
-                <Link to="/payment-notifications">{t('payment.notifications.viewAll', 'View all')}</Link>
+              <S.Btn type="link" onClick={handleViewAll}>
+                {t('payment.notifications.viewAll', 'View all')}
               </S.Btn>
             </BaseCol>
           </BaseRow>

src/components/header/components/notificationsDropdown/ReportNotificationsOverlay/ReportNotificationsOverlay.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { BaseNotification } from '@app/components/common/BaseNotification/BaseNotification';
 import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
 import { BaseSpace } from '@app/components/common/BaseSpace/BaseSpace';
@@ -15,16 +15,37 @@ interface ReportNotificationsOverlayProps {
   markAsRead: (id: number) => Promise<void>;
   markAllAsRead: () => Promise<void>;
   onRefresh: () => Promise<void>;
+  onClose?: () => void;
 }
 
 export const ReportNotificationsOverlay: React.FC<ReportNotificationsOverlayProps> = ({
   notifications,
   markAsRead,
   markAllAsRead,
   onRefresh,
+  onClose,
   ...props
 }) => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
+  
+  const handleViewAll = useCallback(() => {
+    if (onClose) {
+      onClose();
+    }
+    setTimeout(() => {
+      navigate('/report-notifications');
+    }, 0);
+  }, [onClose, navigate]);
+  
+  const handleViewDetails = useCallback(() => {
+    if (onClose) {
+      onClose();
+    }
+    setTimeout(() => {
+      navigate('/report-notifications');
+    }, 0);
+  }, [onClose, navigate]);
 
   const formatDate = (dateString: string): string => {
     const date = new Date(dateString);
@@ -121,9 +142,12 @@ export const ReportNotificationsOverlay: React.FC<ReportNotificationsOverlayProp
           )}
 
           <div style={{ marginTop: '4px' }}>
-            <Link to="/report-notifications" style={{ fontSize: '0.85rem', color: 'rgba(255, 255, 255, 0.7)' }}>
+            <a
+              onClick={handleViewDetails}
+              style={{ fontSize: '0.85rem', color: 'rgba(255, 255, 255, 0.7)', cursor: 'pointer' }}
+            >
               {t('report.notifications.viewDetails', 'View details')}
-            </Link>
+            </a>
           </div>
         </div>
       }
@@ -167,8 +191,8 @@ export const ReportNotificationsOverlay: React.FC<ReportNotificationsOverlayProp
               </S.Btn>
             </BaseCol>
             <BaseCol span={24}>
-              <S.Btn type="link">
-                <Link to="/report-notifications">{t('report.notifications.viewAll', 'View all')}</Link>
+              <S.Btn type="link" onClick={handleViewAll}>
+                {t('report.notifications.viewAll', 'View all')}
               </S.Btn>
             </BaseCol>
           </BaseRow>