pl-fe: UI consistency, why does this chat ui looks so out of place

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-02-09 18:35:51 +01:00
parent d224b98954
commit e2d83579b4
3 changed files with 20 additions and 28 deletions

View File

@ -1,7 +1,8 @@
import React from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import Avatar from '@/components/ui/avatar';
import Account from '@/components/account';
import List, { ListItem } from '@/components/list';
import HStack from '@/components/ui/hstack';
import Icon from '@/components/ui/icon';
import Stack from '@/components/ui/stack';
@ -95,34 +96,25 @@ const ChatSettings = () => {
}
/>
<Stack space={4} className='mx-auto w-5/6'>
<HStack alignItems='center' space={3}>
<Avatar src={chat.account.avatar} staticSrc={chat.account.avatar_static} alt={chat.account.avatar_description} size={50} isCat={chat.account.is_cat} username={chat.account.username} />
<Stack>
<Text weight='semibold'>{chat.account.display_name}</Text>
<Text size='sm' theme='primary'>@{chat.account.acct}</Text>
</Stack>
</HStack>
<Stack space={5}>
<button onClick={isBlocked ? handleUnblockUser : handleBlockUser} className='flex w-full items-center space-x-2 text-sm font-bold text-primary-600 dark:text-primary-400'>
<Icon src={require('@phosphor-icons/core/regular/prohibit.svg')} className='size-5' aria-hidden />
<span>
{isBlocked
? <FormattedMessage id='chat_settings.options.unblock_user' defaultMessage='Unblock @{acct}' values={{ acct: chat.account.acct }} />
: <FormattedMessage id='chat_settings.options.block_user' defaultMessage='Block @{acct}' values={{ acct: chat.account.acct }} />
}
</span>
</button>
<Stack space={4} className='px-4'>
<Account account={chat.account} hideActions />
<List>
<ListItem
label={isBlocked
? <FormattedMessage id='chat_settings.options.unblock_user' defaultMessage='Unblock @{acct}' values={{ acct: chat.account.acct }} />
: <FormattedMessage id='chat_settings.options.block_user' defaultMessage='Block @{acct}' values={{ acct: chat.account.acct }} />}
onClick={isBlocked ? handleUnblockUser : handleBlockUser}
size='sm'
/>
{features.chatsDelete && (
<button onClick={handleLeaveChat} className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600'>
<Icon src={require('@phosphor-icons/core/regular/sign-out.svg')} className='size-5' aria-hidden />
<span><FormattedMessage id='chat_settings.options.leave_chat' defaultMessage='Leave chat' /></span>
</button>
<ListItem
label={<FormattedMessage id='chat_settings.options.leave_chat' defaultMessage='Leave chat' />}
onClick={handleLeaveChat}
size='sm'
/>
)}
</Stack>
</List>
</Stack>
</>
);

View File

@ -22,7 +22,7 @@ type FormData = {
}
const messages = defineMessages({
title: { id: 'chat.page_settings.title', defaultMessage: 'Message Settings' },
title: { id: 'chat.page_settings.title', defaultMessage: 'Message settings' },
preferences: { id: 'chat.page_settings.preferences', defaultMessage: 'Preferences' },
privacy: { id: 'chat.page_settings.privacy', defaultMessage: 'Privacy' },
acceptingMessageLabel: { id: 'chat.page_settings.accepting_messages.label', defaultMessage: 'Allow users to start a new chat with you' },

View File

@ -321,7 +321,7 @@
"chat.page_settings.preferences": "Preferences",
"chat.page_settings.privacy": "Privacy",
"chat.page_settings.submit": "Save",
"chat.page_settings.title": "Message Settings",
"chat.page_settings.title": "Message settings",
"chat.retry": "Retry?",
"chat_composer.unblock": "Unblock",
"chat_list_item.blocked_you": "This user has blocked you",