starred/coolify
1
0
Fork 0
mirror of https://github.com/coollabsio/coolify.git synced 2026-10-07 06:26:10 -04:00
Code Issues Packages Projects Releases Wiki Activity

style(ui): render danger zone as red card with Permanent badge

Browse Source 
Wrap the danger-zone component in a bordered red-tinted card with
padding and dark-mode variants, align content to the top, switch the
title and description to neutral text colors, and add a "Permanent"
pill next to the title. Update the layout test to match.
This commit is contained in:
Andras Bacsai
2026-09-25 23:56:01 +02:00
parent f4fbcaacff
commit 6daea93df4
2 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/danger-zone.blade.php
+11 -3
View File
@@ -1,9 +1,17 @@
@props(['title'])
<div {{ $attributes->class('flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between') }}>
<div
{{ $attributes->class('flex flex-col gap-4 rounded-lg border border-red-200 bg-red-50 p-5 sm:flex-row sm:items-start sm:justify-between dark:border-red-500/25 dark:bg-red-500/[0.08]') }}>
<div class="min-w-0">
<h4 class="text-sm font-semibold text-red-700 dark:text-red-300">{{ $title }}</h4>
<div class="mt-2 max-w-2xl space-y-2 text-[13px] leading-5 text-red-700/80 dark:text-red-300/80">
<div class="flex flex-wrap items-center gap-2">
<h4 class="text-sm font-semibold text-black dark:text-fg">{{ $title }}</h4>
<span
class="inline-flex items-center gap-1.5 rounded-full border border-neutral-200 bg-white px-2.5 py-0.5 text-xs font-medium text-neutral-700 dark:border-white/[0.08] dark:bg-white/[0.06] dark:text-fg">
<span class="size-1.5 rounded-full bg-red-500"></span>
Permanent
</span>
</div>
<div class="mt-2 max-w-2xl space-y-2 text-[13px] leading-5 text-neutral-600 dark:text-fg-dim">
{{ $slot }}
</div>
</div>
tests/Feature/DangerZoneLayoutTest.php
+5 -4
View File
@@ -5,10 +5,11 @@ it('uses one shared visual treatment for all danger zone actions', function () {
expect($component)
->toContain("@props(['title'])")
->toContain('sm:flex-row sm:items-center sm:justify-between')
->toContain('text-red-700 dark:text-red-300')
->toContain('@isset($action)')
->not->toContain('bg-red-50');
->toContain('sm:flex-row sm:items-start sm:justify-between')
->toContain('rounded-lg border border-red-200 bg-red-50')
->toContain('dark:border-red-500/25 dark:bg-red-500/[0.08]')
->toContain('Permanent')
->toContain('@isset($action)');
foreach ([
'livewire/destination/show.blade.php',