style: Fixed consistency issues

vanguardbackup · Jul 28, 2024 · b455a0c · b455a0c
1 parent 26ee98e
commit b455a0c
Show file tree

Hide file tree

Showing 27 changed files with 798 additions and 702 deletions.
diff --git a/resources/views/account/remove-account.blade.php b/resources/views/account/remove-account.blade.php
@@ -1,7 +1,3 @@
 <x-account-wrapper pageTitle="{{ __('Remove Account') }}">
-<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-none sm:rounded-[0.70rem] border border-gray-950/5">
-    <div class="max-w-xl">
-        <livewire:profile.delete-user-form/>
-    </div>
-</div>
+    <livewire:profile.delete-user-form/>
 </x-account-wrapper>
diff --git a/resources/views/components/chart-card.blade.php b/resources/views/components/chart-card.blade.php
@@ -0,0 +1,26 @@
+@props([
+    'icon' => 'heroicon-o-chart-bar',
+    'title',
+    'description',
+])
+
+<div {{ $attributes->merge(['class' => 'bg-white dark:bg-gray-800/50 dark:border-gray-800/30 rounded-[0.70rem] overflow-hidden border sm:rounded-[0.70rem] shadow-none transition duration-300 ease-in-out hover:shadow-md']) }}>
+    <div class="px-6 py-5">
+        <div class="flex items-center">
+            <div class="flex-shrink-0 bg-primary-100 dark:bg-primary-800 rounded-full p-3 mr-4">
+                @svg($icon, ['class' => 'h-6 w-6 text-primary-600 dark:text-primary-400'])
+            </div>
+            <div>
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+                    {{ $title }}
+                </h3>
+                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                    {{ $description }}
+                </p>
+            </div>
+        </div>
+    </div>
+    <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-5">
+        {{ $slot }}
+    </div>
+</div>
diff --git a/resources/views/components/form-wrapper.blade.php b/resources/views/components/form-wrapper.blade.php
@@ -1,3 +1,38 @@
-<div class="bg-white dark:bg-gray-800/50 dark:border-gray-800/30 rounded-[0.70rem] overflow-hidden border sm:rounded-[0.70rem] shadow-none p-8">
-{{ $slot }}
+@props([
+    'iconClass' => 'h-6 w-6 text-primary-600 dark:text-primary-400'
+])
+
+<div class="bg-white dark:bg-gray-800/50 dark:border-gray-800/30 rounded-[0.70rem] overflow-hidden border sm:rounded-[0.70rem] shadow-none">
+    @if (isset($title))
+        <div class="px-6 py-5">
+            <div class="flex items-center">
+                <div class="flex-shrink-0 bg-primary-100 dark:bg-primary-800 rounded-full p-3 mr-4">
+                    @if (isset($icon))
+                        <x-dynamic-component :component="$icon" :class="$iconClass" />
+                    @else
+                        @svg('heroicon-o-server', ['class' => $iconClass])
+                    @endif
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+                        {{ $title }}
+                    </h3>
+                    @if (isset($description))
+                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                            {{ $description }}
+                        </p>
+                    @endif
+                </div>
+            </div>
+        </div>
+        <div class="border-t border-gray-200 dark:border-gray-700">
+            @endif
+
+            <div class="{{ isset($title) ? 'px-6 py-4' : 'p-6' }}">
+                {{ $slot }}
+            </div>
+
+            @if (isset($title))
+        </div>
+    @endif
 </div>
diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
@@ -1,7 +1,9 @@
 @props([
     'name',
     'show' => false,
-    'maxWidth' => '2xl'
+    'maxWidth' => '2xl',
+    'icon' => null,
+    'description' => null,
 ])
 
 @php
@@ -65,7 +67,7 @@ class="fixed inset-0 transform transition-all"
 
     <div
         x-show="show"
-        class="bg-white dark:bg-gray-800 rounded-[0.70rem] overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
+        class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-[0.70rem] overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
         x-transition:enter="ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-[-100%]"
         x-transition:enter-end="opacity-100 translate-y-0"
@@ -77,28 +79,42 @@ 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-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-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-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 }}
-                </h2>
-            @endif
-            <div class="mt-2">
-                {{ $slot }}
+        <div class="px-6 py-5">
+            <div class="flex items-center">
+                @if ($icon)
+                    <div class="flex-shrink-0 bg-primary-100 dark:bg-primary-800 rounded-full p-3 mr-4">
+                        @svg($icon, ['class' => 'h-6 w-6 text-primary-600 dark:text-primary-400'])
+                    </div>
+                @endif
+                <div>
+                    @if (isset($title))
+                        <h3 :id="$id('modal-title')" class="text-lg font-semibold text-gray-900 dark:text-white">
+                            {{ $title }}
+                        </h3>
+                    @endif
+                    @if ($description)
+                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                            {{ $description }}
+                        </p>
+                    @endif
+                </div>
+                <div class="ml-auto">
+                    <button
+                        @click="show = false"
+                        class="text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-800 rounded-md"
+                        aria-label="{{ __('Close modal') }}"
+                    >
+                        <span class="sr-only">{{ __('Close') }}</span>
+                        <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>
         </div>
+        <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-5">
+            {{ $slot }}
+        </div>
     </div>
 </div>
 

diff --git a/resources/views/components/no-content.blade.php b/resources/views/components/no-content.blade.php
@@ -1,17 +1,17 @@
 @props(['icon', 'title', 'description', 'action' => null, 'withBackground' => false])
 
 @if ($withBackground)
-    <div class="bg-white dark:bg-gray-800/50 dark:border-gray-800/30 rounded-[0.70rem] overflow-hidden border border-gray-950/5 shadow-none p-8">
+    <div class="bg-white dark:bg-gray-800/50 dark:border-gray-800/30 rounded-[0.70rem] overflow-hidden border border-gray-950/5 shadow-none p-8 transition duration-300 ease-in-out hover:shadow-md">
         <div class="text-center my-10">
             {{ $icon }}
-            <div class="text-gray-900 dark:text-white text-xl font-semibold my-4">
+            <h3 class="text-gray-900 dark:text-white text-xl font-semibold my-4">
                 {{ $title }}
-            </div>
-            <div class="text-gray-700 dark:text-gray-300 text-lg font-medium">
+            </h3>
+            <p class="text-gray-700 dark:text-gray-300 text-lg font-medium">
                 {{ $description }}
-            </div>
-           @isset($action)
-                <div class="mt-4">
+            </p>
+            @isset($action)
+                <div class="mt-6">
                     {{ $action }}
                 </div>
             @endisset
@@ -20,14 +20,14 @@
 @else
     <div class="text-center my-10">
         {{ $icon }}
-        <div class="text-gray-900 dark:text-white text-xl font-semibold my-4">
+        <h3 class="text-gray-900 dark:text-white text-xl font-semibold my-4">
             {{ $title }}
-        </div>
-        <div class="text-gray-700 dark:text-gray-300 text-lg font-medium">
+        </h3>
+        <p class="text-gray-700 dark:text-gray-300 text-lg font-medium">
             {{ $description }}
-        </div>
+        </p>
         @isset($action)
-            <div class="mt-4">
+            <div class="mt-6">
                 {{ $action }}
             </div>
         @endisset

diff --git a/resources/views/components/notification-stream-form.blade.php b/resources/views/components/notification-stream-form.blade.php
@@ -1,6 +1,14 @@
 @props(['form', 'submitLabel' => __('Save'), 'cancelRoute' => 'notification-streams.index'])
-
 <x-form-wrapper>
+    <x-slot name="title">
+        {{ __('Notification Stream') }}
+    </x-slot>
+    <x-slot name="description">
+        {{ __('Add or update a Notification Stream.') }}
+    </x-slot>
+    <x-slot name="icon">
+        heroicon-o-bell
+    </x-slot>
     <form wire:submit.prevent="submit">
         <div class="mt-4 flex flex-col md:flex-row md:space-x-6 space-y-4 md:space-y-0">
             <div class="w-full md:w-3/6">

diff --git a/resources/views/components/stat-card.blade.php b/resources/views/components/stat-card.blade.php
@@ -0,0 +1,36 @@
+@props([
+    'icon' => 'heroicon-o-question-mark-circle',
+    'title',
+    'description',
+])
+
+<div {{ $attributes->merge(['class' => 'bg-white dark:bg-gray-800/50 dark:border-gray-800/30 rounded-[0.70rem] overflow-hidden border sm:rounded-[0.70rem] shadow-none transition duration-300 ease-in-out hover:shadow-md']) }}>
+    <div class="px-6 py-5">
+        <div class="flex items-center">
+            <div class="flex-shrink-0 bg-primary-100 dark:bg-primary-800 rounded-full p-3 mr-4">
+                @svg($icon, ['class' => 'h-6 w-6 text-primary-600 dark:text-primary-400'])
+            </div>
+            <div>
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ $title }}</h3>
+                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ $description }}</p>
+            </div>
+        </div>
+    </div>
+    <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-4">
+        <div
+            x-data="{ loaded: false }"
+            x-init="setTimeout(() => loaded = true, 1500)"
+        >
+            <template x-if="!loaded">
+                <div class="space-y-2">
+                    <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
+                    <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
+                    <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
+                </div>
+            </template>
+            <template x-if="loaded">
+                {{ $slot }}
+            </template>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/table/table-row.blade.php b/resources/views/components/table/table-row.blade.php
@@ -1,5 +1,5 @@
-<div class="bg-white dark:bg-gray-800 rounded-none transition-all duration-300 overflow-hidden">
-    <div class="grid grid-cols-12 gap-4 items-center p-3 text-sm">
+<div class="bg-white dark:bg-gray-800/50 dark:border-gray-800/30 border border-gray-950/5 rounded-[0.70rem] sm:rounded-[0.70rem] shadow-none transition duration-300 ease-in-out hover:shadow-md overflow-hidden">
+    <div class="grid grid-cols-12 gap-4 items-center p-4 text-sm">
         {{ $slot }}
     </div>
 </div>
diff --git a/resources/views/components/table/table-wrapper.blade.php b/resources/views/components/table/table-wrapper.blade.php
@@ -1,4 +1,4 @@
-<div class="bg-white dark:bg-gray-800 overflow-hidden sm:rounded-lg">
+<div class="bg-white dark:bg-gray-800/50 dark:border-gray-800/30 rounded-[0.70rem] overflow-hidden border sm:rounded-[0.70rem] shadow-none">
     <div class="px-4 py-5 sm:px-6">
         <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
             <div class="flex items-center mb-4 sm:mb-0">

diff --git a/resources/views/components/theme-switcher.blade.php b/resources/views/components/theme-switcher.blade.php
@@ -42,11 +42,16 @@ class="mr-2.5 flex items-center text-sm font-medium text-gray-50 hover:text-gray
     </button>
 
     <x-modal name="theme-switcher" :focusable="true" maxWidth="md">
+        <x-slot name="title">
+            {{ __('Choose Your Theme') }}
+        </x-slot>
+        <x-slot name="description">
+            {{ __('Pick your colour scheme.') }}
+        </x-slot>
+        <x-slot name="icon">
+            heroicon-o-swatch
+        </x-slot>
         <div class="p-6 transform transition-all sm:max-w-sm sm:w-full">
-            <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4" id="theme-switcher-modal-title">
-                {{ __('Choose Your Theme') }}
-            </h2>
-
             <div class="space-y-4">
                 <button
                     @click="setTheme('light')"

diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
@@ -44,67 +44,38 @@ class="text-gray-600 dark:text-gray-400 mt-1">
                 </div>
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div x-data="{ loaded: false }" x-init="setTimeout(() => loaded = true, 1500)"
-                     class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition duration-300 ease-in-out hover:shadow-md">
-                    <div class="px-6 py-5">
-                        <div class="flex items-center">
-                            <div class="flex-shrink-0 bg-primary-100 dark:bg-primary-800 rounded-full p-3 mr-4">
-                                <svg class="h-6 w-6 text-primary-600 dark:text-primary-400"
-                                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                     stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                                </svg>
-                            </div>
-                            <div>
-                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-                                    {{ __('Monthly Backup Task Activity') }}
-                                </h3>
-                                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-                                    {{ __('Overview of backup tasks performed each month') }}.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-5">
+                <x-chart-card
+                    title="{{ __('Monthly Backup Task Activity') }}"
+                    description="{{ __('Overview of backup tasks performed each month') }}."
+                    icon="heroicon-o-clock"
+                >
+                    <div
+                        x-data="{ loaded: false }"
+                        x-init="setTimeout(() => loaded = true, 1500)"
+                    >
                         <div x-show="!loaded" class="h-64 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
                         <div x-show="loaded" x-transition:enter="transition-opacity duration-300"
                              x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="h-64">
                             <canvas id="totalBackupsPerMonth"></canvas>
                         </div>
                     </div>
-                </div>
-
-                <div x-data="{ loaded: false }" x-init="setTimeout(() => loaded = true, 1500)"
-                     class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition duration-300 ease-in-out hover:shadow-md">
-                    <div class="px-6 py-5">
-                        <div class="flex items-center">
-                            <div class="flex-shrink-0 bg-primary-100 dark:bg-primary-800 rounded-full p-3 mr-4">
-                                <svg class="h-6 w-6 text-primary-600 dark:text-primary-400"
-                                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                     stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                          d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
-                                </svg>
-                            </div>
-                            <div>
-                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-                                    {{ __('Backup Tasks Categorized by Type') }}
-                                </h3>
-                                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-                                    {{ __('Distribution of backup tasks across different types') }}.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-5">
+                </x-chart-card>
+                <x-chart-card
+                    title="{{ __('Backup Tasks Categorized by Type') }}"
+                    description="{{ __('Distribution of backup tasks across different types') }}."
+                    icon="heroicon-o-document-duplicate"
+                >
+                    <div
+                        x-data="{ loaded: false }"
+                        x-init="setTimeout(() => loaded = true, 1500)"
+                    >
                         <div x-show="!loaded" class="h-64 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
                         <div x-show="loaded" x-transition:enter="transition-opacity duration-300"
                              x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="h-64">
                             <canvas id="backupTasksByType"></canvas>
                         </div>
                     </div>
-                </div>
+                </x-chart-card>
             </div>
             <div class="mt-6">
                 @livewire('dashboard.upcoming-backup-tasks')

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -88,7 +88,7 @@
     </main>
 </div>
 <x-toaster-hub/>
-<footer class="relative py-8 sm:py-12 text-sm sm:text-base bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300">
+<footer class="relative py-8 sm:py-12 text-sm sm:text-base bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-300">
     <div class="absolute top-0 left-0 right-0 h-px bg-gray-200 dark:bg-gray-800"></div>
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">