Skip to content

Commit e53d010

Browse files
MaphikzaMaphikza
committed
refactor: improve UI for Allow Unregistered Kinds toggle
- Wrap toggle in CollapsibleSection for better organization - Add descriptive help text explaining the feature - Enhance warning display with styled container and borders - Improve responsive layout for both desktop and mobile views - Better visual hierarchy with proper spacing and typography
1 parent 4111daa commit e53d010

2 files changed

Lines changed: 79 additions & 51 deletions

File tree

‎src/components/relay-settings/layouts/DesktopLayout.tsx‎

Lines changed: 38 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import { NetworkSection } from '@app/components/relay-settings/sections/NetworkS
1212
import { KindsSection } from '@app/components/relay-settings/sections/KindsSection';
1313
import { MediaSection } from '@app/components/relay-settings/sections/MediaSection';
1414
import { ModerationSection } from '@app/components/relay-settings/sections/ModerationSection';
15+
import { CollapsibleSection } from '@app/components/relay-settings/shared/CollapsibleSection/CollapsibleSection';
16+
import { BaseSwitch } from '@app/components/common/BaseSwitch/BaseSwitch';
1517
import { useTranslation } from 'react-i18next';
1618

1719
interface DesktopLayoutProps {
@@ -122,32 +124,42 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = ({
122124
</BaseRow>
123125

124126
<BaseCol xs={24}>
125-
<S.SwitchContainer
126-
style={{
127-
width: '20rem',
128-
display: 'grid',
129-
paddingTop: '3rem',
130-
gap: '.5rem',
131-
gridTemplateColumns: '2fr 1fr',
132-
marginBottom: '1.5rem',
133-
}}
134-
>
135-
<S.LabelSpan>
136-
{t('common.allowUnregisteredKinds')}
137-
{allowUnregisteredKinds && (
138-
<span style={{ color: '#ff4d4f', fontSize: '0.9em', display: 'block', marginTop: '0.5rem' }}>
139-
⚠️ {t('common.allowUnregisteredKindsWarning')}
140-
</span>
141-
)}
142-
</S.LabelSpan>
143-
<S.LargeSwitch
144-
className="allowUnregisteredSwitch"
145-
checkedChildren="ON"
146-
unCheckedChildren="OFF"
147-
checked={allowUnregisteredKinds}
148-
onChange={onAllowUnregisteredKindsChange}
149-
/>
150-
</S.SwitchContainer>
127+
<CollapsibleSection header="Allow Unregistered Kind Numbers">
128+
<S.Card>
129+
<BaseCol span={24}>
130+
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
131+
<div style={{ flex: 1, marginRight: '2rem' }}>
132+
<h4 style={{ margin: '0 0 0.5rem 0', fontSize: '1rem', fontWeight: 500 }}>
133+
{t('common.allowUnregisteredKinds')}
134+
</h4>
135+
<p style={{ margin: 0, fontSize: '0.9rem', color: '#c5d3e0' }}>
136+
Enable this to allow events with kind numbers that don't have specific handlers in the relay.
137+
</p>
138+
{allowUnregisteredKinds && (
139+
<div style={{
140+
marginTop: '1rem',
141+
padding: '0.75rem 1rem',
142+
backgroundColor: 'rgba(255, 77, 79, 0.1)',
143+
borderRadius: '4px',
144+
border: '1px solid rgba(255, 77, 79, 0.3)'
145+
}}>
146+
<span style={{ color: '#ff4d4f', fontSize: '0.9rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
147+
<span style={{ fontSize: '1.2rem' }}>⚠️</span>
148+
{t('common.allowUnregisteredKindsWarning')}
149+
</span>
150+
</div>
151+
)}
152+
</div>
153+
<BaseSwitch
154+
checkedChildren="ON"
155+
unCheckedChildren="OFF"
156+
checked={allowUnregisteredKinds}
157+
onChange={onAllowUnregisteredKindsChange}
158+
/>
159+
</div>
160+
</BaseCol>
161+
</S.Card>
162+
</CollapsibleSection>
151163

152164
<KindsSection
153165
allowUnregisteredKinds={allowUnregisteredKinds}

‎src/components/relay-settings/layouts/MobileLayout.tsx‎

Lines changed: 41 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { NetworkSection } from '@app/components/relay-settings/sections/NetworkS
99
import { KindsSection } from '@app/components/relay-settings/sections/KindsSection';
1010
import { MediaSection } from '@app/components/relay-settings/sections/MediaSection';
1111
import { ModerationSection } from '@app/components/relay-settings/sections/ModerationSection';
12+
import { CollapsibleSection } from '@app/components/relay-settings/shared/CollapsibleSection/CollapsibleSection';
13+
import { BaseSwitch } from '@app/components/common/BaseSwitch/BaseSwitch';
1214
import { useTranslation } from 'react-i18next';
1315

1416
interface MobileLayoutProps {
@@ -113,31 +115,45 @@ export const MobileLayout: React.FC<MobileLayoutProps> = ({
113115
onModerationModeChange={onModerationModeChange}
114116
/>
115117

116-
<S.SwitchContainer
117-
style={{
118-
display: 'grid',
119-
paddingTop: '2rem',
120-
gridTemplateColumns: '8rem 6.5rem',
121-
marginBottom: '1.5rem',
122-
marginTop: '1rem',
123-
}}
124-
>
125-
<S.LabelSpan>
126-
{t('common.allowUnregisteredKinds')}
127-
{allowUnregisteredKinds && (
128-
<span style={{ color: '#ff4d4f', fontSize: '0.8em', display: 'block', marginTop: '0.3rem' }}>
129-
⚠️ {t('common.allowUnregisteredKindsWarning')}
130-
</span>
131-
)}
132-
</S.LabelSpan>
133-
<S.LargeSwitch
134-
className="allowUnregisteredSwitch"
135-
checkedChildren="ON"
136-
unCheckedChildren="OFF"
137-
checked={allowUnregisteredKinds}
138-
onChange={onAllowUnregisteredKindsChange}
139-
/>
140-
</S.SwitchContainer>
118+
<CollapsibleSection header="Allow Unregistered Kind Numbers">
119+
<S.Card>
120+
<BaseCol span={24}>
121+
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
122+
<div>
123+
<h4 style={{ margin: '0 0 0.5rem 0', fontSize: '1rem', fontWeight: 500 }}>
124+
{t('common.allowUnregisteredKinds')}
125+
</h4>
126+
<p style={{ margin: 0, fontSize: '0.85rem', color: '#c5d3e0' }}>
127+
Enable this to allow events with kind numbers that don't have specific handlers in the relay.
128+
</p>
129+
</div>
130+
131+
<div style={{ display: 'flex', justifyContent: 'flex-start' }}>
132+
<BaseSwitch
133+
checkedChildren="ON"
134+
unCheckedChildren="OFF"
135+
checked={allowUnregisteredKinds}
136+
onChange={onAllowUnregisteredKindsChange}
137+
/>
138+
</div>
139+
140+
{allowUnregisteredKinds && (
141+
<div style={{
142+
padding: '0.75rem',
143+
backgroundColor: 'rgba(255, 77, 79, 0.1)',
144+
borderRadius: '4px',
145+
border: '1px solid rgba(255, 77, 79, 0.3)'
146+
}}>
147+
<span style={{ color: '#ff4d4f', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
148+
<span style={{ fontSize: '1.1rem' }}>⚠️</span>
149+
{t('common.allowUnregisteredKindsWarning')}
150+
</span>
151+
</div>
152+
)}
153+
</div>
154+
</BaseCol>
155+
</S.Card>
156+
</CollapsibleSection>
141157

142158
<KindsSection
143159
allowUnregisteredKinds={allowUnregisteredKinds}

0 commit comments

Comments
 (0)