Fixes to Add Melody Page, minor UI Tweaks

frontend/src/melodies/MelodySettings.jsx

@@ -7,6 +7,14 @@ import {
   normalizeColor,
 } from "./melodyUtils";
 
+const sectionStyle = {
+  backgroundColor: "var(--bg-card)",
+  borderColor: "var(--border-primary)",
+};
+const headingStyle = { color: "var(--text-heading)" };
+const labelStyle = { color: "var(--text-secondary)" };
+const mutedStyle = { color: "var(--text-muted)" };
+
 export default function MelodySettings() {
   const [settings, setSettings] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -14,14 +22,9 @@ export default function MelodySettings() {
   const [error, setError] = useState("");
   const [success, setSuccess] = useState("");
 
-  // Add language state
   const [langToAdd, setLangToAdd] = useState("");
-
-  // Add color state
   const [colorToAdd, setColorToAdd] = useState("#FF0000");
   const [colorHexInput, setColorHexInput] = useState("#FF0000");
-
-  // Add duration state
   const [durationToAdd, setDurationToAdd] = useState("");
 
   useEffect(() => {
@@ -123,12 +126,12 @@ export default function MelodySettings() {
   };
 
   if (loading) {
-    return <div className="text-center py-8 text-gray-500">Loading...</div>;
+    return <div className="text-center py-8" style={mutedStyle}>Loading...</div>;
   }
 
   if (!settings) {
     return (
-      <div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-md p-3">
+      <div className="text-sm rounded-md p-3 border" style={{ backgroundColor: "var(--danger-bg)", borderColor: "var(--danger)", color: "var(--danger-text)" }}>
         {error || "Failed to load settings."}
       </div>
     );
@@ -138,113 +141,78 @@ export default function MelodySettings() {
     (l) => !settings.available_languages.includes(l.code)
   );
 
+  const btnPrimary = "px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors";
+
   return (
     <div>
-      <h1 className="text-2xl font-bold text-gray-900 mb-6">Melody Settings</h1>
+      <h1 className="text-2xl font-bold mb-6" style={headingStyle}>Melody Settings</h1>
 
       {error && (
-        <div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-md p-3 mb-4">
+        <div className="text-sm rounded-md p-3 mb-4 border" style={{ backgroundColor: "var(--danger-bg)", borderColor: "var(--danger)", color: "var(--danger-text)" }}>
           {error}
         </div>
       )}
       {success && (
-        <div className="bg-green-50 border border-green-200 text-green-700 text-sm rounded-md p-3 mb-4">
+        <div className="text-sm rounded-md p-3 mb-4 border" style={{ backgroundColor: "var(--success-bg)", borderColor: "var(--success)", color: "var(--success-text)" }}>
           {success}
         </div>
       )}
 
       <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
         {/* --- Languages Section --- */}
-        <section className="bg-white rounded-lg border border-gray-200 p-6">
-          <h2 className="text-lg font-semibold text-gray-800 mb-4">
-            Available Languages
-          </h2>
+        <section className="rounded-lg p-6 border" style={sectionStyle}>
+          <h2 className="text-lg font-semibold mb-4" style={headingStyle}>Available Languages</h2>
           <div className="space-y-2 mb-4">
             {settings.available_languages.map((code) => (
               <div
                 key={code}
-                className="flex items-center justify-between px-3 py-2 bg-gray-50 rounded-md"
+                className="flex items-center justify-between px-3 py-2 rounded-md"
+                style={{ backgroundColor: "var(--bg-primary)" }}
               >
                 <div className="flex items-center gap-3">
-                  <span className="text-sm font-mono text-gray-500 uppercase w-8">
-                    {code}
-                  </span>
-                  <span className="text-sm text-gray-900">
-                    {getLanguageName(code)}
-                  </span>
+                  <span className="text-sm font-mono uppercase w-8" style={mutedStyle}>{code}</span>
+                  <span className="text-sm" style={{ color: "var(--text-primary)" }}>{getLanguageName(code)}</span>
                   {settings.primary_language === code && (
-                    <span className="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">
-                      Primary
-                    </span>
+                    <span className="px-2 py-0.5 text-xs rounded-full" style={{ backgroundColor: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" }}>Primary</span>
                   )}
                 </div>
                 <div className="flex items-center gap-2">
                   {settings.primary_language !== code && (
-                    <button
-                      type="button"
-                      onClick={() => setPrimaryLanguage(code)}
-                      className="text-xs text-blue-600 hover:text-blue-800"
-                      disabled={saving}
-                    >
-                      Set Primary
-                    </button>
+                    <button type="button" onClick={() => setPrimaryLanguage(code)} className="text-xs" style={{ color: "var(--accent)" }} disabled={saving}>Set Primary</button>
                   )}
                   {settings.available_languages.length > 1 && (
-                    <button
-                      type="button"
-                      onClick={() => removeLanguage(code)}
-                      className="text-xs text-red-600 hover:text-red-800"
-                      disabled={saving}
-                    >
-                      Remove
-                    </button>
+                    <button type="button" onClick={() => removeLanguage(code)} className="text-xs" style={{ color: "var(--danger)" }} disabled={saving}>Remove</button>
                   )}
                 </div>
               </div>
             ))}
           </div>
           <div className="flex gap-2">
-            <select
-              value={langToAdd}
-              onChange={(e) => setLangToAdd(e.target.value)}
-              className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-            >
+            <select value={langToAdd} onChange={(e) => setLangToAdd(e.target.value)} className="flex-1 px-3 py-2 rounded-md text-sm border">
               <option value="">Select language...</option>
-              {availableLangsToAdd.map((l) => (
-                <option key={l.code} value={l.code}>
-                  {l.name} ({l.code})
-                </option>
-              ))}
+              {availableLangsToAdd.map((l) => (<option key={l.code} value={l.code}>{l.name} ({l.code})</option>))}
             </select>
-            <button
-              type="button"
-              onClick={addLanguage}
-              disabled={!langToAdd || saving}
-              className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-            >
-              Add
-            </button>
+            <button type="button" onClick={addLanguage} disabled={!langToAdd || saving} className={btnPrimary} style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}>Add</button>
           </div>
         </section>
 
         {/* --- Quick Colors Section --- */}
-        <section className="bg-white rounded-lg border border-gray-200 p-6">
-          <h2 className="text-lg font-semibold text-gray-800 mb-4">
-            Quick Selection Colors
-          </h2>
+        <section className="rounded-lg p-6 border" style={sectionStyle}>
+          <h2 className="text-lg font-semibold mb-4" style={headingStyle}>Quick Selection Colors</h2>
           <div className="flex flex-wrap gap-3 mb-4">
             {settings.quick_colors.map((color) => (
               <div key={color} className="relative group">
                 <div
-                  className="w-10 h-10 rounded-lg border-2 border-gray-200 shadow-sm cursor-default"
-                  style={{ backgroundColor: normalizeColor(color) }}
+                  className="w-10 h-10 rounded-lg border-2 shadow-sm cursor-default"
+                  style={{ backgroundColor: normalizeColor(color), borderColor: "var(--border-primary)" }}
                   title={color}
                 />
                 <button
                   type="button"
                   onClick={() => removeColor(color)}
                   disabled={saving}
-                  className="absolute -top-1.5 -right-1.5 w-5 h-5 bg-red-500 text-white rounded-full text-xs opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+                  className="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full text-xs opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+                  style={{ backgroundColor: "var(--danger)", color: "#fff" }}
                 >
                   &times;
                 </button>
@@ -255,55 +223,39 @@ export default function MelodySettings() {
             <input
               type="color"
               value={colorToAdd}
-              onChange={(e) => {
-                setColorToAdd(e.target.value);
-                setColorHexInput(e.target.value);
-              }}
-              className="w-10 h-10 rounded cursor-pointer border border-gray-300"
+              onChange={(e) => { setColorToAdd(e.target.value); setColorHexInput(e.target.value); }}
+              className="w-10 h-10 rounded cursor-pointer border"
+              style={{ borderColor: "var(--border-primary)" }}
             />
             <input
               type="text"
               value={colorHexInput}
-              onChange={(e) => {
-                setColorHexInput(e.target.value);
-                if (/^#[0-9A-Fa-f]{6}$/.test(e.target.value)) {
-                  setColorToAdd(e.target.value);
-                }
-              }}
+              onChange={(e) => { setColorHexInput(e.target.value); if (/^#[0-9A-Fa-f]{6}$/.test(e.target.value)) setColorToAdd(e.target.value); }}
               placeholder="#FF0000"
-              className="w-28 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono"
+              className="w-28 px-3 py-2 rounded-md text-sm font-mono border"
             />
-            <button
-              type="button"
-              onClick={addColor}
-              disabled={saving}
-              className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-            >
-              Add
-            </button>
+            <button type="button" onClick={addColor} disabled={saving} className={btnPrimary} style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}>Add</button>
           </div>
         </section>
 
         {/* --- Duration Presets Section --- */}
-        <section className="bg-white rounded-lg border border-gray-200 p-6 xl:col-span-2">
-          <h2 className="text-lg font-semibold text-gray-800 mb-4">
-            Duration Presets (seconds)
-          </h2>
+        <section className="rounded-lg p-6 xl:col-span-2 border" style={sectionStyle}>
+          <h2 className="text-lg font-semibold mb-4" style={headingStyle}>Duration Presets (seconds)</h2>
           <div className="flex flex-wrap gap-2 mb-4">
             {settings.duration_values.map((val) => (
               <div
                 key={val}
-                className="group flex items-center gap-1 px-3 py-1.5 bg-gray-50 border border-gray-200 rounded-full"
+                className="group flex items-center gap-1 px-3 py-1.5 rounded-full border"
+                style={{ backgroundColor: "var(--bg-primary)", borderColor: "var(--border-secondary)" }}
               >
-                <span className="text-sm text-gray-900">
-                  {formatDuration(val)}
-                </span>
-                <span className="text-xs text-gray-400 ml-1">({val}s)</span>
+                <span className="text-sm" style={{ color: "var(--text-primary)" }}>{formatDuration(val)}</span>
+                <span className="text-xs ml-1" style={mutedStyle}>({val}s)</span>
                 <button
                   type="button"
                   onClick={() => removeDuration(val)}
                   disabled={saving}
-                  className="ml-1 text-red-400 hover:text-red-600 opacity-0 group-hover:opacity-100 transition-opacity text-xs"
+                  className="ml-1 opacity-0 group-hover:opacity-100 transition-opacity text-xs"
+                  style={{ color: "var(--danger)" }}
                 >
                   &times;
                 </button>
@@ -316,23 +268,11 @@ export default function MelodySettings() {
               min="0"
               value={durationToAdd}
               onChange={(e) => setDurationToAdd(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  e.preventDefault();
-                  addDuration();
-                }
-              }}
+              onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); addDuration(); } }}
               placeholder="Seconds (e.g. 45)"
-              className="w-40 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-40 px-3 py-2 rounded-md text-sm border"
             />
-            <button
-              type="button"
-              onClick={addDuration}
-              disabled={saving || !durationToAdd}
-              className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-            >
-              Add
-            </button>
+            <button type="button" onClick={addDuration} disabled={saving || !durationToAdd} className={btnPrimary} style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}>Add</button>
           </div>
         </section>
       </div>