Merge remote changes, standardize button text color to --text-white CSS variable

Resolved merge conflicts by keeping the CSS variable approach (var(--text-white))
instead of hardcoded #fff for button text colors across all components.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/auth/LoginPage.jsx

@@ -97,7 +97,7 @@ export default function LoginPage() {
             className="w-full py-2 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium"
             style={{
               backgroundColor: "var(--btn-primary)",
-                color: "#fff",
+                color: "var(--text-white)",
             }}
             onMouseEnter={(e) => !isLoading && (e.target.style.backgroundColor = "var(--btn-primary-hover)")}
             onMouseLeave={(e) => (e.target.style.backgroundColor = "var(--btn-primary)")}

frontend/src/components/ConfirmDialog.jsx

@@ -36,7 +36,7 @@ export default function ConfirmDialog({ open, title, message, onConfirm, onCance
             className="px-4 py-2 text-sm rounded-md transition-colors"
             style={{
               backgroundColor: "var(--danger)",
-              color: "#fff",
+              color: "var(--text-white)",
             }}
           >
             Delete

frontend/src/devices/DeviceDetail.jsx

@@ -142,7 +142,7 @@ export default function DeviceDetail() {
             <button
               onClick={() => setShowDelete(true)}
               className="px-4 py-2 text-sm rounded-md transition-colors"
-              style={{ backgroundColor: "var(--danger)", color: "#fff" }}
+              style={{ backgroundColor: "var(--danger)", color: "var(--text-white)" }}
             >
               Delete
             </button>

frontend/src/index.css

@@ -18,7 +18,7 @@
   --text-secondary: #9ca3af;
   --text-muted: #9ca3af;
   --text-heading: #e3e5ea;
-  --text-white: #f7f7f7;
+  --text-white: #fbfbfb;
   --text-link: #93befa;
 
   --accent: #74b816;

frontend/src/melodies/MelodyDetail.jsx

@@ -143,7 +143,7 @@ export default function MelodyDetail() {
             <button
               onClick={() => setShowDelete(true)}
               className="px-4 py-2 text-sm rounded-md transition-colors"
-              style={{ backgroundColor: "var(--danger)", color: "#fff" }}
+              style={{ backgroundColor: "var(--danger-btn)", color: "var(--text-white)" }}
             >
               Delete
             </button>

frontend/src/melodies/MelodyForm.jsx

@@ -219,7 +219,7 @@ export default function MelodyForm() {
             form="melody-form"
             disabled={saving || uploading}
             className="px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-            style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
+            style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
           >
             {uploading ? "Uploading files..." : saving ? "Saving..." : isEdit ? "Update Melody" : "Create Melody"}
           </button>
@@ -333,11 +333,10 @@ export default function MelodyForm() {
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
                       </svg>
                       Custom
-                      <input type="color" value={information.color ? normalizeColor(information.color) : "#000000"} onChange={(e) => updateInfo("color", e.target.value)} className="absolute inset-0 opacity-0 w-full h-full cursor-pointer" />
+                      <input type="color" value={normalizeColor(information.color)} onChange={(e) => updateInfo("color", e.target.value)} className="absolute inset-0 opacity-0 w-full h-full cursor-pointer" />
                     </label>
                   </div>
                 </div>
-                        style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
                 <div className="flex items-center gap-2 pt-2">
                   <input type="checkbox" id="isTrueRing" checked={information.isTrueRing} onChange={(e) => updateInfo("isTrueRing", e.target.checked)} className="h-4 w-4 rounded" />
                   <label htmlFor="isTrueRing" className="text-sm font-medium" style={labelStyle}>True Ring</label>

frontend/src/melodies/MelodySettings.jsx

@@ -23,8 +23,11 @@ export default function MelodySettings() {
   const [success, setSuccess] = useState("");
 
   const [langToAdd, setLangToAdd] = useState("");
-  const [colorToAdd, setColorToAdd] = useState("#FF0000");
+  const cssColorDefault = (typeof window !== "undefined" && window.getComputedStyle)
-  const [colorHexInput, setColorHexInput] = useState("#FF0000");
+    ? getComputedStyle(document.documentElement).getPropertyValue("--color-default").trim()
+    : "var(--color-default)";
+  const [colorToAdd, setColorToAdd] = useState(cssColorDefault);
+  const [colorHexInput, setColorHexInput] = useState(cssColorDefault);
   const [durationToAdd, setDurationToAdd] = useState("");
 
   useEffect(() => {
@@ -212,7 +215,7 @@ export default function MelodySettings() {
                   onClick={() => removeColor(color)}
                   disabled={saving}
                   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-btn)", color: "#fff" }}
+                  style={{ backgroundColor: "var(--danger-btn)", color: "var(--text-white)" }}
                 >
                   ×
                 </button>
@@ -231,7 +234,7 @@ export default function MelodySettings() {
               type="text"
               value={colorHexInput}
               onChange={(e) => { setColorHexInput(e.target.value); if (/^#[0-9A-Fa-f]{6}$/.test(e.target.value)) setColorToAdd(e.target.value); }}
-              placeholder="#FF0000"
+              placeholder="#RRGGBB"
               className="w-28 px-3 py-2 rounded-md text-sm font-mono border"
             />
             <button type="button" onClick={addColor} disabled={saving} className={btnPrimary} style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}>Add</button>

frontend/src/melodies/melodyUtils.js

@@ -48,7 +48,17 @@ export function getLocalizedValue(value, lang, fallback = "") {
  * Converts "0xFFRRGGBB" or "0xRRGGBB" format to "#RRGGBB".
  */
 export function normalizeColor(val) {
-  if (!val) return "#000000";
+  if (!val) {
+    try {
+      if (typeof window !== "undefined" && window.getComputedStyle) {
+        const v = getComputedStyle(document.documentElement).getPropertyValue("--color-default").trim();
+        if (v) return v;
+      }
+    } catch (e) {
+      // fallthrough
+    }
+    return "var(--color-default)";
+  }
   if (val.startsWith("0x") || val.startsWith("0X")) {
     const hex = val.slice(2);
     // If 8 chars (AARRGGBB), skip alpha