Skip to content

Commit 8bf7318

Browse files
MaphikzaMaphikza
committed
Simplify permissions UI and fix tier color theming
- Remove redundant nested card wrapper in PermissionsConfig - Remove unnecessary permission type explanations - Fix active tier colors using CSS variables for dark theme compatibility - Replace hardcoded colors with theme-aware variables
1 parent e5357fe commit 8bf7318

File tree

2 files changed

+49
-62
lines changed

2 files changed

+49
-62
lines changed

‎src/components/allowed-users/components/PermissionsConfig/PermissionsConfig.tsx‎

Lines changed: 47 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Form, Select, Card, Space, Alert } from 'antd';
2+
import { Form, Select, Space, Alert } from 'antd';
33
import { AllowedUsersSettings, AllowedUsersMode, PermissionType, MODE_CONFIGURATIONS, getPermissionLabel } from '@app/types/allowedUsers.types';
44
import * as S from './PermissionsConfig.styles';
55

@@ -62,67 +62,54 @@ export const PermissionsConfig: React.FC<PermissionsConfigProps> = ({
6262

6363
return (
6464
<S.Container>
65-
<Card title="Global Access Permissions" size="small">
66-
<Space direction="vertical" style={{ width: '100%' }}>
67-
{/* Mode description */}
68-
<Alert
69-
message={`${settings.mode.charAt(0).toUpperCase() + settings.mode.slice(1)} Mode`}
70-
description={modeConfig.description}
71-
type="info"
72-
showIcon
73-
style={{
74-
backgroundColor: '#25284B',
75-
border: '1px solid #d9d9d9',
76-
color: '#d9d9d9'
77-
}}
78-
/>
79-
80-
<Form layout="vertical">
81-
{/* Read Permission */}
82-
<Form.Item
83-
label={<span style={{ color: '#d9d9d9' }}>Read Permission</span>}
84-
help={<span style={{ color: '#d9d9d9' }}>{isReadForced ? "This permission is automatically set based on the selected mode" : "Who can read from this relay"}</span>}
85-
>
86-
<S.ForcedSelectWrapper $isForced={isReadForced}>
87-
<Select
88-
value={settings.read}
89-
onChange={handleReadPermissionChange}
90-
options={readOptions}
91-
disabled={disabled || isReadForced}
92-
placeholder="Select read permission"
93-
/>
94-
</S.ForcedSelectWrapper>
95-
</Form.Item>
65+
<Space direction="vertical" style={{ width: '100%' }}>
66+
{/* Mode description */}
67+
<Alert
68+
message={`${settings.mode.charAt(0).toUpperCase() + settings.mode.slice(1)} Mode`}
69+
description={modeConfig.description}
70+
type="info"
71+
showIcon
72+
style={{
73+
backgroundColor: '#25284B',
74+
border: '1px solid #d9d9d9',
75+
color: '#d9d9d9'
76+
}}
77+
/>
9678

97-
{/* Write Permission */}
98-
<Form.Item
99-
label={<span style={{ color: '#d9d9d9' }}>Write Permission</span>}
100-
help={<span style={{ color: '#d9d9d9' }}>{isWriteForced ? "This permission is automatically set based on the selected mode" : "Who can write to this relay"}</span>}
101-
>
102-
<S.ForcedSelectWrapper $isForced={isWriteForced}>
103-
<Select
104-
value={settings.write}
105-
onChange={handleWritePermissionChange}
106-
options={writeOptions}
107-
disabled={disabled || isWriteForced}
108-
placeholder="Select write permission"
109-
/>
110-
</S.ForcedSelectWrapper>
111-
</Form.Item>
112-
</Form>
79+
<Form layout="vertical">
80+
{/* Read Permission */}
81+
<Form.Item
82+
label={<span style={{ color: '#d9d9d9' }}>Read Permission</span>}
83+
help={<span style={{ color: '#d9d9d9' }}>{isReadForced ? "This permission is automatically set based on the selected mode" : "Who can read from this relay"}</span>}
84+
>
85+
<S.ForcedSelectWrapper $isForced={isReadForced}>
86+
<Select
87+
value={settings.read}
88+
onChange={handleReadPermissionChange}
89+
options={readOptions}
90+
disabled={disabled || isReadForced}
91+
placeholder="Select read permission"
92+
/>
93+
</S.ForcedSelectWrapper>
94+
</Form.Item>
11395

114-
{/* Permission explanations */}
115-
<S.PermissionExplanations>
116-
<h4>Permission Types:</h4>
117-
<ul>
118-
<li><strong>All Users:</strong> Everyone can access (no restrictions)</li>
119-
<li><strong>Paid Users:</strong> Only users with active paid subscriptions</li>
120-
<li><strong>Allowed Users:</strong> Only users in the allowed users list</li>
121-
<li><strong>Only Me:</strong> Only the relay owner can access</li>
122-
</ul>
123-
</S.PermissionExplanations>
124-
</Space>
125-
</Card>
96+
{/* Write Permission */}
97+
<Form.Item
98+
label={<span style={{ color: '#d9d9d9' }}>Write Permission</span>}
99+
help={<span style={{ color: '#d9d9d9' }}>{isWriteForced ? "This permission is automatically set based on the selected mode" : "Who can write to this relay"}</span>}
100+
>
101+
<S.ForcedSelectWrapper $isForced={isWriteForced}>
102+
<Select
103+
value={settings.write}
104+
onChange={handleWritePermissionChange}
105+
options={writeOptions}
106+
disabled={disabled || isWriteForced}
107+
placeholder="Select write permission"
108+
/>
109+
</S.ForcedSelectWrapper>
110+
</Form.Item>
111+
</Form>
112+
</Space>
126113
</S.Container>
127114
);
128115
};

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -296,8 +296,8 @@ export const TiersConfig: React.FC<TiersConfigProps> = ({
296296
size="small"
297297
style={{
298298
flex: 1,
299-
backgroundColor: tier.active ? '#f6ffed' : 'transparent',
300-
border: tier.active ? '1px solid #b7eb8f' : '1px solid var(--border-color-base)',
299+
backgroundColor: tier.active ? 'var(--background-color-secondary)' : 'transparent',
300+
border: tier.active ? '1px solid var(--success-color)' : '1px solid var(--border-color-base)',
301301
cursor: 'pointer'
302302
}}
303303
onClick={() => handleSelectActiveTier(index)}

0 commit comments

Comments
 (0)