From b7ddac2028d4eaa2746bdf4c2d9e2f89d9c072fe Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Thu, 3 Jul 2025 07:33:37 -0700
Subject: [PATCH 1/6] apply new design to root cards

---
 .../layouts/AllowedUsersLayout.styles.ts      |  6 ++++++
 .../layouts/AllowedUsersLayout.tsx            | 20 +++++++++----------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/allowed-users/layouts/AllowedUsersLayout.styles.ts b/src/components/allowed-users/layouts/AllowedUsersLayout.styles.ts
index 42ed95f7..ae683fb0 100644
--- a/src/components/allowed-users/layouts/AllowedUsersLayout.styles.ts
+++ b/src/components/allowed-users/layouts/AllowedUsersLayout.styles.ts
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
+import { Card } from 'antd';
 
 export const Container = styled.div`
   padding: 1.5rem;
@@ -64,4 +65,9 @@ export const ChangesIndicator = styled.span`
   color: var(--warning-color);
   font-size: 14px;
   font-style: italic;
+`;
+export const ContentCard = styled(Card)`
+  background: var(--secondary-background-color);
+  border-color: var(--border-base-color);
+
 `;
\ No newline at end of file
diff --git a/src/components/allowed-users/layouts/AllowedUsersLayout.tsx b/src/components/allowed-users/layouts/AllowedUsersLayout.tsx
index b88cf1b4..76fdfc95 100644
--- a/src/components/allowed-users/layouts/AllowedUsersLayout.tsx
+++ b/src/components/allowed-users/layouts/AllowedUsersLayout.tsx
@@ -155,40 +155,40 @@ export const AllowedUsersLayout: React.FC = () => {
 
       <Row gutter={[24, 24]}>
         <Col span={24}>
-          <Card title="Relay Mode" loading={loading}>
+          <S.ContentCard title="Relay Mode" loading={loading}>
             <ModeSelector
               currentMode={currentMode}
               onModeChange={handleModeChange}
               disabled={loading || saving}
             />
-          </Card>
+          </S.ContentCard>
         </Col>
 
         <Col span={24}>
-          <Card title="Global Permissions" loading={loading}>
+          <S.ContentCard title="Global Permissions" loading={loading}>
             <PermissionsConfig
               settings={localSettings}
               onSettingsChange={handleSettingsUpdate}
               disabled={loading || saving}
             />
-          </Card>
+          </S.ContentCard>
         </Col>
 
         {showRelayOwnerConfig && (
           <Col span={24}>
-            <Card title="Relay Owner Configuration" loading={loading}>
+            <S.ContentCard title="Relay Owner Configuration" loading={loading}>
               <RelayOwnerConfig
                 settings={localSettings}
                 onSettingsChange={handleSettingsUpdate}
                 disabled={loading || saving}
               />
-            </Card>
+            </S.ContentCard>
           </Col>
         )}
 
         {showTiers && (
           <Col span={24}>
-            <Card title={
+            <S.ContentCard title={
               currentMode === 'public' ? 'Free Tier Configuration' : 
               currentMode === 'only-me' ? 'Only Me Tiers' : 
               'Subscription Tiers'
@@ -199,18 +199,18 @@ export const AllowedUsersLayout: React.FC = () => {
                 onSettingsChange={handleSettingsUpdate}
                 disabled={loading || saving}
               />
-            </Card>
+            </S.ContentCard>
           </Col>
         )}
 
         {showNpubManagement && (
           <Col span={24}>
-            <Card title="Allowed Users Management">
+            <S.ContentCard title="Allowed Users Management">
               <NPubManagement
                 settings={localSettings}
                 mode={currentMode}
               />
-            </Card>
+            </S.ContentCard>
           </Col>
         )}
 

From 74d405dccfd28075144d563e1daa5b82a95b6e00 Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Thu, 3 Jul 2025 08:26:40 -0700
Subject: [PATCH 2/6] add styling for table on allowed user's page

---
 .../NPubManagement/NPubManagement.tsx         | 30 +++++++++++--------
 .../TiersConfig/TiersConfig.styles.ts         | 27 +++++++++++++++--
 .../components/TiersConfig/TiersConfig.tsx    | 16 +++++-----
 .../blocked-pubkeys/BlockedPubkeys.styles.ts  |  1 -
 4 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/src/components/allowed-users/components/NPubManagement/NPubManagement.tsx b/src/components/allowed-users/components/NPubManagement/NPubManagement.tsx
index 950af278..70951da6 100644
--- a/src/components/allowed-users/components/NPubManagement/NPubManagement.tsx
+++ b/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
diff --git a/src/components/allowed-users/components/TiersConfig/TiersConfig.styles.ts b/src/components/allowed-users/components/TiersConfig/TiersConfig.styles.ts
index a278f933..193e60fb 100644
--- a/src/components/allowed-users/components/TiersConfig/TiersConfig.styles.ts
+++ b/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)'};
-`;
\ No newline at end of file
+  color: ${({ $isFree }) => ($isFree ? 'var(--success-color)' : 'var(--primary-color)')};
+`;
diff --git a/src/components/allowed-users/components/TiersConfig/TiersConfig.tsx b/src/components/allowed-users/components/TiersConfig/TiersConfig.tsx
index c7a27bdf..de7c922a 100644
--- a/src/components/allowed-users/components/TiersConfig/TiersConfig.tsx
+++ b/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
diff --git a/src/components/blocked-pubkeys/BlockedPubkeys.styles.ts b/src/components/blocked-pubkeys/BlockedPubkeys.styles.ts
index 3a65298b..0bdb5696 100644
--- a/src/components/blocked-pubkeys/BlockedPubkeys.styles.ts
+++ b/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)`

From 5182c2f954cbfb7440ec22908cc78fb375eba9ac Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Thu, 3 Jul 2025 08:35:54 -0700
Subject: [PATCH 3/6] adjust colors on select arrow

---
 .../PermissionsConfig.styles.ts               | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/allowed-users/components/PermissionsConfig/PermissionsConfig.styles.ts b/src/components/allowed-users/components/PermissionsConfig/PermissionsConfig.styles.ts
index 8698ec08..779e4eea 100644
--- a/src/components/allowed-users/components/PermissionsConfig/PermissionsConfig.styles.ts
+++ b/src/components/allowed-users/components/PermissionsConfig/PermissionsConfig.styles.ts
@@ -79,7 +79,7 @@ export const PermissionExplanations = styled.div`
   ul {
     margin: 0;
     padding-left: 1.25rem;
-    
+
     li {
       margin-bottom: 0.5rem;
       font-size: 13px;
@@ -100,25 +100,27 @@ export const PermissionExplanations = styled.div`
 export const ForcedSelectWrapper = styled.div<{ $isForced: boolean }>`
   .ant-select {
     width: 100%;
-    
+    .ant-select-arrow{
+      color: ${(props) => (!props.$isForced ? `var(--text-main-color)` : `var(--text-light-color)`)};
+    }
     .ant-select-selector {
-      background-color: ${props => props.$isForced ? '#1a1d35' : '#25284B'} !important;
-      border: ${props => props.$isForced ? '1px solid #434343' : '1px solid #d9d9d9'} !important;
-      color: ${props => props.$isForced ? '#8c8c8c' : '#d9d9d9'} !important;
+      background-color: ${(props) => (props.$isForced ? '#1a1d35' : '#25284B')} !important;
+      border: ${(props) => (props.$isForced ? '1px solid #434343' : '1px solid #d9d9d9')} !important;
+      color: ${(props) => (props.$isForced ? '#8c8c8c' : '#d9d9d9')} !important;
     }
-    
+
     .ant-select-selection-item {
-      color: ${props => props.$isForced ? '#8c8c8c' : '#d9d9d9'} !important;
+      color: ${(props) => (props.$isForced ? '#8c8c8c' : '#d9d9d9')} !important;
     }
-    
+
     &.ant-select-disabled {
       .ant-select-selector {
-        background-color: ${props => props.$isForced ? '#1a1d35' : '#25284B'} !important;
-        border: ${props => props.$isForced ? '1px solid #434343' : '1px solid #d9d9d9'} !important;
+        background-color: ${(props) => (props.$isForced ? '#1a1d35' : '#25284B')} !important;
+        border: ${(props) => (props.$isForced ? '1px solid #434343' : '1px solid #d9d9d9')} !important;
       }
-      
+
       .ant-select-selection-item {
-        color: ${props => props.$isForced ? '#8c8c8c' : '#d9d9d9'} !important;
+        color: ${(props) => (props.$isForced ? '#8c8c8c' : '#d9d9d9')} !important;
       }
     }
   }

From 85d165ddad1f8f295f10e0cbf85db21be3eaba09 Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Thu, 3 Jul 2025 09:29:41 -0700
Subject: [PATCH 4/6] update New Tier form inputs and text

---
 .../components/TierEditor/TierEditor.tsx      | 96 ++++++++++---------
 src/styles/themes/reusableComponentStyles.ts  |  6 ++
 2 files changed, 59 insertions(+), 43 deletions(-)
 create mode 100644 src/styles/themes/reusableComponentStyles.ts

diff --git a/src/components/allowed-users/components/TierEditor/TierEditor.tsx b/src/components/allowed-users/components/TierEditor/TierEditor.tsx
index 2a8c8789..9cd72fac 100644
--- a/src/components/allowed-users/components/TierEditor/TierEditor.tsx
+++ b/src/components/allowed-users/components/TierEditor/TierEditor.tsx
@@ -1,14 +1,16 @@
 import React, { useState, useEffect } from 'react';
-import { Input, Select, Checkbox, Space, Typography, Alert } from 'antd';
-import { 
-  TierDisplayFormat, 
-  DataUnit, 
-  validateTierFormat, 
+import { Select, Checkbox, Space, Typography, Alert } from 'antd';
+import {
+  TierDisplayFormat,
+  DataUnit,
+  validateTierFormat,
   displayToFriendlyString,
   bytesToDisplayFormat,
-  TIER_VALIDATION
+  TIER_VALIDATION,
 } from '@app/utils/tierConversion.utils';
 import { AllowedUsersTier } from '@app/types/allowedUsers.types';
+import { StyledInput } from '@app/styles/themes/reusableComponentStyles';
+import styled from 'styled-components';
 
 const { Text } = Typography;
 const { Option } = Select;
@@ -21,12 +23,21 @@ interface TierEditorProps {
   showPrice?: boolean;
 }
 
+const PreviewTextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  .ant-typography {
+    color: var(--text-main-color);
+  }
+`;
+
 export const TierEditor: React.FC<TierEditorProps> = ({
   tier,
   onTierChange,
   disabled = false,
   showName = true,
-  showPrice = true
+  showPrice = true,
 }) => {
   // Convert backend format to display format for editing
   const [displayFormat, setDisplayFormat] = useState<TierDisplayFormat>(() => {
@@ -49,9 +60,10 @@ export const TierEditor: React.FC<TierEditorProps> = ({
       const updatedTier: AllowedUsersTier = {
         name,
         price_sats: priceSats,
-        monthly_limit_bytes: displayFormat.unlimited ? 0 : 
-          Math.round(displayFormat.value * getUnitMultiplier(displayFormat.unit)),
-        unlimited: displayFormat.unlimited
+        monthly_limit_bytes: displayFormat.unlimited
+          ? 0
+          : Math.round(displayFormat.value * getUnitMultiplier(displayFormat.unit)),
+        unlimited: displayFormat.unlimited,
       };
       onTierChange(updatedTier);
     }
@@ -59,24 +71,28 @@ export const TierEditor: React.FC<TierEditorProps> = ({
 
   const getUnitMultiplier = (unit: DataUnit): number => {
     switch (unit) {
-      case 'MB': return 1048576;      // 1024 * 1024
-      case 'GB': return 1073741824;   // 1024 * 1024 * 1024
-      case 'TB': return 1099511627776; // 1024 * 1024 * 1024 * 1024
-      default: return 1048576;
+      case 'MB':
+        return 1048576; // 1024 * 1024
+      case 'GB':
+        return 1073741824; // 1024 * 1024 * 1024
+      case 'TB':
+        return 1099511627776; // 1024 * 1024 * 1024 * 1024
+      default:
+        return 1048576;
     }
   };
 
   const handleValueChange = (value: string) => {
     const numericValue = parseFloat(value) || 0;
-    setDisplayFormat(prev => ({ ...prev, value: numericValue }));
+    setDisplayFormat((prev) => ({ ...prev, value: numericValue }));
   };
 
   const handleUnitChange = (unit: DataUnit) => {
-    setDisplayFormat(prev => ({ ...prev, unit }));
+    setDisplayFormat((prev) => ({ ...prev, unit }));
   };
 
   const handleUnlimitedChange = (unlimited: boolean) => {
-    setDisplayFormat(prev => ({ ...prev, unlimited }));
+    setDisplayFormat((prev) => ({ ...prev, unlimited }));
   };
 
   const handleNameChange = (value: string) => {
@@ -94,7 +110,7 @@ export const TierEditor: React.FC<TierEditorProps> = ({
       {showName && (
         <div>
           <Text strong>Tier Name</Text>
-          <Input
+          <StyledInput
             value={name}
             onChange={(e) => handleNameChange(e.target.value)}
             placeholder="Enter tier name"
@@ -108,7 +124,7 @@ export const TierEditor: React.FC<TierEditorProps> = ({
       {showPrice && (
         <div>
           <Text strong>Price (sats)</Text>
-          <Input
+          <StyledInput
             type="number"
             value={priceSats}
             onChange={(e) => handlePriceChange(e.target.value)}
@@ -123,7 +139,7 @@ export const TierEditor: React.FC<TierEditorProps> = ({
       {/* Data Limit */}
       <div>
         <Text strong>Monthly Data Limit</Text>
-        
+
         {/* Unlimited Checkbox */}
         <div style={{ marginTop: 8, marginBottom: 8 }}>
           <Checkbox
@@ -138,7 +154,7 @@ export const TierEditor: React.FC<TierEditorProps> = ({
         {/* Value and Unit Inputs */}
         {!displayFormat.unlimited && (
           <Space.Compact style={{ width: '100%' }}>
-            <Input
+            <StyledInput
               type="number"
               value={displayFormat.value || ''}
               onChange={(e) => handleValueChange(e.target.value)}
@@ -147,12 +163,7 @@ export const TierEditor: React.FC<TierEditorProps> = ({
               min={TIER_VALIDATION.MIN_VALUE}
               style={{ flex: 1 }}
             />
-            <Select
-              value={displayFormat.unit}
-              onChange={handleUnitChange}
-              disabled={disabled}
-              style={{ width: 80 }}
-            >
+            <Select value={displayFormat.unit} onChange={handleUnitChange} disabled={disabled} style={{ width: 80 }}>
               <Option value="MB">MB</Option>
               <Option value="GB">GB</Option>
               <Option value="TB">TB</Option>
@@ -161,29 +172,28 @@ export const TierEditor: React.FC<TierEditorProps> = ({
         )}
 
         {/* Preview */}
-        <div style={{ marginTop: 8 }}>
-          <Text type="secondary">
-            Preview: {displayToFriendlyString(displayFormat)}
-          </Text>
-        </div>
+        <PreviewTextWrapper>
+          <div style={{ marginTop: 8 }}>
+            <Text color="" type="secondary">
+              Preview: {displayToFriendlyString(displayFormat)}
+            </Text>
+          </div>
+        </PreviewTextWrapper>
 
         {/* Validation Error */}
         {!isValid && validation.error && (
-          <Alert
-            message={validation.error}
-            type="error"
-            style={{ marginTop: 8 }}
-            showIcon
-          />
+          <Alert message={validation.error} type="error" style={{ marginTop: 8 }} showIcon />
         )}
       </div>
 
       {/* Helpful Information */}
-      <div style={{ marginTop: 8 }}>
-        <Text type="secondary" style={{ fontSize: '12px' }}>
-          Valid range: 1 MB to 1 TB
-        </Text>
-      </div>
+      <PreviewTextWrapper>
+        <div style={{ marginTop: 8 }}>
+          <Text type="secondary" style={{ fontSize: '12px' }}>
+            Valid range: 1 MB to 1 TB
+          </Text>
+        </div>
+      </PreviewTextWrapper>
     </Space>
   );
 };
diff --git a/src/styles/themes/reusableComponentStyles.ts b/src/styles/themes/reusableComponentStyles.ts
new file mode 100644
index 00000000..3c238fb4
--- /dev/null
+++ b/src/styles/themes/reusableComponentStyles.ts
@@ -0,0 +1,6 @@
+import styled from "styled-components";
+import { Input } from "antd";
+
+export const StyledInput = styled(Input)`
+  background-color: var(--layout-sider-bg-color) !important;
+`;
\ No newline at end of file

From 6815e51967fe5fe90db99687317c0f5f01a6b597 Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Thu, 3 Jul 2025 09:35:05 -0700
Subject: [PATCH 5/6] fix color of select arrow

---
 .../components/TierEditor/TierEditor.tsx       | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/allowed-users/components/TierEditor/TierEditor.tsx b/src/components/allowed-users/components/TierEditor/TierEditor.tsx
index 9cd72fac..1c6a7799 100644
--- a/src/components/allowed-users/components/TierEditor/TierEditor.tsx
+++ b/src/components/allowed-users/components/TierEditor/TierEditor.tsx
@@ -31,7 +31,11 @@ const PreviewTextWrapper = styled.div`
     color: var(--text-main-color);
   }
 `;
-
+const SelectWrapper = styled.div`
+.ant-select-arrow {
+  color: var(--text-main-color);
+}
+`
 export const TierEditor: React.FC<TierEditorProps> = ({
   tier,
   onTierChange,
@@ -163,11 +167,13 @@ export const TierEditor: React.FC<TierEditorProps> = ({
               min={TIER_VALIDATION.MIN_VALUE}
               style={{ flex: 1 }}
             />
-            <Select value={displayFormat.unit} onChange={handleUnitChange} disabled={disabled} style={{ width: 80 }}>
-              <Option value="MB">MB</Option>
-              <Option value="GB">GB</Option>
-              <Option value="TB">TB</Option>
-            </Select>
+            <SelectWrapper>
+              <Select value={displayFormat.unit} onChange={handleUnitChange} disabled={disabled} style={{ width: 80 }}>
+                <Option value="MB">MB</Option>
+                <Option value="GB">GB</Option>
+                <Option value="TB">TB</Option>
+              </Select>
+            </SelectWrapper>
           </Space.Compact>
         )}
 

From 585084d4ddc6c4b57619336b065d6a6f38e55f58 Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Thu, 3 Jul 2025 09:38:26 -0700
Subject: [PATCH 6/6] added border to tables

---
 .../allowed-users/components/TiersConfig/TiersConfig.styles.ts   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/allowed-users/components/TiersConfig/TiersConfig.styles.ts b/src/components/allowed-users/components/TiersConfig/TiersConfig.styles.ts
index 193e60fb..e8c096cb 100644
--- a/src/components/allowed-users/components/TiersConfig/TiersConfig.styles.ts
+++ b/src/components/allowed-users/components/TiersConfig/TiersConfig.styles.ts
@@ -23,6 +23,7 @@ export const TableContainer = styled.div`
   margin: 0 2px;
   padding-bottom: 1.5rem;
   background-color: var(--background-color);
+  border: 1px solid var(--border-base-color);
   .ant-table {
     border-radius: 12px;
   }