From 39a0cc397e57abf51f1f54252ab6fbb37f7c5342 Mon Sep 17 00:00:00 2001
From: khannurien <yo@vincentlannurien.com>
Date: Sat, 21 Mar 2026 19:41:15 +0000
Subject: [PATCH] v3: button styling consistency pass

---
 src/App.css                           | 29 ++++++++++++++++++---------
 src/components/DumpCreateModal.tsx    |  4 ++--
 src/components/PlaylistCreateForm.tsx |  2 +-
 src/index.css                         |  5 +++++
 src/pages/Dump.tsx                    |  4 ++--
 src/pages/DumpCreate.tsx              |  2 +-
 src/pages/DumpEdit.tsx                |  6 +++---
 src/pages/PlaylistDetail.tsx          |  4 ++--
 src/pages/UserDumps.tsx               |  2 +-
 src/pages/UserPlaylists.tsx           |  2 +-
 src/pages/UserPublicProfile.tsx       |  6 +++---
 src/pages/UserUpvoted.tsx             |  2 +-
 12 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/src/App.css b/src/App.css
index 9731d59..bd5847c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -280,7 +280,7 @@
 }
 
 /* ── Mode toggle — segmented control ── */
-.dump-mode-toggle {
+.visibility-toggle {
   display: flex;
   background: var(--color-bg);
   border: 1.5px solid var(--color-border);
@@ -289,7 +289,7 @@
   gap: 2px;
 }
 
-.dump-mode-toggle button {
+.visibility-toggle button {
   flex: 1;
   padding: 0.3rem 0.9rem;
   border-radius: 6px;
@@ -303,12 +303,12 @@
   white-space: nowrap;
 }
 
-.dump-mode-toggle button.active {
+.visibility-toggle button.active {
   background: var(--color-accent);
   color: var(--color-on-accent);
 }
 
-.dump-mode-toggle button:not(.active):hover {
+.visibility-toggle button:not(.active):hover {
   background: color-mix(in srgb, var(--color-accent) 12%, transparent);
 }
 
@@ -1059,7 +1059,7 @@ body.has-player .fab-new {
   font-weight: 600;
 }
 
-.profile-header .logout-btn {
+.profile-header .btn-border {
   margin-top: 0.5rem;
 }
 
@@ -1091,7 +1091,7 @@ body.has-player .fab-new {
   margin-top: 0.5rem;
   align-items: center;
 }
-.profile-own-actions .logout-btn {
+.profile-own-actions .btn-border {
   margin-top: 0;
 }
 .invite-generate {
@@ -1189,7 +1189,10 @@ body.has-player .fab-new {
   color: var(--color-accent);
 }
 
-.logout-btn {
+/* ── Border-tinted buttons ── */
+.btn-border-danger,
+.btn-border-success,
+.btn-border {
   padding: 0.3rem 0.9rem;
   border: 1.5px solid var(--color-border);
   border-radius: 6px;
@@ -1197,14 +1200,22 @@ body.has-player .fab-new {
   color: var(--color-text-muted);
   font-size: 0.85rem;
   cursor: pointer;
-  transition: border-color 0.15s, color 0.15s;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
 }
 
-.logout-btn:hover {
+.btn-border-danger:hover,
+.btn-border-danger.active,
+.btn-border:hover {
   border-color: var(--color-danger);
   color: var(--color-danger);
 }
 
+.btn-border-success:hover,
+.btn-border-success.active {
+  border-color: var(--color-success);
+  color: var(--color-success);
+}
+
 /* ── ErrorCard ── */
 .error-card-wrap {
   display: flex;
diff --git a/src/components/DumpCreateModal.tsx b/src/components/DumpCreateModal.tsx
index e95b6a0..894f0e5 100644
--- a/src/components/DumpCreateModal.tsx
+++ b/src/components/DumpCreateModal.tsx
@@ -307,7 +307,7 @@ export function DumpCreateModal({ onClose }: DumpCreateModalProps) {
           {phase === "create"
             ? (
               <>
-                <div className="dump-mode-toggle">
+                <div className="visibility-toggle">
                   <button
                     type="button"
                     className={mode === "url" ? "active" : ""}
@@ -412,7 +412,7 @@ export function DumpCreateModal({ onClose }: DumpCreateModalProps) {
                     />
                   </div>
 
-                  <div className="dump-mode-toggle">
+                  <div className="visibility-toggle">
                     <button
                       type="button"
                       className={!isPrivate ? "active" : ""}
diff --git a/src/components/PlaylistCreateForm.tsx b/src/components/PlaylistCreateForm.tsx
index a4459ab..1d3228f 100644
--- a/src/components/PlaylistCreateForm.tsx
+++ b/src/components/PlaylistCreateForm.tsx
@@ -73,7 +73,7 @@ export function PlaylistCreateForm(
         onChange={(e) => setDescription(e.target.value)}
         rows={3}
       />
-      <div className="dump-mode-toggle">
+      <div className="visibility-toggle">
         <button
           type="button"
           className={isPublic ? "active" : ""}
diff --git a/src/index.css b/src/index.css
index 4c6cee3..beeba16 100644
--- a/src/index.css
+++ b/src/index.css
@@ -34,6 +34,11 @@
   --color-danger-bg: #a02b2b;
   --color-danger-hover: #c03030;
 
+  /* Success */
+  --color-success: #4caf7d;
+  --color-success-bg: #1a6b3a;
+  --color-success-hover: #2d9e58;
+
   /* Overlays */
   --color-overlay: rgba(0, 0, 0, 0.45);
   --color-header-user-bg: rgba(0, 0, 0, 0.2);
diff --git a/src/pages/Dump.tsx b/src/pages/Dump.tsx
index 4d7116f..e982625 100644
--- a/src/pages/Dump.tsx
+++ b/src/pages/Dump.tsx
@@ -153,14 +153,14 @@ export function Dump() {
         actions={
           <>
             <button
-              className="logout-btn"
+              className="btn-border"
               type="button"
               onClick={() => globalThis.location.reload()}
             >
               Retry
             </button>
             <button
-              className="logout-btn"
+              className="btn-border"
               type="button"
               onClick={() => navigate("/")}
             >
diff --git a/src/pages/DumpCreate.tsx b/src/pages/DumpCreate.tsx
index aa326bb..8f7b03c 100644
--- a/src/pages/DumpCreate.tsx
+++ b/src/pages/DumpCreate.tsx
@@ -195,7 +195,7 @@ export function DumpCreate() {
       <div className="dump-create-wrapper">
         <div className="dump-create-header">
           <h1 className="dump-create-title">New dump</h1>
-          <div className="dump-mode-toggle">
+          <div className="visibility-toggle">
             <button
               type="button"
               className={mode === "url" ? "active" : ""}
diff --git a/src/pages/DumpEdit.tsx b/src/pages/DumpEdit.tsx
index a494fbb..9447e74 100644
--- a/src/pages/DumpEdit.tsx
+++ b/src/pages/DumpEdit.tsx
@@ -153,14 +153,14 @@ export function DumpEdit() {
         actions={
           <>
             <button
-              className="logout-btn"
+              className="btn-border"
               type="button"
               onClick={() => globalThis.location.reload()}
             >
               Retry
             </button>
             <button
-              className="logout-btn"
+              className="btn-border"
               type="button"
               onClick={() => navigate("/")}
             >
@@ -261,7 +261,7 @@ export function DumpEdit() {
             />
           </div>
 
-          <div className="dump-mode-toggle">
+          <div className="visibility-toggle">
             <button
               type="button"
               className={!isPrivate ? "active" : ""}
diff --git a/src/pages/PlaylistDetail.tsx b/src/pages/PlaylistDetail.tsx
index a221940..b630c3c 100644
--- a/src/pages/PlaylistDetail.tsx
+++ b/src/pages/PlaylistDetail.tsx
@@ -414,7 +414,7 @@ export function PlaylistDetail() {
         message={state.error}
         actions={
           <button
-            className="logout-btn"
+            className="btn-border"
             type="button"
             onClick={() => navigate("/")}
           >
@@ -537,7 +537,7 @@ export function PlaylistDetail() {
             <div className="playlist-detail-meta">
               {editOpen
                 ? (
-                  <div className="dump-mode-toggle playlist-edit-toggle">
+                  <div className="visibility-toggle playlist-edit-toggle">
                     <button
                       type="button"
                       className={editIsPublic ? "active" : ""}
diff --git a/src/pages/UserDumps.tsx b/src/pages/UserDumps.tsx
index 099ad34..7c23bc6 100644
--- a/src/pages/UserDumps.tsx
+++ b/src/pages/UserDumps.tsx
@@ -188,7 +188,7 @@ export function UserDumps() {
       <PageError
         message={state.error}
         actions={
-          <Link to={`/users/${username}`} className="logout-btn">
+          <Link to={`/users/${username}`} className="btn-border">
             ← Back to profile
           </Link>
         }
diff --git a/src/pages/UserPlaylists.tsx b/src/pages/UserPlaylists.tsx
index a0389d6..c3caff1 100644
--- a/src/pages/UserPlaylists.tsx
+++ b/src/pages/UserPlaylists.tsx
@@ -386,7 +386,7 @@ export function UserPlaylists() {
       <PageError
         message={state.error}
         actions={
-          <Link to={`/users/${username}`} className="logout-btn">
+          <Link to={`/users/${username}`} className="btn-border">
             ← Back to profile
           </Link>
         }
diff --git a/src/pages/UserPublicProfile.tsx b/src/pages/UserPublicProfile.tsx
index cd78784..bc41787 100644
--- a/src/pages/UserPublicProfile.tsx
+++ b/src/pages/UserPublicProfile.tsx
@@ -488,14 +488,14 @@ export function UserPublicProfile() {
         actions={
           <>
             <button
-              className="logout-btn"
+              className="btn-border"
               type="button"
               onClick={() => navigate("/")}
             >
               ← Back
             </button>
             {me && (
-              <button className="logout-btn" type="button" onClick={logout}>
+              <button className="btn-border" type="button" onClick={logout}>
                 Log out
               </button>
             )}
@@ -563,7 +563,7 @@ export function UserPublicProfile() {
           {isOwnProfile && (
             <div className="profile-own-actions">
               <InviteButton />
-              <button type="button" className="logout-btn" onClick={logout}>
+              <button type="button" className="btn-border" onClick={logout}>
                 Log out
               </button>
             </div>
diff --git a/src/pages/UserUpvoted.tsx b/src/pages/UserUpvoted.tsx
index c295d81..4a56457 100644
--- a/src/pages/UserUpvoted.tsx
+++ b/src/pages/UserUpvoted.tsx
@@ -326,7 +326,7 @@ export function UserUpvoted() {
       <PageError
         message={state.error}
         actions={
-          <Link to={`/users/${username}`} className="logout-btn">
+          <Link to={`/users/${username}`} className="btn-border">
             ← Back to profile
           </Link>
         }