From a9829440239a48a4be6e9d6aa635d8eb958a04c2 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Mon, 9 Nov 2026 11:21:28 +0100
Subject: [PATCH] fix(ui): make banners readable in light mode

The shared banner had a dark background and no text colour, so the
subscription and server limit banners were unreadable in light mode.
Use a light surface with dark text in light mode and keep the dark look.

Refs #12494

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 ...able-subscription-and-server-limit-banners.md |  6 ++++++
 resources/views/components/banner.blade.php      |  4 ++--
 resources/views/livewire/layout-popups.blade.php | 16 ++++++++--------
 3 files changed, 16 insertions(+), 10 deletions(-)
 create mode 100644 .changes/unreadable-subscription-and-server-limit-banners.md

diff --git a/.changes/unreadable-subscription-and-server-limit-banners.md b/.changes/unreadable-subscription-and-server-limit-banners.md
new file mode 100644
index 0000000000..75f6acfd30
--- /dev/null
+++ b/.changes/unreadable-subscription-and-server-limit-banners.md
@@ -0,0 +1,6 @@
+---
+type: fixed
+---
+Unreadable subscription and server limit banners in light mode ([#12494](https://github.com/coollabsio/coolify/issues/12494))
+
+- The banners now use a light background with dark text in light mode
diff --git a/resources/views/components/banner.blade.php b/resources/views/components/banner.blade.php
index 795c15f2bc..76a856a22d 100644
--- a/resources/views/components/banner.blade.php
+++ b/resources/views/components/banner.blade.php
@@ -6,12 +6,12 @@
     x-transition:enter-start="-translate-y-10" x-transition:enter-end="translate-y-0"
     x-transition:leave="transition ease-in duration-100" x-transition:leave-start="translate-y-0"
     x-transition:leave-end="-translate-y-10" x-init="setTimeout(() => { bannerVisible = true }, bannerVisibleAfter);"
-    class="relative z-999 w-full py-2 mx-auto duration-100 ease-out shadow-xs bg-coolgray-100 sm:py-0 sm:h-14" x-cloak>
+    class="relative z-999 w-full py-2 mx-auto duration-100 ease-out shadow-xs border-b border-neutral-200 bg-white text-neutral-700 dark:border-white/[0.06] dark:bg-coolgray-100 dark:text-neutral-200 sm:py-0 sm:h-14" x-cloak>
     <div class="flex items-center justify-between h-full px-3">
         {{ $slot }}
         @if ($closable)
             <button @click="bannerVisible=false"
-                class="flex items-center shrink-0 translate-x-1 ease-out duration-150 justify-center w-6 h-6 p-1.5 text-neutral-200 rounded-full hover:bg-coolgray-500">
+                class="flex items-center shrink-0 translate-x-1 ease-out duration-150 justify-center w-6 h-6 p-1.5 rounded-full text-neutral-500 hover:bg-neutral-100 hover:text-black dark:text-neutral-400 dark:hover:bg-white/[0.07] dark:hover:text-white">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                     stroke="currentColor" class="w-full h-full">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
diff --git a/resources/views/livewire/layout-popups.blade.php b/resources/views/livewire/layout-popups.blade.php
index 3306025eab..67911d3fa3 100644
--- a/resources/views/livewire/layout-popups.blade.php
+++ b/resources/views/livewire/layout-popups.blade.php
@@ -205,8 +205,8 @@
                         d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                         clip-rule="evenodd" />
                 </svg>
-                <span><span class="font-bold text-red-500">Subscription Error.</span> Something went wrong. Please try
-                    again or <a class="underline dark:text-white"
+                <span><span class="font-bold text-red-600 dark:text-red-500">Subscription Error.</span> Something went wrong. Please try
+                    again or <a class="underline font-medium text-black dark:text-white"
                         href="{{ config('constants.urls.contact') }}" target="_blank">contact support</a>.</span>
             </div>
         </x-banner>
@@ -220,11 +220,11 @@
     @endif
     @if (currentTeam()->subscriptionPastOverDue())
         <x-banner :closable=false>
-            <div><span class="font-bold text-red-500">WARNING:</span> Your subscription is in over-due. If your
+            <div><span class="font-bold text-red-600 dark:text-red-500">WARNING:</span> Your subscription is in over-due. If your
                 latest
-                payment is not paid within a week, all automations <span class="font-bold text-red-500">will
+                payment is not paid within a week, all automations <span class="font-bold text-red-600 dark:text-red-500">will
                     be deactivated</span>. Visit <a href="{{ route('subscription.show') }}" {{ wireNavigate() }}
-                    class="underline dark:text-white">/subscription</a> to check your subscription status or pay
+                    class="underline font-medium text-black dark:text-white">/subscription</a> to check your subscription status or pay
                 your
                 invoice (or check your email for the invoice).
             </div>
@@ -232,10 +232,10 @@
     @endif
     @if (currentTeam()->serverOverflow())
         <x-banner :closable=false>
-            <div><span class="font-bold text-red-500">WARNING:</span> The number of active servers exceeds the limit
-                covered by your payment. If not resolved, some of your servers <span class="font-bold text-red-500">will
+            <div><span class="font-bold text-red-600 dark:text-red-500">WARNING:</span> The number of active servers exceeds the limit
+                covered by your payment. If not resolved, some of your servers <span class="font-bold text-red-600 dark:text-red-500">will
                     be deactivated</span>. Visit <a href="{{ route('subscription.show') }}" {{ wireNavigate() }}
-                    class="underline dark:text-white">/subscription</a> to update your subscription or remove some
+                    class="underline font-medium text-black dark:text-white">/subscription</a> to update your subscription or remove some
                 servers.
             </div>
         </x-banner>