From abadaa4612e57120f22658c071d0a6fbb3804036 Mon Sep 17 00:00:00 2001
From: Lewis Larsen <lewis@larsens.dev>
Date: Fri, 2 Aug 2024 23:38:59 +0100
Subject: [PATCH] style: Fixed debug mode in modal

---
 .../backup-tasks/modals/log-modal.blade.php   | 100 ++++++++++--------
 .../backup-task-history-table.blade.php       |  14 +--
 2 files changed, 58 insertions(+), 56 deletions(-)

diff --git a/resources/views/livewire/backup-tasks/modals/log-modal.blade.php b/resources/views/livewire/backup-tasks/modals/log-modal.blade.php
index bfd9033a..9a70549c 100644
--- a/resources/views/livewire/backup-tasks/modals/log-modal.blade.php
+++ b/resources/views/livewire/backup-tasks/modals/log-modal.blade.php
@@ -1,7 +1,7 @@
 <div>
     <x-modal name="backup-task-{{ $backupTaskId }}" wire:key="backup-task-{{ $backupTaskId }}">
         <x-slot name="title">
-            {{ __('Log Results') }}
+            {{ __('Viewing latest log for ":label".', ['label' => $backupTask?->label ?? __('Unknown')]) }}
         </x-slot>
         <x-slot name="description">
             {{ __('Viewing a Backup Task log.') }}
@@ -9,57 +9,65 @@
         <x-slot name="icon">
             heroicon-o-document-text
         </x-slot>
-        <div class="p-6">
-            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
-                {{ __('Viewing latest log for ":label".', ['label' => $backupTask?->label ?? __('Unknown')]) }}
-            </h2>
-
+        <div>
             @if (app()->isLocal())
-                <!-- Debug Info -->
-                <div x-data="{ showDebug: false }" class="mt-4">
-                    <button @click="showDebug = !showDebug" class="flex items-center text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
-                    <span x-show="!showDebug">
-                        @svg('heroicon-o-eye', 'w-4 h-4 mr-1')
-                        {{ __('Show Debug Info') }}
-                    </span>
-                        <span x-show="showDebug">
-                        @svg('heroicon-o-eye-slash', 'w-4 h-4 mr-1')
-                        {{ __('Hide Debug Info') }}
-                    </span>
+                <div
+                    x-data="{ showDebug: false }"
+                    class="mt-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700"
+                >
+                    <button
+                        @click="showDebug = !showDebug"
+                        class="w-full px-4 py-2 text-left text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800/90 focus:outline-none transition-colors duration-200"
+                    >
+                        <div class="flex items-center justify-between">
+                <span class="flex items-center">
+                    <x-heroicon-o-bug-ant class="w-5 h-5 mr-2" />
+                    {{ __('Debug Information') }}
+                </span>
+                            <x-heroicon-o-chevron-down
+                                class="w-5 h-5 transition-transform duration-200"
+                                ::class="{ 'transform rotate-180': showDebug }"
+                            />
+                        </div>
                     </button>
-                    <div x-show="showDebug" x-transition:enter="transition ease-out duration-300"
-                         x-transition:enter-start="opacity-0 transform scale-95"
-                         x-transition:enter-end="opacity-100 transform scale-100"
-                         x-transition:leave="transition ease-in duration-200"
-                         x-transition:leave-start="opacity-100 transform scale-100"
-                         x-transition:leave-end="opacity-0 transform scale-95"
-                         class="mt-2 p-3 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs rounded-md shadow-sm">
-                        <ul class="space-y-1">
-                            <li class="flex items-center">
-                                @svg('heroicon-o-identification', 'w-4 h-4 mr-2 text-gray-500 dark:text-gray-400')
-                                <span>Component ID: {{ $this->getId() }}</span>
-                            </li>
-                            <li class="flex items-center">
-                                @svg('heroicon-o-clipboard-document-list', 'w-4 h-4 mr-2 text-gray-500 dark:text-gray-400')
-                                <span>Backup Task ID: {{ $backupTaskId }}</span>
-                            </li>
-                            <li class="flex items-center">
-                                @svg('heroicon-o-arrow-path', 'w-4 h-4 mr-2 text-gray-500 dark:text-gray-400')
-                                <span>Is Streaming: {{ $isStreaming ? 'Yes' : 'No' }}</span>
-                            </li>
-                            <li class="flex items-center">
-                                @svg('heroicon-o-clock', 'w-4 h-4 mr-2 text-gray-500 dark:text-gray-400')
-                                <span>Is Loading: {{ $isLoading ? 'Yes' : 'No' }}</span>
-                            </li>
-                            <li class="flex items-center">
-                                @svg('heroicon-o-document-text', 'w-4 h-4 mr-2 text-gray-500 dark:text-gray-400')
-                                <span>Log Output Length: {{ strlen($logOutput) }}</span>
-                            </li>
+
+                    <div
+                        x-show="showDebug"
+                        x-transition:enter="transition ease-out duration-300"
+                        x-transition:enter-start="opacity-0 transform -translate-y-2"
+                        x-transition:enter-end="opacity-100 transform translate-y-0"
+                        x-transition:leave="transition ease-in duration-200"
+                        x-transition:leave-start="opacity-100 transform translate-y-0"
+                        x-transition:leave-end="opacity-0 transform -translate-y-2"
+                        class="px-4 py-3 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm rounded-b-lg"
+                    >
+                        <ul class="space-y-2">
+                            @php
+                                $debugItems = [
+                                    ['icon' => 'identification', 'label' => 'Component ID', 'value' => $this->getId()],
+                                    ['icon' => 'clipboard-document-list', 'label' => 'Backup Task ID', 'value' => $backupTaskId],
+                                    ['icon' => 'arrow-path', 'label' => 'Is Streaming', 'value' => $isStreaming ? 'Yes' : 'No'],
+                                    ['icon' => 'clock', 'label' => 'Is Loading', 'value' => $isLoading ? 'Yes' : 'No'],
+                                    ['icon' => 'document-text', 'label' => 'Log Output Length', 'value' => strlen($logOutput)],
+                                ];
+                            @endphp
+
+                            @foreach ($debugItems as $item)
+                                <li class="flex items-center justify-between">
+                        <span class="flex items-center text-gray-600 dark:text-gray-400">
+                            <x-dynamic-component
+                                :component="'heroicon-o-' . $item['icon']"
+                                class="w-4 h-4 mr-2"
+                            />
+                            {{ $item['label'] }}:
+                        </span>
+                                    <span class="font-medium">{{ $item['value'] }}</span>
+                                </li>
+                            @endforeach
                         </ul>
                     </div>
                 </div>
             @endif
-
             <div class="my-5">
                 @if ($isLoading)
                     <div class="flex flex-col items-center justify-center">
diff --git a/resources/views/livewire/backup-tasks/tables/backup-task-history-table.blade.php b/resources/views/livewire/backup-tasks/tables/backup-task-history-table.blade.php
index 6a9a2cc4..a8350ba6 100644
--- a/resources/views/livewire/backup-tasks/tables/backup-task-history-table.blade.php
+++ b/resources/views/livewire/backup-tasks/tables/backup-task-history-table.blade.php
@@ -74,22 +74,16 @@
                             @livewire('backup-tasks.buttons.delete-backup-task-log-button', ['backupTaskLog' => $backupTaskLog])
                             <x-modal name="backup-task-historic-log-{{ $backupTaskLog->id }}">
                                 <x-slot name="title">
-                                    {{ __('Log Results') }}
+                                    {{ __('Viewing log for finished task: ":label".', ['label' => $backupTaskLog->backupTask->label]) }}
                                 </x-slot>
                                 <x-slot name="description">
-                                    {{ __('Viewing a Backup Task log.') }}
+                                    {{ __('This log was generated :date.', ['date' => $backupTaskLog->created_at->timezone(Auth::user()->timezone ?? config('app.timezone'))->format('l, d F Y H:i')]) }}
                                 </x-slot>
                                 <x-slot name="icon">
                                     heroicon-o-document-text
                                 </x-slot>
-                                <div class="p-6 text-center">
-                                    <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
-                                        {{ __('Viewing log for finished task: ":label".', ['label' => $backupTaskLog->backupTask->label]) }}
-                                    </h2>
-                                    <p class="text-gray-800 dark:text-gray-200 my-3">
-                                        {{ __('This log was generated :date.', ['date' => $backupTaskLog->created_at->timezone(Auth::user()->timezone ?? config('app.timezone'))->format('l, d F Y H:i')]) }}
-                                    </p>
-                                    <div class="my-5">
+                                <div class="text-center">
+                                    <div class="mb-5">
                                         <x-textarea id="logOutput" readonly
                                                     class="pre text-sm text-gray-800 bg-gray-50 font-mono" rows="16" wrap>
                                             {{ $backupTaskLog->output }}