From 1de93f3c88f7ea887c2c4b05537197c134099d45 Mon Sep 17 00:00:00 2001
From: heaven <vojochatdev@gmail.com>
Date: Thu, 4 Jun 2026 12:41:50 +0300
Subject: [PATCH] style(settings): flatten the device list to match the Dawn
 list, tinting pending-delete rows instead of boxing them

---
 src/app/features/settings/devices/Devices.tsx | 13 +++------
 .../settings/devices/OtherDevices.tsx         | 27 +++++++------------
 src/app/features/settings/styles.css.ts       |  7 +++++
 3 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/src/app/features/settings/devices/Devices.tsx b/src/app/features/settings/devices/Devices.tsx
index a9123857..8645f980 100644
--- a/src/app/features/settings/devices/Devices.tsx
+++ b/src/app/features/settings/devices/Devices.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Box, Text } from 'folds';
-import { SequenceCard } from '../../../components/sequence-card';
-import { SectionLabel, SettingRow } from '../styles.css';
+import { SectionLabel, SettingFlatRow } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { SettingsPage } from '../SettingsPage';
 import { SettingsSection } from '../SettingsSection';
@@ -94,13 +93,7 @@ export function Devices({ requestClose }: DevicesProps) {
           {t('Settings.current')}
         </Text>
         {currentDevice ? (
-          <SequenceCard
-            className={SettingRow}
-            variant="Background"
-            outlined
-            direction="Column"
-            gap="400"
-          >
+          <Box className={SettingFlatRow} direction="Column" gap="400">
             <DeviceTile
               device={currentDevice}
               refreshDeviceList={refreshDeviceList}
@@ -120,7 +113,7 @@ export function Devices({ requestClose }: DevicesProps) {
             {crypto && verificationStatus === VerificationStatus.Verified && (
               <BackupRestoreTile crypto={crypto} />
             )}
-          </SequenceCard>
+          </Box>
         ) : (
           <DeviceTilePlaceholder />
         )}
diff --git a/src/app/features/settings/devices/OtherDevices.tsx b/src/app/features/settings/devices/OtherDevices.tsx
index 86bfb314..18c1d553 100644
--- a/src/app/features/settings/devices/OtherDevices.tsx
+++ b/src/app/features/settings/devices/OtherDevices.tsx
@@ -2,8 +2,8 @@ import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Box, Button, config, Menu, Spinner, Text } from 'folds';
 import { AuthDict, IMyDevice, MatrixError } from 'matrix-js-sdk';
-import { SequenceCard } from '../../../components/sequence-card';
-import { SectionLabel, SettingRow } from '../styles.css';
+import classNames from 'classnames';
+import { SectionLabel, SettingFlatRow, SettingFlatRowCritical } from '../styles.css';
 import { ActionUIA, ActionUIAFlowsLoader } from '../../../components/ActionUIA';
 import { DeviceDeleteBtn, DeviceTile } from './DeviceTile';
 import { AsyncState, AsyncStatus, useAsync } from '../../../hooks/useAsyncCallback';
@@ -110,14 +110,7 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
         </Text>
         <Box direction="Column">
           {authMetadata && (
-            <SequenceCard
-              className={SettingRow}
-              variant="Background"
-              outlined
-              mergeBorder
-              direction="Column"
-              gap="400"
-            >
+            <Box className={SettingFlatRow} direction="Column" gap="400">
               <SettingTile
                 title={t('Settings.device_dashboard')}
                 description={t('Settings.device_dashboard_desc')}
@@ -134,7 +127,7 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
                   </Button>
                 }
               />
-            </SequenceCard>
+            </Box>
           )}
           {devices
             .sort((d1, d2) => {
@@ -142,12 +135,12 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
               return d1.last_seen_ts < d2.last_seen_ts ? 1 : -1;
             })
             .map((device) => (
-              <SequenceCard
+              <Box
                 key={device.device_id}
-                className={SettingRow}
-                variant={deleted.has(device.device_id) ? 'Critical' : 'Background'}
-                outlined
-                mergeBorder={!deleted.has(device.device_id)}
+                className={classNames(
+                  SettingFlatRow,
+                  deleted.has(device.device_id) && SettingFlatRowCritical
+                )}
                 direction="Column"
                 gap="400"
               >
@@ -186,7 +179,7 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
                     }
                   </DeviceVerificationStatus>
                 )}
-              </SequenceCard>
+              </Box>
             ))}
         </Box>
       </Box>
diff --git a/src/app/features/settings/styles.css.ts b/src/app/features/settings/styles.css.ts
index 3a42a1d9..93b6aab9 100644
--- a/src/app/features/settings/styles.css.ts
+++ b/src/app/features/settings/styles.css.ts
@@ -57,6 +57,13 @@ export const SettingFlatRow = style({
   },
 });
 
+// A flat row in a destructive/pending state — replaces the old Critical-variant
+// boxed card (e.g. a device marked for deletion) with a full-bleed critical tint.
+export const SettingFlatRowCritical = style({
+  backgroundColor: color.Critical.Container,
+  color: color.Critical.OnContainer,
+});
+
 // A full-bleed hairline rule under a section/profile header — the "ДОСТУП ───"
 // divider in the flat layout.
 export const SettingRule = style({