add styling for table on allowed user's page

Author: AnthonyMarin

src/components/allowed-users/components/NPubManagement/NPubManagement.tsx

@@ -4,6 +4,7 @@ import { PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import { useAllowedUsersList, useAllowedUsersValidation } from '@app/hooks/useAllowedUsers';
 import { AllowedUsersSettings, AllowedUsersMode, AllowedUser } from '@app/types/allowedUsers.types';
 import * as S from './NPubManagement.styles';
+import { TableContainer } from '../TiersConfig/TiersConfig.styles';
 
 interface NPubManagementProps {
   settings: AllowedUsersSettings;
@@ -158,19 +159,22 @@ export const NPubManagement: React.FC<NPubManagementProps> = ({
         </Space>
       </S.TabHeader>
 
-      <Table
-        columns={columns}
-        dataSource={users}
-        loading={loading}
-        pagination={{
-          current: pagination.page,
-          pageSize: pagination.page_size,
-          total: pagination.total_items,
-          showSizeChanger: false,
-          showTotal: (total) => `Total ${total} users`
-        }}
-        rowKey="npub"
-      />
+      <TableContainer>
+        <Table
+          columns={columns}
+          dataSource={users}
+          loading={loading}
+          
+          pagination={{
+            current: pagination.page,
+            pageSize: pagination.page_size,
+            total: pagination.total_items,
+            showSizeChanger: false,
+            showTotal: (total) => `Total ${total} users`
+          }}
+          rowKey="npub"
+        />
+      </TableContainer>
 
       {/* Add User Modal */}
       <Modal

src/components/allowed-users/components/TiersConfig/TiersConfig.styles.ts

@@ -18,6 +18,29 @@ export const TiersHeader = styled.div`
   }
 `;
 
+export const TableContainer = styled.div`
+  border-radius: 12px;
+  margin: 0 2px;
+  padding-bottom: 1.5rem;
+  background-color: var(--background-color);
+  .ant-table {
+    border-radius: 12px;
+  }
+  .ant-table-tbody {
+    background-color: var(--layout-sider-bg-color);
+  }
+  .ant-table-placeholder .ant-table-cell {
+    background-color: var(--layout-sider-bg-color);
+    transition: none;
+  }
+  .ant-table-placeholder .ant-table-cell:hover {
+    background-color: var(--layout-sider-bg-color);
+  }
+  .ant-empty-description {
+    color: var(--text-light-color);
+  }
+`;
+
 export const TiersTitle = styled.h3`
   margin: 0;
   color: var(--text-main-color);
@@ -36,5 +59,5 @@ interface PriceProps {
 
 export const Price = styled.span<PriceProps>`
   font-weight: 600;
-  color: ${({ $isFree }) => $isFree ? 'var(--success-color)' : 'var(--primary-color)'};
-`;
+  color: ${({ $isFree }) => ($isFree ? 'var(--success-color)' : 'var(--primary-color)')};
+`;

src/components/allowed-users/components/TiersConfig/TiersConfig.tsx

@@ -345,13 +345,15 @@ export const TiersConfig: React.FC<TiersConfigProps> = ({
           </Radio.Group>
         </div>
       ) : (
-        <Table
-          columns={columns}
-          dataSource={settings.tiers.map((tier, index) => ({ ...tier, key: index }))}
-          pagination={false}
-          size="small"
-          locale={{ emptyText: 'No tiers configured' }}
-        />
+        <S.TableContainer>
+          <Table
+            columns={columns}
+            dataSource={settings.tiers.map((tier, index) => ({ ...tier, key: index }))}
+            pagination={false}
+            size="small"
+            locale={{ emptyText: 'No tiers configured' }}
+          />
+        </S.TableContainer>
       )}
 
       <Modal

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

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 import Card from 'antd/lib/card/Card';
-import { Table, TableProps } from 'antd';
 import { Input } from 'antd';
 import { BaseCol } from '../common/BaseCol/BaseCol';
 export const InputRoot = styled(Input)`