From 4ef131021cb82aea4308e72c9da9f70d221ea186 Mon Sep 17 00:00:00 2001
From: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
Date: Tue, 18 Jan 2022 09:05:19 +0100
Subject: [PATCH] #4 - wip

---
 app/Helpers/UserAvatarGenerator.php |  7 +++--
 resources/css/app.css               |  2 +-
 resources/js/Pages/Users/Index.vue  | 43 +++++++++++++++++++++--------
 3 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/app/Helpers/UserAvatarGenerator.php b/app/Helpers/UserAvatarGenerator.php
index 839f24f..7f96c33 100644
--- a/app/Helpers/UserAvatarGenerator.php
+++ b/app/Helpers/UserAvatarGenerator.php
@@ -13,8 +13,9 @@ use Toby\Models\User;
 
 class UserAvatarGenerator
 {
-    public function __construct(protected InitialAvatar $generator)
-    {
+    public function __construct(
+        protected InitialAvatar $generator,
+    ) {
     }
 
     public function generateFor(User $user): string
@@ -46,4 +47,4 @@ class UserAvatarGenerator
     {
         return Str::uuid()->toString();
     }
-}
\ No newline at end of file
+}
diff --git a/resources/css/app.css b/resources/css/app.css
index b34f7de..0bee166 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -46,4 +46,4 @@
     border-radius: 0;
     -webkit-box-shadow: -5px 0 0 #527ABA, 5px 0 0 #527ABA;
     box-shadow: -5px 0 0 #527ABA, 5px 0 0 #527ABA;
-}
\ No newline at end of file
+}
diff --git a/resources/js/Pages/Users/Index.vue b/resources/js/Pages/Users/Index.vue
index ac6493f..2b6be44 100644
--- a/resources/js/Pages/Users/Index.vue
+++ b/resources/js/Pages/Users/Index.vue
@@ -128,23 +128,35 @@
                                                 v-if="!user.trashed"
                                                 class="py-1"
                                             >
-                                                <MenuItem v-slot="{ active }">
+                                                <MenuItem
+                                                    v-slot="{ active }"
+                                                    class="flex"
+                                                >
                                                     <InertiaLink
                                                         :href="`/users/${user.id}/edit`"
-                                                        :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']"
+                                                        :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
                                                     >
-                                                        Edytuj
+                                                        <PencilIcon
+                                                            class="mr-2 h-5 w-5 text-blue-500"
+                                                            aria-hidden="true"
+                                                        /> Edytuj
                                                     </InertiaLink>
                                                 </MenuItem>
-                                                <MenuItem v-slot="{ active }">
+                                                <MenuItem
+                                                    v-slot="{ active }"
+                                                    class="flex"
+                                                >
                                                     <InertiaLink
                                                         as="button"
                                                         method="delete"
                                                         :preserve-scroll="true"
                                                         :href="`/users/${user.id}`"
-                                                        :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left px-4 py-2 text-sm']"
+                                                        :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
                                                     >
-                                                        Usuń
+                                                        <TrashIcon
+                                                            class="mr-2 h-5 w-5 text-red-500"
+                                                            aria-hidden="true"
+                                                        /> Usuń
                                                     </InertiaLink>
                                                 </MenuItem>
                                             </div>
@@ -152,15 +164,21 @@
                                                 v-else
                                                 class="py-1"
                                             >
-                                                <MenuItem v-slot="{ active }">
+                                                <MenuItem
+                                                    v-slot="{ active }"
+                                                    class="flex"
+                                                >
                                                     <InertiaLink
                                                         as="button"
                                                         method="post"
                                                         :preserve-scroll="true"
                                                         :href="`/users/${user.id}/restore`"
-                                                        :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left px-4 py-2 text-sm']"
+                                                        :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
                                                     >
-                                                        Przywróć
+                                                        <RefreshIcon
+                                                            class="mr-2 h-5 w-5 text-green-500"
+                                                            aria-hidden="true"
+                                                        /> Przywróć
                                                     </InertiaLink>
                                                 </MenuItem>
                                             </div>
@@ -238,14 +256,17 @@ import { ref, watch } from 'vue';
 import { Inertia } from '@inertiajs/inertia';
 import { debounce } from 'lodash';
 import { SearchIcon } from '@heroicons/vue/outline';
-import {DotsVerticalIcon} from '@heroicons/vue/solid';
-import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue';
+import { DotsVerticalIcon, PencilIcon, TrashIcon, RefreshIcon } from '@heroicons/vue/solid';
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
 
 export default {
     name: 'UserIndex',
     components: {
         SearchIcon,
         DotsVerticalIcon,
+        PencilIcon,
+        TrashIcon,
+        RefreshIcon,
         Menu,
         MenuButton,
         MenuItem,