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,12 +63,6 @@ export function RoomEncryption({ permissions }: RoomEncryptionProps) {
   };
 
   return (
-    <SequenceCard
-      className={SequenceCardStyle}
-      variant="SurfaceVariant"
-      direction="Column"
-      gap="400"
-    >
     <SettingTile
       title={t('RoomSettings.room_encryption')}
       description={
@@ -142,6 +134,5 @@ export function RoomEncryption({ permissions }: RoomEncryptionProps) {
         </Overlay>
       )}
     </SettingTile>
-    </SequenceCard>
   );
 }

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,12 +96,6 @@ 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')}
@@ -169,6 +161,5 @@ export function RoomHistoryVisibility({ permissions }: RoomHistoryVisibilityProp
         </Text>
       )}
     </SettingTile>
-    </SequenceCard>
   );
 }

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,12 +121,6 @@ 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={
@@ -154,6 +146,5 @@ export function RoomJoinRules({ permissions }: RoomJoinRulesProps) {
         </Text>
       )}
     </SettingTile>
-    </SequenceCard>
   );
 }

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,12 +39,6 @@ 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={
@@ -79,6 +71,5 @@ export function RoomPublish({ permissions }: RoomPublishProps) {
         </Text>
       )}
     </SettingTile>
-    </SequenceCard>
   );
 }

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">
+              <SettingsSection label={t('RoomSettings.options')}>
-                <Text size="L400">{t('RoomSettings.options')}</Text>
                 <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">
+              <SettingsSection label={t('RoomSettings.options')}>
-                <Text size="L400">{t('RoomSettings.options')}</Text>
                 <RoomJoinRules permissions={permissions} />
                 <RoomPublish permissions={permissions} />
-              </Box>
+              </SettingsSection>
               <Box direction="Column" gap="100">
                 <Text size="L400">{t('RoomSettings.addresses')}</Text>
                 <RoomPublishedAddresses permissions={permissions} />