From bcbb8f55837668bb2ab727e1563df5836700b101 Mon Sep 17 00:00:00 2001
From: khannurien <yo@vincentlannurien.com>
Date: Sat, 27 Jun 2026 20:10:55 +0000
Subject: [PATCH] v3: minor visual fixes

---
 src/App.css                                |   8 +-
 src/components/NewPlaylistForm.tsx         |   2 +-
 src/components/PlaylistMembershipPanel.tsx |   2 +-
 src/pages/UserDumps.tsx                    |   2 +-
 src/pages/UserPublicProfile.tsx            |   2 +-
 src/themes/brutalist.css                   |  16 ++--
 src/themes/geocities.css                   |   6 +-
 src/themes/smooth.css                      | 100 ++++++++++++---------
 8 files changed, 75 insertions(+), 63 deletions(-)

diff --git a/src/App.css b/src/App.css
index fdcad92..ec97a95 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3229,7 +3229,7 @@ body.has-fab .page-content {
 }
 
 /* ── Inline new-playlist form ── */
-.modal-new-playlist-toggle {
+.modal-new-item-toggle {
   background: none;
   border: 1px dashed var(--color-border-subtle);
   border-radius: 8px;
@@ -3242,7 +3242,7 @@ body.has-fab .page-content {
   transition: border-color 0.15s, background 0.15s;
 }
 
-.modal-new-playlist-toggle:hover {
+.modal-new-item-toggle:hover {
   border-color: var(--color-accent);
   background: color-mix(in srgb, var(--color-accent) 8%, transparent);
 }
@@ -3463,7 +3463,7 @@ body.has-fab .page-content {
 }
 
 /* ── New playlist toggle (profile page header) ── */
-.new-playlist-toggle {
+.new-item-toggle {
   background: none;
   border: none;
   cursor: pointer;
@@ -3474,7 +3474,7 @@ body.has-fab .page-content {
   white-space: nowrap;
 }
 
-.new-playlist-toggle:hover {
+.new-item-toggle:hover {
   opacity: 0.75;
 }
 
diff --git a/src/components/NewPlaylistForm.tsx b/src/components/NewPlaylistForm.tsx
index e6e5fff..e56dd96 100644
--- a/src/components/NewPlaylistForm.tsx
+++ b/src/components/NewPlaylistForm.tsx
@@ -15,7 +15,7 @@ export function NewPlaylistForm(
   {
     onCreated,
     toggleLabel,
-    toggleClassName = "new-playlist-toggle",
+    toggleClassName = "new-item-toggle",
   }: NewPlaylistFormProps,
 ) {
   const [open, setOpen] = useState(false);
diff --git a/src/components/PlaylistMembershipPanel.tsx b/src/components/PlaylistMembershipPanel.tsx
index 99b684d..86b46fb 100644
--- a/src/components/PlaylistMembershipPanel.tsx
+++ b/src/components/PlaylistMembershipPanel.tsx
@@ -74,7 +74,7 @@ export function PlaylistMembershipPanel({
         : (
           <button
             type="button"
-            className="modal-new-playlist-toggle"
+            className="modal-new-item-toggle"
             onClick={() => setShowNewForm(true)}
           >
             <Trans>+ New playlist</Trans>
diff --git a/src/pages/UserDumps.tsx b/src/pages/UserDumps.tsx
index 9c1293e..5a01a97 100644
--- a/src/pages/UserDumps.tsx
+++ b/src/pages/UserDumps.tsx
@@ -108,7 +108,7 @@ export function UserDumps() {
         actions={isOwnProfile && (
           <button
             type="button"
-            className="new-playlist-toggle"
+            className="new-item-toggle"
             onClick={() => setCreateModalOpen(true)}
           >
             +<span className="btn-new-label">
diff --git a/src/pages/UserPublicProfile.tsx b/src/pages/UserPublicProfile.tsx
index f2f24ab..be3e9f1 100644
--- a/src/pages/UserPublicProfile.tsx
+++ b/src/pages/UserPublicProfile.tsx
@@ -1260,7 +1260,7 @@ function DumpList(
         {isOwnProfile && (
           <button
             type="button"
-            className="new-playlist-toggle"
+            className="new-item-toggle"
             onClick={() => setCreateModalOpen(true)}
           >
             +<span className="btn-new-label">
diff --git a/src/themes/brutalist.css b/src/themes/brutalist.css
index af3a187..b56af06 100644
--- a/src/themes/brutalist.css
+++ b/src/themes/brutalist.css
@@ -176,7 +176,7 @@
 [data-style="brutalist"] .vote-btn,
 [data-style="brutalist"] .emoji-picker-float [frimousse-emoji],
 [data-style="brutalist"] .emoji-picker-close-btn,
-[data-style="brutalist"] .new-playlist-toggle,
+[data-style="brutalist"] .new-item-toggle,
 [data-style="brutalist"] .btn--ghost,
 [data-style="brutalist"] .audio-player-btn,
 [data-style="brutalist"] .audio-player-vol-btn,
@@ -186,8 +186,8 @@
 [data-style="brutalist"] .auth-link-btn,
 [data-style="brutalist"] .form-cancel,
 [data-style="brutalist"] .form-label-action {
-  border: none;
-  box-shadow: none;
+  border: none !important;
+  box-shadow: none !important;
 }
 
 [data-style="brutalist"] .user-menu-trigger:hover:not(:disabled),
@@ -200,8 +200,8 @@
 [data-style="brutalist"] .form-cancel:active,
 [data-style="brutalist"] .form-label-action:hover:not(:disabled),
 [data-style="brutalist"] .form-label-action:active {
-  transform: none;
-  box-shadow: none;
+  transform: none !important;
+  box-shadow: none !important;
 }
 
 [data-style="brutalist"] .modal-close-btn:hover,
@@ -210,13 +210,13 @@
 [data-style="brutalist"] .vote-btn:hover:not(:disabled),
 [data-style="brutalist"] .emoji-picker-float [frimousse-emoji]:hover,
 [data-style="brutalist"] .emoji-picker-close-btn:hover,
-[data-style="brutalist"] .new-playlist-toggle:hover:not(:disabled),
+[data-style="brutalist"] .new-item-toggle:hover:not(:disabled),
 [data-style="brutalist"] .btn--ghost:hover:not(:disabled),
 [data-style="brutalist"] .audio-player-btn:hover:not(:disabled),
 [data-style="brutalist"] .audio-player-vol-btn:hover:not(:disabled),
 [data-style="brutalist"] .rich-content-thumbnail-btn:hover:not(:disabled) {
-  transform: none;
-  box-shadow: none;
+  transform: none !important;
+  box-shadow: none !important;
 }
 
 /* ── Segmented controls / visibility-toggle ──────────────────────── */
diff --git a/src/themes/geocities.css b/src/themes/geocities.css
index 2108e28..71d12e2 100644
--- a/src/themes/geocities.css
+++ b/src/themes/geocities.css
@@ -302,8 +302,8 @@
 [data-style="geocities"] .playlist-card-delete-btn,
 [data-style="geocities"] .emoji-picker-float [frimousse-emoji],
 [data-style="geocities"] .emoji-picker-close-btn,
-[data-style="geocities"] .new-playlist-toggle,
 [data-style="geocities"] .btn--ghost,
+[data-style="geocities"] .new-item-toggle,
 [data-style="geocities"] .audio-player-btn,
 [data-style="geocities"] .audio-player-vol-btn,
 [data-style="geocities"] .rich-content-thumbnail-btn,
@@ -312,8 +312,8 @@
 [data-style="geocities"] .auth-link-btn,
 [data-style="geocities"] .form-cancel,
 [data-style="geocities"] .form-label-action {
-  border: none;
-  box-shadow: none;
+  border: none !important;
+  box-shadow: none !important;
 }
 
 /* ── Segmented controls ──────────────────────────────────────────── */
diff --git a/src/themes/smooth.css b/src/themes/smooth.css
index 3de0ec7..2215346 100644
--- a/src/themes/smooth.css
+++ b/src/themes/smooth.css
@@ -77,37 +77,37 @@
 @media (prefers-color-scheme: light) {
   :root:not([data-style]),
   :root[data-style="smooth"]:not([data-color-scheme]) {
-    --color-text: #001427; /* Prussian Blue */
-    --color-text-secondary: #3a5a70;
-    --color-text-muted: #6a8898;
-    --color-on-accent: #ffffff;
+    --color-text: #0e3a42; /* darkened deep teal */
+    --color-text-secondary: #2c6671;
+    --color-text-muted: #5c8a91;
+    --color-on-accent: #fef8e6; /* cream on teal */
 
-    --color-bg: #f0f4f8;
-    --color-surface: #ffffff;
+    --color-bg: #fef8e6; /* cream */
+    --color-surface: #fffdf6;
 
     --color-border: transparent;
-    --color-border-subtle: rgba(0, 20, 39, 0.12);
+    --color-border-subtle: rgba(48, 144, 161, 0.18);
 
-    --color-accent: #bf0603; /* Brick Ember — pops on light bg */
-    --color-accent-hover: #8d0801;
+    --color-accent: #bc5148; /* terracotta — pops on cream bg */
+    --color-accent-hover: #97392f;
 
-    --color-link: #bf0603;
-    --color-link-hover: #8d0801;
+    --color-link: #bc5148;
+    --color-link-hover: #97392f;
 
-    --color-danger: #bf0603;
-    --color-danger-bg: #fde8e8;
-    --color-danger-hover: #8d0801;
+    --color-danger: #bc5148; /* terracotta */
+    --color-danger-bg: #f8e3e0;
+    --color-danger-hover: #97392f;
 
-    --color-success: #4a6e60; /* darkened Deep Teal */
-    --color-success-bg: #e0ede8;
-    --color-success-hover: #2e5448;
+    --color-success: #2e8a86; /* darkened light teal */
+    --color-success-bg: #ddf2f1;
+    --color-success-hover: #1f6b67;
 
-    --color-overlay: rgba(0, 10, 20, 0.4);
-    --color-header-user-bg: rgba(0, 20, 39, 0.07);
-    --color-header-user-bg-hover: rgba(0, 20, 39, 0.13);
+    --color-overlay: rgba(14, 58, 66, 0.35);
+    --color-header-user-bg: rgba(188, 81, 72, 0.08);
+    --color-header-user-bg-hover: rgba(188, 81, 72, 0.15);
 
-    --color-option-bg: #f5f7fa;
-    --color-option-border: #dde3ea;
+    --color-option-bg: #fff9ec;
+    --color-option-border: #ece4cc;
   }
 }
 
@@ -144,27 +144,39 @@
 :root:not([data-style])[data-color-scheme="light"],
 :root[data-style="smooth"][data-color-scheme="light"] {
   color-scheme: light;
-  --color-text: #001427;
-  --color-text-secondary: #3a5a70;
-  --color-text-muted: #6a8898;
-  --color-on-accent: #ffffff;
-  --color-bg: #f0f4f8;
-  --color-surface: #ffffff;
+  --color-text: #0e3a42;
+  --color-text-secondary: #2c6671;
+  --color-text-muted: #5c8a91;
+  --color-on-accent: #fef8e6;
+  --color-bg: #fef8e6;
+  --color-surface: #fffdf6;
   --color-border: transparent;
-  --color-border-subtle: rgba(0, 20, 39, 0.12);
-  --color-accent: #bf0603;
-  --color-accent-hover: #8d0801;
-  --color-link: #bf0603;
-  --color-link-hover: #8d0801;
-  --color-danger: #bf0603;
-  --color-danger-bg: #fde8e8;
-  --color-danger-hover: #8d0801;
-  --color-success: #4a6e60;
-  --color-success-bg: #e0ede8;
-  --color-success-hover: #2e5448;
-  --color-overlay: rgba(0, 10, 20, 0.4);
-  --color-header-user-bg: rgba(0, 20, 39, 0.07);
-  --color-header-user-bg-hover: rgba(0, 20, 39, 0.13);
-  --color-option-bg: #f5f7fa;
-  --color-option-border: #dde3ea;
+  --color-border-subtle: rgba(48, 144, 161, 0.18);
+  --color-accent: #bc5148;
+  --color-accent-hover: #97392f;
+  --color-link: #bc5148;
+  --color-link-hover: #97392f;
+  --color-danger: #bc5148;
+  --color-danger-bg: #f8e3e0;
+  --color-danger-hover: #97392f;
+  --color-success: #2e8a86;
+  --color-success-bg: #ddf2f1;
+  --color-success-hover: #1f6b67;
+  --color-overlay: rgba(14, 58, 66, 0.35);
+  --color-header-user-bg: rgba(188, 81, 72, 0.08);
+  --color-header-user-bg-hover: rgba(188, 81, 72, 0.15);
+  --color-option-bg: #fff9ec;
+  --color-option-border: #ece4cc;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Structural overrides
+   ══════════════════════════════════════════════════════════════════════ */
+
+/* On hover the danger button fills with the solid dark danger colour. The
+   resting text colour is --color-text, which is dark in the light variant,
+   so force white on hover to keep it legible. */
+:root:not([data-style]) .btn-danger:hover,
+:root[data-style="smooth"] .btn-danger:hover {
+  color: #fff;
 }