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')}
+