Skip to content

Commit 8df8059

Browse files
MaphikzaMaphikza
committed
Improve UI styling and fix component layout issues
- Fix TiersConfig radio button alignment and syntax error - Update Alert component styling for consistent dark theme - Add ForcedSelectWrapper for better disabled state styling - Improve radio group layout with proper click handling - Fix card positioning and interaction in tier selection
1 parent 10340db commit 8df8059

4 files changed

Lines changed: 84 additions & 32 deletions

File tree

‎src/components/allowed-users/components/PermissionsConfig/PermissionsConfig.styles.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,3 +96,30 @@ export const PermissionExplanations = styled.div`
9696
}
9797
}
9898
`;
99+
100+
export const ForcedSelectWrapper = styled.div<{ $isForced: boolean }>`
101+
.ant-select {
102+
width: 100%;
103+
104+
.ant-select-selector {
105+
background-color: ${props => props.$isForced ? '#1a1d35' : '#25284B'} !important;
106+
border: ${props => props.$isForced ? '1px solid #434343' : '1px solid #d9d9d9'} !important;
107+
color: ${props => props.$isForced ? '#8c8c8c' : '#d9d9d9'} !important;
108+
}
109+
110+
.ant-select-selection-item {
111+
color: ${props => props.$isForced ? '#8c8c8c' : '#d9d9d9'} !important;
112+
}
113+
114+
&.ant-select-disabled {
115+
.ant-select-selector {
116+
background-color: ${props => props.$isForced ? '#1a1d35' : '#25284B'} !important;
117+
border: ${props => props.$isForced ? '1px solid #434343' : '1px solid #d9d9d9'} !important;
118+
}
119+
120+
.ant-select-selection-item {
121+
color: ${props => props.$isForced ? '#8c8c8c' : '#d9d9d9'} !important;
122+
}
123+
}
124+
}
125+
`;

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

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -70,35 +70,44 @@ export const PermissionsConfig: React.FC<PermissionsConfigProps> = ({
7070
description={modeConfig.description}
7171
type="info"
7272
showIcon
73+
style={{
74+
backgroundColor: '#25284B',
75+
border: '1px solid #d9d9d9',
76+
color: '#d9d9d9'
77+
}}
7378
/>
7479

7580
<Form layout="vertical">
7681
{/* Read Permission */}
7782
<Form.Item
78-
label="Read Permission"
79-
help={isReadForced ? "This permission is automatically set based on the selected mode" : "Who can read from this relay"}
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>}
8085
>
81-
<Select
82-
value={settings.read}
83-
onChange={handleReadPermissionChange}
84-
options={readOptions}
85-
disabled={disabled || isReadForced}
86-
placeholder="Select read permission"
87-
/>
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>
8895
</Form.Item>
8996

9097
{/* Write Permission */}
9198
<Form.Item
92-
label="Write Permission"
93-
help={isWriteForced ? "This permission is automatically set based on the selected mode" : "Who can write to this relay"}
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>}
94101
>
95-
<Select
96-
value={settings.write}
97-
onChange={handleWritePermissionChange}
98-
options={writeOptions}
99-
disabled={disabled || isWriteForced}
100-
placeholder="Select write permission"
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>
102111
</Form.Item>
103112
</Form>
104113

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,12 @@ export const RelayOwnerConfig: React.FC<RelayOwnerConfigProps> = ({
132132
description="In only-me mode, only the relay owner can write to this relay. Set your NPUB below to identify yourself as the owner."
133133
type="info"
134134
showIcon
135-
style={{ marginBottom: '1.5rem' }}
135+
style={{
136+
marginBottom: '1.5rem',
137+
backgroundColor: '#25284B',
138+
border: '1px solid #d9d9d9',
139+
color: '#d9d9d9'
140+
}}
136141
/>
137142

138143
<S.NpubSection>

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

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,12 @@ export const TiersConfig: React.FC<TiersConfigProps> = ({
272272
description="Choose one tier that will be applied to all free users on your public relay."
273273
type="info"
274274
showIcon
275-
style={{ marginBottom: '1rem' }}
275+
style={{
276+
marginBottom: '1rem',
277+
backgroundColor: '#25284B',
278+
border: '1px solid #d9d9d9',
279+
color: '#d9d9d9'
280+
}}
276281
/>
277282

278283
<Radio.Group
@@ -285,15 +290,17 @@ export const TiersConfig: React.FC<TiersConfigProps> = ({
285290
>
286291
<Space direction="vertical" style={{ width: '100%' }}>
287292
{settings.tiers.map((tier, index) => (
288-
<Radio key={index} value={index} style={{ width: '100%' }}>
293+
<div key={index} style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
294+
<Radio value={index} style={{ alignSelf: 'center', marginRight: '12px', flexShrink: 0 }} />
289295
<Card
290296
size="small"
291297
style={{
292-
marginLeft: '24px',
293-
width: 'calc(100% - 24px)',
298+
flex: 1,
294299
backgroundColor: tier.active ? '#f6ffed' : 'transparent',
295-
border: tier.active ? '1px solid #b7eb8f' : '1px solid var(--border-color-base)'
300+
border: tier.active ? '1px solid #b7eb8f' : '1px solid var(--border-color-base)',
301+
cursor: 'pointer'
296302
}}
303+
onClick={() => handleSelectActiveTier(index)}
297304
>
298305
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
299306
<div>
@@ -306,7 +313,10 @@ export const TiersConfig: React.FC<TiersConfigProps> = ({
306313
<Button
307314
type="text"
308315
icon={<EditOutlined />}
309-
onClick={() => handleEditTier(index)}
316+
onClick={(e) => {
317+
e.stopPropagation();
318+
handleEditTier(index);
319+
}}
310320
disabled={disabled}
311321
size="small"
312322
/>
@@ -320,6 +330,7 @@ export const TiersConfig: React.FC<TiersConfigProps> = ({
320330
type="text"
321331
danger
322332
icon={<DeleteOutlined />}
333+
onClick={(e) => e.stopPropagation()}
323334
disabled={disabled}
324335
size="small"
325336
/>
@@ -328,7 +339,7 @@ export const TiersConfig: React.FC<TiersConfigProps> = ({
328339
</div>
329340
</div>
330341
</Card>
331-
</Radio>
342+
</div>
332343
))}
333344
</Space>
334345
</Radio.Group>
@@ -368,9 +379,9 @@ export const TiersConfig: React.FC<TiersConfigProps> = ({
368379
showIcon
369380
style={{
370381
marginTop: 16,
371-
backgroundColor: '#fafafa',
382+
backgroundColor: '#25284B',
372383
border: '1px solid #d9d9d9',
373-
color: '#262626'
384+
color: '#d9d9d9'
374385
}}
375386
/>
376387
)}
@@ -382,9 +393,9 @@ export const TiersConfig: React.FC<TiersConfigProps> = ({
382393
showIcon
383394
style={{
384395
marginTop: 16,
385-
backgroundColor: '#fafafa',
396+
backgroundColor: '#25284B',
386397
border: '1px solid #d9d9d9',
387-
color: '#262626'
398+
color: '#d9d9d9'
388399
}}
389400
/>
390401
)}
@@ -396,9 +407,9 @@ export const TiersConfig: React.FC<TiersConfigProps> = ({
396407
showIcon
397408
style={{
398409
marginTop: 16,
399-
backgroundColor: '#fafafa',
410+
backgroundColor: '#25284B',
400411
border: '1px solid #d9d9d9',
401-
color: '#262626'
412+
color: '#d9d9d9'
402413
}}
403414
/>
404415
)}

0 commit comments

Comments
 (0)