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

Author: whosthatguy

src/components/common/LiquidBlueBadge/LiquidBlueBadge.styles.ts

@@ -3,13 +3,13 @@ import { Badge } from 'antd';
 
 const pulse = keyframes`
   0% {
-    box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.7);
+    box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.7);
   }
   50% {
-    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.3), 0 0 20px rgba(6, 182, 212, 0.5);
+    box-shadow: 0 0 0 4px rgba(0, 255, 255, 0.3), 0 0 20px rgba(0, 255, 255, 0.5);
   }
   100% {
-    box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.7);
+    box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.7);
   }
 `;
 
@@ -27,35 +27,37 @@ const glow = keyframes`
 
 export const StyledLiquidBadge = styled(Badge)`
   & .ant-badge-count {
-    /* Simple cyan badge without effects */
-    background: rgba(6, 182, 212, 0.9);
-    border: 1px solid rgba(45, 212, 191, 0.3);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    /* Liquid cyan badge with glass effect */
+    background: rgba(0, 255, 255, 0.85);
+    border: 1px solid rgba(0, 255, 255, 0.3);
+    box-shadow: 0 2px 8px rgba(0, 255, 255, 0.3), 0 0 15px rgba(0, 255, 255, 0.2);
     font-weight: 700;
-    color: rgba(255, 255, 255, 0.95);
+    color: rgba(0, 0, 0, 0.85);
     position: relative;
     overflow: hidden;
+    backdrop-filter: blur(10px);
   }
   
   & .ant-badge-dot {
-    background: rgba(6, 182, 212, 0.9);
+    background: rgba(0, 255, 255, 0.85);
     width: 10px;
     height: 10px;
-    border: 1px solid rgba(45, 212, 191, 0.4);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(0, 255, 255, 0.4);
+    box-shadow: 0 2px 8px rgba(0, 255, 255, 0.3), 0 0 10px rgba(0, 255, 255, 0.2);
   }
   
   & .ant-badge-count-sm {
-    background: rgba(6, 182, 212, 0.85);
+    background: rgba(0, 255, 255, 0.8);
     min-width: 18px;
     height: 18px;
     line-height: 18px;
     font-size: 11px;
     padding: 0 5px;
-    border: 1px solid rgba(45, 212, 191, 0.25);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    color: rgba(255, 255, 255, 0.9);
+    border: 1px solid rgba(0, 255, 255, 0.25);
+    box-shadow: 0 2px 6px rgba(0, 255, 255, 0.25), 0 0 10px rgba(0, 255, 255, 0.15);
+    color: rgba(0, 0, 0, 0.8);
     font-weight: 600;
+    backdrop-filter: blur(8px);
   }
   
   &.notification-badge {
@@ -69,23 +71,23 @@ export const StyledLiquidBadge = styled(Badge)`
 // Tab badge with more subtle animation for inline use
 export const TabBadge = styled(Badge)`
   & .ant-badge-count {
-    background: rgba(6, 182, 212, 0.8);
-    border: 1px solid rgba(45, 212, 191, 0.2);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-    color: rgba(255, 255, 255, 0.9);
+    background: rgba(0, 255, 255, 0.75);
+    border: 1px solid rgba(0, 255, 255, 0.2);
+    box-shadow: 0 2px 4px rgba(0, 255, 255, 0.15);
+    color: rgba(0, 0, 0, 0.8);
     font-weight: 600;
   }
   
   & .ant-badge-count-sm {
-    background: rgba(6, 182, 212, 0.75);
+    background: rgba(0, 255, 255, 0.7);
     min-width: 16px;
     height: 16px;
     line-height: 16px;
     font-size: 10px;
     padding: 0 4px;
-    border: 1px solid rgba(45, 212, 191, 0.18);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-    color: rgba(255, 255, 255, 0.85);
+    border: 1px solid rgba(0, 255, 255, 0.18);
+    box-shadow: 0 2px 4px rgba(0, 255, 255, 0.1);
+    color: rgba(0, 0, 0, 0.75);
     font-weight: 600;
   }
 `;

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

@@ -104,11 +104,17 @@ export const PaymentNotificationsOverlay: React.FC<PaymentNotificationsOverlayPr
               {t('payment.notifications.viewDetails', 'View details')}
             </Link>
           {!notification.is_read && (
-            <BaseButton 
-              type="link" 
-              size="small" 
+            <BaseButton
+              type="link"
+              size="small"
               onClick={() => markAsRead(notification.id)}
-              style={{ padding: '4px 0', height: 'auto', marginTop: '4px', fontSize: '0.85rem' }}
+              style={{
+                padding: '4px 0',
+                height: 'auto',
+                marginTop: '4px',
+                fontSize: '0.85rem',
+                color: '#00ffff'
+              }}
             >
               {t('payment.notifications.markAsRead', 'Mark as read')}
             </BaseButton>

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

@@ -109,7 +109,12 @@ export const ReportNotificationsOverlay: React.FC<ReportNotificationsOverlayProp
               type="link"
               size="small"
               onClick={() => markAsRead(notification.id)}
-              style={{ padding: '4px 0', height: 'auto', marginTop: '4px' }}
+              style={{
+                padding: '4px 0',
+                height: 'auto',
+                marginTop: '4px',
+                color: '#00ffff'
+              }}
             >
               {t('report.notifications.markAsRead', 'Mark as read')}
             </BaseButton>