From 6bd66e7855ee264070bd6bdce451d0d19627c6d4 Mon Sep 17 00:00:00 2001
From: lizerk <lizerk-dev@gmail.com>
Date: Fri, 3 Apr 2026 11:16:26 +0300
Subject: [PATCH] Refine chat actions menu styling

---
 .../messages/MessageActionsMenu.tsx           | 37 +++++++++----------
 .../messages/MessageReadersModal.tsx          | 10 ++---
 2 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/messages/MessageActionsMenu.tsx b/frontend/src/components/messages/MessageActionsMenu.tsx
index 905e691e..e905b671 100644
--- a/frontend/src/components/messages/MessageActionsMenu.tsx
+++ b/frontend/src/components/messages/MessageActionsMenu.tsx
@@ -44,7 +44,7 @@ export default function MessageActionsMenu({
   return (
     <div
       data-actions-menu="true"
-      className="fixed z-[60] flex min-w-[240px] max-w-[280px] flex-col gap-2 rounded-2xl border border-gray-200/80 bg-white/98 p-2 text-gray-900 shadow-[0_18px_50px_-18px_rgba(15,23,42,0.35)] backdrop-blur"
+      className="fixed z-[60] min-w-[220px] max-w-[248px] rounded-xl border border-gray-200 bg-white py-2 shadow-lg ring-1 ring-slate-100"
       style={{
         left: anchor.x,
         top: anchor.y - 8,
@@ -52,18 +52,18 @@ export default function MessageActionsMenu({
       }}
     >
       {canReply ? (
-        <div className="rounded-xl border border-gray-200 bg-gray-50/80 p-1.5">
-          <div className="mb-1 flex items-center justify-between px-1">
-            <span className="text-[11px] font-semibold uppercase tracking-[0.08em] text-gray-400">Быстрые реакции</span>
+        <div className="px-3 pb-2">
+          <div className="mb-2 flex items-center justify-between">
+            <span className="text-[10px] font-semibold uppercase tracking-[0.08em] text-gray-400">Быстрые реакции</span>
           </div>
 
-          <div className="flex items-center gap-1">
+          <div className="flex items-center gap-1.5">
           {recentReactions.map((emoji) => (
             <button
               key={`recent-${message.id}-${emoji}`}
               type="button"
               onClick={() => onQuickReact(emoji)}
-              className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-white bg-white text-base shadow-sm transition hover:-translate-y-0.5 hover:border-sky-200 hover:bg-sky-50"
+              className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-gray-50 text-base transition hover:bg-sky-50"
               title="Быстрая реакция"
             >
               {emoji}
@@ -72,7 +72,7 @@ export default function MessageActionsMenu({
           <button
             type="button"
             onClick={onOpenReactionPicker}
-            className="ml-auto inline-flex h-8 w-8 items-center justify-center rounded-lg border border-white bg-white text-gray-600 shadow-sm transition hover:border-sky-200 hover:bg-sky-50 hover:text-sky-700"
+            className="ml-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-gray-50 text-gray-500 transition hover:bg-sky-50 hover:text-sky-700"
             title="Все смайлы"
           >
             <Smile size={14} />
@@ -82,10 +82,10 @@ export default function MessageActionsMenu({
       ) : null}
 
       {isMine ? (
-        <div className="rounded-xl border border-emerald-200/80 bg-emerald-50/70 p-2.5">
-          <div className="mb-1.5 flex items-center gap-1.5 text-emerald-800">
+        <div className="border-t border-slate-100 px-3 py-2">
+          <div className="mb-1.5 flex items-center gap-1.5 text-gray-500">
             <CheckCheck size={13} />
-            <span className="text-[11px] font-semibold uppercase tracking-[0.08em]">Прочитали</span>
+            <span className="text-[10px] font-semibold uppercase tracking-[0.08em]">Прочитали</span>
           </div>
 
           {readers.length > 0 ? (
@@ -94,7 +94,7 @@ export default function MessageActionsMenu({
               {previewReaders.map((reader) => (
                 <div
                   key={`reader-${message.id}-${reader.id}`}
-                  className="rounded-lg bg-white/85 px-2 py-1.5 text-xs font-medium leading-4 text-gray-700 ring-1 ring-emerald-100 break-words"
+                  className="text-xs font-medium leading-4 text-gray-700 break-words"
                 >
                   {reader.name}
                 </div>
@@ -105,12 +105,9 @@ export default function MessageActionsMenu({
                 <button
                   type="button"
                   onClick={onShowAllReaders}
-                  className="mt-2 inline-flex w-full items-center justify-between rounded-lg border border-emerald-200 bg-white/90 px-2.5 py-2 text-left text-xs font-semibold text-emerald-800 transition hover:bg-white"
+                  className="mt-2 inline-flex items-center gap-1 text-xs font-medium text-sky-700 transition hover:text-sky-800"
                 >
-                  <span>{hasMoreReaders ? "Показать весь список" : "Открыть список"}</span>
-                  <span className="rounded-full bg-emerald-100 px-2 py-0.5 text-[11px] font-semibold text-emerald-900">
-                    {readers.length}
-                  </span>
+                  <span>{hasMoreReaders ? `Показать весь список (${readers.length})` : "Открыть список"}</span>
                 </button>
               ) : null}
             </>
@@ -120,12 +117,12 @@ export default function MessageActionsMenu({
         </div>
       ) : null}
 
-      <div className="flex flex-col gap-1">
+      <div className="border-t border-slate-100 py-1">
         {canReply ? (
           <button
             type="button"
             onClick={onReply}
-            className="inline-flex w-full items-center gap-2 rounded-xl border border-sky-200 bg-sky-50 px-3 py-2 text-xs font-medium text-sky-700 transition hover:bg-sky-100"
+            className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-sky-700 transition hover:bg-sky-50"
           >
             <Reply size={13} />
             Ответить
@@ -136,7 +133,7 @@ export default function MessageActionsMenu({
           <button
             type="button"
             onClick={onEdit}
-            className="inline-flex w-full items-center gap-2 rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-700 transition hover:bg-gray-50"
+            className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-gray-700 transition hover:bg-gray-50"
           >
             <Pencil size={13} />
             Редактировать
@@ -147,7 +144,7 @@ export default function MessageActionsMenu({
           <button
             type="button"
             onClick={onDelete}
-            className="inline-flex w-full items-center gap-2 rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-xs font-medium text-red-700 transition hover:bg-red-100"
+            className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-red-600 transition hover:bg-red-50"
           >
             <Trash2 size={13} />
             Удалить
diff --git a/frontend/src/components/messages/MessageReadersModal.tsx b/frontend/src/components/messages/MessageReadersModal.tsx
index 58bee6bc..af9a66d2 100644
--- a/frontend/src/components/messages/MessageReadersModal.tsx
+++ b/frontend/src/components/messages/MessageReadersModal.tsx
@@ -15,14 +15,14 @@ export default function MessageReadersModal({ isOpen, onClose, readers }: Messag
   return (
     <Modal isOpen={isOpen} onClose={onClose} title="Прочитали сообщение" size="sm">
       <div className="space-y-4">
-        <div className="rounded-2xl border border-emerald-200/80 bg-emerald-50/80 p-4">
-          <div className="flex items-center gap-2 text-emerald-900">
-            <span className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 ring-1 ring-emerald-100">
+        <div className="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3">
+          <div className="flex items-center gap-2 text-gray-700">
+            <span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500">
               <CheckCheck size={16} />
             </span>
             <div>
               <p className="text-sm font-semibold">Полный список прочитавших</p>
-              <p className="text-xs text-emerald-800/80">
+              <p className="text-xs text-gray-500">
                 {readers.length === 1 ? "1 сотрудник" : `${readers.length} сотрудников`}
               </p>
             </div>
@@ -34,7 +34,7 @@ export default function MessageReadersModal({ isOpen, onClose, readers }: Messag
             {readers.map((reader) => (
               <div
                 key={`message-reader-${reader.id}`}
-                className="rounded-2xl border border-gray-200 bg-white px-3 py-3 text-sm font-medium leading-5 text-gray-800 shadow-sm"
+                className="rounded-xl border border-gray-200 bg-white px-3 py-3 text-sm font-medium leading-5 text-gray-800"
               >
                 {reader.name}
               </div>