From c1a1c31494e7a647478e2ac4e21638c222965406 Mon Sep 17 00:00:00 2001
From: lizerk <lizerk-dev@gmail.com>
Date: Fri, 3 Apr 2026 12:06:21 +0300
Subject: [PATCH] Refine message composer styling

---
 .../components/messages/MessageComposer.tsx   | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/messages/MessageComposer.tsx b/frontend/src/components/messages/MessageComposer.tsx
index ac6717be..8db46b18 100644
--- a/frontend/src/components/messages/MessageComposer.tsx
+++ b/frontend/src/components/messages/MessageComposer.tsx
@@ -59,7 +59,7 @@ export default function MessageComposer({
   onCancelReply,
 }: MessageComposerProps) {
   return (
-    <div className="shrink-0 border-t border-gray-100 bg-white pt-3">
+    <>
       {editingMessageId ? (
         <div className="mb-2 flex items-start justify-between gap-2 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800">
           <div className="min-w-0">
@@ -99,7 +99,7 @@ export default function MessageComposer({
           {attachedFiles.map((file, index) => (
             <span
               key={`${file.name}-${file.size}-${index}`}
-              className="inline-flex max-w-full items-center gap-1 rounded-full bg-sky-50 px-3 py-1 text-xs text-sky-700 ring-1 ring-sky-100"
+              className="inline-flex max-w-full items-center gap-1 rounded-full border border-sky-100 bg-white px-3 py-1 text-xs text-sky-700"
             >
               <span className="truncate max-w-[180px]">{file.name}</span>
               <button
@@ -116,7 +116,7 @@ export default function MessageComposer({
       ) : null}
 
       {canSendMessages ? (
-        <div className="flex items-start gap-2">
+        <div className="flex items-end gap-2">
           <input
             ref={fileInputRef}
             multiple
@@ -128,31 +128,31 @@ export default function MessageComposer({
             type="button"
             onClick={onPickFiles}
             disabled={Boolean(editingMessageId)}
-            className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-600 leading-none transition hover:bg-gray-50 hover:text-sky-700 disabled:cursor-not-allowed disabled:opacity-50"
+            className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-gray-200 bg-gray-50 text-gray-500 leading-none transition hover:border-sky-200 hover:bg-white hover:text-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-100 disabled:cursor-not-allowed disabled:opacity-50"
             title={editingMessageId ? "При редактировании вложения недоступны" : "Добавить файлы"}
           >
             <Paperclip size={15} />
           </button>
 
-          <div className="relative w-full" data-composer-emoji="true">
+          <div className="relative min-w-0 flex-1" data-composer-emoji="true">
             <button
               type="button"
               onClick={onToggleEmojiPicker}
-              className="absolute right-2 top-1/2 z-10 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-gray-400 hover:bg-gray-100 hover:text-sky-600"
+              className="absolute right-3 top-1/2 z-10 inline-flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-full text-gray-400 transition hover:bg-white hover:text-sky-600"
               title="Смайлы"
             >
               <Smile size={14} />
             </button>
 
             {showEmojiPicker ? (
-              <div className="absolute bottom-full right-0 z-20 mb-2 w-[260px] rounded-lg border border-gray-200 bg-white p-2 shadow-xl">
+              <div className="absolute bottom-full right-0 z-20 mb-2 w-[260px] rounded-xl border border-gray-200 bg-white p-2 shadow-lg ring-1 ring-slate-100">
                 <div className="grid max-h-48 grid-cols-8 gap-1 overflow-y-auto">
                   {allReactions.map((emoji) => (
                     <button
                       key={`composer-${emoji}`}
                       type="button"
                       onClick={() => onSelectEmoji(emoji)}
-                      className="inline-flex h-8 w-8 items-center justify-center rounded-md text-base hover:bg-sky-50"
+                      className="inline-flex h-8 w-8 items-center justify-center rounded-md text-base transition hover:bg-sky-50"
                     >
                       {emoji}
                     </button>
@@ -177,7 +177,7 @@ export default function MessageComposer({
               }}
               rows={1}
               placeholder={editingMessageId ? "Редактируйте сообщение..." : "Введите сообщение..."}
-              className="h-9 w-full resize-none rounded-lg border border-gray-200 bg-white px-3 py-2 pr-10 text-sm text-gray-900 outline-none ring-0 transition focus:border-sky-500 focus:ring-2 focus:ring-sky-100"
+              className="min-h-[42px] max-h-32 w-full resize-none rounded-[1.35rem] border border-gray-200 bg-gray-50 px-4 py-2.5 pr-12 text-sm text-gray-800 outline-none transition placeholder:text-gray-400 focus:border-sky-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-100"
             />
           </div>
 
@@ -185,7 +185,7 @@ export default function MessageComposer({
             type="button"
             onClick={onSend}
             disabled={sending || (editingMessageId ? !messageText.trim() : (!messageText.trim() && attachedFiles.length === 0))}
-            className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-sky-500 text-white leading-none transition hover:bg-sky-600 disabled:cursor-not-allowed disabled:opacity-50"
+            className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-sky-500 text-white leading-none transition hover:bg-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-100 disabled:cursor-not-allowed disabled:opacity-50"
             title={editingMessageId ? "Сохранить" : "Отправить"}
           >
             <Send size={15} />
@@ -201,6 +201,6 @@ export default function MessageComposer({
           </p>
         </div>
       )}
-    </div>
+    </>
   );
 }
\ No newline at end of file