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

style(settings): flatten the emoji and sticker pack list, tinting removed packs instead of boxing them

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

35
src/app/features/common-settings/emojis-stickers/RoomPacks.tsx
View file

@ -19,7 +19,7 @@ import {
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { MatrixError } from 'matrix-js-sdk'; import { MatrixError } from 'matrix-js-sdk';
import type { StateEvents } from 'matrix-js-sdk'; import type { StateEvents } from 'matrix-js-sdk';
import { SequenceCard } from '../../../components/sequence-card'; import classNames from 'classnames';
import { import {
ImagePack, ImagePack,
ImageUsage, ImageUsage,
@ -31,7 +31,7 @@ import { useRoom } from '../../../hooks/useRoom';
import { useRoomImagePacks } from '../../../hooks/useImagePacks'; import { useRoomImagePacks } from '../../../hooks/useImagePacks';
import { LineClamp2 } from '../../../styles/Text.css'; import { LineClamp2 } from '../../../styles/Text.css';
import { SettingTile } from '../../../components/setting-tile'; import { SettingTile } from '../../../components/setting-tile';
import { SequenceCardStyle } from '../styles.css'; import { SectionLabel, SettingFlatRow, SettingFlatRowCritical } from '../../settings/styles.css';
import { useMatrixClient } from '../../../hooks/useMatrixClient'; import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { mxcUrlToHttp } from '../../../utils/matrix'; import { mxcUrlToHttp } from '../../../utils/matrix';
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication'; import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
@ -98,12 +98,7 @@ function CreatePackTile({ packs, roomId }: CreatePackTileProps) {
}; };
return ( return (
<SequenceCard <Box className={SettingFlatRow} direction="Column" gap="400">
className={SequenceCardStyle}
variant="SurfaceVariant"
direction="Column"
gap="400"
>
<SettingTile title={t('RoomSettings.new_pack')} description={t('RoomSettings.new_pack_desc')}> <SettingTile title={t('RoomSettings.new_pack')} description={t('RoomSettings.new_pack_desc')}>
<Box <Box
style={{ marginTop: config.space.S200 }} style={{ marginTop: config.space.S200 }}
@ -139,7 +134,7 @@ function CreatePackTile({ packs, roomId }: CreatePackTileProps) {
</Button> </Button>
</Box> </Box>
</SettingTile> </SettingTile>
</SequenceCard> </Box>
); );
} }
@ -207,10 +202,9 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
const removed = !!removedPacks.find((addr) => packAddressEqual(addr, address)); const removed = !!removedPacks.find((addr) => packAddressEqual(addr, address));
return ( return (
<SequenceCard <Box
key={pack.id} key={pack.id}
className={SequenceCardStyle} className={classNames(SettingFlatRow, removed && SettingFlatRowCritical)}
variant={removed ? 'Critical' : 'SurfaceVariant'}
direction="Column" direction="Column"
gap="400" gap="400"
> >
@ -271,23 +265,20 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
) )
} }
/> />
</SequenceCard> </Box>
); );
}; };
return ( return (
<> <>
<Box direction="Column" gap="100"> <Box direction="Column" gap="200">
<Text size="L400">{t('RoomSettings.packs')}</Text> <Text as="span" className={SectionLabel}>
{t('RoomSettings.packs')}
</Text>
{canEdit && <CreatePackTile roomId={room.roomId} packs={packs} />} {canEdit && <CreatePackTile roomId={room.roomId} packs={packs} />}
{packs.map(renderPack)} {packs.map(renderPack)}
{packs.length === 0 && ( {packs.length === 0 && (
<SequenceCard <Box className={SettingFlatRow} direction="Column" gap="400">
className={SequenceCardStyle}
variant="SurfaceVariant"
direction="Column"
gap="400"
>
<Box <Box
justifyContent="Center" justifyContent="Center"
direction="Column" direction="Column"
@ -305,7 +296,7 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
{t('RoomSettings.no_packs_desc')} {t('RoomSettings.no_packs_desc')}
</Text> </Text>
</Box> </Box>
</SequenceCard> </Box>
)} )}
</Box> </Box>