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