apply new design to root cards

Author: AnthonyMarin

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);
+
 `;

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>
         )}