Fix Nostr Statistics dropdown graphs to match liquid blue theme - remove white background and apply dark glass morphism with cyan accents

Author: whosthatguy

src/components/common/BaseTable/BaseTable.styles.ts

@@ -18,6 +18,23 @@ export const Table = styled(AntdTable)`
     font-size: ${FONT_SIZE.xs};
     line-height: 1.25rem;
   }
+  
+  /* Ensure expanded rows have transparent background */
+  & .ant-table-expanded-row {
+    background: transparent !important;
+    background-color: transparent !important;
+    
+    > td {
+      background: transparent !important;
+      background-color: transparent !important;
+    }
+  }
+  
+  /* Remove any default white backgrounds on expansion cells */
+  & .ant-table-tbody > tr.ant-table-expanded-row > td {
+    background: transparent !important;
+    background-color: transparent !important;
+  }
 
   & tbody .ant-table-row-expand-icon {
     min-height: 1.25rem;

src/components/tables/Tables/Tables.styles.ts

@@ -3,6 +3,78 @@ import { BaseCard as CommonCard } from '@app/components/common/BaseCard/BaseCard
 const borderRad = '.5rem';
 export const TablesWrapper = styled.div`
   margin-top: 1.875rem;
+  
+  .ant-table-row {
+    transition: all 0.3s ease;
+    
+    &:hover {
+      background: rgba(0, 191, 255, 0.05) !important;
+    }
+    
+    &.expanded-row {
+      background: rgba(0, 191, 255, 0.08) !important;
+      
+      td {
+        border-bottom: 1px solid rgba(0, 191, 255, 0.2) !important;
+      }
+    }
+  }
+  
+  .ant-table-expanded-row {
+    background: transparent !important;
+    
+    &:hover {
+      background: transparent !important;
+    }
+    
+    > td {
+      padding: 0 !important;
+      background: transparent !important;
+      background-color: transparent !important;
+      border-bottom: 1px solid rgba(0, 191, 255, 0.2) !important;
+    }
+    
+    .ant-table-expanded-row-fixed {
+      background: transparent !important;
+    }
+  }
+  
+  .ant-table-tbody > tr {
+    cursor: pointer;
+  }
+  
+  .anticon-caret-down,
+  .anticon-caret-right {
+    color: rgba(0, 191, 255, 1);
+    font-size: 14px;
+    transition: transform 0.3s ease;
+  }
+  
+  .anticon-caret-down {
+    filter: drop-shadow(0 0 4px rgba(0, 191, 255, 0.8));
+  }
+  
+  /* Ensure chart backgrounds are transparent */
+  canvas {
+    background: transparent !important;
+    background-color: transparent !important;
+  }
+  
+  /* Chart.js canvas container and all wrappers */
+  .chartjs-render-monitor,
+  .chartjs-size-monitor,
+  [class*="chart-container"] {
+    background: transparent !important;
+    background-color: transparent !important;
+  }
+  
+  /* Ant Table expanded row content area */
+  .ant-table-expanded-row-fixed,
+  .ant-table-tbody > .ant-table-expanded-row > td,
+  .ant-table-expanded-row-level-1 {
+    background: transparent !important;
+    background-color: transparent !important;
+  }
 `;
 
 export const Card = styled(CommonCard)`