From a8b00e97b6afe69781b965b1e008902b04892340 Mon Sep 17 00:00:00 2001
From: archipelago <archipelago@localhost>
Date: Tue, 14 Jul 2026 06:36:51 -0400
Subject: [PATCH] =?UTF-8?q?fix(ui):=20kill=20stray=20blue=20modal=20stylin?=
 =?UTF-8?q?g=20=E2=80=94=20standardize=20on=20glass=20orange=20CTA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The app-details credentials/version sidebar and the container-app Launch
button used solid bg-blue-600 CTAs and blue links/focus rings instead of
the global glass style; InstallVersionModal used an off-token solid
orange. All primary CTAs now use glass-button glass-button-warning (the
Create Identity orange) and links/focus accents use the orange tokens.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 neode-ui/src/components/InstallVersionModal.vue |  2 +-
 neode-ui/src/views/ContainerApps.vue            |  2 +-
 neode-ui/src/views/appDetails/AppSidebar.vue    | 14 +++++++-------
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/neode-ui/src/components/InstallVersionModal.vue b/neode-ui/src/components/InstallVersionModal.vue
index 36977f87..9754b190 100644
--- a/neode-ui/src/components/InstallVersionModal.vue
+++ b/neode-ui/src/components/InstallVersionModal.vue
@@ -35,7 +35,7 @@
       <div class="flex gap-2 mt-6">
         <button
           type="button"
-          class="flex-1 rounded-lg bg-orange-500 hover:bg-orange-600 disabled:opacity-50 text-white text-sm font-semibold py-2.5 transition-colors"
+          class="flex-1 glass-button glass-button-warning rounded-lg disabled:opacity-50 text-sm font-semibold py-2.5"
           :disabled="loading || !selected"
           @click="confirm"
         >
diff --git a/neode-ui/src/views/ContainerApps.vue b/neode-ui/src/views/ContainerApps.vue
index 85588b28..dd675190 100644
--- a/neode-ui/src/views/ContainerApps.vue
+++ b/neode-ui/src/views/ContainerApps.vue
@@ -114,7 +114,7 @@
             v-if="store.getAppVisualState(app.id) === 'running'"
             type="button"
             data-controller-launch-btn
-            class="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded text-sm font-medium text-white transition-colors flex items-center gap-2"
+            class="px-4 py-2 glass-button glass-button-warning rounded text-sm font-medium flex items-center gap-2"
             @click="launchApp(app)"
           >
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/neode-ui/src/views/appDetails/AppSidebar.vue b/neode-ui/src/views/appDetails/AppSidebar.vue
index 03eb2362..82d4af78 100644
--- a/neode-ui/src/views/appDetails/AppSidebar.vue
+++ b/neode-ui/src/views/appDetails/AppSidebar.vue
@@ -48,7 +48,7 @@
           <select
             v-model="selectedVersion"
             :disabled="versionBusy"
-            class="w-full rounded-lg bg-white/[0.06] border border-white/10 text-white pl-3 pr-9 py-2 text-sm focus:outline-none focus:border-blue-400/60"
+            class="w-full rounded-lg bg-white/[0.06] border border-white/10 text-white pl-3 pr-9 py-2 text-sm focus:outline-none focus:border-orange-400/60"
           >
             <option v-for="v in versionInfo.versions" :key="v.version" :value="v.version">{{ versionOptionLabel(v) }}</option>
           </select>
@@ -60,7 +60,7 @@
             type="checkbox"
             v-model="autoUpdate"
             :disabled="versionBusy || isPinned"
-            class="h-4 w-4 accent-blue-500"
+            class="h-4 w-4 accent-orange-500"
           />
         </label>
         <p v-if="isPinned" class="text-white/40 text-xs -mt-2">{{ t('appDetails.autoUpdatePinnedNote') }}</p>
@@ -81,7 +81,7 @@
         <button
           v-else
           type="button"
-          class="w-full rounded-lg bg-blue-600 hover:bg-blue-500 disabled:opacity-50 text-white text-sm font-medium py-2 transition-colors"
+          class="w-full glass-button glass-button-warning rounded-lg disabled:opacity-50 text-sm font-medium py-2"
           :disabled="versionBusy || !versionDirty"
           @click="applyVersionConfig(false)"
         >
@@ -126,7 +126,7 @@
               :href="lanUrl"
               target="_blank"
               rel="noopener noreferrer"
-              class="text-blue-400 hover:text-blue-300 text-sm break-all"
+              class="text-orange-300 hover:text-orange-200 text-sm break-all"
             >
               {{ interfaceAddresses['lan-address'] }}
             </a>
@@ -167,7 +167,7 @@
         <div v-for="cred in credentials.credentials" :key="cred.label" class="rounded-lg border border-white/10 bg-white/[0.04] p-3">
           <div class="flex items-center justify-between gap-3 mb-1">
             <span class="text-white/60 text-xs uppercase tracking-wide">{{ cred.label }}</span>
-            <button type="button" class="text-xs text-blue-300 hover:text-blue-200" @click="copyCredential(cred.label, cred.value)">
+            <button type="button" class="text-xs text-orange-300 hover:text-orange-200" @click="copyCredential(cred.label, cred.value)">
               {{ copiedCredential === cred.label ? 'Copied' : 'Copy' }}
             </button>
           </div>
@@ -181,7 +181,7 @@
       <h3 class="text-lg font-bold text-white mb-4">{{ t('appDetails.requirements') }}</h3>
       <div class="space-y-3">
         <div class="flex items-start gap-3">
-          <svg class="w-5 h-5 text-blue-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg class="w-5 h-5 text-orange-300 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
           </svg>
           <div class="flex-1">
@@ -211,7 +211,7 @@
           :href="link.url"
           target="_blank"
           rel="noopener noreferrer"
-          class="flex items-center gap-2 text-blue-400 hover:text-blue-300 transition-colors"
+          class="flex items-center gap-2 text-orange-300 hover:text-orange-200 transition-colors"
         >
           <svg
             v-if="link.kind === 'website'"