Update notification dropdown colors, fix payment/report notifications pages with glass morphism theme, and standardize chart component sizes

Author: whosthatguy

src/components/payment/PaymentNotifications/PaymentNotifications.styles.ts

@@ -1,15 +1,29 @@
 import styled, { css } from 'styled-components';
 import { Input, Button, Divider, Badge, Tag } from 'antd';
-import { FONT_SIZE, BORDER_RADIUS, FONT_WEIGHT } from '@app/styles/themes/constants';
+import { FONT_SIZE, BORDER_RADIUS, FONT_WEIGHT, LAYOUT } from '@app/styles/themes/constants';
+
+export const ScrollableWrapper = styled.div`
+  height: calc(100vh - ${LAYOUT.desktop.headerHeight} - 4rem);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 0.5rem;
+  
+  /* Hide scrollbars completely while maintaining functionality */
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+  
+  /* Firefox */
+  scrollbar-width: none;
+  
+  /* IE/Edge */
+  -ms-overflow-style: none;
+`;
 
 export const FiltersWrapper = styled.div`
   margin-bottom: 1.5rem;
-  padding: 1rem;
-  background: rgba(0, 255, 255, 0.03);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border: 1px solid rgba(0, 255, 255, 0.1);
-  border-radius: ${BORDER_RADIUS};
 `;
 
 export const SplitDivider = styled(Divider)`

src/components/payment/PaymentNotifications/PaymentNotifications.tsx

@@ -60,8 +60,9 @@ export const PaymentNotifications: React.FC<PaymentNotificationsProps> = ({ clas
   };
 
   return (
-    <BaseCard className={className} title={t('payment.notifications.title', 'Payment Notifications')} padding="1.25rem">
-      <S.FiltersWrapper>
+    <S.ScrollableWrapper>
+      <BaseCard className={className} title={t('payment.notifications.title', 'Payment Notifications')} padding="1.25rem">
+        <S.FiltersWrapper>
         <BaseRow gutter={[16, 16]} align="middle">
           <BaseCol xs={24} md={8}>
             <BaseSelect
@@ -209,7 +210,8 @@ export const PaymentNotifications: React.FC<PaymentNotificationsProps> = ({ clas
             {t('payment.notifications.emptyDescription', 'Payment notifications will appear here when users subscribe to your services')}
           </S.Text>
         </div>
-      )}
-    </BaseCard>
+        )}
+      </BaseCard>
+    </S.ScrollableWrapper>
   );
 };

src/components/report/ReportNotifications/ReportNotifications.styles.ts

@@ -1,6 +1,26 @@
 import styled, { css } from 'styled-components';
 import { Input, Button, Divider, Badge, Tag } from 'antd';
-import { FONT_SIZE, BORDER_RADIUS, FONT_WEIGHT } from '@app/styles/themes/constants';
+import { FONT_SIZE, BORDER_RADIUS, FONT_WEIGHT, LAYOUT } from '@app/styles/themes/constants';
+
+export const ScrollableWrapper = styled.div`
+  height: calc(100vh - ${LAYOUT.desktop.headerHeight} - 4rem);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 0.5rem;
+  
+  /* Hide scrollbars completely while maintaining functionality */
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+  
+  /* Firefox */
+  scrollbar-width: none;
+  
+  /* IE/Edge */
+  -ms-overflow-style: none;
+`;
 
 export const FiltersWrapper = styled.div`
   margin-bottom: 1.5rem;

src/components/report/ReportNotifications/ReportNotifications.tsx

@@ -143,8 +143,9 @@ export const ReportNotifications: React.FC<ReportNotificationsProps> = ({ classN
   };
 
   return (
-    <BaseCard className={className} title={t('report.notifications.title', 'Report Notifications')} padding="1.25rem">
-      <S.FiltersWrapper>
+    <S.ScrollableWrapper>
+      <BaseCard className={className} title={t('report.notifications.title', 'Report Notifications')} padding="1.25rem">
+        <S.FiltersWrapper>
         <BaseRow gutter={[16, 16]} align="middle">
           <BaseCol xs={24} md={8}>
             <BaseSelect
@@ -365,6 +366,7 @@ export const ReportNotifications: React.FC<ReportNotificationsProps> = ({ classN
           </div>
         )}
       </Modal>
-    </BaseCard>
+      </BaseCard>
+    </S.ScrollableWrapper>
   );
 };