added css hook classes and minor bug fixes

README.md

@@ -318,6 +318,18 @@ class ViewOrderActivities extends ActivityTimelinePage
 }
 ```
 
+## Style customization
+
+Similar to Filament, this plugin also includes CSS `hook` classes that enable the customization of different HTML elements through CSS.
+
+```css
+.fi-timeline-section {
+    @apply background-transparent !important;
+}
+```
+
+This plugin comes with numerous CSS `hook` classes. For a straightforward approach, consider using your browser's developer tools to carefully examine the element and identify these classes.
+
 That's all! If you encounter any issues or have features you'd like to discuss, feel free to chat with me in our Discord channel.
 
 ## Changelog

resources/views/components/empty-state.blade.php

@@ -4,20 +4,21 @@
     'icon',
 ])
 
-<div {{ $attributes->class(['fi-ta-empty-state px-6 py-12']) }}>
-    <div class="grid max-w-lg mx-auto text-center fi-ta-empty-state-content justify-items-center">
-        <div class="p-3 mb-4 bg-gray-100 rounded-full fi-ta-empty-state-icon-ctn dark:bg-gray-500/20">
+<div {{ $attributes->class(['fi-timeline-empty-state px-6 py-12']) }}>
+    <div class="grid max-w-lg mx-auto text-center fi-timeline-empty-state-content justify-items-center">
+        <div class="p-3 mb-4 bg-gray-100 rounded-full fi-timeline-empty-state-icon-ctn dark:bg-gray-500/20">
             <x-filament::icon :icon="$icon"
-                class="w-6 h-6 text-gray-500 fi-ta-empty-state-icon dark:text-gray-400" />
+                class="w-6 h-6 text-gray-500 fi-timeline-empty-state-icon dark:text-gray-400" />
         </div>
 
         <h4
-            {{ $attributes->class(['fi-ta-empty-state-heading text-base font-semibold leading-6 text-gray-950 dark:text-white']) }}>
+            {{ $attributes->class(['fi-timeline-empty-state-heading text-base font-semibold leading-6 text-gray-950 dark:text-white']) }}>
             {{ $heading }}
         </h4>
 
         @if ($description)
-            <p {{ $attributes->class(['fi-ta-empty-state-description text-sm text-gray-500 dark:text-gray-400']) }}>
+            <p
+                {{ $attributes->class(['fi-timeline-empty-state-description text-sm text-gray-500 dark:text-gray-400']) }}>
                 {{ $description }}
             </p>
         @endif

resources/views/components/section.blade.php

@@ -0,0 +1,34 @@
+@props(['heading', 'description' => null, 'aside' => true])
+
+<section @class([
+    'fi-timeline-section',
+    'bg-white shadow-sm rounded-xl ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10' => !$aside,
+    'grid items-start grid-cols-1 gap-x-6 gap-y-4 md:grid-cols-3' => $aside,
+])>
+    <header @class([
+        'fi-timeline-section-header',
+        'flex flex-col gap-3 px-6 py-4 overflow-hidden sm:flex-row sm:items-center' => !$aside,
+        'flex flex-col gap-3 overflow-hidden sm:flex-row sm:items-center' => $aside,
+    ])>
+        <div class="grid flex-1 gap-y-1">
+            <h3
+                class="text-base font-semibold leading-6 fi-timeline-section-header-heading text-gray-950 dark:text-white">
+                {{ $heading }}
+            </h3>
+            <p class="text-sm text-gray-500 fi-timeline-section-header-description dark:text-gray-400">
+                {{ $description }}
+            </p>
+        </div>
+    </header>
+
+    @if ($aside)
+        <div
+            class="p-6 bg-white shadow-sm fi-timeline-section-content md:col-span-2 rounded-xl ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
+            {{ $slot }}
+        </div>
+    @else
+        <div class="p-6 border-t border-gray-200 fi-timeline-section-content dark:border-white/10">
+            {{ $slot }}
+        </div>
+    @endif
+</section>

resources/views/infolists/components/activity-date.blade.php

@@ -1,3 +1,3 @@
-<span class="flex-shrink-0 text-xs font-medium text-gray-500 uppercase dark:text-gray-400">
+<span class="flex-shrink-0 text-xs font-medium text-gray-500 uppercase fi-timeline-item-date dark:text-gray-400">
     {{ $getState() != null ? $getDate($getState()) : $getPlaceholder() }}
 </span>

resources/views/infolists/components/activity-description.blade.php

@@ -1,4 +1,4 @@
-<p class="text-sm text-gray-600 dark:text-gray-400">
+<p class="text-sm text-gray-600 fi-timeline-item-description dark:text-gray-400">
     @if ($isHtmlAllowed())
         {!! $getModifiedState() ?? (!is_array($getState()) ? $getState() ?? $getPlaceholder() : null) !!}
     @else

resources/views/infolists/components/activity-icon.blade.php

@@ -3,29 +3,29 @@
         $color = $getColor($getState()) ?? 'gray';
     @endphp
 
-    <div class="relative z-10 w-8 h-8 flex justify-center items-center">
+    <div class="relative flex items-center justify-center w-8 h-8">
         <span @class([
-                'flex flex-shrink-0 p-[5px] w-8 h-8 justify-center items-center dark:border rounded-full dark:bg-gray-800 dark:border-gray-700',
+            'flex flex-shrink-0 p-[5px] w-8 h-8 justify-center items-center dark:border rounded-full dark:bg-gray-800 dark:border-gray-700',
+            match ($color) {
+                'gray' => 'bg-gray-100',
+                default => 'fi-color-custom bg-custom-100',
+            },
+        ]) @style([
+            \Filament\Support\get_color_css_variables($color, shades: [100, 800], alias: 'infolists::components.icon-entry.item') => $color !== 'gray',
+        ])>
+            <x-filament::icon :icon="$icon" @class([
+                'fi-in-icon-item fi-in-icon-item-size-md h-4 w-4',
                 match ($color) {
-                    'gray' => 'bg-gray-100',
-                    default => 'fi-color-custom bg-custom-100',
+                    'gray' => 'fi-color-gray text-gray-400 dark:text-gray-500',
+                    default => 'fi-color-custom text-custom-500 dark:text-custom-400',
                 },
             ]) @style([
-                \Filament\Support\get_color_css_variables($color, shades: [100, 800], alias: 'infolists::components.icon-entry.item') => $color !== 'gray',
-            ])>
-            <x-filament::icon :icon="$icon" @class([
-                    'fi-in-icon-item fi-in-icon-item-size-md h-4 w-4',
-                    match ($color) {
-                        'gray' => 'fi-color-gray text-gray-400 dark:text-gray-500',
-                        default => 'fi-color-custom text-custom-500 dark:text-custom-400',
-                    },
-                ]) @style([
-                    \Filament\Support\get_color_css_variables($color, shades: [400, 500], alias: 'infolists::components.icon-entry.item') => $color !== 'gray',
-                ]) />
+                \Filament\Support\get_color_css_variables($color, shades: [400, 500], alias: 'infolists::components.icon-entry.item') => $color !== 'gray',
+            ]) />
         </span>
     </div>
 @else
-    <div class="relative z-10 w-8 h-8 flex justify-center items-center">
-        <div class="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600"></div>
+    <div class="relative flex items-center justify-center w-8 h-8">
+        <div class="w-2 h-2 bg-gray-400 rounded-full dark:bg-gray-600"></div>
     </div>
 @endif

resources/views/infolists/components/activity-section.blade.php

@@ -1,10 +1,10 @@
-<x-filament::section :aside="$isAside()">
+<x-activity-timeline::section :aside="$isAside()">
     <x-slot name="heading">
         {{ $getLabel() ?? $getHeading() }}
     </x-slot>
 
     <x-slot name="description">
-        {{ $getDescription() ?? '' }}
+        {{ $getDescription() }}
     </x-slot>
 
     @if (count($childComponentContainers = $getChildComponentContainers()) &&
@@ -34,45 +34,45 @@
                     extract($activityComponents);
                 @endphp
 
-                <!-- Timeline -->
+
                 <div x-show="@js($index) < totalShowItemsCount" :key="@js(rand())"
                     @class(['flex flex-col'])>
-                    <!-- Item -->
+
                     <div class="flex gap-x-3">
-                        <!-- Icon -->
+
                         <div @class([
                             'relative last:after:hidden',
                             'after:absolute after:top-7 after:bottom-0 after:start-4 after:w-px after:-translate-x-[0.5px] after:bg-gray-300 dark:after:bg-gray-700' => !$loop->last,
                         ])>
                             {{ $activityIcon }}
                         </div>
-                        <!-- End Icon -->
 
-                        <!-- Right Content -->
                         <div @class([
+                            'fi-timeline-item',
                             'grow pt-1 space-y-1',
                             'mb-7' => !$loop->last,
                             'mb-0' => $loop->last,
                         ])>
-                            <div class="flex items-center justify-between space-x-5">
-                                <!-- Title -->
+                            <div @class([
+                                'fi-timeline-item-heading flex',
+                                'flex-col items-start space-y-1 md:space-y-0 md:items-center md:flex-row md:justify-between md:space-x-5' => !$isAside(),
+                                'flex-col items-start space-y-1 lg:space-y-0 lg:items-center lg:flex-row lg:justify-between lg:space-x-5' => $isAside(),
+                            ])>
+
                                 {{ $activityTitle }}
-                                <!-- End Title -->
-                                {{-- Date --}}
+
                                 {{ $activityDate }}
-                                {{-- End Date --}}
+
                             </div>
-                            {{-- Description --}}
+
                             {{ $activityDescription }}
-                            {{-- End Description --}}
+
                         </div>
-                        <!-- End Right Content -->
+
                     </div>
                 </div>
-                <!-- End Timeline -->
             @endforeach
 
-            <!-- Show More -->
             <div x-show="totalShowItemsCount < childItemsCount">
                 @php
                     $icon = $getShowItemsIcon();
@@ -84,9 +84,9 @@ class="cursor-pointer hover:underline">
                     {{ $label }}
                 </x-filament::link>
             </div>
-            <!-- End Show More -->
+
         </div>
     @else
         <x-activity-timeline::empty-state :description="$getEmptyStateDescription()" :heading="$getEmptyStateHeading()" :icon="$getEmptyStateIcon()" />
     @endif
-</x-filament::section>
+</x-activity-timeline::section>

resources/views/infolists/components/activity-title.blade.php

@@ -1,4 +1,4 @@
-<h3 class="text-base text-gray-800 dark:text-white">
+<h3 class="text-base text-gray-800 fi-timeline-item-title dark:text-white">
     @if ($isHtmlAllowed())
         {!! $getModifiedState() ?? (!is_array($getState()) ? $getState() ?? $getPlaceholder() : null) !!}
     @else