heaven/vojo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(settings): flatten the power-level editor to match, tinting tags marked for deletion

Browse source
This commit is contained in:
heaven 2026-06-04 13:18:15 +03:00
parent 7f52090967
commit e7f354574f
1 changed files with 14 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/app/features/common-settings/permissions/PowersEditor.tsx
View file

@ -29,10 +29,10 @@ import { HexColorPicker } from 'react-colorful';
import { useTranslation } from 'react-i18next';
import { useAtomValue } from 'jotai';
import type { StateEvents } from 'matrix-js-sdk';
import classNames from 'classnames';
import { Page, PageContent, PageHeader } from '../../../components/page';
import { IPowerLevels } from '../../../hooks/usePowerLevels';
import { SequenceCard } from '../../../components/sequence-card';
import { SequenceCardStyle } from '../styles.css';
import { SectionLabel, SettingFlatRow, SettingFlatRowCritical } from '../../settings/styles.css';
import { SettingTile } from '../../../components/setting-tile';
import {
getPowers,
@ -402,17 +402,14 @@ export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
<Scroll hideTrack visibility="Hover">
<PageContent>
<Box direction="Column" gap="700">
<Box direction="Column" gap="100">
<Box direction="Column" gap="200">
<Box alignItems="Baseline" gap="200" justifyContent="SpaceBetween">
<Text size="L400">{t('RoomSettings.power_levels')}</Text>
<Text as="span" className={SectionLabel}>
{t('RoomSettings.power_levels')}
</Text>
<BetaNoticeBadge />
</Box>
<SequenceCard
variant="SurfaceVariant"
className={SequenceCardStyle}
direction="Column"
gap="400"
>
<Box className={SettingFlatRow} direction="Column" gap="400">
<SettingTile
title={t('RoomSettings.new_power_level')}
description={t('RoomSettings.new_power_level_desc')}
@ -439,17 +436,19 @@ export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
onClose={() => setCreateTag(false)}
/>
)}
</SequenceCard>
</Box>
{getPowers(powerTags).map((power) => {
const tag = powerTags[power];
const tagIconSrc =
tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
return (
<SequenceCard
<Box
key={power}
variant={deleted.has(power) ? 'Critical' : 'SurfaceVariant'}
className={SequenceCardStyle}
className={classNames(
SettingFlatRow,
deleted.has(power) && SettingFlatRowCritical
)}
direction="Column"
gap="400"
>
@ -540,7 +539,7 @@ export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
)
}
</UseStateProvider>
</SequenceCard>
</Box>
);
})}
</Box>