style: improve design

shopperlabs · Dec 6, 2024 · e7d7295 · e7d7295
1 parent 3c65cdf
commit e7d7295
Show file tree

Hide file tree

Showing 88 changed files with 77,455 additions and 185 deletions.
diff --git a/packages/admin/public/shopper.css b/packages/admin/public/shopper.css
diff --git a/packages/admin/public/shopper.js b/packages/admin/public/shopper.js
diff --git a/packages/admin/resources/css/components/sidebar.css b/packages/admin/resources/css/components/sidebar.css
@@ -11,7 +11,7 @@
 }
 
 .sh-sidebar-item-active {
-  @apply bg-white text-primary-600 shadow-sm ring-1 ring-inset ring-gray-200 dark:bg-gray-800 dark:text-primary-500 dark:ring-gray-700;
+  @apply bg-white text-primary-600 shadow-sm ring-1 ring-inset ring-gray-200 dark:bg-gray-800 dark:text-primary-500 dark:ring-white/10;
 }
 
 .sh-sidebar-item-inactive {

diff --git a/packages/admin/resources/views/components/card-with-gray-heading.blade.php b/packages/admin/resources/views/components/card-with-gray-heading.blade.php
@@ -2,7 +2,7 @@
     'heading',
 ])
 
-<x-shopper::card {{ $attributes->twMerge(['class' => 'bg-gray-50 p-2']) }}>
+<x-shopper::card {{ $attributes->twMerge(['class' => 'bg-white p-2']) }}>
     <header class="flex items-start justify-between gap-2 px-2 py-2.5">
         {{ $heading }}
     </header>

diff --git a/packages/admin/resources/views/components/card.blade.php b/packages/admin/resources/views/components/card.blade.php
@@ -1,5 +1,5 @@
 <div
-    {{ $attributes->twMerge(['class' => 'bg-white dark:bg-gray-800 rounded-xl ring-1 ring-gray-200 dark:ring-white/10']) }}
+    {{ $attributes->twMerge(['class' => 'bg-white dark:bg-gray-900 rounded-xl ring-1 ring-gray-200 dark:ring-white/10']) }}
 >
     {{ $slot }}
 </div>
diff --git a/packages/admin/resources/views/components/description-list/index.blade.php b/packages/admin/resources/views/components/description-list/index.blade.php
@@ -1,5 +1,5 @@
 <dl
-    {{ $attributes->twMerge(['class' => 'divide-y divide-gray-200 dark:divide-gray-700']) }}
+    {{ $attributes->twMerge(['class' => 'divide-y divide-gray-200 dark:divide-white/10']) }}
     role="list"
 >
     {{ $slot }}

diff --git a/packages/admin/resources/views/components/escape.blade.php b/packages/admin/resources/views/components/escape.blade.php
@@ -0,0 +1,3 @@
+<span class="inline-flex items-center px-2 py-1 text-gray-500 rounded-md bg-gray-100 text-xs dark:bg-gray-800 dark:text-gray-500">
+    esc
+</span>
diff --git a/packages/admin/resources/views/components/filament/forms/quantity.blade.php b/packages/admin/resources/views/components/filament/forms/quantity.blade.php
@@ -116,7 +116,7 @@
 
                 @if ($isStacked())
                     <div
-                        class="-gap-y-px flex flex-col divide-y divide-gray-200 border-s border-gray-200 dark:divide-gray-700 dark:border-gray-700"
+                        class="-gap-y-px flex flex-col divide-y divide-gray-200 border-s border-gray-200 dark:divide-white/10 dark:border-white/10"
                     >
                         <button
                             :disabled="!isIncrementAllowed"
@@ -141,15 +141,15 @@ class="inline-flex h-8 w-7 items-center justify-center gap-x-2 rounded-ee-lg bg-
                             :disabled="!isDecrementAllowed"
                             @click="decrement"
                             type="button"
-                            class="inline-flex size-6 items-center justify-center gap-x-2 rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-800 shadow-sm hover:bg-gray-50 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                            class="inline-flex size-6 items-center justify-center gap-x-2 rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-800 shadow-sm hover:bg-gray-50 disabled:pointer-events-none disabled:opacity-50 dark:border-white/10 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
                         >
                             @svg('heroicon-o-minus', 'h-3.5 w-3.5 shrink-0')
                         </button>
                         <button
                             :disabled="!isIncrementAllowed"
                             @click="increment"
                             type="button"
-                            class="inline-flex size-6 items-center justify-center gap-x-2 rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-800 shadow-sm hover:bg-gray-50 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                            class="inline-flex size-6 items-center justify-center gap-x-2 rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-800 shadow-sm hover:bg-gray-50 disabled:pointer-events-none disabled:opacity-50 dark:border-white/10 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
                         >
                             @svg('heroicon-o-plus', 'h-3.5 w-3.5 shrink-0')
                         </button>

diff --git a/packages/admin/resources/views/components/form-slider-over.blade.php b/packages/admin/resources/views/components/form-slider-over.blade.php
@@ -4,17 +4,18 @@
     'description' => null,
 ])
 
-<form wire:submit="{{ $action }}" class="flex h-full flex-col divide-y divide-gray-200 dark:divide-gray-700">
+<form wire:submit="{{ $action }}" class="flex h-full flex-col divide-y divide-gray-200 dark:divide-white/10">
     <div class="h-0 flex-1 overflow-y-auto py-6">
         <header class="px-4 sm:px-6">
             <div class="flex items-start justify-between">
                 <h2 class="text-lg font-medium text-gray-900 dark:text-white">
                     {{ $title }}
                 </h2>
-                <div class="ml-3 flex h-7 items-center">
+                <div class="ml-3 flex h-7 items-center gap-2">
+                    <x-shopper::escape />
                     <button
                         type="button"
-                        class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:bg-gray-900 dark:text-gray-500 dark:ring-offset-gray-900 dark:hover:text-gray-300"
+                        class="rounded-md bg-white text-gray-400 hover:text-gray-500 outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:bg-gray-900 dark:text-gray-500 dark:ring-offset-gray-900 dark:hover:text-gray-300"
                         wire:click="$dispatch('closePanel')"
                     >
                         <span class="sr-only">Close panel</span>

diff --git a/packages/admin/resources/views/components/forms/input.blade.php b/packages/admin/resources/views/components/forms/input.blade.php
@@ -1,3 +1,3 @@
 <input
-    {{ $attributes->twMerge(['class' => 'block w-full rounded-lg border-0 py-1.5 px-3 text-gray-900 ring-1 ring-gray-300 placeholder:text-gray-400 dark:bg-gray-700 dark:text-white dark:ring-gray-700 dark:placeholder-gray-400 focus:ring-2 focus:ring-primary-600 dark:bg-gray-800 dark:focus:ring-primary-500 sm:text-sm sm:leading-6']) }}
+    {{ $attributes->twMerge(['class' => 'block w-full rounded-lg border-0 py-1.5 px-3 text-gray-900 ring-1 ring-gray-300 placeholder:text-gray-400 dark:bg-gray-700 dark:text-white dark:ring-white/10 dark:placeholder-gray-400 focus:ring-2 focus:ring-primary-600 dark:bg-gray-800 dark:focus:ring-primary-500 sm:text-sm sm:leading-6']) }}
 />
diff --git a/packages/admin/resources/views/components/forms/select.blade.php b/packages/admin/resources/views/components/forms/select.blade.php
@@ -5,7 +5,7 @@
 ])
 
 <select
-    {!! $attributes->twMerge(['class' => 'block w-full py-1.5 px-3 border-0 ring-1 ring-gray-300 rounded-lg bg-white dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 focus:ring-2 focus:outline-none focus:ring-primary-600 dark:focus:ring-primary-500 sm:text-sm sm:leading-6']) !!}
+    {!! $attributes->twMerge(['class' => 'block w-full py-1.5 px-3 border-0 ring-1 ring-gray-300 rounded-lg bg-white dark:bg-gray-800 dark:text-gray-300 dark:ring-white/10 focus:ring-2 focus:outline-none focus:ring-primary-600 dark:focus:ring-primary-500 sm:text-sm sm:leading-6']) !!}
 >
     @if ($items)
         @foreach ($items as $item)

diff --git a/packages/admin/resources/views/components/forms/textarea.blade.php b/packages/admin/resources/views/components/forms/textarea.blade.php
@@ -1,7 +1,7 @@
 @props(['value' => null])
 
 <textarea
-    {{ $attributes->twMerge(['class' => 'block w-full rounded-lg py-1.5 px-3 border-0 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:ring-gray-700 dark:bg-gray-800 dark:text-white focus:ring-2 focus:ring-primary-600 dark:focus:ring-primary-500 sm:text-sm sm:leading-6']) }}
+    {{ $attributes->twMerge(['class' => 'block w-full rounded-lg py-1.5 px-3 border-0 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:ring-white/10 dark:bg-gray-800 dark:text-white focus:ring-2 focus:ring-primary-600 dark:focus:ring-primary-500 sm:text-sm sm:leading-6']) }}
     rows="3"
 >
     {{ $value }}

diff --git a/packages/admin/resources/views/components/layouts/app.blade.php b/packages/admin/resources/views/components/layouts/app.blade.php
@@ -9,7 +9,7 @@ class="flex h-screen overflow-hidden"
         <x-shopper::layouts.app.sidebar.mobile />
 
         <div
-            class="flex w-0 flex-1 flex-col overflow-hidden bg-white ring-1 ring-gray-200 dark:bg-gray-900 dark:ring-gray-800 lg:my-2 lg:rounded-bl-2xl lg:rounded-tl-2xl lg:pb-1.5"
+            class="flex w-0 flex-1 flex-col overflow-hidden ring-1 ring-gray-200 dark:ring-gray-800 lg:my-2 lg:rounded-bl-2xl lg:rounded-tl-2xl lg:pb-1.5"
         >
             <div class="flex flex-1 flex-col justify-between overflow-hidden overflow-y-auto">
                 <x-shopper::layouts.app.header />
@@ -18,7 +18,7 @@ class="flex w-0 flex-1 flex-col overflow-hidden bg-white ring-1 ring-gray-200 da
                     {{ $subHeading }}
                 @endisset
 
-                <main class="sh-main z-0 flex-1 pt-4 lg:pt-10">
+                <main class="sh-main z-0 flex-1">
                     <div {{ $attributes->twMerge(['class' => 'flex-1 min-h-full']) }}>
                         {{ $slot }}
                     </div>

diff --git a/packages/admin/resources/views/components/layouts/app/header.blade.php b/packages/admin/resources/views/components/layouts/app/header.blade.php
@@ -1,9 +1,9 @@
 <div
-    class="sh-header sticky top-0 z-20 flex h-16 shrink-0 border-b border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900 lg:h-auto lg:py-4"
+    class="sh-header sticky top-0 z-20 flex h-16 shrink-0 border-b border-gray-200 bg-white dark:border-white/10 dark:bg-gray-900 lg:h-auto lg:py-4"
 >
     <button
         @click.stop="sidebarOpen = true"
-        class="border-r border-gray-200 px-4 text-gray-500 focus:bg-gray-100 focus:text-gray-600 focus:outline-none dark:border-gray-700 dark:focus:bg-gray-800 dark:focus:text-gray-500 lg:hidden"
+        class="border-r border-gray-200 px-4 text-gray-500 focus:bg-gray-100 focus:text-gray-600 focus:outline-none dark:border-white/10 dark:focus:bg-gray-800 dark:focus:text-gray-500 lg:hidden"
         aria-label="Open sidebar"
     >
         <x-untitledui-menu-03 class="size-6" aria-hidden="true" />
@@ -18,7 +18,7 @@ class="border-r border-gray-200 px-4 text-gray-500 focus:bg-gray-100 focus:text-
             <a
                 href="{{ url('/') }}"
                 target="_blank"
-                class="hidden items-center rounded-lg p-1 text-gray-500 ring-1 ring-gray-200 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:ring-gray-700 dark:hover:bg-gray-800 dark:hover:text-white lg:inline-flex"
+                class="hidden items-center rounded-lg p-1 text-gray-500 ring-1 ring-gray-200 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:ring-white/10 dark:hover:bg-gray-800 dark:hover:text-white lg:inline-flex"
             >
                 <x-untitledui-google-chrome class="size-6" stroke-width="1.5" aria-hidden="true" />
             </a>

diff --git a/packages/admin/resources/views/components/layouts/app/sidebar/content.blade.php b/packages/admin/resources/views/components/layouts/app/sidebar/content.blade.php
@@ -24,7 +24,7 @@ class="relative flex items-start rounded-lg bg-white px-3 py-2.5 shadow-sm ring-
                 <x-shopper::layouts.app.sidebar.secondary />
             </div>
 
-            <div class="space-y-2 border-t border-gray-200 p-4 dark:border-gray-700">
+            <div class="space-y-2 border-t border-gray-200 p-4 dark:border-white/10">
                 @can('access_setting')
                     <x-shopper::link
                         href="{{ route('shopper.settings.index') }}"

diff --git a/packages/admin/resources/views/components/layouts/app/sidebar/index.blade.php b/packages/admin/resources/views/components/layouts/app/sidebar/index.blade.php
@@ -1,3 +1,3 @@
 <aside class="sh-sidebar hidden lg:flex lg:shrink-0">
-    <x-shopper::layouts.app.sidebar.content class="sh-sidebar-content w-[17.5rem]" />
+    <x-shopper::layouts.app.sidebar.content class="sh-sidebar-content w-[16.5rem]" />
 </aside>
diff --git a/packages/admin/resources/views/components/layouts/setting.blade.php b/packages/admin/resources/views/components/layouts/setting.blade.php
@@ -1,7 +1,7 @@
 <x-shopper::layouts.app :title="$title ?? null">
     <x-slot name="subHeading">
         <div
-            class="sticky top-16 z-10 border-b border-t border-gray-200 bg-white/80 backdrop-blur-md backdrop-filter dark:border-gray-700 dark:bg-gray-800/80 lg:top-[3.8rem] lg:border-t-0"
+            class="sticky top-16 z-10 border-b border-t border-gray-200 bg-white/80 backdrop-blur-md backdrop-filter dark:border-white/10 dark:bg-gray-800/80 lg:top-[3.8rem] lg:border-t-0"
         >
             <div
                 x-data="{
@@ -86,5 +86,7 @@ class="flex size-8 items-center justify-center rounded-full text-gray-400 transi
         </div>
     </x-slot>
 
-    {{ $slot }}
+    <div class="py-5">
+        {{ $slot }}
+    </div>
 </x-shopper::layouts.app>
diff --git a/packages/admin/resources/views/components/learn-more.blade.php b/packages/admin/resources/views/components/learn-more.blade.php
@@ -1,11 +1,11 @@
 <div class="my-10 flex justify-center text-center">
     <div
-        class="flex items-center overflow-hidden rounded-lg bg-gray-50 shadow ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700"
+        class="flex items-center overflow-hidden rounded-lg bg-gray-50 shadow ring-1 ring-gray-200 dark:bg-gray-900 dark:ring-white/10"
     >
-        <div class="flex shrink-0 items-center justify-center border-r border-gray-200 p-3 dark:border-gray-700">
+        <div class="flex shrink-0 items-center justify-center border-r border-gray-200 p-3 dark:border-white/10">
             <x-untitledui-info-circle class="size-5 text-gray-400 dark:text-gray-500" aria-hidden="true" />
         </div>
-        <div class="bg-white px-4 py-3 text-sm leading-5 text-gray-500 dark:bg-gray-800 dark:text-gray-400">
+        <div class="bg-white px-4 py-3 text-sm leading-5 text-gray-500 dark:bg-transparent dark:text-gray-400">
             {{ __('shopper::words.learn_more') }}
             <a
                 href="https://laravelshopper.dev/docs/2.x/{{ $link }}"

diff --git a/packages/admin/resources/views/components/menu/nav-setting.blade.php b/packages/admin/resources/views/components/menu/nav-setting.blade.php
@@ -5,7 +5,7 @@
 <a
     href="{{ $menu["route"] ? route($menu["route"]) : "#" }}"
     @class([
-        "select-none whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium",
+        "select-none whitespace-nowrap border-b-[3px] px-1 py-4 text-sm font-medium",
         "current border-primary-500 text-primary-600" =>
             $menu["route"] && request()->routeIs($menu["route"] . "*"),
         "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-700 dark:hover:text-gray-300" =>

diff --git a/packages/admin/resources/views/components/menu/setting.blade.php b/packages/admin/resources/views/components/menu/setting.blade.php
@@ -4,7 +4,7 @@
 
 <x-shopper::link
     :href="$menu['route'] ? route($menu['route']) : '#'"
-    class="flex items-start space-x-4 rounded-lg p-3 transition duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-900/20"
+    class="flex items-start space-x-4 rounded-lg p-3 transition duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-white/5"
 >
     <div class="flex size-12 shrink-0 items-center justify-center rounded-lg bg-primary-600 text-white">
         {{ svg($menu['icon'], 'size-6') }}

diff --git a/packages/admin/resources/views/components/separator.blade.php b/packages/admin/resources/views/components/separator.blade.php
@@ -1,3 +1,3 @@
 <div class="py-8 lg:py-10">
-    <div class="border-t border-gray-200 dark:border-gray-700"></div>
+    <div class="border-t border-gray-200 dark:border-white/10"></div>
 </div>
diff --git a/packages/admin/resources/views/components/tables/table-row.blade.php b/packages/admin/resources/views/components/tables/table-row.blade.php
@@ -1,5 +1,5 @@
 <tr
-    {{ $attributes->twMerge(['class' => 'border-b border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-white/5']) }}
+    {{ $attributes->twMerge(['class' => 'border-b border-gray-200 bg-gray-50 dark:border-white/10 dark:bg-white/5']) }}
 >
     {{ $slot }}
 </tr>
diff --git a/packages/admin/resources/views/livewire/components/account/devices.blade.php b/packages/admin/resources/views/livewire/components/account/devices.blade.php
@@ -12,7 +12,7 @@
                     <p class="text-sm leading-5 text-gray-500 dark:text-gray-400">
                         {{ __('shopper::pages/auth.account.empty_device') }}
                     </p>
-                    <div class="mt-2 divide-y divide-gray-200 dark:divide-gray-700">
+                    <div class="mt-2 divide-y divide-gray-200 dark:divide-white/10">
                         @foreach ($this->sessions as $session)
                             <div class="flex items-center justify-between py-4">
                                 <div class="flex items-center space-x-3">

diff --git a/packages/admin/resources/views/livewire/components/account/dropdown.blade.php b/packages/admin/resources/views/livewire/components/account/dropdown.blade.php
@@ -8,7 +8,7 @@ class="relative inline-flex w-full items-center rounded-full text-sm leading-5 f
             <img class="size-8 rounded-full" src="{{ $user->picture }}" alt="{{ $user->email }}" />
             <span class="sr-only">{{ $user->full_name }}</span>
             <span
-                class="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-green-400 ring-2 ring-white dark:ring-gray-700"
+                class="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-green-400 ring-2 ring-white dark:ring-white/10"
             ></span>
         </button>
         <div
@@ -28,7 +28,7 @@ class="absolute right-2.5 top-10 z-50 w-56 origin-top-right rounded-lg bg-white
             aria-labelledby="options-menu-button"
             tabindex="-1"
         >
-            <div class="divide-y divide-gray-100 dark:divide-gray-700">
+            <div class="divide-y divide-gray-100 dark:divide-white/10">
                 <p class="truncate px-3.5 py-3">
                     <span class="block text-xs text-gray-500 dark:text-gray-400" role="none">
                         {{ __('shopper::words.sign_in_as') }}

diff --git a/packages/admin/resources/views/livewire/components/account/two-factor.blade.php b/packages/admin/resources/views/livewire/components/account/two-factor.blade.php
@@ -7,7 +7,7 @@ class="lg:col-span-1"
         />
         <div class="mt-5 lg:col-span-2 lg:mt-0 lg:max-w-3xl">
             <x-shopper::card>
-                <div class="border-b border-gray-200 p-4 dark:border-gray-700 sm:px-6">
+                <div class="border-b border-gray-200 p-4 dark:border-white/10 sm:px-6">
                     <div class="flex items-center space-x-3">
                         <div
                             @class([
@@ -69,7 +69,7 @@ class="whitespace-no-wrap font-medium text-primary-500 transition duration-150 e
                     </div>
                     @if ($this->enabled)
                         @if ($showingQrCode)
-                            <div class="border-t border-gray-200 pt-5 dark:border-gray-700">
+                            <div class="border-t border-gray-200 pt-5 dark:border-white/10">
                                 <p class="max-w-2xl text-sm font-medium text-gray-600 dark:text-gray-400">
                                     {{ __('shopper::pages/auth.account.two_factor_is_enabled') }}
                                 </p>
@@ -81,7 +81,7 @@ class="whitespace-no-wrap font-medium text-primary-500 transition duration-150 e
                         @endif
 
                         @if ($showingRecoveryCodes)
-                            <div class="border-t border-gray-200 pt-5 dark:border-gray-700">
+                            <div class="border-t border-gray-200 pt-5 dark:border-white/10">
                                 <p class="max-w-2xl text-sm font-medium text-gray-600 dark:text-gray-400">
                                     {{ __('shopper::pages/auth.account.two_factor_store_recovery_codes') }}
                                 </p>

diff --git a/packages/admin/resources/views/livewire/components/customers/addresses.blade.php b/packages/admin/resources/views/livewire/components/customers/addresses.blade.php
@@ -21,15 +21,15 @@
                             <p class="text-gray-500 dark:text-gray-400">
                                 {{ $address->street_address }}
                             </p>
-                            <div class="flex flex-col space-y-0.5 truncate text-sm text-gray-500 dark:text-gray-400">
+                            <div class="mt-1 flex flex-col space-y-0.5 truncate text-sm text-gray-500 dark:text-gray-400">
                                 <span>{{ $address->postal_code }}, {{ $address->city }}</span>
                                 <span class="inline-flex shrink-0 items-center gap-2">
-                                    <span>{{ $address->country->name }}</span>
                                     <img
                                         src="{{ $address->country->svg_flag }}"
-                                        class="size-5 rounded-full object-cover object-center"
+                                        class="size-4 rounded-full object-cover object-center"
                                         alt="Country flag"
                                     />
+                                    {{ $address->country->name }}
                                 </span>
                                 @if ($address->phone_number)
                                     <span>{{ $address->phone_number }}</span>

diff --git a/packages/admin/resources/views/livewire/components/customers/orders.blade.php b/packages/admin/resources/views/livewire/components/customers/orders.blade.php
@@ -6,9 +6,9 @@
             @endphp
 
             <div
-                class="divide-y divide-gray-200 overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-800"
+                class="divide-y divide-gray-200 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm dark:divide-white/10 dark:border-white/10 dark:bg-gray-900"
             >
-                <div class="bg-gray-50 px-4 py-3 dark:bg-gray-700 sm:flex sm:items-center sm:justify-between">
+                <div class="bg-gray-50 px-4 py-3 dark:bg-gray-800 sm:flex sm:items-center sm:justify-between">
                     <div class="flex-1 grow sm:grid sm:grid-cols-4 sm:gap-5">
                         <div>
                             <dt