style: Tweaks and improvements

vanguardbackup · Jul 28, 2024 · fa7a356 · fa7a356
1 parent 4d6e5e4
commit fa7a356
Show file tree

Hide file tree

Showing 10 changed files with 183 additions and 175 deletions.
diff --git a/resources/views/components/icons/upcloud.blade.php b/resources/views/components/icons/upcloud.blade.php
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" {{ $attributes->merge() }}>
+<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" {{ $attributes->merge(['class' => 'fill-current']) }}>
     <path
         d="M22.1155 12.9964a1.8845 1.8845 0 110 3.769H8.6643V11.87h.888v4.0072h12.5849a1.0078 1.0078 0 00.9964-.9964 1.0317 1.0317 0 00-1.0397-.9964H10.397v-.888zm-8.6859-5.7617H8.6643v1.9927h.888V8.1011h3.899a1.0078 1.0078 0 01.9964.9964 1.0653 1.0653 0 01-1.018 1.0397H1.8845a1.8845 1.8845 0 100 3.769h5.8917v-.8881H1.8845a.9964.9964 0 010-1.9928h11.5668a1.8999 1.8999 0 001.8844-1.8845 1.9375 1.9375 0 00-1.9061-1.9061z"/>
 </svg>
diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
@@ -45,7 +45,7 @@
     x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
     x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
     x-show="show"
-    class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50 flex items-center justify-center"
+    class="fixed inset-0 overflow-y-auto px-2 py-4 sm:px-4 sm:py-6 z-50 flex items-center justify-center"
     style="display: none;"
     x-cloak
 >
@@ -77,19 +77,19 @@ class="bg-white dark:bg-gray-800 rounded-[0.70rem] overflow-hidden shadow-xl tra
         aria-modal="true"
         :aria-labelledby="$id('modal-title')"
     >
-        <div class="absolute top-0 right-0 pt-4 pr-4">
+        <div class="absolute top-0 right-0 pt-3 pr-3 sm:pt-4 sm:pr-4">
             <button
                 @click="show = false"
                 class="text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800 rounded-md"
                 aria-label="{{ __('Close modal') }}"
             >
                 <span class="sr-only">{{ __('Close') }}</span>
-                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                <svg class="h-5 w-5 sm:h-6 sm:w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                 </svg>
             </button>
         </div>
-        <div class="px-6 py-4">
+        <div class="px-4 py-3 sm:px-6 sm:py-4">
             @if (isset($title))
                 <h2 :id="$id('modal-title')" class="text-lg font-medium text-gray-900 dark:text-gray-100">
                     {{ $title }}

diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
@@ -13,7 +13,18 @@
         <div class="py-6 px-4 mx-auto max-w-full sm:max-w-6xl">
             <div class="mb-6">
                 <div class="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
-                    <img class="h-16 w-16 rounded-full border-2 border-primary-200 dark:border-primary-700" src="{{ Auth::user()->gravatar('200') }}" alt="{{ Auth::user()->name }}" />
+                    <div x-data="{ imageLoaded: false }" class="relative h-16 w-16">
+                        <div
+                            x-show="!imageLoaded"
+                            class="absolute inset-0 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"
+                        ></div>
+                        <img
+                            x-on:load="imageLoaded = true"
+                            x-bind:class="{ 'opacity-0': !imageLoaded, 'opacity-100': imageLoaded }"
+                            class="h-16 w-16 rounded-full border-2 border-primary-200 dark:border-primary-700 transition-opacity duration-300"
+                            src="{{ Auth::user()->gravatar('200') }}"
+                        />
+                    </div>
                     <div class="ml-4 mt-4 sm:mt-0 text-center sm:text-left">
                         <h3 class="font-semibold text-2xl text-gray-900 dark:text-gray-100">
                             {{ \App\Facades\Greeting::auto(Auth::user()->timezone) }}, {{ Auth::user()->first_name }}!

diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php
@@ -111,7 +111,7 @@
     </style>
 </head>
 <body class="font-sans text-gray-900 dark:text-gray-100 antialiased h-full">
-<div class="flex min-h-full">
+<div class="flex min-h-screen">
     <!-- Left side: Form half -->
     <div class="flex flex-1 flex-col justify-center py-12 px-4 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
         <div class="mx-auto w-full max-w-sm lg:w-96">

diff --git a/resources/views/livewire/backup-tasks/buttons/run-task-button.blade.php b/resources/views/livewire/backup-tasks/buttons/run-task-button.blade.php
@@ -1,34 +1,26 @@
 <div>
     @if ($backupTask->isRunning())
-        <x-secondary-button iconOnly type="button" class="bg-opacity-50 cursor-not-allowed" disabled
-                            title="{{ __('Task is running') }}">
+        <x-secondary-button type="button" class="!p-2 bg-opacity-50 cursor-not-allowed" disabled title="{{ __('Task is running') }}">
             <span class="sr-only">{{ __('Task Running') }}</span>
             @svg('heroicon-o-stop', 'w-4 h-4')
         </x-secondary-button>
     @elseif ($backupTask->isPaused())
-        <x-secondary-button iconOnly type="button" class="cursor-not-allowed bg-opacity-50" disabled
-                            title="{{ __('Task is disabled') }}">
+        <x-secondary-button type="button" class="!p-2 cursor-not-allowed bg-opacity-50" disabled title="{{ __('Task is disabled') }}">
             <span class="sr-only">{{ __('Task Disabled') }}</span>
             @svg('heroicon-o-play', 'w-4 h-4')
         </x-secondary-button>
     @elseif ($backupTask->isAnotherTaskRunningOnSameRemoteServer())
-        <x-secondary-button iconOnly type="button" class="cursor-not-allowed bg-opacity-50" disabled
-                            title=" {{ __('Another task is running on the same remote server') }}">
-            <span class="sr-only">
-                {{ __('Another task is running on the same remote server') }}
-            </span>
+        <x-secondary-button type="button" class="!p-2 cursor-not-allowed bg-opacity-50" disabled title="{{ __('Another task is running on the same remote server') }}">
+            <span class="sr-only">{{ __('Another task is running on the same remote server') }}</span>
             @svg('heroicon-o-play', 'w-4 h-4')
         </x-secondary-button>
     @elseif ($backupTask->remoteServer->isMarkedForDeletion())
-        <x-secondary-button iconOnly type="button" class="cursor-not-allowed bg-opacity-50" disabled
-                            title=" {{ __('Remote server is marked for deletion') }}">
-            <span class="sr-only">
-                {{ __('Remote server is marked for deletion') }}
-            </span>
+        <x-secondary-button type="button" class="!p-2 cursor-not-allowed bg-opacity-50" disabled title="{{ __('Remote server is marked for deletion') }}">
+            <span class="sr-only">{{ __('Remote server is marked for deletion') }}</span>
             @svg('heroicon-o-play', 'w-4 h-4')
         </x-secondary-button>
     @else
-        <x-secondary-button iconOnly wire:click="runTask" type="button" title="{{ __('Click to run this task') }}">
+        <x-secondary-button wire:click="runTask" type="button" class="!p-2" title="{{ __('Click to run this task') }}">
             <span class="sr-only">Run Task</span>
             @svg('heroicon-o-play', 'w-4 h-4')
         </x-secondary-button>

diff --git a/resources/views/livewire/backup-tasks/buttons/toggle-pause-button.blade.php b/resources/views/livewire/backup-tasks/buttons/toggle-pause-button.blade.php
@@ -1,16 +1,16 @@
 <div>
     @if ($backupTask->isPaused())
-        <x-danger-button iconOnly wire:click="togglePauseState" type="button" title="{{ __('Click to enable this task') }}">
+        <x-danger-button wire:click="togglePauseState" type="button" class="!p-2" title="{{ __('Click to enable this task') }}">
             <span class="sr-only">{{ __('Task Paused') }}</span>
             @svg('heroicon-o-hand-raised', 'w-4 h-4')
         </x-danger-button>
-        @elseif ($backupTask->isRunning())
-        <x-secondary-button iconOnly  type="button" title="{{ __('Pause this task') }}" disabled class="bg-gray-50 cursor-not-allowed">
+    @elseif ($backupTask->isRunning())
+        <x-secondary-button type="button" class="!p-2 bg-gray-50 cursor-not-allowed" disabled title="{{ __('Pause this task') }}">
             <span class="sr-only">{{ __('Task Not Paused') }}</span>
             @svg('heroicon-o-hand-raised', 'w-4 h-4')
         </x-secondary-button>
     @else
-        <x-secondary-button iconOnly wire:click="togglePauseState" type="button" title="{{ __('Click to disable this task') }}">
+        <x-secondary-button wire:click="togglePauseState" type="button" class="!p-2" title="{{ __('Click to disable this task') }}">
             <span class="sr-only">{{ __('Task Not Paused') }}</span>
             @svg('heroicon-o-hand-raised', 'w-4 h-4')
         </x-secondary-button>

diff --git a/resources/views/livewire/backup-tasks/tables/index-item.blade.php b/resources/views/livewire/backup-tasks/tables/index-item.blade.php
@@ -116,14 +116,13 @@ class="font-medium">{{ __('Last ran') }}:</span> {{ $backupTask->lastRunFormatte
             </div>
 
             <!-- Actions - Always visible, but reorganized for responsive view -->
-            <div class="flex flex-wrap justify-start space-x-2 space-y-2 sm:space-y-0 sm:justify-end">
-                <livewire:backup-tasks.buttons.run-task-button :$backupTask
-                                                               :key="'run-task-button-' . $backupTask->id"/>
+            <div class="flex flex-wrap justify-start space-x-2 mt-3">
+                <livewire:backup-tasks.buttons.run-task-button :$backupTask :key="'run-task-button-' . $backupTask->id"/>
 
                 <x-secondary-button
                     x-data=""
                     x-on:click.prevent="$dispatch('open-modal', 'backup-task-{{ $backupTask->id }}')"
-                    iconOnly
+                    class="!p-2"
                     :disabled="!$backupTask->logs()->exists()"
                     :title="$backupTask->logs()->exists() ? __('Click to view this log') : __('No log available')"
                 >
@@ -137,7 +136,7 @@ class="font-medium">{{ __('Last ran') }}:</span> {{ $backupTask->lastRunFormatte
                 />
 
                 <a href="{{ route('backup-tasks.edit', $backupTask) }}" wire:navigate>
-                    <x-secondary-button iconOnly>
+                    <x-secondary-button class="!p-2">
                         <span class="sr-only">{{ __('Update Backup Task') }}</span>
                         <x-heroicon-o-pencil-square class="w-4 h-4"/>
                     </x-secondary-button>
@@ -248,13 +247,12 @@ class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {
 
             <!-- Actions -->
             <div class="col-span-12 md:col-span-2 flex justify-end space-x-2">
-                <livewire:backup-tasks.buttons.run-task-button :$backupTask
-                                                               :key="'run-task-button-' . $backupTask->id"/>
+                <livewire:backup-tasks.buttons.run-task-button :$backupTask :key="'run-task-button-' . $backupTask->id"/>
 
                 <x-secondary-button
                     x-data=""
                     x-on:click.prevent="$dispatch('open-modal', 'backup-task-{{ $backupTask->id }}')"
-                    iconOnly
+                    class="!p-2"
                     :disabled="!$backupTask->logs()->exists()"
                     :title="$backupTask->logs()->exists() ? __('Click to view this log') : __('No log available')"
                 >
@@ -268,7 +266,7 @@ class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {
                 />
 
                 <a href="{{ route('backup-tasks.edit', $backupTask) }}" wire:navigate>
-                    <x-secondary-button iconOnly>
+                    <x-secondary-button class="!p-2">
                         <span class="sr-only">{{ __('Update Backup Task') }}</span>
                         <x-heroicon-o-pencil-square class="w-4 h-4"/>
                     </x-secondary-button>

diff --git a/resources/views/livewire/layout/navigation.blade.php b/resources/views/livewire/layout/navigation.blade.php
@@ -84,11 +84,31 @@ public function toggleUserDropdown(): void
                     <x-theme-switcher />
                     <x-dropdown align="right" width="48">
                         <x-slot name="trigger">
-                            <button @click="desktopDropdownOpen = !desktopDropdownOpen" class="flex items-center text-sm font-medium text-gray-50 hover:text-gray-100 focus:outline-none transition duration-150 ease-in-out" aria-expanded="false">
+                            <button @click="desktopDropdownOpen = !desktopDropdownOpen"
+                                    class="flex items-center text-sm font-medium text-gray-50 hover:text-gray-100 focus:outline-none transition duration-150 ease-in-out"
+                                    aria-expanded="false">
                                 <span class="sr-only">Open user menu</span>
-                                <img class="h-8 w-8 rounded-full mr-2 border border-gray-950" src="{{ Auth::user()->gravatar() }}" alt="{{ Auth::user()->name }}"/>
-                                <span x-data="{ name: @js(auth()->user()->first_name) }" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></span>
-                                <svg class="ml-2 h-4 w-4 transition-transform duration-200 ease-in-out" :class="{'rotate-180': desktopDropdownOpen}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                <div x-data="{ imageLoaded: false }" class="relative h-8 w-8 mr-2">
+                                    <div
+                                        x-show="!imageLoaded"
+                                        class="absolute inset-0 bg-gray-600 dark:bg-gray-400 rounded-full animate-pulse"
+                                    ></div>
+                                    <img
+                                        x-on:load="imageLoaded = true"
+                                        x-bind:class="{ 'opacity-0': !imageLoaded, 'opacity-100': imageLoaded }"
+                                        class="h-8 w-8 rounded-full border border-gray-950 transition-opacity duration-300"
+                                        src="{{ Auth::user()->gravatar() }}"
+                                    />
+                                </div>
+                                <span x-data="{ name: @js(auth()->user()->first_name) }"
+                                      x-text="name"
+                                      x-on:profile-updated.window="name = $event.detail.name"
+                                ></span>
+                                <svg class="ml-2 h-4 w-4 transition-transform duration-200 ease-in-out"
+                                     :class="{'rotate-180': desktopDropdownOpen}"
+                                     xmlns="http://www.w3.org/2000/svg"
+                                     viewBox="0 0 20 20"
+                                     fill="currentColor">
                                     <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                 </svg>
                             </button>

diff --git a/resources/views/livewire/profile/update-profile-information-form.blade.php b/resources/views/livewire/profile/update-profile-information-form.blade.php
@@ -104,33 +104,49 @@ public function sendVerification(): void
 
     <form wire:submit="updateProfileInformation" class="mt-6 space-y-6">
         @if (Auth::user()->canLoginWithGithub())
-            <div
-                class="my-4 bg-white dark:bg-gray-800 p-3 sm:p-4 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 transition-colors duration-200">
-                <div class="flex items-center justify-between max-w-md mx-auto">
-                    <div class="flex items-center space-x-2 sm:space-x-3 flex-grow">
-                        <x-icons.github
-                            class="w-6 h-6 sm:w-7 sm:h-7 flex-shrink-0 text-gray-900 dark:text-white transition-colors duration-200"/>
-                        <span
-                            class="font-medium text-sm sm:text-base text-gray-800 dark:text-gray-100 transition-colors duration-200">
-                {{ __('You can sign in to :app with GitHub.', ['app' => config('app.name')]) }}
-            </span>
-                    </div>
-                    <div class="flex-shrink-0 ml-2">
-                        @svg('heroicon-o-check', 'w-6 h-6 sm:w-7 sm:h-7 text-green-600 dark:text-green-400
-                        transition-colors duration-200')
+            <div class="my-4 max-w-md mx-auto">
+                <div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-800 dark:to-gray-700 p-4 rounded-lg shadow-md border border-gray-200 dark:border-gray-600 transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
+                    <div class="flex items-center space-x-4">
+                        <div class="flex-shrink-0">
+                            <div class="bg-white dark:bg-gray-700 p-2 rounded-full shadow-sm">
+                                <x-icons.github class="w-8 h-8 text-gray-900 dark:text-white transition-colors duration-200"/>
+                            </div>
+                        </div>
+                        <div class="flex-grow">
+                <span class="font-medium text-sm sm:text-base text-gray-800 dark:text-gray-100 transition-colors duration-200">
+                    {{ __('You can sign in to :app with GitHub.', ['app' => config('app.name')]) }}
+                </span>
+                        </div>
+                        <div class="flex-shrink-0">
+                            <div class="bg-green-100 dark:bg-green-800 p-1.5 rounded-full">
+                                @svg('heroicon-o-check', 'w-5 h-5 text-green-600 dark:text-green-300 transition-colors duration-200')
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         @endif
         <div class="mt-4">
-            <x-input-label for="avatar" :value="__('Avatar')"/>
-            <div class="flex items-center mt-2">
-                <img class="w-20 h-20 rounded-full" src="{{ Auth::user()->gravatar('160') }}"
-                     alt="{{ Auth::user()->name }}"/>
-                <a href="https://gravatar.com" target="_blank"
-                   class="ml-4 text-sm text-gray-600 dark:text-gray-400 underline hover:text-gray-900 dark:hover:text-gray-100 ease-in-out">
-                    {{ __('Update your avatar on Gravatar') }}
-                </a>
+            <div class="mt-4">
+                <x-input-label for="avatar" :value="__('Avatar')"/>
+                <div class="flex items-center mt-2">
+                    <div x-data="{ imageLoaded: false }" class="relative w-20 h-20">
+                        <div
+                            x-show="!imageLoaded"
+                            class="absolute inset-0 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"
+                        ></div>
+                        <img
+                            x-on:load="imageLoaded = true"
+                            x-bind:class="{ 'opacity-0': !imageLoaded, 'opacity-100': imageLoaded }"
+                            class="w-20 h-20 rounded-full transition-opacity duration-300"
+                            src="{{ Auth::user()->gravatar('160') }}"
+                        />
+                    </div>
+                    <a href="https://gravatar.com" target="_blank"
+                       class="ml-4 text-sm text-gray-600 dark:text-gray-400 underline hover:text-gray-900 dark:hover:text-gray-100 transition-colors ease-in-out">
+                        {{ __('Update your avatar on Gravatar') }}
+                    </a>
+                </div>
             </div>
         </div>