From 9bc723bd8346cd6678ae2c3eae7469977173c28f Mon Sep 17 00:00:00 2001
From: E98Developer <developer@e98.hu>
Date: Sun, 16 Aug 2026 08:23:43 +0200
Subject: [PATCH] =?UTF-8?q?FIX=20Deployment=20csomagol=C3=B3=20a=20gombok?=
 =?UTF-8?q?=20=C3=A9s=20badge-ek=20Filament=20komponensekre=20cser=C3=A9l?=
 =?UTF-8?q?=C3=A9se?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A "Csomag készítése" gomb a felületen láthatatlan volt: a text-white benne van a
lefordított CSS-ben, a bg-primary-600 viszont nincs, így fehér szöveg került fehér
kártyára. Ugyanezért jelentek meg a státusz-badge-ek is színtelen szövegként.

Ok: egy új blade fájlban használt Tailwind utility class csak npm run build után kerül
be a bundle-be (a theme.css scanneli a resources/views/filament mappát, de a CSS-t
nem generálja újra magától). Ezért a kézzel stílusozott elemek helyett a Filament saját
button/badge komponenseit használjuk, amiknek a stílusa már a lefordított CSS-ben van -
így a felület build nélkül is helyesen jelenik meg.

A színes figyelmeztető dobozok maradtak nyers utility class-okkal: azok build hiányában
is olvashatók (keretes doboz), csak a színüket kapják meg npm run build után.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../pages/deployment-package.blade.php        | 101 +++++++++---------
 1 file changed, 49 insertions(+), 52 deletions(-)

diff --git a/resources/views/filament/pages/deployment-package.blade.php b/resources/views/filament/pages/deployment-package.blade.php
index 6b654f9..5e62c27 100644
--- a/resources/views/filament/pages/deployment-package.blade.php
+++ b/resources/views/filament/pages/deployment-package.blade.php
@@ -9,12 +9,15 @@
     $environments = $this->environmentStatuses;
     $recentPackages = $this->recentPackages;
 
+    // Filament saját szín-nevei (badge/button komponensek), nem nyers Tailwind osztályok:
+    // egy új blade-ben használt utility class csak npm run build után kerül a CSS-be, a
+    // Filament komponensek stílusa viszont már benne van a lefordított bundle-ben.
     $statusStyles = [
-        'A' => ['label' => 'új', 'class' => 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200'],
-        'M' => ['label' => 'módosult', 'class' => 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200'],
-        'D' => ['label' => 'törölt', 'class' => 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'],
-        'R' => ['label' => 'átnevezett', 'class' => 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'],
-        'C' => ['label' => 'másolt', 'class' => 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'],
+        'A' => ['label' => 'új', 'color' => 'success'],
+        'M' => ['label' => 'módosult', 'color' => 'warning'],
+        'D' => ['label' => 'törölt', 'color' => 'danger'],
+        'R' => ['label' => 'átnevezett', 'color' => 'info'],
+        'C' => ['label' => 'másolt', 'color' => 'info'],
     ];
 
     $warningStyles = [
@@ -24,7 +27,6 @@
     ];
 
     $cardClass = 'p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700';
-    $buttonClass = 'px-2 py-1 text-xs font-semibold rounded border transition';
 @endphp
 
 <x-filament-panels::page>
@@ -52,11 +54,10 @@
                                 <p class="font-semibold text-gray-900 dark:text-white">{{ $environment['target']['label'] }}</p>
                                 <p class="text-xs font-mono text-gray-500 dark:text-gray-400">{{ $environment['target']['remote_path'] }}</p>
                             </div>
-                            <button type="button" wire:click="fetchLiveVersion('{{ $environment['target']['key'] }}')"
-                                    wire:loading.attr="disabled" wire:target="fetchLiveVersion('{{ $environment['target']['key'] }}')"
-                                    class="{{ $buttonClass }} border-gray-300 text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700">
+                            <x-filament::button size="xs" color="gray"
+                                                wire:click="fetchLiveVersion('{{ $environment['target']['key'] }}')">
                                 Élő állapot
-                            </button>
+                            </x-filament::button>
                         </div>
 
                         <div class="mt-3 space-y-1 text-sm text-gray-600 dark:text-gray-300">
@@ -173,14 +174,8 @@ class="{{ $buttonClass }} border-gray-300 text-gray-700 hover:bg-gray-100 dark:b
                 </div>
 
                 <div class="flex items-center gap-2">
-                    <button type="button" wire:click="swapRange"
-                            class="{{ $buttonClass }} border-gray-300 text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700">
-                        Csere
-                    </button>
-                    <button type="button" wire:click="clearRange"
-                            class="{{ $buttonClass }} border-gray-300 text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700">
-                        Törlés
-                    </button>
+                    <x-filament::button size="xs" color="gray" wire:click="swapRange">Csere</x-filament::button>
+                    <x-filament::button size="xs" color="gray" wire:click="clearRange">Törlés</x-filament::button>
                 </div>
             </div>
 
@@ -223,14 +218,16 @@ class="{{ $buttonClass }} border-gray-300 text-gray-700 hover:bg-gray-100 dark:b
                                 <tr wire:key="commit-{{ $commit['hash'] }}"
                                     class="border-b border-gray-100 dark:border-gray-700 {{ $inRange ? 'bg-primary-50 dark:bg-gray-900' : '' }}">
                                     <td class="py-2 pr-4 whitespace-nowrap">
-                                        <button type="button" wire:click="selectFrom('{{ $commit['hash'] }}')"
-                                                class="{{ $buttonClass }} {{ $isFrom ? 'border-primary-600 bg-primary-600 text-white' : 'border-gray-300 text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700' }}">
-                                            Kezdő
-                                        </button>
-                                        <button type="button" wire:click="selectTo('{{ $commit['hash'] }}')"
-                                                class="{{ $buttonClass }} ml-1 {{ $isTo ? 'border-primary-600 bg-primary-600 text-white' : 'border-gray-300 text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700' }}">
-                                            Záró
-                                        </button>
+                                        <div class="flex items-center gap-1">
+                                            <x-filament::button size="xs" :color="$isFrom ? 'primary' : 'gray'"
+                                                                wire:click="selectFrom('{{ $commit['hash'] }}')">
+                                                Kezdő
+                                            </x-filament::button>
+                                            <x-filament::button size="xs" :color="$isTo ? 'primary' : 'gray'"
+                                                                wire:click="selectTo('{{ $commit['hash'] }}')">
+                                                Záró
+                                            </x-filament::button>
+                                        </div>
                                     </td>
                                     <td class="py-2 pr-4 font-mono text-xs whitespace-nowrap">{{ $commit['short'] }}</td>
                                     <td class="py-2 pr-4 whitespace-nowrap text-gray-600 dark:text-gray-300">
@@ -277,7 +274,7 @@ class="{{ $buttonClass }} ml-1 {{ $isTo ? 'border-primary-600 bg-primary-600 tex
                             <tbody>
                                 @foreach ($changeSet['files'] as $file)
                                     @php
-                                        $style = $statusStyles[$file['status']] ?? ['label' => $file['status'], 'class' => 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'];
+                                        $style = $statusStyles[$file['status']] ?? ['label' => $file['status'], 'color' => 'gray'];
                                         $isSkipped = in_array($file['path'], $this->skippedPaths, true);
                                     @endphp
                                     <tr wire:key="file-{{ $loop->index }}" class="border-b border-gray-100 dark:border-gray-700 {{ $file['excluded'] || $isSkipped ? 'opacity-50' : '' }}">
@@ -292,9 +289,9 @@ class="rounded border-gray-300 dark:border-gray-600">
                                             @endif
                                         </td>
                                         <td class="py-2 pr-4 whitespace-nowrap">
-                                            <span class="px-2 py-0.5 text-xs font-semibold rounded {{ $style['class'] }}">
+                                            <x-filament::badge :color="$style['color']">
                                                 {{ $file['status'] }} · {{ $style['label'] }}
-                                            </span>
+                                            </x-filament::badge>
                                         </td>
                                         <td class="py-2 pr-4 font-mono text-xs break-all text-gray-800 dark:text-gray-100">
                                             {{ $file['path'] }}
@@ -331,15 +328,13 @@ class="rounded border-gray-300 dark:border-gray-600">
                         @endif
                     </p>
 
-                    <button type="button"
-                            wire:click="createPackage"
-                            wire:confirm="Elkészítjük a csomagot: {{ $packageCount }} fájl{{ $target ? ' a(z) '.$target['label'].' környezethez' : '' }}. Folytatod?"
-                            wire:loading.attr="disabled"
-                            @disabled($packageCount === 0 && $changeSet['counts']['deleted'] === 0)
-                            class="px-4 py-2 text-sm font-semibold text-white rounded bg-primary-600 hover:bg-primary-500 disabled:opacity-50 disabled:cursor-not-allowed">
-                        <span wire:loading.remove wire:target="createPackage">Csomag készítése</span>
-                        <span wire:loading wire:target="createPackage">Csomagolás…</span>
-                    </button>
+                    <x-filament::button
+                        icon="heroicon-m-archive-box-arrow-down"
+                        wire:click="createPackage"
+                        wire:confirm="Elkészítjük a csomagot: {{ $packageCount }} fájl{{ $target ? ' a(z) '.$target['label'].' környezethez' : '' }}. Folytatod?"
+                        :disabled="$packageCount === 0 && $changeSet['counts']['deleted'] === 0">
+                        Csomag készítése
+                    </x-filament::button>
                 </div>
             </div>
         @endif
@@ -390,20 +385,22 @@ class="px-4 py-2 text-sm font-semibold text-white rounded bg-primary-600 hover:b
                                             <span class="text-gray-400">–</span>
                                         @endif
                                     </td>
-                                    <td class="py-2 text-right whitespace-nowrap">
-                                        @if ($package->zip_path)
-                                            <button type="button" wire:click="downloadPackage({{ $package->id }})"
-                                                    class="{{ $buttonClass }} border-gray-300 text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700">
-                                                ZIP
-                                            </button>
-                                        @endif
-                                        @unless ($package->isDeployed())
-                                            <button type="button" wire:click="markDeployed({{ $package->id }})"
-                                                    wire:confirm="Megjelöljük kirakottként? Innentől ez lesz a következő csomag kezdő commitja ezen a környezeten."
-                                                    class="{{ $buttonClass }} ml-1 border-gray-300 text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700">
-                                                Kirakva
-                                            </button>
-                                        @endunless
+                                    <td class="py-2 whitespace-nowrap">
+                                        <div class="flex items-center justify-end gap-1">
+                                            @if ($package->zip_path)
+                                                <x-filament::button size="xs" color="gray"
+                                                                    wire:click="downloadPackage({{ $package->id }})">
+                                                    ZIP
+                                                </x-filament::button>
+                                            @endif
+                                            @unless ($package->isDeployed())
+                                                <x-filament::button size="xs" color="gray"
+                                                                    wire:click="markDeployed({{ $package->id }})"
+                                                                    wire:confirm="Megjelöljük kirakottként? Innentől ez lesz a következő csomag kezdő commitja ezen a környezeten.">
+                                                    Kirakva
+                                                </x-filament::button>
+                                            @endunless
+                                        </div>
                                     </td>
                                 </tr>
                             @endforeach