From aa58783b5d48990e8e39ec989eb701842a0f9131 Mon Sep 17 00:00:00 2001
From: faissaloux <fwahabali@gmail.com>
Date: Tue, 9 Nov 2021 00:33:56 +0100
Subject: [PATCH 1/4] fix article control buttons

---
 .../components/articles/actions.blade.php     | 44 +++++++++++++++----
 1 file changed, 35 insertions(+), 9 deletions(-)

diff --git a/resources/views/components/articles/actions.blade.php b/resources/views/components/articles/actions.blade.php
index fab8fd7f0..126f8d59c 100644
--- a/resources/views/components/articles/actions.blade.php
+++ b/resources/views/components/articles/actions.blade.php
@@ -1,38 +1,64 @@
 <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">
+    <div
+        class="flex flex-col gap-x-4 gap-y-3 lg:flex-row"
+        x-data="{ hovered:false }"
+    >
         @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
+                        <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
+                        <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

From 7f3468a151acf814134395c33c3c1369ec7acfd5 Mon Sep 17 00:00:00 2001
From: faissaloux <fwahabali@gmail.com>
Date: Tue, 9 Nov 2021 11:30:23 +0100
Subject: [PATCH 2/4] apply changes to rest of buttons

---
 .../components/articles/actions.blade.php     | 33 +++++++++++++------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/resources/views/components/articles/actions.blade.php b/resources/views/components/articles/actions.blade.php
index 126f8d59c..ea816313f 100644
--- a/resources/views/components/articles/actions.blade.php
+++ b/resources/views/components/articles/actions.blade.php
@@ -1,8 +1,8 @@
-<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"
-        x-data="{ hovered:false }"
-    >
+<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()) }}"
@@ -65,20 +65,33 @@ class="w-full"
         @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

From 4ad3e23f2628b1221e83afed9869a8a5842c8509 Mon Sep 17 00:00:00 2001
From: faissaloux <fwahabali@gmail.com>
Date: Tue, 9 Nov 2021 11:31:36 +0100
Subject: [PATCH 3/4] change [publish, decline] icons

---
 resources/views/components/articles/actions.blade.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/articles/actions.blade.php b/resources/views/components/articles/actions.blade.php
index ea816313f..838a6ce42 100644
--- a/resources/views/components/articles/actions.blade.php
+++ b/resources/views/components/articles/actions.blade.php
@@ -27,7 +27,7 @@ class="w-full"
                     class="w-full"
                 >
                     <span class="flex items-center gap-x-2">
-                        <x-heroicon-o-eye class="w-5 h-5" title="Publish"/>
+                        <x-heroicon-s-check class="w-5 h-5" title="Publish"/>
                         <span x-show="hovered === 'publish'">Publish article</span>
                     </span>
                 </x-buttons.secondary-button>
@@ -42,7 +42,7 @@ class="w-full"
                     class="w-full"
                 >
                     <span class="flex items-center gap-x-2">
-                        <x-heroicon-o-eye-off class="w-5 h-5" title="Decline"/>
+                        <x-heroicon-s-x class="w-5 h-5" title="Decline"/>
                         <span x-show="hovered === 'decline'">Decline article</span>
                     </span>
                 </x-buttons.secondary-button>

From 1cf7bb00db117ef73b2eb36980aac8364c0fe44b Mon Sep 17 00:00:00 2001
From: faissaloux <fwahabali@gmail.com>
Date: Fri, 12 Nov 2021 16:33:59 +0100
Subject: [PATCH 4/4] formatting

---
 resources/views/components/articles/actions.blade.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/articles/actions.blade.php b/resources/views/components/articles/actions.blade.php
index 838a6ce42..e73483acb 100644
--- a/resources/views/components/articles/actions.blade.php
+++ b/resources/views/components/articles/actions.blade.php
@@ -1,6 +1,6 @@
 <div
     class="flex flex-col gap-x-4 gap-y-3 lg:flex-row lg:justify-between"
-    x-data="{ hovered:false }"
+    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()))
@@ -75,7 +75,7 @@ class="w-full"
             >
                 <span class="flex items-center gap-x-2">
                     <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-show="hovered === 'pin'">{{ $article->isPinned() ? 'Unpin article' : 'Pin article' }}</span>
                 </span>
             </x-buttons.secondary-button>
         @endcan