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')}
{currentDevice ? (
-
+
)}
-
+
) : (
)}
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
{authMetadata && (
-
+
}
/>
-
+
)}
{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) => (
-
@@ -186,7 +179,7 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
}
)}
-
+
))}
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({