Remove background glow and glass morphism effects from notification components

Author: whosthatguy

src/components/common/BaseNotification/BaseNotification.styles.ts

@@ -40,7 +40,6 @@ export const SpaceWrapper = styled(BaseSpace)<SpacewWrapperProps>`
           return css`
             /* Liquid cyan theme colors to match Paid Subscribers */
             color: rgba(45, 212, 191, 0.95);
-            filter: drop-shadow(0 0 2px rgba(6, 182, 212, 0.15));
           `;
         case 'mention':
           return css`
@@ -54,22 +53,5 @@ export const SpaceWrapper = styled(BaseSpace)<SpacewWrapperProps>`
 
   & span[role='img'] {
     font-size: 2rem;
-    
-    /* Add subtle glow effect for info icons */
-    ${(props) => props.type === 'info' && css`
-      animation: pulseGlow 3s ease-in-out infinite;
-      
-      @keyframes pulseGlow {
-        0% {
-          filter: drop-shadow(0 0 2px rgba(6, 182, 212, 0.15));
-        }
-        50% {
-          filter: drop-shadow(0 0 4px rgba(45, 212, 191, 0.25));
-        }
-        100% {
-          filter: drop-shadow(0 0 2px rgba(6, 182, 212, 0.15));
-        }
-      }
-    `}
   }
 `;

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

@@ -27,77 +27,35 @@ const glow = keyframes`
 
 export const StyledLiquidBadge = styled(Badge)`
   & .ant-badge-count {
-    /* Liquid glass morphism matching our theme */
-    background: linear-gradient(135deg,
-      rgba(20, 184, 166, 0.85),  /* teal */
-      rgba(6, 182, 212, 0.80),   /* cyan */
-      rgba(45, 212, 191, 0.85)   /* turquoise */
-    );
+    /* Simple cyan badge without effects */
+    background: rgba(6, 182, 212, 0.9);
     border: 1px solid rgba(45, 212, 191, 0.3);
-    box-shadow:
-      0 0 8px rgba(45, 212, 191, 0.5),
-      0 0 16px rgba(6, 182, 212, 0.3),
-      inset 0 0 4px rgba(255, 255, 255, 0.2);
-    animation: ${pulse} 2s ease-in-out infinite;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     font-weight: 700;
-    color: rgba(0, 20, 30, 0.95);
-    backdrop-filter: blur(6px);
-    -webkit-backdrop-filter: blur(6px);
+    color: rgba(255, 255, 255, 0.95);
     position: relative;
     overflow: hidden;
-    
-    /* Glass overlay for depth */
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 40%;
-      background: linear-gradient(
-        180deg,
-        rgba(255, 255, 255, 0.12) 0%,
-        transparent 100%
-      );
-      pointer-events: none;
-    }
   }
   
   & .ant-badge-dot {
-    background: radial-gradient(circle,
-      rgba(255, 255, 255, 0.9) 0%,
-      rgba(45, 212, 191, 0.85) 40%,
-      rgba(6, 182, 212, 0.8) 100%
-    );
+    background: rgba(6, 182, 212, 0.9);
     width: 10px;
     height: 10px;
     border: 1px solid rgba(45, 212, 191, 0.4);
-    box-shadow:
-      0 0 8px rgba(45, 212, 191, 0.6),
-      0 0 16px rgba(6, 182, 212, 0.4);
-    animation: ${pulse} 2s ease-in-out infinite;
-    backdrop-filter: blur(4px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }
   
   & .ant-badge-count-sm {
-    background: linear-gradient(135deg,
-      rgba(20, 184, 166, 0.82),
-      rgba(6, 182, 212, 0.78),
-      rgba(45, 212, 191, 0.82)
-    );
+    background: rgba(6, 182, 212, 0.85);
     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 0 6px rgba(45, 212, 191, 0.4),
-      0 0 12px rgba(6, 182, 212, 0.25);
-    animation: ${glow} 2s ease-in-out infinite;
-    color: rgba(0, 20, 30, 0.9);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    color: rgba(255, 255, 255, 0.9);
     font-weight: 600;
-    backdrop-filter: blur(4px);
   }
   
   &.notification-badge {
@@ -111,38 +69,23 @@ export const StyledLiquidBadge = styled(Badge)`
 // Tab badge with more subtle animation for inline use
 export const TabBadge = styled(Badge)`
   & .ant-badge-count {
-    background: linear-gradient(135deg,
-      rgba(20, 184, 166, 0.75),
-      rgba(45, 212, 191, 0.70),
-      rgba(6, 182, 212, 0.75)
-    );
+    background: rgba(6, 182, 212, 0.8);
     border: 1px solid rgba(45, 212, 191, 0.2);
-    box-shadow:
-      0 0 4px rgba(45, 212, 191, 0.35),
-      inset 0 0 3px rgba(255, 255, 255, 0.15);
-    color: rgba(0, 20, 30, 0.85);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+    color: rgba(255, 255, 255, 0.9);
     font-weight: 600;
-    animation: ${glow} 3s ease-in-out infinite;
-    backdrop-filter: blur(3px);
   }
   
   & .ant-badge-count-sm {
-    background: linear-gradient(135deg,
-      rgba(20, 184, 166, 0.72),
-      rgba(45, 212, 191, 0.68),
-      rgba(6, 182, 212, 0.72)
-    );
+    background: rgba(6, 182, 212, 0.75);
     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 0 4px rgba(45, 212, 191, 0.3);
-    color: rgba(0, 20, 30, 0.8);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+    color: rgba(255, 255, 255, 0.85);
     font-weight: 600;
-    animation: ${glow} 3s ease-in-out infinite;
-    backdrop-filter: blur(3px);
   }
 `;

src/components/header/components/notificationsDropdown/NotificationsDropdown.styles.ts

@@ -9,20 +9,16 @@ export const StyledNotificationPopover = styled(BasePopover)`
   }
   
   .ant-popover-content {
-    background: rgba(0, 255, 255, 0.03) !important;
-    backdrop-filter: blur(10px) !important;
-    -webkit-backdrop-filter: blur(10px) !important;
+    background: rgba(10, 25, 47, 0.98) !important;
     border: 1px solid rgba(0, 255, 255, 0.15) !important;
-    box-shadow: 0 8px 32px 0 rgba(0, 255, 255, 0.1) !important;
-    border-radius: 12px !important;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
+    border-radius: 8px !important;
     animation: none !important;
     transition: none !important;
   }
   
   .ant-popover-inner {
     background: transparent !important;
-    backdrop-filter: none !important;
-    -webkit-backdrop-filter: none !important;
     animation: none !important;
     transition: none !important;
   }