From 92d6fe9d4e3261e0447dc3a8e6024f8b4587b805 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Mon, 17 Aug 2026 21:38:44 +0200
Subject: [PATCH] fix(ui): use solid surfaces for deployment indicator states

Remove deployment opacity fading and translucent dark-theme surfaces, and drop the global listbox hover background rule.
---
 app/Livewire/DeploymentsIndicator.php         |  6 ------
 resources/css/app.css                         |  4 ----
 .../livewire/deployments-indicator.blade.php  | 20 +++++++++----------
 .../DeploymentsIndicatorLayoutTest.php        | 15 +++++++++++++-
 .../Feature/ListboxTriggerTruncationTest.php  |  7 -------
 5 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/app/Livewire/DeploymentsIndicator.php b/app/Livewire/DeploymentsIndicator.php
index 235071dbe2..28c9a00c61 100644
--- a/app/Livewire/DeploymentsIndicator.php
+++ b/app/Livewire/DeploymentsIndicator.php
@@ -54,12 +54,6 @@ class DeploymentsIndicator extends Component
         return $this->deployments->count();
     }
 
-    #[Computed]
-    public function shouldReduceOpacity(): bool
-    {
-        return request()->routeIs('project.application.deployment.*');
-    }
-
     public function toggleExpanded()
     {
         $this->expanded = ! $this->expanded;
diff --git a/resources/css/app.css b/resources/css/app.css
index 566f290317..95e0207ce2 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1903,10 +1903,6 @@ html[data-theme="custom"] textarea:disabled {
     color: var(--color-fg);
 }
 
-.listbox-trigger:hover {
-    background: var(--coollabs-fill);
-}
-
 .listbox-trigger:disabled {
     cursor: not-allowed;
     opacity: 0.5;
diff --git a/resources/views/livewire/deployments-indicator.blade.php b/resources/views/livewire/deployments-indicator.blade.php
index ece7e4b441..5b9e41f76f 100644
--- a/resources/views/livewire/deployments-indicator.blade.php
+++ b/resources/views/livewire/deployments-indicator.blade.php
@@ -1,18 +1,16 @@
 <div wire:poll.3000ms x-on:livewire:navigated.window="
         $wire.updateShouldShowFromPath(window.location.pathname || '/')
     " x-data="{
-    expanded: @entangle('expanded'),
-    reduceOpacity: @js($this->shouldReduceOpacity)
+    expanded: @entangle('expanded')
 }" class="fixed bottom-0 left-0 z-60 mb-4 ml-4 transition-[left] duration-200"
     :class="collapsed ? 'lg:left-16' : 'lg:left-56'">
     @if ($this->shouldShow && $this->deploymentCount > 0)
-        <div class="relative transition-opacity duration-200"
-            :class="{ 'opacity-100': expanded || !reduceOpacity, 'opacity-60 hover:opacity-100': reduceOpacity && !expanded }">
+        <div class="relative">
             {{-- Expanded deployment list (above the pill) --}}
             <div x-show="expanded" x-transition:enter="transition ease-out duration-200"
-                x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
-                x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
-                x-transition:leave-end="opacity-0 translate-y-2" x-cloak
+                x-transition:enter-start="translate-y-2" x-transition:enter-end="translate-y-0"
+                x-transition:leave="transition ease-in duration-150" x-transition:leave-start="translate-y-0"
+                x-transition:leave-end="translate-y-2" x-cloak
                 class="absolute bottom-full mb-2 w-[min(22rem,calc(100vw-2rem))] overflow-hidden rounded-xl"
                 style="background: var(--coollabs-elevated); box-shadow: 0 0 0 1px var(--coollabs-line), var(--shadow-modal);">
                 <div class="max-h-96 space-y-1 overflow-y-auto p-2 scrollbar">
@@ -26,9 +24,9 @@
                         @endphp
                         <a wire:key="indicator-deployment-{{ $deployment->id }}"
                             href="{{ $deployment->deployment_url }}" {{ wireNavigate() }}
-                            class="flex items-start gap-3 rounded-lg border border-transparent p-3 transition-colors hover:border-neutral-200 hover:bg-neutral-50 hover:no-underline dark:hover:border-white/[0.08] dark:hover:bg-white/[0.04]">
+                            class="flex items-start gap-3 rounded-lg border border-transparent p-3 transition-colors hover:border-neutral-200 hover:bg-neutral-50 hover:no-underline dark:border-coolgray-300 dark:hover:border-coolgray-400 dark:hover:bg-raised">
                             <div
-                                class="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-coollabs dark:border-white/[0.08] dark:bg-white/[0.04] dark:text-warning">
+                                class="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-coollabs dark:border-coolgray-300 dark:bg-raised dark:text-warning">
                                 @if ($deployment->status === 'in_progress')
                                     <svg class="size-3.5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
                                         viewBox="0 0 24 24" aria-hidden="true">
@@ -61,7 +59,7 @@
                                 <p class="mt-0.5 truncate text-[11px] text-neutral-500 dark:text-fg-faint">
                                     {{ $deployment->server_name ?: '-' }}
                                     @if ($deployment->pull_request_id)
-                                        <span class="px-1 text-neutral-300 dark:text-white/15">·</span>
+                                        <span class="px-1 text-neutral-300 dark:text-fg-faint">·</span>
                                         PR #{{ $deployment->pull_request_id }}
                                     @endif
                                 </p>
@@ -73,7 +71,7 @@
 
             {{-- Collapsed pill --}}
             <button type="button" @click="expanded = !expanded"
-                class="flex items-center gap-2 rounded-xl border border-neutral-200 bg-white px-3.5 py-2 text-sm font-medium text-neutral-800 transition-colors hover:bg-neutral-50 dark:border-white/[0.08] dark:bg-surface dark:text-fg dark:hover:bg-white/[0.04]"
+                class="flex items-center gap-2 rounded-xl border border-neutral-200 bg-white px-3.5 py-2 text-sm font-medium text-neutral-800 transition-colors hover:bg-neutral-50 dark:border-coolgray-300 dark:bg-surface dark:text-fg dark:hover:bg-raised"
                 style="box-shadow: 0 0 0 1px var(--coollabs-hairline), var(--shadow-modal);"
                 :aria-expanded="expanded.toString()" aria-label="Active deployments">
                 <svg class="loading-indicator size-3.5 shrink-0 animate-spin"
diff --git a/tests/Feature/DeploymentsIndicatorLayoutTest.php b/tests/Feature/DeploymentsIndicatorLayoutTest.php
index d70679d452..c1676dd817 100644
--- a/tests/Feature/DeploymentsIndicatorLayoutTest.php
+++ b/tests/Feature/DeploymentsIndicatorLayoutTest.php
@@ -30,7 +30,7 @@ it('uses the redesigned elevated surface and status badge patterns', function ()
         ->toContain("'In progress'")
         ->toContain("'Queued'")
         ->toContain('dark:text-fg')
-        ->toContain('dark:border-white/[0.08]')
+        ->toContain('dark:border-coolgray-300')
         ->toContain('$this->shouldShow')
         ->toContain('updateShouldShowFromPath')
         ->toContain('livewire:navigated')
@@ -39,3 +39,16 @@ it('uses the redesigned elevated surface and status badge patterns', function ()
         ->not->toContain('text-gray-800')
         ->not->toContain("str_replace('_', ' ', \$deployment->status)");
 });
+
+it('uses solid surfaces in every deployments indicator state', function () {
+    $indicatorView = file_get_contents(resource_path('views/livewire/deployments-indicator.blade.php'));
+
+    expect($indicatorView)
+        ->not->toContain('reduceOpacity')
+        ->not->toContain('transition-opacity')
+        ->not->toContain('x-transition:enter-start="opacity-0')
+        ->not->toContain('x-transition:leave-end="opacity-0')
+        ->not->toContain('dark:bg-white/[')
+        ->not->toContain('dark:hover:bg-white/[')
+        ->not->toContain('dark:border-white/[');
+});
diff --git a/tests/Feature/ListboxTriggerTruncationTest.php b/tests/Feature/ListboxTriggerTruncationTest.php
index a35ff8cbee..a64a97dd8a 100644
--- a/tests/Feature/ListboxTriggerTruncationTest.php
+++ b/tests/Feature/ListboxTriggerTruncationTest.php
@@ -22,13 +22,6 @@ test('listbox trigger height matches shared inputs', function () {
         ->toMatch('/\.application-settings-workspace \.listbox-trigger[^}]*height: 2rem;/s');
 });
 
-test('listbox trigger uses an opaque background on hover', function () {
-    $css = file_get_contents(resource_path('css/app.css'));
-
-    expect($css)
-        ->toMatch('/\.listbox-trigger:hover \{[^}]*background: var\(--coollabs-fill\);/s');
-});
-
 test('listbox component uses shared trigger label truncation', function () {
     $html = Blade::render(<<<'BLADE'
         <x-forms.listbox id="longOption" label="Example"