From 64a9a7245728104f0290549f24fcb76fea2d701d Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Tue, 26 Mar 2024 11:52:45 +0100
Subject: [PATCH] fix: ui for tags

---
 resources/css/app.css                         |  7 ++++-
 .../livewire/project/resource/index.blade.php | 28 +++++++++----------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index ffea7a63a..fa29bf90f 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -116,7 +116,12 @@ tr td:first-child {
 .alert-error {
     @apply flex items-center gap-2 text-error;
 }
-
+.tag {
+    @apply px-2 py-1 cursor-pointer box-description dark:bg-coolgray-100 dark:hover:bg-coolgray-300 bg-neutral-100 hover:bg-neutral-200
+}
+.add-tag {
+    @apply flex items-center px-2 text-xs cursor-pointer dark:text-neutral-500/20 text-neutral-500 group-hover:text-neutral-700 group-hover:dark:text-white dark:hover:bg-coolgray-300 hover:bg-neutral-200;
+}
 .dropdown-item {
     @apply relative flex cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs items-center pr-4 pl-2 py-1 text-xs justify-start outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2 w-full;
 }
diff --git a/resources/views/livewire/project/resource/index.blade.php b/resources/views/livewire/project/resource/index.blade.php
index d46528cc1..ed7641bb1 100644
--- a/resources/views/livewire/project/resource/index.blade.php
+++ b/resources/views/livewire/project/resource/index.blade.php
@@ -72,10 +72,10 @@
                         </a>
                         <div class="flex gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6">
                             <template x-for="tag in item.tags">
-                                <div class="px-2 py-1 cursor-pointer box-description dark:bg-coolgray-100 dark:hover:bg-coolgray-300 bg-neutral-100 hover:bg-neutral-200"
+                                <div class="tag"
                                     @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
                             </template>
-                            <div class="flex items-center px-2 text-xs cursor-pointer dark:text-neutral-500/20 text-neutral-500 group-hover:text-neutral-700 group-hover:dark:text-white dark:hover:bg-coolgray-300 hover:bg-neutral-200"
+                            <div class="add-tag"
                                 @click.prevent="goto(item)">Add tag</div>
                         </div>
                     </span>
@@ -104,10 +104,10 @@
                         </a>
                         <div class="flex gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6">
                             <template x-for="tag in item.tags">
-                                <div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300"
+                                <div class="tag"
                                     @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
                             </template>
-                            <div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:dark:text-white hover:bg-coolgray-300"
+                            <div class="add-tag"
                                 @click.prevent="goto(item)">Add tag</div>
                         </div>
                     </span>
@@ -136,10 +136,10 @@
                         </a>
                         <div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
                             <template x-for="tag in item.tags">
-                                <div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300"
+                                <div class="tag"
                                     @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
                             </template>
-                            <div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:dark:text-white hover:bg-coolgray-300"
+                            <div class="add-tag"
                                 @click.prevent="goto(item)">Add tag</div>
                         </div>
                     </span>
@@ -168,10 +168,10 @@
                         </a>
                         <div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
                             <template x-for="tag in item.tags">
-                                <div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300"
+                                <div class="tag"
                                     @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
                             </template>
-                            <div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:dark:text-white hover:bg-coolgray-300"
+                            <div class="add-tag"
                                 @click.prevent="goto(item)">Add tag</div>
                         </div>
                     </span>
@@ -200,10 +200,10 @@
                         </a>
                         <div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
                             <template x-for="tag in item.tags">
-                                <div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300"
+                                <div class="tag"
                                     @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
                             </template>
-                            <div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:dark:text-white hover:bg-coolgray-300"
+                            <div class="add-tag"
                                 @click.prevent="goto(item)">Add tag</div>
                         </div>
                     </span>
@@ -232,10 +232,10 @@
                         </a>
                         <div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
                             <template x-for="tag in item.tags">
-                                <div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300"
+                                <div class="tag"
                                     @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
                             </template>
-                            <div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:dark:text-white hover:bg-coolgray-300"
+                            <div class="add-tag"
                                 @click.prevent="goto(item)">Add tag</div>
                         </div>
                     </span>
@@ -264,10 +264,10 @@
                         </a>
                         <div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
                             <template x-for="tag in item.tags">
-                                <div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300"
+                                <div class="tag"
                                     @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
                             </template>
-                            <div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:dark:text-white hover:bg-coolgray-300"
+                            <div class="add-tag"
                                 @click.prevent="goto(item)">Add tag</div>
                         </div>
                     </span>