fix(ui): update border styling for consistency across components and enhance loading indicators

resources/views/livewire/project/application/heading.blade.php

@@ -8,16 +8,16 @@
             </a>
             <a class="{{ request()->routeIs('project.application.deployment.index') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.application.deployment.index', $parameters) }}">
-                <button>Deployments</button>
+                Deployments
             </a>
             <a class="{{ request()->routeIs('project.application.logs') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.application.logs', $parameters) }}">
-                <button>Logs</button>
+                Logs
             </a>
             @if (!$application->destination->server->isSwarm())
                 <a class="{{ request()->routeIs('project.application.command') ? 'dark:text-white' : '' }}"
                     href="{{ route('project.application.command', $parameters) }}">
-                    <button>Terminal</button>
+                    Terminal
                 </a>
             @endif
             <x-applications.links :application="$application" />

resources/views/livewire/project/application/rollback.blade.php

@@ -5,11 +5,11 @@
     </div>
     <div class="pb-4 ">You can easily rollback to a previously built (local) images
         quickly.</div>
-    <div wire:target='loadImages'>
+    <div wire:target='loadImages' wire:loading.remove>
         <div class="flex flex-wrap">
             @forelse ($images as $image)
                 <div class="w-2/4 p-2">
-                    <div class="bg-white border rounded-sm dark:border-black dark:bg-coolgray-100">
+                    <div class="bg-white border rounded-sm dark:border-black dark:bg-coolgray-100 border-neutral-200">
                         <div class="p-2">
                             <div class="">
                                 @if (data_get($image, 'is_current'))
@@ -31,7 +31,7 @@
                                     Rollback
                                 </x-forms.button>
                             @else
-                                <x-forms.button class="bg-coolgray-100"
+                                <x-forms.button class="dark:bg-coolgray-100"
                                     wire:click="rollbackImage('{{ data_get($image, 'tag') }}')">
                                     Rollback
                                 </x-forms.button>
@@ -44,4 +44,5 @@
             @endforelse
         </div>
     </div>
+    <div wire:target='loadImages' wire:loading>Loading available docker images...</div>
 </div>

resources/views/livewire/project/database/backup/execution.blade.php

@@ -5,7 +5,7 @@
     <h1>Backups</h1>
     <livewire:project.shared.configuration-checker :resource="$database" />
     <livewire:project.database.heading :database="$database" />
-    <div class="pt-6">
+    <div>
         <livewire:project.database.backup-edit :backup="$backup" :s3s="$s3s" :status="data_get($database, 'status')" />
         <livewire:project.database.backup-executions :backup="$backup" />
     </div>

resources/views/livewire/project/database/heading.blade.php

@@ -11,16 +11,16 @@
             class="flex overflow-x-scroll shrink-0 gap-6 items-center whitespace-nowrap sm:overflow-x-hidden scrollbar min-h-10">
             <a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.database.configuration', $parameters) }}">
-                <button>Configuration</button>
+                Configuration
             </a>
 
             <a class="{{ request()->routeIs('project.database.logs') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.database.logs', $parameters) }}">
-                <button>Logs</button>
+                Logs
             </a>
             <a class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.database.command', $parameters) }}">
-                <button>Terminal</button>
+                Terminal
             </a>
             @if (
                 $database->getMorphClass() === 'App\Models\StandalonePostgresql' ||
@@ -29,7 +29,7 @@
                     $database->getMorphClass() === 'App\Models\StandaloneMariadb')
                 <a class="{{ request()->routeIs('project.database.backup.index') ? 'dark:text-white' : '' }}"
                     href="{{ route('project.database.backup.index', $parameters) }}">
-                    <button>Backups</button>
+                    Backups
                 </a>
             @endif
         </nav>

resources/views/livewire/project/shared/environment-variable/show.blade.php

@@ -2,7 +2,7 @@
     <form wire:submit='submit' @class([
         'flex flex-col items-center gap-4 p-4 bg-white border lg:items-start dark:bg-base',
         'border-error' => $is_really_required,
-        'dark:border-coolgray-300' => !$is_really_required,
+        'dark:border-coolgray-300 border-neutral-200' => !$is_really_required,
     ])>
         @if ($isLocked)
             <div class="flex flex-1 w-full gap-2">

resources/views/livewire/project/shared/get-logs.blade.php

@@ -1,4 +1,4 @@
-<div class="p-4 my-4 border dark:border-coolgray-200">
+<div class="p-4 my-4 border dark:border-coolgray-200 border-neutral-200">
     <div x-init="$wire.getLogs" id="screen" x-data="{
         fullscreen: false,
         alwaysScroll: false,
@@ -56,7 +56,7 @@
             <x-forms.checkbox instantSave label="Include Timestamps" id="showTimeStamps"></x-forms.checkbox>
         </form>
         <div :class="fullscreen ? 'fullscreen' : 'relative w-full py-4 mx-auto'">
-            <div class="flex overflow-y-auto flex-col-reverse px-4 py-2 w-full bg-white dark:text-white dark:bg-coolgray-100 scrollbar dark:border-coolgray-300"
+            <div class="flex overflow-y-auto flex-col-reverse px-4 py-2 w-full bg-white dark:text-white dark:bg-coolgray-100 scrollbar dark:border-coolgray-300 border-neutral-200"
                 :class="fullscreen ? '' : 'max-h-96 border border-solid rounded-sm'">
                 <div :class="fullscreen ? 'fixed top-4 right-4' : 'absolute top-6 right-0'">
                     <div class="flex justify-end gap-4" :class="fullscreen ? 'fixed' : ''"

resources/views/livewire/project/shared/health-checks.blade.php

@@ -6,7 +6,8 @@
     <div class="pb-4">Define how your resource's health should be checked.</div>
     <div class="flex flex-col gap-4">
         @if ($resource->custom_healthcheck_found)
-            <div class="text-warning">A custom health check has been found and will be used until you enable this.</div>
+            <div class="dark:text-warning">A custom health check has been found and will be used until you enable this.
+            </div>
         @endif
         <div class="w-32">
             <x-forms.checkbox instantSave id="resource.health_check_enabled" label="Enabled" />
@@ -25,8 +26,8 @@
             <x-forms.input id="resource.health_check_response_text" placeholder="OK" label="Response Text" />
         </div>
         <div class="flex gap-2">
-            <x-forms.input min=1 type="number" id="resource.health_check_interval" placeholder="30" label="Interval (s)"
-                required />
+            <x-forms.input min=1 type="number" id="resource.health_check_interval" placeholder="30"
+                label="Interval (s)" required />
             <x-forms.input type="number" id="resource.health_check_timeout" placeholder="30" label="Timeout (s)"
                 required />
             <x-forms.input type="number" id="resource.health_check_retries" placeholder="3" label="Retries" required />

resources/views/livewire/project/shared/logs.blade.php

@@ -9,7 +9,7 @@
         <div>
             <h2>Logs</h2>
             @if (str($status)->contains('exited'))
-                <div class="pt-2">The resource is not running.</div>
+                <div class="pt-4">The resource is not running.</div>
             @else
                 <div class="pt-2" wire:loading wire:target="loadAllContainers">
                     Loading containers...
@@ -44,7 +44,7 @@
         <div>
             <h2>Logs</h2>
             @if (str($status)->contains('exited'))
-                <div class="pt-2">The resource is not running.</div>
+                <div class="pt-4">The resource is not running.</div>
             @else
                 <div class="pt-2" wire:loading wire:target="loadAllContainers">
                     Loading containers...
@@ -68,7 +68,7 @@
         <div>
             <h2>Logs</h2>
             @if (str($status)->contains('exited'))
-                <div class="pt-2">The resource is not running.</div>
+                <div class="pt-4">The resource is not running.</div>
             @else
                 <div class="pt-2" wire:loading wire:target="loadAllContainers">
                     Loading containers...