style(settings): drop the row gap in the pack and power-level lists so their hairline dividers sit flush like the rest
This commit is contained in:
parent
af8e2963f1
commit
15ce5f4fb9
2 changed files with 151 additions and 147 deletions
|
|
@ -275,29 +275,31 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
|
|||
<Text as="span" className={SectionLabel}>
|
||||
{t('RoomSettings.packs')}
|
||||
</Text>
|
||||
{canEdit && <CreatePackTile roomId={room.roomId} packs={packs} />}
|
||||
{packs.map(renderPack)}
|
||||
{packs.length === 0 && (
|
||||
<Box className={SettingFlatRow} direction="Column" gap="400">
|
||||
<Box
|
||||
justifyContent="Center"
|
||||
direction="Column"
|
||||
gap="200"
|
||||
style={{
|
||||
padding: `${config.space.S700} ${config.space.S400}`,
|
||||
maxWidth: toRem(300),
|
||||
margin: 'auto',
|
||||
}}
|
||||
>
|
||||
<Text size="H5" align="Center">
|
||||
{t('RoomSettings.no_packs')}
|
||||
</Text>
|
||||
<Text size="T200" align="Center">
|
||||
{t('RoomSettings.no_packs_desc')}
|
||||
</Text>
|
||||
<Box direction="Column">
|
||||
{canEdit && <CreatePackTile roomId={room.roomId} packs={packs} />}
|
||||
{packs.map(renderPack)}
|
||||
{packs.length === 0 && (
|
||||
<Box className={SettingFlatRow} direction="Column" gap="400">
|
||||
<Box
|
||||
justifyContent="Center"
|
||||
direction="Column"
|
||||
gap="200"
|
||||
style={{
|
||||
padding: `${config.space.S700} ${config.space.S400}`,
|
||||
maxWidth: toRem(300),
|
||||
margin: 'auto',
|
||||
}}
|
||||
>
|
||||
<Text size="H5" align="Center">
|
||||
{t('RoomSettings.no_packs')}
|
||||
</Text>
|
||||
<Text size="T200" align="Center">
|
||||
{t('RoomSettings.no_packs_desc')}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{hasChanges && (
|
||||
|
|
|
|||
|
|
@ -409,139 +409,141 @@ export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
|
|||
</Text>
|
||||
<BetaNoticeBadge />
|
||||
</Box>
|
||||
<Box className={SettingFlatRow} direction="Column" gap="400">
|
||||
<SettingTile
|
||||
title={t('RoomSettings.new_power_level')}
|
||||
description={t('RoomSettings.new_power_level_desc')}
|
||||
after={
|
||||
!createTag && (
|
||||
<Button
|
||||
onClick={() => setCreateTag(true)}
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
size="300"
|
||||
radii="300"
|
||||
outlined
|
||||
disabled={applyingChanges}
|
||||
>
|
||||
<Text size="B300">{t('RoomSettings.create')}</Text>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
/>
|
||||
{createTag && (
|
||||
<EditPower
|
||||
maxPower={maxPower}
|
||||
onSave={handleSaveTag}
|
||||
onClose={() => setCreateTag(false)}
|
||||
<Box direction="Column">
|
||||
<Box className={SettingFlatRow} direction="Column" gap="400">
|
||||
<SettingTile
|
||||
title={t('RoomSettings.new_power_level')}
|
||||
description={t('RoomSettings.new_power_level_desc')}
|
||||
after={
|
||||
!createTag && (
|
||||
<Button
|
||||
onClick={() => setCreateTag(true)}
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
size="300"
|
||||
radii="300"
|
||||
outlined
|
||||
disabled={applyingChanges}
|
||||
>
|
||||
<Text size="B300">{t('RoomSettings.create')}</Text>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
{getPowers(powerTags).map((power) => {
|
||||
const tag = powerTags[power];
|
||||
const tagIconSrc =
|
||||
tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
|
||||
{createTag && (
|
||||
<EditPower
|
||||
maxPower={maxPower}
|
||||
onSave={handleSaveTag}
|
||||
onClose={() => setCreateTag(false)}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
{getPowers(powerTags).map((power) => {
|
||||
const tag = powerTags[power];
|
||||
const tagIconSrc =
|
||||
tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
|
||||
|
||||
return (
|
||||
<Box
|
||||
key={power}
|
||||
className={classNames(
|
||||
SettingFlatRow,
|
||||
deleted.has(power) && SettingFlatRowCritical
|
||||
)}
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<UseStateProvider initial={false}>
|
||||
{(edit, setEdit) =>
|
||||
edit ? (
|
||||
<EditPower
|
||||
maxPower={maxPower}
|
||||
power={power}
|
||||
tag={tag}
|
||||
onSave={handleSaveTag}
|
||||
onClose={() => setEdit(false)}
|
||||
/>
|
||||
) : (
|
||||
<SettingTile
|
||||
before={<PowerColorBadge color={tag.color} />}
|
||||
title={
|
||||
<Box as="span" alignItems="Center" gap="200">
|
||||
<b>{deleted.has(power) ? <s>{tag.name}</s> : tag.name}</b>
|
||||
<Box as="span" shrink="No" alignItems="Inherit" gap="Inherit">
|
||||
{tagIconSrc && <PowerIcon size="50" iconSrc={tagIconSrc} />}
|
||||
<Text as="span" size="T200" priority="300">
|
||||
({power})
|
||||
</Text>
|
||||
return (
|
||||
<Box
|
||||
key={power}
|
||||
className={classNames(
|
||||
SettingFlatRow,
|
||||
deleted.has(power) && SettingFlatRowCritical
|
||||
)}
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<UseStateProvider initial={false}>
|
||||
{(edit, setEdit) =>
|
||||
edit ? (
|
||||
<EditPower
|
||||
maxPower={maxPower}
|
||||
power={power}
|
||||
tag={tag}
|
||||
onSave={handleSaveTag}
|
||||
onClose={() => setEdit(false)}
|
||||
/>
|
||||
) : (
|
||||
<SettingTile
|
||||
before={<PowerColorBadge color={tag.color} />}
|
||||
title={
|
||||
<Box as="span" alignItems="Center" gap="200">
|
||||
<b>{deleted.has(power) ? <s>{tag.name}</s> : tag.name}</b>
|
||||
<Box as="span" shrink="No" alignItems="Inherit" gap="Inherit">
|
||||
{tagIconSrc && <PowerIcon size="50" iconSrc={tagIconSrc} />}
|
||||
<Text as="span" size="T200" priority="300">
|
||||
({power})
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
}
|
||||
after={
|
||||
deleted.has(power) ? (
|
||||
<Chip
|
||||
variant="Critical"
|
||||
radii="Pill"
|
||||
disabled={applyingChanges}
|
||||
onClick={() => handleToggleDelete(power)}
|
||||
>
|
||||
<Text size="B300">{t('RoomSettings.undo')}</Text>
|
||||
</Chip>
|
||||
) : (
|
||||
<Box shrink="No" alignItems="Center" gap="200">
|
||||
<TooltipProvider
|
||||
tooltip={
|
||||
<Tooltip style={{ maxWidth: toRem(200) }}>
|
||||
{usedPowers.has(power) ? (
|
||||
<Box direction="Column">
|
||||
<Text size="L400">
|
||||
{t('RoomSettings.used_power_level')}
|
||||
</Text>
|
||||
<Text size="T200">
|
||||
{t('RoomSettings.used_power_level_desc')}
|
||||
</Text>
|
||||
</Box>
|
||||
) : (
|
||||
<Text>{t('RoomSettings.delete')}</Text>
|
||||
)}
|
||||
</Tooltip>
|
||||
}
|
||||
>
|
||||
{(triggerRef) => (
|
||||
<Chip
|
||||
ref={triggerRef}
|
||||
variant="Secondary"
|
||||
fill="None"
|
||||
radii="Pill"
|
||||
disabled={applyingChanges}
|
||||
aria-disabled={usedPowers.has(power)}
|
||||
onClick={
|
||||
usedPowers.has(power)
|
||||
? undefined
|
||||
: () => handleToggleDelete(power)
|
||||
}
|
||||
>
|
||||
<Icon size="50" src={Icons.Delete} />
|
||||
</Chip>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
}
|
||||
after={
|
||||
deleted.has(power) ? (
|
||||
<Chip
|
||||
variant="Secondary"
|
||||
variant="Critical"
|
||||
radii="Pill"
|
||||
disabled={applyingChanges}
|
||||
onClick={() => setEdit(true)}
|
||||
onClick={() => handleToggleDelete(power)}
|
||||
>
|
||||
<Text size="B300">{t('RoomSettings.edit')}</Text>
|
||||
<Text size="B300">{t('RoomSettings.undo')}</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</UseStateProvider>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
) : (
|
||||
<Box shrink="No" alignItems="Center" gap="200">
|
||||
<TooltipProvider
|
||||
tooltip={
|
||||
<Tooltip style={{ maxWidth: toRem(200) }}>
|
||||
{usedPowers.has(power) ? (
|
||||
<Box direction="Column">
|
||||
<Text size="L400">
|
||||
{t('RoomSettings.used_power_level')}
|
||||
</Text>
|
||||
<Text size="T200">
|
||||
{t('RoomSettings.used_power_level_desc')}
|
||||
</Text>
|
||||
</Box>
|
||||
) : (
|
||||
<Text>{t('RoomSettings.delete')}</Text>
|
||||
)}
|
||||
</Tooltip>
|
||||
}
|
||||
>
|
||||
{(triggerRef) => (
|
||||
<Chip
|
||||
ref={triggerRef}
|
||||
variant="Secondary"
|
||||
fill="None"
|
||||
radii="Pill"
|
||||
disabled={applyingChanges}
|
||||
aria-disabled={usedPowers.has(power)}
|
||||
onClick={
|
||||
usedPowers.has(power)
|
||||
? undefined
|
||||
: () => handleToggleDelete(power)
|
||||
}
|
||||
>
|
||||
<Icon size="50" src={Icons.Delete} />
|
||||
</Chip>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
<Chip
|
||||
variant="Secondary"
|
||||
radii="Pill"
|
||||
disabled={applyingChanges}
|
||||
onClick={() => setEdit(true)}
|
||||
>
|
||||
<Text size="B300">{t('RoomSettings.edit')}</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</UseStateProvider>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</Box>
|
||||
{hasChanges && (
|
||||
<Menu
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue