From e2c7a0f987353f057101856e557ab6c4016b8c3f Mon Sep 17 00:00:00 2001
From: Louis King <jinglemansweep@gmail.com>
Date: Thu, 2 Jul 2026 21:28:06 +0100
Subject: [PATCH] fix(web): repair unstyled channel modal labels and invisible
 prose link hover

The channels modal still used daisyUI v4's label-text class, which was
removed in v5, so its form labels rendered unstyled. Replace with the
Tailwind equivalent of what v4 produced (text-sm, muted).

.prose a:hover used --color-primary-content (the on-primary foreground),
making hovered markdown links nearly invisible against the page
background. Blend primary toward base-content instead so the hover
shade works in both themes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/meshcore_hub/web/static/css/app.css              | 2 +-
 src/meshcore_hub/web/static/js/spa/pages/channels.js | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/meshcore_hub/web/static/css/app.css b/src/meshcore_hub/web/static/css/app.css
index 4b9af18..90d6991 100644
--- a/src/meshcore_hub/web/static/css/app.css
+++ b/src/meshcore_hub/web/static/css/app.css
@@ -233,7 +233,7 @@
 }
 
 .prose a:hover {
-    color: var(--color-primary-content);
+    color: color-mix(in oklab, var(--color-primary) 70%, var(--color-base-content));
 }
 
 .prose code {
diff --git a/src/meshcore_hub/web/static/js/spa/pages/channels.js b/src/meshcore_hub/web/static/js/spa/pages/channels.js
index 011d0d4..7228518 100644
--- a/src/meshcore_hub/web/static/js/spa/pages/channels.js
+++ b/src/meshcore_hub/web/static/js/spa/pages/channels.js
@@ -69,19 +69,19 @@ function renderChannelModal({ channel, isEdit, onSave, onCancel }) {
             <h3 class="font-bold text-lg mb-4">${title}</h3>
             <form @submit=${(e) => { e.preventDefault(); onSave(); }}>
                 <div class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-3 items-center mb-4">
-                    <label class="label-text text-right">${t('channels.name_label')}</label>
+                    <label class="text-sm opacity-70 text-right">${t('channels.name_label')}</label>
                     <input type="text" id="channel-modal-name" class="input input-bordered input-sm"
                         .value=${isEdit ? channel.name : ''}
                         ?disabled=${isEdit}
                         placeholder="${t('channels.name_label')}"
                         required maxlength="100" />
                     ${!isEdit ? html`
-                    <label class="label-text text-right">${t('channels.key_label')}</label>
+                    <label class="text-sm opacity-70 text-right">${t('channels.key_label')}</label>
                     <input type="text" id="channel-modal-key" class="input input-bordered input-sm font-mono"
                         placeholder="e.g. ABCDEF0123456789..."
                         required minlength="32" maxlength="64"
                         pattern="[0-9A-Fa-f]{32,64}" />` : nothing}
-                    <label class="label-text text-right">${t('channels.visibility_label')}</label>
+                    <label class="text-sm opacity-70 text-right">${t('channels.visibility_label')}</label>
                     <select id="channel-modal-visibility" class="select select-bordered select-sm">
                         <option value="community" .selected=${channel?.visibility === 'community' || !channel}>community</option>
                         <option value="member" .selected=${channel?.visibility === 'member'}>member</option>
@@ -92,7 +92,7 @@ function renderChannelModal({ channel, isEdit, onSave, onCancel }) {
                     <label class="label cursor-pointer justify-start gap-3">
                         <input type="checkbox" id="channel-modal-enabled" class="checkbox checkbox-sm"
                             .checked=${channel?.enabled !== false} />
-                        <span class="label-text">${t('channels.enabled_label')}</span>
+                        <span class="text-sm">${t('channels.enabled_label')}</span>
                     </label>
                 </div>
                 <div class="modal-action">