From 6dc191585c9de33988e7932b7064a7288c1f803f Mon Sep 17 00:00:00 2001
From: Mistral Vibe <vibe@mistral.ai>
Date: Wed, 1 Apr 2026 09:52:06 +0200
Subject: [PATCH] style: align all pages with CLAUDE.md design system

- Inputs: uniform padding (8px 12px), borderRadius 7, bg-inset background
- List rows/cards: bg-subtle background, border-subtle border (bg-inset was input-only)
- Invite/admin badge borders: use accent-border var instead of raw accent
- Section headers: 11px, weight 500, uppercase, 0.7px letter-spacing
- Notification/status banners: borderRadius 8
- Remove debug console.log statements from SettingsPage avatar upload flow

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/src/pages/BandPage.tsx     | 36 ++++++++--------
 web/src/pages/HomePage.tsx     |  2 +-
 web/src/pages/LoginPage.tsx    |  6 +--
 web/src/pages/SessionPage.tsx  |  8 ++--
 web/src/pages/SettingsPage.tsx | 77 ++++++++++++----------------------
 web/src/pages/SongPage.tsx     |  4 +-
 6 files changed, 55 insertions(+), 78 deletions(-)

diff --git a/web/src/pages/BandPage.tsx b/web/src/pages/BandPage.tsx
index 3c0f97f..6af510c 100644
--- a/web/src/pages/BandPage.tsx
+++ b/web/src/pages/BandPage.tsx
@@ -254,7 +254,7 @@ export function BandPage() {
                 value={folderInput}
                 onChange={(e) => setFolderInput(e.target.value)}
                 placeholder={`bands/${band.slug}/`}
-                style={{ width: "100%", padding: "7px 10px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", fontSize: 13, fontFamily: "monospace", boxSizing: "border-box" }}
+                style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, fontFamily: "monospace", boxSizing: "border-box" }}
               />
               <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
                 <button
@@ -289,7 +289,7 @@ export function BandPage() {
           </div>
 
           {inviteLink && (
-            <div style={{ background: "var(--accent-bg)", border: "1px solid var(--accent)", borderRadius: 6, padding: "10px 14px", marginBottom: 12 }}>
+            <div style={{ background: "var(--accent-bg)", border: "1px solid var(--accent-border)", borderRadius: 8, padding: "10px 14px", marginBottom: 12 }}>
               <p style={{ color: "var(--text-muted)", fontSize: 11, margin: "0 0 6px" }}>Invite link (copied to clipboard, valid 72h):</p>
               <code style={{ color: "var(--accent)", fontSize: 12, wordBreak: "break-all" }}>{inviteLink}</code>
               <button
@@ -305,7 +305,7 @@ export function BandPage() {
             {members?.map((m) => (
               <div
                 key={m.id}
-                style={{ background: "var(--bg-subtle)", border: "1px solid var(--border)", borderRadius: 6, padding: "10px 14px", display: "flex", justifyContent: "space-between", alignItems: "center" }}
+                style={{ background: "var(--bg-subtle)", border: "1px solid var(--border-subtle)", borderRadius: 8, padding: "10px 14px", display: "flex", justifyContent: "space-between", alignItems: "center" }}
               >
                 <div>
                   <span style={{ fontWeight: 500 }}>{m.display_name}</span>
@@ -316,7 +316,7 @@ export function BandPage() {
                     fontSize: 10, fontFamily: "monospace", padding: "2px 6px", borderRadius: 3,
                     background: m.role === "admin" ? "var(--accent-bg)" : "var(--bg-inset)",
                     color: m.role === "admin" ? "var(--accent)" : "var(--text-muted)",
-                    border: `1px solid ${m.role === "admin" ? "var(--accent)" : "var(--border)"}`,
+                    border: `1px solid ${m.role === "admin" ? "var(--accent-border)" : "var(--border)"}`,
                   }}>
                     {m.role}
                   </span>
@@ -355,12 +355,12 @@ export function BandPage() {
         </div>
 
         {scanning && scanProgress && (
-          <div style={{ background: "var(--bg-subtle)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text-muted)", fontSize: 12, padding: "8px 14px", marginBottom: 8, fontFamily: "monospace" }}>
+          <div style={{ background: "var(--bg-subtle)", border: "1px solid var(--border)", borderRadius: 8, color: "var(--text-muted)", fontSize: 12, padding: "8px 14px", marginBottom: 8, fontFamily: "monospace" }}>
             {scanProgress}
           </div>
         )}
         {scanMsg && (
-          <div style={{ background: "var(--teal-bg)", border: "1px solid var(--teal)", borderRadius: 6, color: "var(--teal)", fontSize: 12, padding: "8px 14px", marginBottom: 12 }}>
+          <div style={{ background: "var(--teal-bg)", border: "1px solid var(--teal)", borderRadius: 8, color: "var(--teal)", fontSize: 12, padding: "8px 14px", marginBottom: 12 }}>
             {scanMsg}
           </div>
         )}
@@ -373,7 +373,7 @@ export function BandPage() {
               value={title}
               onChange={(e) => setTitle(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && title && createMutation.mutate()}
-              style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", marginBottom: 12, fontSize: 14, boxSizing: "border-box" }}
+              style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", marginBottom: 12, fontSize: 14, boxSizing: "border-box" }}
               autoFocus
             />
             <div style={{ display: "flex", gap: 8 }}>
@@ -425,8 +425,8 @@ export function BandPage() {
                 key={s.id}
                 to={`/bands/${bandId}/sessions/${s.id}`}
                 style={{
-                  background: "var(--bg-inset)",
-                  border: "1px solid var(--border)",
+                  background: "var(--bg-subtle)",
+                  border: "1px solid var(--border-subtle)",
                   borderRadius: 8,
                   padding: "14px 18px",
                   textDecoration: "none",
@@ -467,8 +467,8 @@ export function BandPage() {
                       key={song.id}
                       to={`/bands/${bandId}/songs/${song.id}`}
                       style={{
-                        background: "var(--bg-inset)",
-                        border: "1px solid var(--border)",
+                        background: "var(--bg-subtle)",
+                        border: "1px solid var(--border-subtle)",
                         borderRadius: 8,
                         padding: "14px 18px",
                         textDecoration: "none",
@@ -512,7 +512,7 @@ export function BandPage() {
                     onChange={(e) => setSearchQ(e.target.value)}
                     onKeyDown={(e) => { if (e.key === "Enter") { setSearchDirty(true); qc.invalidateQueries({ queryKey: ["songs-search", bandId] }); } }}
                     placeholder="Search by name…"
-                    style={{ width: "100%", padding: "7px 10px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", fontSize: 13, boxSizing: "border-box" }}
+                    style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, boxSizing: "border-box" }}
                   />
                 </div>
                 <div>
@@ -521,7 +521,7 @@ export function BandPage() {
                     value={searchKey}
                     onChange={(e) => setSearchKey(e.target.value)}
                     placeholder="e.g. Am, C, F#"
-                    style={{ width: "100%", padding: "7px 10px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", fontSize: 13, boxSizing: "border-box" }}
+                    style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, boxSizing: "border-box" }}
                   />
                 </div>
                 <div>
@@ -532,7 +532,7 @@ export function BandPage() {
                     type="number"
                     min={0}
                     placeholder="e.g. 80"
-                    style={{ width: "100%", padding: "7px 10px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", fontSize: 13, boxSizing: "border-box" }}
+                    style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, boxSizing: "border-box" }}
                   />
                 </div>
                 <div>
@@ -543,7 +543,7 @@ export function BandPage() {
                     type="number"
                     min={0}
                     placeholder="e.g. 140"
-                    style={{ width: "100%", padding: "7px 10px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", fontSize: 13, boxSizing: "border-box" }}
+                    style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, boxSizing: "border-box" }}
                   />
                 </div>
               </div>
@@ -571,7 +571,7 @@ export function BandPage() {
                     onChange={(e) => setSearchTagInput(e.target.value)}
                     onKeyDown={(e) => e.key === "Enter" && addTag()}
                     placeholder="Add tag…"
-                    style={{ flex: 1, padding: "6px 10px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", fontSize: 12 }}
+                    style={{ flex: 1, padding: "6px 10px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 12 }}
                   />
                   <button
                     onClick={addTag}
@@ -599,8 +599,8 @@ export function BandPage() {
                     key={song.id}
                     to={`/bands/${bandId}/songs/${song.id}`}
                     style={{
-                      background: "var(--bg-inset)",
-                      border: "1px solid var(--border)",
+                      background: "var(--bg-subtle)",
+                      border: "1px solid var(--border-subtle)",
                       borderRadius: 8,
                       padding: "14px 18px",
                       textDecoration: "none",
diff --git a/web/src/pages/HomePage.tsx b/web/src/pages/HomePage.tsx
index 9d65d1b..2cfa3a5 100644
--- a/web/src/pages/HomePage.tsx
+++ b/web/src/pages/HomePage.tsx
@@ -35,7 +35,7 @@ export function HomePage() {
     padding: "8px 12px",
     background: "var(--bg-inset)",
     border: "1px solid var(--border)",
-    borderRadius: 6,
+    borderRadius: 7,
     color: "var(--text)",
     marginBottom: 12,
     fontSize: 14,
diff --git a/web/src/pages/LoginPage.tsx b/web/src/pages/LoginPage.tsx
index f353c49..6584039 100644
--- a/web/src/pages/LoginPage.tsx
+++ b/web/src/pages/LoginPage.tsx
@@ -28,10 +28,10 @@ export function LoginPage() {
   }
 
   const inputStyle: React.CSSProperties = {
-    width: "100%", padding: "10px 12px",
+    width: "100%", padding: "8px 12px",
     background: "var(--bg-inset)",
     border: "1px solid var(--border)",
-    borderRadius: 6,
+    borderRadius: 7,
     color: "var(--text)",
     marginBottom: 16, fontSize: 14, boxSizing: "border-box",
   };
@@ -68,7 +68,7 @@ export function LoginPage() {
           style={{ ...inputStyle, marginBottom: 24 }}
         />
 
-        <button type="submit" style={{ width: "100%", padding: "12px", background: "var(--accent)", border: "none", borderRadius: 6, color: "var(--accent-fg)", fontWeight: 600, cursor: "pointer", fontSize: 14 }}>
+        <button type="submit" style={{ width: "100%", padding: "10px", background: "var(--accent)", border: "none", borderRadius: 7, color: "var(--accent-fg)", fontWeight: 600, cursor: "pointer", fontSize: 14 }}>
           {mode === "login" ? "Sign In" : "Create Account"}
         </button>
 
diff --git a/web/src/pages/SessionPage.tsx b/web/src/pages/SessionPage.tsx
index 70c45bf..52e65ea 100644
--- a/web/src/pages/SessionPage.tsx
+++ b/web/src/pages/SessionPage.tsx
@@ -104,14 +104,14 @@ export function SessionPage() {
                 value={labelInput}
                 onChange={(e) => setLabelInput(e.target.value)}
                 placeholder="e.g. pre-gig warmup"
-                style={{ width: "100%", padding: "7px 10px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", fontSize: 13, boxSizing: "border-box", marginBottom: 10 }}
+                style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, boxSizing: "border-box", marginBottom: 10 }}
               />
               <label style={{ display: "block", color: "var(--text-muted)", fontSize: 11, marginBottom: 4 }}>NOTES</label>
               <textarea
                 value={notesInput}
                 onChange={(e) => setNotesInput(e.target.value)}
                 rows={3}
-                style={{ width: "100%", padding: "7px 10px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", fontSize: 13, boxSizing: "border-box", resize: "vertical", fontFamily: "inherit" }}
+                style={{ width: "100%", padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, boxSizing: "border-box", resize: "vertical", fontFamily: "inherit" }}
               />
               <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
                 <button
@@ -139,8 +139,8 @@ export function SessionPage() {
               key={song.id}
               to={`/bands/${bandId}/songs/${song.id}`}
               style={{
-                background: "var(--bg-inset)",
-                border: "1px solid var(--border)",
+                background: "var(--bg-subtle)",
+                border: "1px solid var(--border-subtle)",
                 borderRadius: 8,
                 padding: "14px 18px",
                 textDecoration: "none",
diff --git a/web/src/pages/SettingsPage.tsx b/web/src/pages/SettingsPage.tsx
index ce95d5e..65e16e0 100644
--- a/web/src/pages/SettingsPage.tsx
+++ b/web/src/pages/SettingsPage.tsx
@@ -27,7 +27,7 @@ const inputStyle: React.CSSProperties = {
   padding: "8px 12px",
   background: "var(--bg-inset)",
   border: "1px solid var(--border)",
-  borderRadius: 6,
+  borderRadius: 7,
   color: "var(--text)",
   fontSize: 14,
   boxSizing: "border-box",
@@ -102,9 +102,6 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
               lastModified: Date.now()
             });
             
-            console.log(`Resized image from ${img.width}x${img.height} to ${width}x${height}`);
-            console.log(`File size reduced from ${file.size} to ${resizedFile.size} bytes`);
-            
             resolve(resizedFile);
           }, 'image/jpeg', 0.8); // JPEG quality 80%
         };
@@ -144,7 +141,7 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
   return (
     <>
       <section style={{ marginBottom: 32 }}>
-        <h2 style={{ fontSize: 13, color: "var(--text-muted)", fontFamily: "monospace", letterSpacing: 1, marginBottom: 16 }}>PROFILE</h2>
+        <h2 style={{ fontSize: 11, fontWeight: 500, color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.7px", marginBottom: 16 }}>PROFILE</h2>
         <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 16 }}>
         {avatarUrl && (
           <img src={avatarUrl} alt="Profile" style={{ width: 64, height: 64, borderRadius: "50%", objectFit: "cover" }} />
@@ -158,7 +155,7 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
       </section>
 
       <section style={{ marginBottom: 32 }}>
-        <h2 style={{ fontSize: 13, color: "var(--text-muted)", fontFamily: "monospace", letterSpacing: 1, marginBottom: 8 }}>NEXTCLOUD CONNECTION</h2>
+        <h2 style={{ fontSize: 11, fontWeight: 500, color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.7px", marginBottom: 8 }}>Nextcloud Connection</h2>
         <p style={{ color: "var(--text-subtle)", fontSize: 12, marginBottom: 16 }}>
           Configure your personal Nextcloud credentials. When set, all file operations (band folders, song uploads, scans) will use these credentials.
         </p>
@@ -190,43 +187,36 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
       </section>
 
       <section style={{ marginBottom: 32 }}>
-        <h2 style={{ fontSize: 13, color: "var(--text-muted)", fontFamily: "monospace", letterSpacing: 1, marginBottom: 16 }}>AVATAR</h2>
+        <h2 style={{ fontSize: 11, fontWeight: 500, color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.7px", marginBottom: 16 }}>AVATAR</h2>
         <div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 16 }}>
           <input
             type="file"
             accept="image/*"
             onChange={async (e) => {
-              console.log("File input changed", e.target.files);
               const file = e.target.files?.[0];
               if (file) {
-                console.log("Selected file:", file.name, file.type, file.size);
                 setUploading(true);
-                
+
                 try {
                   // Check file size and resize if needed
                   const maxSize = 4 * 1024 * 1024; // 4MB (more conservative to account for base64 overhead)
                   let processedFile = file;
-                  
+
                   if (file.size > maxSize) {
-                    console.log("File too large, resizing...");
                     processedFile = await resizeImage(file, 800, 800); // Max 800x800
                   }
-                  
+
                   const formData = new FormData();
                   formData.append('file', processedFile, processedFile.name || file.name);
-                  
-                  console.log("Uploading file to /auth/me/avatar");
-                  console.log("Final file size:", processedFile.size);
+
                   const response = await api.upload<MemberRead>('/auth/me/avatar', formData);
-                  console.log("Upload response:", response);
-                  
+
                   setAvatarUrl(response.avatar_url || '');
                   qc.invalidateQueries({ queryKey: ['me'] });
                   qc.invalidateQueries({ queryKey: ['comments'] });
                 } catch (err) {
-                  console.error("Upload failed:", err);
                   let errorMessage = 'Failed to upload avatar. Please try again.';
-                  
+
                   if (err instanceof Error) {
                     errorMessage = err.message;
                     if (err.message.includes('413')) {
@@ -235,8 +225,6 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
                       errorMessage = 'Invalid image file. Please upload a valid image (JPG, PNG, etc.).';
                     }
                   } else if (typeof err === 'object' && err !== null) {
-                    // Try to extract more details from the error object
-                    console.error("Error details:", JSON.stringify(err));
                     const errorObj = err as { status?: number; data?: { detail?: string } };
                     if (errorObj.status === 422 && errorObj.data?.detail) {
                       errorMessage = errorObj.data.detail;
@@ -252,48 +240,39 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
             style={{ display: "none" }}
             id="avatar-upload"
           />
-          <label htmlFor="avatar-upload" style={{ 
-            background: "var(--accent)", 
-            border: "none", 
-            borderRadius: 6, 
-            color: "var(--accent-fg)", 
-            cursor: "pointer", 
-            padding: "8px 16px", 
-            fontWeight: 600, 
-            fontSize: 14 
+          <label htmlFor="avatar-upload" style={{
+            background: "var(--accent)",
+            border: "none",
+            borderRadius: 6,
+            color: "var(--accent-fg)",
+            cursor: "pointer",
+            padding: "8px 16px",
+            fontWeight: 600,
+            fontSize: 13,
           }}>
             {uploading ? "Uploading..." : "Upload Avatar"}
           </label>
           <button
             onClick={async () => {
-              console.log("Generate Random button clicked");
               try {
-                // Generate a new random avatar using user ID as seed for consistency
                 const seed = Math.random().toString(36).substring(2, 15);
                 const newAvatarUrl = `https://api.dicebear.com/9.x/identicon/svg?seed=${seed}&backgroundType=gradientLinear&size=128`;
-                
-                console.log("Generated avatar URL:", newAvatarUrl);
-                console.log("Calling updateSettings with:", { avatar_url: newAvatarUrl });
-                
                 await updateSettings({ avatar_url: newAvatarUrl });
                 setAvatarUrl(newAvatarUrl);
                 qc.invalidateQueries({ queryKey: ["me"] });
                 qc.invalidateQueries({ queryKey: ["comments"] });
-                
-                console.log("Avatar updated successfully");
               } catch (err) {
-                console.error("Failed to update avatar:", err);
                 setError(err instanceof Error ? err.message : 'Failed to update avatar');
               }
             }}
-            style={{ 
-              background: "none", 
-              border: "1px solid var(--border)", 
-              borderRadius: 6, 
-              color: "var(--text)", 
-              cursor: "pointer", 
-              padding: "8px 16px", 
-              fontSize: 14 
+            style={{
+              background: "none",
+              border: "1px solid var(--border)",
+              borderRadius: 6,
+              color: "var(--text)",
+              cursor: "pointer",
+              padding: "8px 16px",
+              fontSize: 13,
             }}
           >
             Generate Random
@@ -306,8 +285,6 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
               alt="Preview" 
               style={{ width: 48, height: 48, borderRadius: "50%", objectFit: "cover" }}
               onError={() => {
-                console.error("Failed to load avatar:", avatarUrl);
-                // Set to default avatar on error
                 setAvatarUrl(`https://api.dicebear.com/9.x/identicon/svg?seed=${me.id}&backgroundType=gradientLinear&size=128`);
               }}
             />
diff --git a/web/src/pages/SongPage.tsx b/web/src/pages/SongPage.tsx
index 64e213d..665804d 100644
--- a/web/src/pages/SongPage.tsx
+++ b/web/src/pages/SongPage.tsx
@@ -219,7 +219,7 @@ export function SongPage() {
             onChange={(e) => setCommentBody(e.target.value)}
             placeholder="Add a comment…"
             rows={2}
-            style={{ flex: 1, padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", fontSize: 13, resize: "vertical", fontFamily: "inherit" }}
+            style={{ flex: 1, padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 7, color: "var(--text)", fontSize: 13, resize: "vertical", fontFamily: "inherit" }}
           />
           <button
             onClick={() => commentBody.trim() && addCommentMutation.mutate({ body: commentBody.trim(), timestamp: currentTime })}
@@ -242,7 +242,7 @@ function AnnotationCard({ annotation: a, onSeek, versionId }: { annotation: Anno
   });
 
   return (
-    <div style={{ background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 8, padding: 14 }}>
+    <div style={{ background: "var(--bg-subtle)", border: "1px solid var(--border-subtle)", borderRadius: 8, padding: 14 }}>
       <div style={{ display: "flex", gap: 8, marginBottom: 6 }}>
         <button
           onClick={() => onSeek(a.timestamp_ms / 1000)}