Robotail/Corp
Robotail/Corp
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine message composer styling

Browse Source
This commit is contained in:
lizerk 2026-04-03 12:06:21 +03:00
parent c4253f6a78
commit c1a1c31494
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/messages/MessageComposer.tsx
View File

@ -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>
</>
);
}