style(settings): group the General options into a Dawn hairline-divided section in room and space settings

src/app/features/common-settings/general/RoomEncryption.tsx

@@ -20,8 +20,6 @@ import { MatrixError } from 'matrix-js-sdk';
 import type { StateEvents } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
 import { useTranslation } from 'react-i18next';
-import { SequenceCard } from '../../../components/sequence-card';
-import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { StateEvent } from '../../../../types/matrix/room';
@@ -65,83 +63,76 @@ export function RoomEncryption({ permissions }: RoomEncryptionProps) {
   };
 
   return (
-    <SequenceCard
-      className={SequenceCardStyle}
-      variant="SurfaceVariant"
-      direction="Column"
-      gap="400"
+    <SettingTile
+      title={t('RoomSettings.room_encryption')}
+      description={
+        enabled
+          ? t('RoomSettings.encryption_enabled_desc')
+          : t('RoomSettings.encryption_disabled_desc')
+      }
+      after={
+        enabled ? (
+          <Badge size="500" variant="Success" fill="Solid" radii="300">
+            <Text size="L400">{t('RoomSettings.enabled')}</Text>
+          </Badge>
+        ) : (
+          <Button
+            size="300"
+            variant="Primary"
+            fill="Solid"
+            radii="300"
+            disabled={!canEnable}
+            onClick={() => setPrompt(true)}
+            before={enabling && <Spinner size="100" variant="Primary" fill="Solid" />}
+          >
+            <Text size="B300">{t('RoomSettings.enable')}</Text>
+          </Button>
+        )
+      }
     >
-      <SettingTile
-        title={t('RoomSettings.room_encryption')}
-        description={
-          enabled
-            ? t('RoomSettings.encryption_enabled_desc')
-            : t('RoomSettings.encryption_disabled_desc')
-        }
-        after={
-          enabled ? (
-            <Badge size="500" variant="Success" fill="Solid" radii="300">
-              <Text size="L400">{t('RoomSettings.enabled')}</Text>
-            </Badge>
-          ) : (
-            <Button
-              size="300"
-              variant="Primary"
-              fill="Solid"
-              radii="300"
-              disabled={!canEnable}
-              onClick={() => setPrompt(true)}
-              before={enabling && <Spinner size="100" variant="Primary" fill="Solid" />}
+      {enableState.status === AsyncStatus.Error && (
+        <Text style={{ color: color.Critical.Main }} size="T200">
+          {(enableState.error as MatrixError).message}
+        </Text>
+      )}
+      {prompt && (
+        <Overlay open backdrop={<OverlayBackdrop />}>
+          <OverlayCenter>
+            <FocusTrap
+              focusTrapOptions={{
+                initialFocus: false,
+                onDeactivate: () => setPrompt(false),
+                clickOutsideDeactivates: true,
+                escapeDeactivates: stopPropagation,
+              }}
             >
-              <Text size="B300">{t('RoomSettings.enable')}</Text>
-            </Button>
-          )
-        }
-      >
-        {enableState.status === AsyncStatus.Error && (
-          <Text style={{ color: color.Critical.Main }} size="T200">
-            {(enableState.error as MatrixError).message}
-          </Text>
-        )}
-        {prompt && (
-          <Overlay open backdrop={<OverlayBackdrop />}>
-            <OverlayCenter>
-              <FocusTrap
-                focusTrapOptions={{
-                  initialFocus: false,
-                  onDeactivate: () => setPrompt(false),
-                  clickOutsideDeactivates: true,
-                  escapeDeactivates: stopPropagation,
-                }}
-              >
-                <Dialog variant="Surface">
-                  <Header
-                    style={{
-                      padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
-                      borderBottomWidth: config.borderWidth.B300,
-                    }}
-                    variant="Surface"
-                    size="500"
-                  >
-                    <Box grow="Yes">
-                      <Text size="H4">{t('RoomSettings.enable_encryption')}</Text>
-                    </Box>
-                    <IconButton size="300" onClick={() => setPrompt(false)} radii="300">
-                      <Icon src={Icons.Cross} />
-                    </IconButton>
-                  </Header>
-                  <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
-                    <Text priority="400">{t('RoomSettings.enable_encryption_confirm')}</Text>
-                    <Button type="submit" variant="Primary" onClick={handleEnable}>
-                      <Text size="B400">{t('RoomSettings.enable_e2e_encryption')}</Text>
-                    </Button>
+              <Dialog variant="Surface">
+                <Header
+                  style={{
+                    padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+                    borderBottomWidth: config.borderWidth.B300,
+                  }}
+                  variant="Surface"
+                  size="500"
+                >
+                  <Box grow="Yes">
+                    <Text size="H4">{t('RoomSettings.enable_encryption')}</Text>
                   </Box>
-                </Dialog>
-              </FocusTrap>
-            </OverlayCenter>
-          </Overlay>
-        )}
-      </SettingTile>
-    </SequenceCard>
+                  <IconButton size="300" onClick={() => setPrompt(false)} radii="300">
+                    <Icon src={Icons.Cross} />
+                  </IconButton>
+                </Header>
+                <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+                  <Text priority="400">{t('RoomSettings.enable_encryption_confirm')}</Text>
+                  <Button type="submit" variant="Primary" onClick={handleEnable}>
+                    <Text size="B400">{t('RoomSettings.enable_e2e_encryption')}</Text>
+                  </Button>
+                </Box>
+              </Dialog>
+            </FocusTrap>
+          </OverlayCenter>
+        </Overlay>
+      )}
+    </SettingTile>
   );
 }

src/app/features/common-settings/general/RoomHistoryVisibility.tsx

@@ -17,8 +17,6 @@ import type { StateEvents } from 'matrix-js-sdk';
 import { RoomHistoryVisibilityEventContent } from 'matrix-js-sdk/lib/types';
 import FocusTrap from 'focus-trap-react';
 import { useTranslation } from 'react-i18next';
-import { SequenceCard } from '../../../components/sequence-card';
-import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRoom } from '../../../hooks/useRoom';
@@ -98,77 +96,70 @@ export function RoomHistoryVisibility({ permissions }: RoomHistoryVisibilityProp
   };
 
   return (
-    <SequenceCard
-      className={SequenceCardStyle}
-      variant="SurfaceVariant"
-      direction="Column"
-      gap="400"
-    >
-      <SettingTile
-        title={t('RoomSettings.history_visibility')}
-        description={t('RoomSettings.history_visibility_desc')}
-        after={
-          <PopOut
-            anchor={menuAnchor}
-            position="Bottom"
-            align="End"
-            content={
-              <FocusTrap
-                focusTrapOptions={{
-                  initialFocus: false,
-                  returnFocusOnDeactivate: false,
-                  onDeactivate: () => setMenuAnchor(undefined),
-                  clickOutsideDeactivates: true,
-                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-                  escapeDeactivates: stopPropagation,
-                }}
-              >
-                <Menu style={{ padding: config.space.S100 }}>
-                  {visibilityMenu.map((visibility) => (
-                    <MenuItem
-                      key={visibility}
-                      size="300"
-                      radii="300"
-                      onClick={() => handleChange(visibility)}
-                      aria-pressed={visibility === historyVisibility}
-                    >
-                      <Text as="span" size="T300" truncate>
-                        {visibilityStr[visibility]}
-                      </Text>
-                    </MenuItem>
-                  ))}
-                </Menu>
-              </FocusTrap>
+    <SettingTile
+      title={t('RoomSettings.history_visibility')}
+      description={t('RoomSettings.history_visibility_desc')}
+      after={
+        <PopOut
+          anchor={menuAnchor}
+          position="Bottom"
+          align="End"
+          content={
+            <FocusTrap
+              focusTrapOptions={{
+                initialFocus: false,
+                returnFocusOnDeactivate: false,
+                onDeactivate: () => setMenuAnchor(undefined),
+                clickOutsideDeactivates: true,
+                isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              <Menu style={{ padding: config.space.S100 }}>
+                {visibilityMenu.map((visibility) => (
+                  <MenuItem
+                    key={visibility}
+                    size="300"
+                    radii="300"
+                    onClick={() => handleChange(visibility)}
+                    aria-pressed={visibility === historyVisibility}
+                  >
+                    <Text as="span" size="T300" truncate>
+                      {visibilityStr[visibility]}
+                    </Text>
+                  </MenuItem>
+                ))}
+              </Menu>
+            </FocusTrap>
+          }
+        >
+          <Button
+            variant="Secondary"
+            fill="Soft"
+            size="300"
+            radii="300"
+            outlined
+            disabled={!canEdit || submitting}
+            onClick={handleOpenMenu}
+            after={
+              submitting ? (
+                <Spinner size="100" variant="Secondary" />
+              ) : (
+                <Icon size="100" src={Icons.ChevronBottom} />
+              )
             }
           >
-            <Button
-              variant="Secondary"
-              fill="Soft"
-              size="300"
-              radii="300"
-              outlined
-              disabled={!canEdit || submitting}
-              onClick={handleOpenMenu}
-              after={
-                submitting ? (
-                  <Spinner size="100" variant="Secondary" />
-                ) : (
-                  <Icon size="100" src={Icons.ChevronBottom} />
-                )
-              }
-            >
-              <Text size="B300">{visibilityStr[historyVisibility]}</Text>
-            </Button>
-          </PopOut>
-        }
-      >
-        {submitState.status === AsyncStatus.Error && (
-          <Text style={{ color: color.Critical.Main }} size="T200">
-            {(submitState.error as MatrixError).message}
-          </Text>
-        )}
-      </SettingTile>
-    </SequenceCard>
+            <Text size="B300">{visibilityStr[historyVisibility]}</Text>
+          </Button>
+        </PopOut>
+      }
+    >
+      {submitState.status === AsyncStatus.Error && (
+        <Text style={{ color: color.Critical.Main }} size="T200">
+          {(submitState.error as MatrixError).message}
+        </Text>
+      )}
+    </SettingTile>
   );
 }

src/app/features/common-settings/general/RoomJoinRules.tsx

@@ -11,8 +11,6 @@ import {
   useJoinRuleIcons,
   useRoomJoinRuleLabel,
 } from '../../../components/JoinRulesSwitcher';
-import { SequenceCard } from '../../../components/sequence-card';
-import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRoom } from '../../../hooks/useRoom';
@@ -123,37 +121,30 @@ export function RoomJoinRules({ permissions }: RoomJoinRulesProps) {
   const submitting = submitState.status === AsyncStatus.Loading;
 
   return (
-    <SequenceCard
-      className={SequenceCardStyle}
-      variant="SurfaceVariant"
-      direction="Column"
-      gap="400"
+    <SettingTile
+      title={room.isSpaceRoom() ? t('RoomSettings.space_access') : t('RoomSettings.room_access')}
+      description={
+        room.isSpaceRoom()
+          ? t('RoomSettings.space_access_desc')
+          : t('RoomSettings.room_access_desc')
+      }
+      after={
+        <JoinRulesSwitcher
+          icons={icons}
+          labels={labels}
+          rules={joinRules}
+          value={rule}
+          onChange={submit}
+          disabled={!canEdit || submitting}
+          changing={submitting}
+        />
+      }
     >
-      <SettingTile
-        title={room.isSpaceRoom() ? t('RoomSettings.space_access') : t('RoomSettings.room_access')}
-        description={
-          room.isSpaceRoom()
-            ? t('RoomSettings.space_access_desc')
-            : t('RoomSettings.room_access_desc')
-        }
-        after={
-          <JoinRulesSwitcher
-            icons={icons}
-            labels={labels}
-            rules={joinRules}
-            value={rule}
-            onChange={submit}
-            disabled={!canEdit || submitting}
-            changing={submitting}
-          />
-        }
-      >
-        {submitState.status === AsyncStatus.Error && (
-          <Text style={{ color: color.Critical.Main }} size="T200">
-            {(submitState.error as MatrixError).message}
-          </Text>
-        )}
-      </SettingTile>
-    </SequenceCard>
+      {submitState.status === AsyncStatus.Error && (
+        <Text style={{ color: color.Critical.Main }} size="T200">
+          {(submitState.error as MatrixError).message}
+        </Text>
+      )}
+    </SettingTile>
   );
 }

src/app/features/common-settings/general/RoomPublish.tsx

@@ -3,8 +3,6 @@ import { Box, color, Spinner, Switch, Text } from 'folds';
 import { useTranslation } from 'react-i18next';
 import { JoinRule, MatrixError } from 'matrix-js-sdk';
 import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
-import { SequenceCard } from '../../../components/sequence-card';
-import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useRoom } from '../../../hooks/useRoom';
 import { useRoomDirectoryVisibility } from '../../../hooks/useRoomDirectoryVisibility';
@@ -41,44 +39,37 @@ export function RoomPublish({ permissions }: RoomPublishProps) {
     rule === JoinRule.Public || rule === JoinRule.Knock || rule === 'knock_restricted';
 
   return (
-    <SequenceCard
-      className={SequenceCardStyle}
-      variant="SurfaceVariant"
-      direction="Column"
-      gap="400"
+    <SettingTile
+      title={t('RoomSettings.publish_to_directory')}
+      description={
+        room.isSpaceRoom()
+          ? t('RoomSettings.publish_space_desc')
+          : t('RoomSettings.publish_room_desc')
+      }
+      after={
+        <Box gap="200" alignItems="Center">
+          {loading && <Spinner variant="Secondary" />}
+          {!loading && visibilityState.status === AsyncStatus.Success && (
+            <Switch
+              value={visibilityState.data}
+              onChange={toggleVisibility}
+              disabled={!canEditCanonical || !validRule}
+            />
+          )}
+        </Box>
+      }
     >
-      <SettingTile
-        title={t('RoomSettings.publish_to_directory')}
-        description={
-          room.isSpaceRoom()
-            ? t('RoomSettings.publish_space_desc')
-            : t('RoomSettings.publish_room_desc')
-        }
-        after={
-          <Box gap="200" alignItems="Center">
-            {loading && <Spinner variant="Secondary" />}
-            {!loading && visibilityState.status === AsyncStatus.Success && (
-              <Switch
-                value={visibilityState.data}
-                onChange={toggleVisibility}
-                disabled={!canEditCanonical || !validRule}
-              />
-            )}
-          </Box>
-        }
-      >
-        {visibilityState.status === AsyncStatus.Error && (
-          <Text style={{ color: color.Critical.Main }} size="T200">
-            {(visibilityState.error as MatrixError).message}
-          </Text>
-        )}
+      {visibilityState.status === AsyncStatus.Error && (
+        <Text style={{ color: color.Critical.Main }} size="T200">
+          {(visibilityState.error as MatrixError).message}
+        </Text>
+      )}
 
-        {toggleState.status === AsyncStatus.Error && (
-          <Text style={{ color: color.Critical.Main }} size="T200">
-            {(toggleState.error as MatrixError).message}
-          </Text>
-        )}
-      </SettingTile>
-    </SequenceCard>
+      {toggleState.status === AsyncStatus.Error && (
+        <Text style={{ color: color.Critical.Main }} size="T200">
+          {(toggleState.error as MatrixError).message}
+        </Text>
+      )}
+    </SettingTile>
   );
 }

src/app/features/room-settings/general/General.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 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 { usePowerLevels } from '../../../hooks/usePowerLevels';
 import { useRoom } from '../../../hooks/useRoom';
 import {
@@ -48,13 +49,12 @@ export function General({ requestClose }: GeneralProps) {
           <PageContent>
             <Box direction="Column" gap="700">
               <RoomProfile permissions={permissions} />
-              <Box direction="Column" gap="100">
-                <Text size="L400">{t('RoomSettings.options')}</Text>
+              <SettingsSection label={t('RoomSettings.options')}>
                 <RoomJoinRules permissions={permissions} />
                 <RoomHistoryVisibility permissions={permissions} />
                 <RoomEncryption permissions={permissions} />
                 <RoomPublish permissions={permissions} />
-              </Box>
+              </SettingsSection>
               <Box direction="Column" gap="100">
                 <Text size="L400">{t('RoomSettings.addresses')}</Text>
                 <RoomPublishedAddresses permissions={permissions} />

src/app/features/space-settings/general/General.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 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 { usePowerLevels } from '../../../hooks/usePowerLevels';
 import { useRoom } from '../../../hooks/useRoom';
 import {
@@ -46,11 +47,10 @@ export function General({ requestClose }: GeneralProps) {
           <PageContent>
             <Box direction="Column" gap="700">
               <RoomProfile permissions={permissions} />
-              <Box direction="Column" gap="100">
-                <Text size="L400">{t('RoomSettings.options')}</Text>
+              <SettingsSection label={t('RoomSettings.options')}>
                 <RoomJoinRules permissions={permissions} />
                 <RoomPublish permissions={permissions} />
-              </Box>
+              </SettingsSection>
               <Box direction="Column" gap="100">
                 <Text size="L400">{t('RoomSettings.addresses')}</Text>
                 <RoomPublishedAddresses permissions={permissions} />