fix article control buttons

resources/views/components/articles/actions.blade.php

@@ -1,58 +1,97 @@
-<div class="flex flex-col gap-x-4 gap-y-3 lg:flex-row lg:justify-between">
+<div
+    class="flex flex-col gap-x-4 gap-y-3 lg:flex-row lg:justify-between"
+    x-data="{ hovered: false }"
+>
     <div class="flex flex-col gap-x-4 gap-y-3 lg:flex-row">
         @if (Auth::check() && $article->isAuthoredBy(Auth::user()))
-            <x-buttons.secondary-button href="{{ route('articles.edit', $article->slug()) }}" class="w-full">
+            <x-buttons.secondary-button
+                href="{{ route('articles.edit', $article->slug()) }}"
+                @mouseover="hovered = 'edit'"
+                @mouseleave="hovered = false"
+                class="w-full"
+            >
                 <span class="flex items-center gap-x-2">
                     <x-heroicon-o-pencil class="w-5 h-5" title="Edit" />
-                    Edit article
+                    <span x-show="hovered === 'edit'">Edit article</span>
                 </span>
             </x-buttons.primary-menu-button>
         @endif
 
         @if ($article->isNotPublished() && $article->isAwaitingApproval())
             @can(App\Policies\ArticlePolicy::APPROVE, $article)
-                <x-buttons.secondary-button tag="button" @click.prevent="activeModal = 'approveArticle'" class="w-full">
+                <x-buttons.secondary-button
+                    tag="button"
+                    @click.prevent="activeModal = 'approveArticle'"
+                    @mouseover="hovered = 'publish'"
+                    @mouseleave="hovered = false"
+                    class="w-full"
+                >
                     <span class="flex items-center gap-x-2">
-                        <x-heroicon-o-eye class="w-5 h-5" title="Publish"/>
-                        Publish article
+                        <x-heroicon-s-check class="w-5 h-5" title="Publish"/>
+                        <span x-show="hovered === 'publish'">Publish article</span>
                     </span>
                 </x-buttons.secondary-button>
             @endcan
 
             @can(App\Policies\ArticlePolicy::DECLINE, $article)
-                <x-buttons.secondary-button tag="button" @click.prevent="activeModal = 'declineArticle'" class="w-full">
+                <x-buttons.secondary-button
+                    tag="button"
+                    @click.prevent="activeModal = 'declineArticle'"
+                    @mouseover="hovered = 'decline'"
+                    @mouseleave="hovered = false"
+                    class="w-full"
+                >
                     <span class="flex items-center gap-x-2">
-                        <x-heroicon-o-eye-off class="w-5 h-5" title="Decline"/>
-                        Decline article
+                        <x-heroicon-s-x class="w-5 h-5" title="Decline"/>
+                        <span x-show="hovered === 'decline'">Decline article</span>
                     </span>
                 </x-buttons.secondary-button>
             @endcan
         @else
             @can(App\Policies\ArticlePolicy::DISAPPROVE, $article)
-                <x-buttons.secondary-button tag="button" @click.prevent="activeModal = 'disapproveArticle'" class="w-full">
+                <x-buttons.secondary-button
+                    tag="button"
+                    @click.prevent="activeModal = 'disapproveArticle'"
+                    @mouseover="hovered = 'unpublish'"
+                    @mouseleave="hovered = false"
+                    class="w-full"
+                >
                     <span class="flex items-center gap-x-2">
                         <x-heroicon-o-eye-off class="w-5 h-5" title="Unpublish"/>
-                        Unpublish article
+                        <span x-show="hovered === 'unpublish'">Unpublish article</span>
                     </span>
                 </x-buttons.secondary-button>
             @endcan
         @endif
 
         @can(App\Policies\ArticlePolicy::PINNED, $article)
-            <x-buttons.secondary-button tag="button" @click.prevent="activeModal = 'togglePinnedStatus'" :selected="$article->isPinned()" class="w-full">
+            <x-buttons.secondary-button
+                tag="button"
+                @click.prevent="activeModal = 'togglePinnedStatus'"
+                @mouseover="hovered = 'pin'"
+                @mouseleave="hovered = false"
+                :selected="$article->isPinned()"
+                class="w-full"
+            >
                 <span class="flex items-center gap-x-2">
-                    <x-icon-pin class="w-5 h-5" title="{{ $article->isPinned() ? 'Unpin' : 'Pin' }}"/> 
-                    {{ $article->isPinned() ? 'Unpin article' : 'Pin article' }}
+                    <x-icon-pin class="w-5 h-5" title="{{ $article->isPinned() ? 'Unpin' : 'Pin' }}"/>
+                    <span x-show="hovered === 'pin'">{{ $article->isPinned() ? 'Unpin article' : 'Pin article' }}</span>
                 </span>
             </x-buttons.secondary-button>
         @endcan
     </div>
 
     @can(App\Policies\ArticlePolicy::DELETE, $article)
-        <x-buttons.danger-button tag="button" @click.prevent="activeModal = 'deleteArticle'" class="w-full">
+        <x-buttons.danger-button
+            tag="button"
+            @click.prevent="activeModal = 'deleteArticle'"
+            @mouseover="hovered = 'delete'"
+            @mouseleave="hovered = false"
+            class="w-full"
+        >
             <span class="flex items-center gap-x-2">
                 <x-heroicon-o-trash class="w-5 h-5" title="Delete"/>
-                Delete article
+                <span x-show="hovered === 'delete'">Delete article</span>
             </span>
         </x-buttons.danger-button>
     @endcan