Apply liquid glass theme to Content Moderation blocked and flagged access sections

Author: whosthatguy

src/components/blocked-pubkeys/BlockedPubkeys.styles.ts

@@ -13,11 +13,24 @@ export const BaseColRoot = styled(BaseCol)`
 export const TableContainer = styled.div`
   border-radius: 12px;
   margin: 0 2px;
-  padding-top: 0.4rem;
-  padding-bottom: 2rem;
-  background-color: var(--secondary-background-color);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-  border: 1px solid var(--border-base-color);
+  padding: 0.4rem;
+  background: rgba(0, 255, 255, 0.05) !important;
+  border: 1px solid rgba(0, 255, 255, 0.2) !important;
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  transition: all 0.3s ease;
+  
+  &:hover {
+    border-color: rgba(0, 255, 255, 0.5) !important;
+    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2) !important;
+  }
+  
+  /* Round the table corners to match */
+  & .ant-table {
+    border-radius: 8px !important;
+    overflow: hidden;
+    background: transparent !important;
+  }
 `;
 export const CardRoot = styled(Card)`
   border: none;
@@ -48,7 +61,6 @@ export const TitleWrapper = styled.div`
 export const NavContainer = styled.div`
   display: flex;
   margin-bottom: 1rem;
-  border-bottom: 1px solid var(--border-color);
 `;
 
 export const NavLink = styled.div<{ active: boolean }>`
@@ -83,11 +95,15 @@ export const CircularBadge = styled.div<{ color: string }>`
   font-weight: bold;
   margin-right: 8px;
 `;
+
 export const EmptyList = styled.div`
   min-height: 4rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--text-light-color);
+  color: rgba(255, 255, 255, 0.5);
   border-bottom: none;
+  padding: 2rem;
+  background: transparent;
+  border-radius: 8px;
 `;

src/components/blocked-pubkeys/BlockedPubkeys.tsx

@@ -24,21 +24,38 @@ export function createStyledTable<T extends object = any>() {
   const GenericTable: FC<TableProps<T>> = (props) => <Table {...props} />;
 
   const StyledTable = styled(GenericTable)`
-    border-radius: 12px;
+    border-radius: 8px !important;
+    overflow: hidden;
 
-    & .ant-table-thead .ant-table-cell {
-      background-color: var(--secondary-background-color);
+    & .ant-table {
+      background: transparent;
     }
 
-    .ant-table-tbody {
-      background-color: var(--layout-sider-bg-color);
+    & .ant-table-thead > tr > th {
+      background: transparent;
+      border-bottom: none;
     }
-    .ant-table-placeholder .ant-table-cell {
-      background-color: var(--layout-sider-bg-color);
-      transition: none;
+    
+    & .ant-table-thead > tr > th:first-child {
+      border-top-left-radius: 8px !important;
+    }
+    
+    & .ant-table-thead > tr > th:last-child {
+      border-top-right-radius: 8px !important;
+    }
+
+    & .ant-table-tbody > tr > td {
+      border-bottom: none;
+      background: transparent;
     }
-    .ant-table-placeholder .ant-table-cell:hover {
-      background-color: var(--layout-sider-bg-color);
+
+    & .ant-table-tbody > tr:hover > td {
+      background: rgba(255, 255, 255, 0.02);
+    }
+
+    .ant-table-placeholder .ant-table-cell {
+      background: transparent;
+      border-bottom: none;
     }
   `;
   return StyledTable;

src/components/blocked-pubkeys/components/BlockPubkeyForm.tsx

@@ -12,24 +12,47 @@ interface BlockPubkeyFormProps {
 const CardRoot = styled(Card)`
   border-color: var(--border-base-color) !important;
   border-width: 1px;
+  border-radius: 12px !important;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
   background-color: var(--secondary-background-color) !important;
 
   & .ant-card-head {
     border-bottom-color: var(--border-base-color) !important;
+    border-radius: 12px 12px 0 0 !important;
   }
   
   /* Remove the card body padding and background */
   & .ant-card-body {
     padding: 0 !important;
     background: transparent !important;
+    border-radius: 0 0 12px 12px !important;
   }
 `;
 const TextArea = styled(Input.TextArea)`
-  background-color: var(--layout-sider-bg-color) !important;
+  background: rgba(0, 255, 255, 0.05) !important;
+  border: 1px solid rgba(0, 255, 255, 0.2) !important;
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  border-radius: 8px !important;
+  color: rgba(255, 255, 255, 0.9) !important;
+  
+  &:hover, &:focus {
+    border-color: rgba(0, 255, 255, 0.5) !important;
+    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2) !important;
+  }
 `;
 const InputArea = styled(Input)`
-  background-color: var(--layout-sider-bg-color) !important;
+  background: rgba(0, 255, 255, 0.05) !important;
+  border: 1px solid rgba(0, 255, 255, 0.2) !important;
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  border-radius: 8px !important;
+  color: rgba(255, 255, 255, 0.9) !important;
+  
+  &:hover, &:focus {
+    border-color: rgba(0, 255, 255, 0.5) !important;
+    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2) !important;
+  }
 `;
 
 export const BlockPubkeyForm: React.FC<BlockPubkeyFormProps> = ({ onSubmit, disabled }) => {