benya/Messenger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web(composer): center glyphs inside round action buttons
All checks were successful
CI / test (push) Successful in 50s
Details

Browse Source
This commit is contained in:
Alex
2026-03-08 19:28:38 +03:00
parent 67752b9f47
commit a1436ca27f
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/components/MessageComposer.tsx
View File

@@ -1132,13 +1132,13 @@ export function MessageComposer() {
<div className="mb-2 flex items-end gap-1.5 sm:gap-2"> <div className="mb-2 flex items-end gap-1.5 sm:gap-2">
<div className="relative"> <div className="relative">
<button <button
className="h-10 min-w-10 rounded-full bg-slate-700/85 px-2.5 text-sm font-semibold text-slate-200 hover:bg-slate-700 disabled:opacity-60 sm:h-[42px] sm:min-w-[42px] sm:px-3" className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-slate-700/85 text-sm font-semibold leading-none text-slate-200 hover:bg-slate-700 disabled:opacity-60 sm:h-[42px] sm:w-[42px]"
disabled={isUploading || recordingState !== "idle" || !canSendInActiveChat} disabled={isUploading || recordingState !== "idle" || !canSendInActiveChat}
onClick={() => setShowAttachMenu((v) => !v)} onClick={() => setShowAttachMenu((v) => !v)}
type="button" type="button"
> >
<span className="hidden min-[390px]:inline">📎</span> <span className="hidden min-[520px]:inline">📎</span>
<span className="inline min-[390px]:hidden">＋</span> <span className="inline min-[520px]:hidden">＋</span>
</button> </button>
{showAttachMenu ? ( {showAttachMenu ? (
<div className="absolute bottom-12 left-0 z-20 w-44 rounded-xl border border-slate-700/80 bg-slate-900/95 p-1.5 shadow-2xl"> <div className="absolute bottom-12 left-0 z-20 w-44 rounded-xl border border-slate-700/80 bg-slate-900/95 p-1.5 shadow-2xl">
@@ -1157,7 +1157,7 @@ export function MessageComposer() {
File File
</button> </button>
<button <button
className="hidden w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-800 max-[389px]:block" className="hidden w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-800 max-[519px]:block"
onClick={() => { onClick={() => {
setShowAttachMenu(false); setShowAttachMenu(false);
setShowGifMenu(false); setShowGifMenu(false);
@@ -1169,7 +1169,7 @@ export function MessageComposer() {
Stickers Stickers
</button> </button>
<button <button
className="hidden w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-800 max-[389px]:block" className="hidden w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-800 max-[519px]:block"
onClick={() => { onClick={() => {
setShowAttachMenu(false); setShowAttachMenu(false);
setShowStickerMenu(false); setShowStickerMenu(false);
@@ -1181,7 +1181,7 @@ export function MessageComposer() {
GIF GIF
</button> </button>
<button <button
className="hidden w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-800 max-[389px]:block" className="hidden w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-800 max-[519px]:block"
onClick={() => { onClick={() => {
setShowAttachMenu(false); setShowAttachMenu(false);
setShowStickerMenu(false); setShowStickerMenu(false);
@@ -1226,7 +1226,7 @@ export function MessageComposer() {
</div> </div>
<button <button
className="hidden h-10 min-w-10 rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700 disabled:opacity-60 min-[390px]:inline-flex sm:h-[42px] sm:min-w-[42px]" className="hidden h-10 w-10 items-center justify-center rounded-full bg-slate-700/85 text-xs font-semibold leading-none text-slate-200 hover:bg-slate-700 disabled:opacity-60 min-[440px]:inline-flex sm:h-[42px] sm:w-[42px]"
disabled={!canSendInActiveChat} disabled={!canSendInActiveChat}
onClick={() => { onClick={() => {
setShowGifMenu(false); setShowGifMenu(false);
@@ -1239,7 +1239,7 @@ export function MessageComposer() {
</button> </button>
<button <button
className="hidden h-10 min-w-10 rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700 disabled:opacity-60 min-[390px]:inline-flex sm:h-[42px] sm:min-w-[42px]" className="hidden h-10 w-10 items-center justify-center rounded-full bg-slate-700/85 text-xs font-semibold leading-none text-slate-200 hover:bg-slate-700 disabled:opacity-60 min-[500px]:inline-flex sm:h-[42px] sm:w-[42px]"
disabled={!canSendInActiveChat} disabled={!canSendInActiveChat}
onClick={() => { onClick={() => {
setShowStickerMenu(false); setShowStickerMenu(false);
@@ -1252,7 +1252,7 @@ export function MessageComposer() {
</button> </button>
<button <button
className="hidden h-10 min-w-10 rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700 min-[390px]:inline-flex sm:h-[42px] sm:min-w-[42px]" className="hidden h-10 w-10 items-center justify-center rounded-full bg-slate-700/85 text-xs font-semibold leading-none text-slate-200 hover:bg-slate-700 min-[560px]:inline-flex sm:h-[42px] sm:w-[42px]"
onClick={() => setShowFormatMenu((v) => !v)} onClick={() => setShowFormatMenu((v) => !v)}
type="button" type="button"
title="Text formatting" title="Text formatting"
@@ -1263,7 +1263,7 @@ export function MessageComposer() {
<textarea <textarea
ref={textareaRef} ref={textareaRef}
className="min-h-[42px] min-w-[120px] max-h-40 flex-1 resize-y rounded-2xl border border-slate-700/80 bg-slate-800/80 px-3 py-2.5 text-sm outline-none placeholder:text-slate-400 focus:border-sky-500 sm:px-4" className="min-h-[42px] min-w-0 max-h-40 flex-1 resize-y rounded-2xl border border-slate-700/80 bg-slate-800/80 px-3 py-2.5 text-sm outline-none placeholder:text-slate-400 focus:border-sky-500 sm:px-4"
placeholder={canSendInActiveChat ? "Write a message..." : "Read-only channel"} placeholder={canSendInActiveChat ? "Write a message..." : "Read-only channel"}
rows={1} rows={1}
value={text} value={text}
@@ -1282,7 +1282,7 @@ export function MessageComposer() {
{hasTextToSend ? ( {hasTextToSend ? (
<button <button
className="h-10 w-11 shrink-0 rounded-full bg-sky-500 px-2 text-sm font-semibold text-slate-950 hover:bg-sky-400 disabled:opacity-60 sm:h-[42px] sm:w-[56px] sm:px-3" className="inline-flex h-10 w-11 shrink-0 items-center justify-center rounded-full bg-sky-500 text-sm font-semibold leading-none text-slate-950 hover:bg-sky-400 disabled:opacity-60 sm:h-[42px] sm:w-[56px]"
disabled={recordingState !== "idle" || !activeChatId || !canSendInActiveChat} disabled={recordingState !== "idle" || !activeChatId || !canSendInActiveChat}
onClick={handleSend} onClick={handleSend}
type="button" type="button"
@@ -1292,7 +1292,7 @@ export function MessageComposer() {
</button> </button>
) : ( ) : (
<button <button
className={`h-10 w-11 shrink-0 rounded-full px-2 text-sm font-semibold sm:h-[42px] sm:w-[56px] sm:px-3 ${ className={`inline-flex h-10 w-11 shrink-0 items-center justify-center rounded-full text-sm font-semibold leading-none sm:h-[42px] sm:w-[56px] ${
recordingState === "idle" ? "bg-emerald-500 text-slate-950 hover:bg-emerald-400" : "bg-slate-700 text-slate-300" recordingState === "idle" ? "bg-emerald-500 text-slate-950 hover:bg-emerald-400" : "bg-slate-700 text-slate-300"
}`} }`}
disabled={isUploading || !activeChatId || !canSendInActiveChat} disabled={isUploading || !activeChatId || !canSendInActiveChat}