Refine chat actions menu styling
This commit is contained in:
lizerk
parent
c5f53cca15
commit
6bd66e7855
@ -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} />
|
||||
Удалить
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user