From 437eea0df3bbf5ab6d341048f59bf9ff42967fe1 Mon Sep 17 00:00:00 2001 From: khannurien Date: Thu, 8 Oct 2026 21:27:26 +0000 Subject: [PATCH] =?UTF-8?q?v4:=20every=20inline=20editor=20ends=20in=20a?= =?UTF-8?q?=20btn-primary=20Save=20and=20a=20btn-secondary=20Cancel=20?= =?UTF-8?q?=E2=80=94=20comments=20drew=20their=20own=20.comment-submit-btn?= =?UTF-8?q?=20and=20.comment-cancel-btn,=20the=20profile's=20email=20its?= =?UTF-8?q?=20own=20.profile-email-btn=20pair,=20the=20bio=20a=20plain-tex?= =?UTF-8?q?t=20form-cancel,=20and=20the=20chat's=20edit=20box=20shrank=20t?= =?UTF-8?q?he=20shared=20buttons=20with=20a=20rule=20of=20its=20own;=20the?= =?UTF-8?q?y=20were=20four=20sizes,=20two=20orders=20of=20chrome,=20and=20?= =?UTF-8?q?the=20comment=20button's=20white=20label=20sat=20on=20Smooth's?= =?UTF-8?q?=20yellow=20accent.=20They=20all=20take=20the=20shared=20classe?= =?UTF-8?q?s=20now,=20and=20the=20new=20.btn-sm=20is=20the=20one=20compact?= =?UTF-8?q?=20size,=20for=20the=20comment=20forms,=20the=20chat=20edit=20b?= =?UTF-8?q?ox=20and=20the=20email=20editor;=20the=20bio=20and=20the=20dump?= =?UTF-8?q?=20title=20stay=20full=20size.=20.btn-secondary=20gets=20a=20di?= =?UTF-8?q?sabled=20state,=20as=20btn-primary=20has.=20The=20bespoke=20rul?= =?UTF-8?q?es=20are=20gone,=20with=20GeoCities'=20bevel=20for=20the=20comm?= =?UTF-8?q?ent=20buttons,=20which=20btn-primary=20and=20btn-secondary=20al?= =?UTF-8?q?ready=20have.=20670=20frontend=20tests=20pass,=20and=20tsc,=20e?= =?UTF-8?q?slint=20and=20deno=20fmt=20are=20clean;=20the=20comment,=20repl?= =?UTF-8?q?y,=20chat=20edit,=20email=20and=20bio=20editors=20were=20checke?= =?UTF-8?q?d=20in=20screenshots=20in=20Smooth,=20Kanagawa,=20Brutalist=20a?= =?UTF-8?q?nd=20GeoCities=20at=201100=20and=20360px.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- src/App.css | 107 +++---------------- src/components/chat/ChatEditBox.tsx | 8 +- src/components/comment/CommentForm.tsx | 4 +- src/components/profile/DescriptionEditor.tsx | 2 +- src/components/profile/EmailEditor.tsx | 4 +- src/themes/geocities.css | 2 - 6 files changed, 25 insertions(+), 102 deletions(-) diff --git a/src/App.css b/src/App.css index ca5a40dc..5b57fd17 100644 --- a/src/App.css +++ b/src/App.css @@ -2459,50 +2459,6 @@ body.has-player .chat-fab { gap: 0.4rem; } -.profile-email-btn { - display: inline-flex; - align-items: center; - justify-content: center; - height: 1.75rem; - padding: 0 0.65rem; - border-radius: var(--radius-sm); - border: 1.5px solid; - font-size: var(--text-xs); - font-family: inherit; - font-weight: 500; - cursor: pointer; - box-sizing: border-box; - transition: background var(--dur-base), border-color var(--dur-base), color - var(--dur-base); -} - -.profile-email-btn--save { - background: var(--color-accent); - color: var(--color-on-accent); - border-color: var(--color-accent); -} - -.profile-email-btn--save:hover:not(:disabled) { - background: var(--color-accent-hover); - border-color: var(--color-accent-hover); -} - -.profile-email-btn--save:disabled { - opacity: 0.45; - cursor: not-allowed; -} - -.profile-email-btn--cancel { - background: transparent; - color: var(--color-text-muted); - border-color: var(--color-border); -} - -.profile-email-btn--cancel:hover { - color: var(--color-text); - border-color: var(--color-text-muted); -} - .profile-description-actions { display: flex; align-items: center; @@ -3512,6 +3468,20 @@ body.has-player .chat-fab { color: var(--color-accent); } +.btn-secondary:disabled { + opacity: 0.45; + cursor: not-allowed; + pointer-events: none; +} + +/* The compact size, for the inline editors that sit in a narrow column or + beside small text: a comment, a chat message, the profile's email. Every + inline editor ends in a btn-primary Save then a btn-secondary Cancel. */ +.btn-sm { + font-size: var(--text-sm); + padding: 0.25rem 0.75rem; +} + .btn-danger { background: var(--color-danger-bg); color: var(--color-text); @@ -4907,15 +4877,6 @@ body.has-player .chat-fab { gap: 0.4rem; } -/* Compact buttons for the inline edit box — the full-size form buttons are too - bulky for the narrow message column. */ -.chat-edit-actions .btn-primary, -.chat-edit-actions .btn-secondary { - font-size: var(--text-xs); - padding: 0.25rem 0.7rem; - box-shadow: none; -} - .chat-composer { display: flex; gap: 0.5rem; @@ -5837,46 +5798,6 @@ body.has-player .chat-fab { align-items: center; } -.comment-submit-btn { - background: var(--color-accent); - color: #fff; - border: none; - border-radius: var(--radius-md); - padding: 0.4rem 1rem; - font-family: inherit; - font-size: var(--text-sm); - font-weight: 700; - cursor: pointer; - transition: background var(--dur-base), opacity var(--dur-base); - letter-spacing: 0.02em; -} - -.comment-submit-btn:not(:disabled):hover { - background: var(--color-accent-hover); -} - -.comment-submit-btn:disabled { - opacity: 0.4; - cursor: default; -} - -.comment-cancel-btn { - background: transparent; - border: 1.5px solid var(--color-border-subtle); - border-radius: var(--radius-md); - padding: 0.4rem 1rem; - font-family: inherit; - font-size: var(--text-sm); - color: var(--color-text); - opacity: 0.6; - cursor: pointer; - transition: opacity var(--dur-base); -} - -.comment-cancel-btn:hover { - opacity: 1; -} - .comment-node-inner--deleted { opacity: 0.35; } diff --git a/src/components/chat/ChatEditBox.tsx b/src/components/chat/ChatEditBox.tsx index 847375ce..6a039139 100644 --- a/src/components/chat/ChatEditBox.tsx +++ b/src/components/chat/ChatEditBox.tsx @@ -78,13 +78,17 @@ export function ChatEditBox(
-
diff --git a/src/components/comment/CommentForm.tsx b/src/components/comment/CommentForm.tsx index c7277f95..6164de7a 100644 --- a/src/components/comment/CommentForm.tsx +++ b/src/components/comment/CommentForm.tsx @@ -109,7 +109,7 @@ export function CommentForm({
@@ -118,7 +118,7 @@ export function CommentForm({ {showCancel && (