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}>
|
<Text as="span" className={SectionLabel}>
|
||||||
{t('RoomSettings.packs')}
|
{t('RoomSettings.packs')}
|
||||||
</Text>
|
</Text>
|
||||||
{canEdit && <CreatePackTile roomId={room.roomId} packs={packs} />}
|
<Box direction="Column">
|
||||||
{packs.map(renderPack)}
|
{canEdit && <CreatePackTile roomId={room.roomId} packs={packs} />}
|
||||||
{packs.length === 0 && (
|
{packs.map(renderPack)}
|
||||||
<Box className={SettingFlatRow} direction="Column" gap="400">
|
{packs.length === 0 && (
|
||||||
<Box
|
<Box className={SettingFlatRow} direction="Column" gap="400">
|
||||||
justifyContent="Center"
|
<Box
|
||||||
direction="Column"
|
justifyContent="Center"
|
||||||
gap="200"
|
direction="Column"
|
||||||
style={{
|
gap="200"
|
||||||
padding: `${config.space.S700} ${config.space.S400}`,
|
style={{
|
||||||
maxWidth: toRem(300),
|
padding: `${config.space.S700} ${config.space.S400}`,
|
||||||
margin: 'auto',
|
maxWidth: toRem(300),
|
||||||
}}
|
margin: 'auto',
|
||||||
>
|
}}
|
||||||
<Text size="H5" align="Center">
|
>
|
||||||
{t('RoomSettings.no_packs')}
|
<Text size="H5" align="Center">
|
||||||
</Text>
|
{t('RoomSettings.no_packs')}
|
||||||
<Text size="T200" align="Center">
|
</Text>
|
||||||
{t('RoomSettings.no_packs_desc')}
|
<Text size="T200" align="Center">
|
||||||
</Text>
|
{t('RoomSettings.no_packs_desc')}
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
)}
|
||||||
)}
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{hasChanges && (
|
{hasChanges && (
|
||||||
|
|
|
||||||
|
|
@ -409,139 +409,141 @@ export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
|
||||||
</Text>
|
</Text>
|
||||||
<BetaNoticeBadge />
|
<BetaNoticeBadge />
|
||||||
</Box>
|
</Box>
|
||||||
<Box className={SettingFlatRow} direction="Column" gap="400">
|
<Box direction="Column">
|
||||||
<SettingTile
|
<Box className={SettingFlatRow} direction="Column" gap="400">
|
||||||
title={t('RoomSettings.new_power_level')}
|
<SettingTile
|
||||||
description={t('RoomSettings.new_power_level_desc')}
|
title={t('RoomSettings.new_power_level')}
|
||||||
after={
|
description={t('RoomSettings.new_power_level_desc')}
|
||||||
!createTag && (
|
after={
|
||||||
<Button
|
!createTag && (
|
||||||
onClick={() => setCreateTag(true)}
|
<Button
|
||||||
variant="Secondary"
|
onClick={() => setCreateTag(true)}
|
||||||
fill="Soft"
|
variant="Secondary"
|
||||||
size="300"
|
fill="Soft"
|
||||||
radii="300"
|
size="300"
|
||||||
outlined
|
radii="300"
|
||||||
disabled={applyingChanges}
|
outlined
|
||||||
>
|
disabled={applyingChanges}
|
||||||
<Text size="B300">{t('RoomSettings.create')}</Text>
|
>
|
||||||
</Button>
|
<Text size="B300">{t('RoomSettings.create')}</Text>
|
||||||
)
|
</Button>
|
||||||
}
|
)
|
||||||
/>
|
}
|
||||||
{createTag && (
|
|
||||||
<EditPower
|
|
||||||
maxPower={maxPower}
|
|
||||||
onSave={handleSaveTag}
|
|
||||||
onClose={() => setCreateTag(false)}
|
|
||||||
/>
|
/>
|
||||||
)}
|
{createTag && (
|
||||||
</Box>
|
<EditPower
|
||||||
{getPowers(powerTags).map((power) => {
|
maxPower={maxPower}
|
||||||
const tag = powerTags[power];
|
onSave={handleSaveTag}
|
||||||
const tagIconSrc =
|
onClose={() => setCreateTag(false)}
|
||||||
tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
|
/>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
{getPowers(powerTags).map((power) => {
|
||||||
|
const tag = powerTags[power];
|
||||||
|
const tagIconSrc =
|
||||||
|
tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
key={power}
|
key={power}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
SettingFlatRow,
|
SettingFlatRow,
|
||||||
deleted.has(power) && SettingFlatRowCritical
|
deleted.has(power) && SettingFlatRowCritical
|
||||||
)}
|
)}
|
||||||
direction="Column"
|
direction="Column"
|
||||||
gap="400"
|
gap="400"
|
||||||
>
|
>
|
||||||
<UseStateProvider initial={false}>
|
<UseStateProvider initial={false}>
|
||||||
{(edit, setEdit) =>
|
{(edit, setEdit) =>
|
||||||
edit ? (
|
edit ? (
|
||||||
<EditPower
|
<EditPower
|
||||||
maxPower={maxPower}
|
maxPower={maxPower}
|
||||||
power={power}
|
power={power}
|
||||||
tag={tag}
|
tag={tag}
|
||||||
onSave={handleSaveTag}
|
onSave={handleSaveTag}
|
||||||
onClose={() => setEdit(false)}
|
onClose={() => setEdit(false)}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<SettingTile
|
<SettingTile
|
||||||
before={<PowerColorBadge color={tag.color} />}
|
before={<PowerColorBadge color={tag.color} />}
|
||||||
title={
|
title={
|
||||||
<Box as="span" alignItems="Center" gap="200">
|
<Box as="span" alignItems="Center" gap="200">
|
||||||
<b>{deleted.has(power) ? <s>{tag.name}</s> : tag.name}</b>
|
<b>{deleted.has(power) ? <s>{tag.name}</s> : tag.name}</b>
|
||||||
<Box as="span" shrink="No" alignItems="Inherit" gap="Inherit">
|
<Box as="span" shrink="No" alignItems="Inherit" gap="Inherit">
|
||||||
{tagIconSrc && <PowerIcon size="50" iconSrc={tagIconSrc} />}
|
{tagIconSrc && <PowerIcon size="50" iconSrc={tagIconSrc} />}
|
||||||
<Text as="span" size="T200" priority="300">
|
<Text as="span" size="T200" priority="300">
|
||||||
({power})
|
({power})
|
||||||
</Text>
|
</Text>
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
}
|
||||||
}
|
after={
|
||||||
after={
|
deleted.has(power) ? (
|
||||||
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>
|
|
||||||
<Chip
|
<Chip
|
||||||
variant="Secondary"
|
variant="Critical"
|
||||||
radii="Pill"
|
radii="Pill"
|
||||||
disabled={applyingChanges}
|
disabled={applyingChanges}
|
||||||
onClick={() => setEdit(true)}
|
onClick={() => handleToggleDelete(power)}
|
||||||
>
|
>
|
||||||
<Text size="B300">{t('RoomSettings.edit')}</Text>
|
<Text size="B300">{t('RoomSettings.undo')}</Text>
|
||||||
</Chip>
|
</Chip>
|
||||||
</Box>
|
) : (
|
||||||
)
|
<Box shrink="No" alignItems="Center" gap="200">
|
||||||
}
|
<TooltipProvider
|
||||||
/>
|
tooltip={
|
||||||
)
|
<Tooltip style={{ maxWidth: toRem(200) }}>
|
||||||
}
|
{usedPowers.has(power) ? (
|
||||||
</UseStateProvider>
|
<Box direction="Column">
|
||||||
</Box>
|
<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>
|
</Box>
|
||||||
{hasChanges && (
|
{hasChanges && (
|
||||||
<Menu
|
<Menu
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue