starred/coolify
1
0
Fork 0
mirror of https://github.com/coollabsio/coolify.git synced 2026-11-12 15:53:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): make banners readable in light mode

Browse Source 
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>
This commit is contained in:
Andras Bacsai
2026-11-09 11:21:28 +01:00
co-authored by Claude Opus 5.5
parent 09f4aedb43
commit a982944023
3 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changes/unreadable-subscription-and-server-limit-banners.md
+6
View File
@@ -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
resources/views/components/banner.blade.php
+2 -2
View File
@@ -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" />
resources/views/livewire/layout-popups.blade.php
+8 -8
View File
@@ -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>