diff --git a/src/app/features/common-settings/general/RoomProfile.tsx b/src/app/features/common-settings/general/RoomProfile.tsx index bade282a..2a7a1ada 100644 --- a/src/app/features/common-settings/general/RoomProfile.tsx +++ b/src/app/features/common-settings/general/RoomProfile.tsx @@ -17,8 +17,7 @@ import Linkify from 'linkify-react'; import classNames from 'classnames'; import { JoinRule, MatrixError } from 'matrix-js-sdk'; import type { StateEvents } from 'matrix-js-sdk'; -import { SequenceCard } from '../../../components/sequence-card'; -import { SequenceCardStyle } from '../../room-settings/styles.css'; +import { SectionLabel, SettingRule } from '../../settings/styles.css'; import { useRoom } from '../../../hooks/useRoom'; import { useRoomAvatar, @@ -298,14 +297,11 @@ export function RoomProfile({ permissions }: RoomProfileProps) { const handleCloseEdit = useCallback(() => setEdit(false), []); return ( - - {t('RoomSettings.profile')} - + + + {t('RoomSettings.profile')} + + {edit ? ( )} - + +
); } diff --git a/src/app/features/room-settings/general/General.tsx b/src/app/features/room-settings/general/General.tsx index cf65960c..9fff9963 100644 --- a/src/app/features/room-settings/general/General.tsx +++ b/src/app/features/room-settings/general/General.tsx @@ -3,6 +3,7 @@ import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds'; import { useTranslation } from 'react-i18next'; import { Page, PageContent, PageHeader } from '../../../components/page'; import { SettingsSection } from '../../settings/SettingsSection'; +import { SectionLabel } from '../../settings/styles.css'; import { usePowerLevels } from '../../../hooks/usePowerLevels'; import { useRoom } from '../../../hooks/useRoom'; import { @@ -55,13 +56,17 @@ export function General({ requestClose }: GeneralProps) { - - {t('RoomSettings.addresses')} + + + {t('RoomSettings.addresses')} + - - {t('RoomSettings.advanced_options')} + + + {t('RoomSettings.advanced_options')} + diff --git a/src/app/features/settings/SettingsSection.tsx b/src/app/features/settings/SettingsSection.tsx index 319b6021..52642cd4 100644 --- a/src/app/features/settings/SettingsSection.tsx +++ b/src/app/features/settings/SettingsSection.tsx @@ -1,39 +1,29 @@ import React, { Children, ReactNode } from 'react'; import { Box, Text } from 'folds'; -import { SequenceCard } from '../../components/sequence-card'; -import { ContainerColorVariants } from '../../styles/ContainerColor.css'; -import { SectionFootnote, SectionLabel, SettingRow } from './styles.css'; +import { SectionFootnote, SectionLabel, SettingFlatGroup, SettingFlatRow } from './styles.css'; type SettingsSectionProps = { - // Uppercase muted heading above the panel. Omit for an unlabelled panel. + // Uppercase muted heading above the list. Omit for an unlabelled section. label?: ReactNode; // Small caption under the label (rare — e.g. a privacy note). footnote?: ReactNode; - // Surface tone for the rows. Default `Background` = the inset darker panel - // (#0d0e11) on the SurfaceVariant page (#181a20). - variant?: NonNullable['variant']; - // Each direct child becomes one row of the grouped panel. Falsy children - // (conditional rows) are dropped so dividers/rounding stay correct. + // Each direct child becomes one row of the flat list. Falsy children + // (conditional rows) are dropped so the hairline dividers stay correct. children: ReactNode; }; /** - * A Dawn grouped settings panel: an uppercase muted label over a single - * outlined card whose rows are separated by hairline dividers (via - * `SequenceCard`'s `mergeBorder` + first/last auto-rounding). Replaces the - * stock-Cinny "one floating card per setting" pattern. + * A Dawn flat settings list: an uppercase muted label over edge-to-edge rows + * parted by hairline dividers — no card box or surface fill (iOS/Telegram + * grouped-list feel). Replaces the stock-Cinny "floating outlined card per + * setting" pattern. */ -export function SettingsSection({ - label, - footnote, - variant = 'Background', - children, -}: SettingsSectionProps) { +export function SettingsSection({ label, footnote, children }: SettingsSectionProps) { const rows = Children.toArray(children).filter(Boolean); if (rows.length === 0) return null; return ( - + {label && ( @@ -46,23 +36,19 @@ export function SettingsSection({ )} )} - +
{rows.map((row, index) => ( - {row} - +
))} -
+
); } diff --git a/src/app/features/settings/styles.css.ts b/src/app/features/settings/styles.css.ts index a192b445..3a42a1d9 100644 --- a/src/app/features/settings/styles.css.ts +++ b/src/app/features/settings/styles.css.ts @@ -5,13 +5,13 @@ import { color, config, toRem } from 'folds'; // Dawn canon's "КОМАНДЫ" / "УЧАСТНИКИ · 28" panel headers (sans, not mono). export const SectionLabel = style({ display: 'block', - fontSize: toRem(11), + fontSize: toRem(12), lineHeight: toRem(16), fontWeight: config.fontWeight.W600, - letterSpacing: '0.06em', + letterSpacing: '0.08em', textTransform: 'uppercase', color: color.Surface.OnContainer, - opacity: 0.5, + opacity: 0.55, paddingLeft: config.space.S100, paddingRight: config.space.S100, }); @@ -37,6 +37,35 @@ export const SettingRow = style({ paddingRight: config.space.S400, }); +// Dawn flat-list settings — no card box/fill. Rows sit edge-to-edge directly on +// the page, parted by hairlines (iOS/Telegram grouped-list feel). Replaces the +// outlined-filled SequenceCard panel. +export const SettingFlatGroup = style({ + display: 'flex', + flexDirection: 'column', +}); + +export const SettingFlatRow = style({ + paddingTop: config.space.S300, + paddingBottom: config.space.S300, + paddingLeft: config.space.S100, + paddingRight: config.space.S100, + selectors: { + '&:not(:last-child)': { + borderBottom: '1px solid rgba(255, 255, 255, 0.08)', + }, + }, +}); + +// A full-bleed hairline rule under a section/profile header — the "ДОСТУП ───" +// divider in the flat layout. +export const SettingRule = style({ + height: '1px', + border: 'none', + margin: 0, + backgroundColor: 'rgba(255, 255, 255, 0.08)', +}); + // JetBrains Mono for technical values — mxid, device ids, version, tokens — // the same stack the DM stream / bot surfaces use for handles & timestamps. export const Mono = style({ diff --git a/src/app/features/space-settings/general/General.tsx b/src/app/features/space-settings/general/General.tsx index b87e9cb4..e6e69669 100644 --- a/src/app/features/space-settings/general/General.tsx +++ b/src/app/features/space-settings/general/General.tsx @@ -3,6 +3,7 @@ import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds'; import { useTranslation } from 'react-i18next'; import { Page, PageContent, PageHeader } from '../../../components/page'; import { SettingsSection } from '../../settings/SettingsSection'; +import { SectionLabel } from '../../settings/styles.css'; import { usePowerLevels } from '../../../hooks/usePowerLevels'; import { useRoom } from '../../../hooks/useRoom'; import { @@ -51,13 +52,17 @@ export function General({ requestClose }: GeneralProps) { - - {t('RoomSettings.addresses')} + + + {t('RoomSettings.addresses')} + - - {t('RoomSettings.advanced_options')} + + + {t('RoomSettings.advanced_options')} +