style(settings): flatten the emoji and sticker pack list, tinting removed packs instead of boxing them

src/app/features/common-settings/emojis-stickers/RoomPacks.tsx

@@ -19,7 +19,7 @@ import {
 import { useTranslation } from 'react-i18next';
 import { MatrixError } from 'matrix-js-sdk';
 import type { StateEvents } from 'matrix-js-sdk';
-import { SequenceCard } from '../../../components/sequence-card';
+import classNames from 'classnames';
 import {
   ImagePack,
   ImageUsage,
@@ -31,7 +31,7 @@ import { useRoom } from '../../../hooks/useRoom';
 import { useRoomImagePacks } from '../../../hooks/useImagePacks';
 import { LineClamp2 } from '../../../styles/Text.css';
 import { SettingTile } from '../../../components/setting-tile';
-import { SequenceCardStyle } from '../styles.css';
+import { SectionLabel, SettingFlatRow, SettingFlatRowCritical } from '../../settings/styles.css';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { mxcUrlToHttp } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
@@ -98,12 +98,7 @@ function CreatePackTile({ packs, roomId }: CreatePackTileProps) {
   };
 
   return (
-    <SequenceCard
-      className={SequenceCardStyle}
-      variant="SurfaceVariant"
-      direction="Column"
-      gap="400"
-    >
+    <Box className={SettingFlatRow} direction="Column" gap="400">
       <SettingTile title={t('RoomSettings.new_pack')} description={t('RoomSettings.new_pack_desc')}>
         <Box
           style={{ marginTop: config.space.S200 }}
@@ -139,7 +134,7 @@ function CreatePackTile({ packs, roomId }: CreatePackTileProps) {
           </Button>
         </Box>
       </SettingTile>
-    </SequenceCard>
+    </Box>
   );
 }
 
@@ -207,10 +202,9 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
     const removed = !!removedPacks.find((addr) => packAddressEqual(addr, address));
 
     return (
-      <SequenceCard
+      <Box
         key={pack.id}
-        className={SequenceCardStyle}
-        variant={removed ? 'Critical' : 'SurfaceVariant'}
+        className={classNames(SettingFlatRow, removed && SettingFlatRowCritical)}
         direction="Column"
         gap="400"
       >
@@ -271,23 +265,20 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
             )
           }
         />
-      </SequenceCard>
+      </Box>
     );
   };
 
   return (
     <>
-      <Box direction="Column" gap="100">
-        <Text size="L400">{t('RoomSettings.packs')}</Text>
+      <Box direction="Column" gap="200">
+        <Text as="span" className={SectionLabel}>
+          {t('RoomSettings.packs')}
+        </Text>
         {canEdit && <CreatePackTile roomId={room.roomId} packs={packs} />}
         {packs.map(renderPack)}
         {packs.length === 0 && (
-          <SequenceCard
-            className={SequenceCardStyle}
-            variant="SurfaceVariant"
-            direction="Column"
-            gap="400"
-          >
+          <Box className={SettingFlatRow} direction="Column" gap="400">
             <Box
               justifyContent="Center"
               direction="Column"
@@ -305,7 +296,7 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
                 {t('RoomSettings.no_packs_desc')}
               </Text>
             </Box>
-          </SequenceCard>
+          </Box>
         )}
       </Box>