From e2d83579b467efef70c49626a94b48232c30f320 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Mon, 9 Feb 2026 18:35:51 +0100
Subject: [PATCH] pl-fe: UI consistency, why does this chat ui looks so out of
 place
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../components/chat-widget/chat-settings.tsx  | 44 ++++++++-----------
 .../components/chats-page-settings.tsx        |  2 +-
 packages/pl-fe/src/locales/en.json            |  2 +-
 3 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx
index 09bf232d6..f3b5b872f 100644
--- a/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx
@@ -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>
     </>
   );
diff --git a/packages/pl-fe/src/features/chats/components/chats-page/components/chats-page-settings.tsx b/packages/pl-fe/src/features/chats/components/chats-page/components/chats-page-settings.tsx
index 9c2d8c5da..ee1a5f595 100644
--- a/packages/pl-fe/src/features/chats/components/chats-page/components/chats-page-settings.tsx
+++ b/packages/pl-fe/src/features/chats/components/chats-page/components/chats-page-settings.tsx
@@ -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' },
diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json
index 274f52856..7e9d5d11d 100644
--- a/packages/pl-fe/src/locales/en.json
+++ b/packages/pl-fe/src/locales/en.json
@@ -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",