style(navigator): unify room-settings tabs with section cards

Introduce a reusable NavigatorRoomSettingsSectionView card (rounded
bg-gray-100 panel with a bold-small title) and apply it across the
Access, VIP/Chat, Moderation and Rights tabs so every room-settings
screen matches the Base and Misc tab styling. Pure visual restyle —
handleChange wiring, events, composers and validations are unchanged.
This commit is contained in:
simoleo89
2026-05-31 09:20:35 +02:00
parent 5bc3c4ef34
commit c9df2d8765
5 changed files with 152 additions and 131 deletions
@@ -0,0 +1,22 @@
import { FC, ReactNode } from 'react';
import { Column, Text } from '../../../../common';
interface NavigatorRoomSettingsSectionViewProps
{
title?: string;
gap?: 1 | 2 | 3;
className?: string;
children: ReactNode;
}
export const NavigatorRoomSettingsSectionView: FC<NavigatorRoomSettingsSectionViewProps> = props =>
{
const { title = null, gap = 2, className = '', children = null } = props;
return (
<Column gap={ gap } className={ `rounded bg-gray-100 p-3 ${ className }`.trim() }>
{ title && <Text bold small>{ title }</Text> }
{ children }
</Column>
);
};