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:
@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -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' },
|
||||
|
||||
@ -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",
|
||||
|
||||
Reference in New Issue
Block a user