From 2c83a717736af999f73e7fa00c01cd5147f96897 Mon Sep 17 00:00:00 2001
From: SegaraRai <SegaraRai@users.noreply.github.com>
Date: Tue, 2 Jul 2024 19:27:02 +0900
Subject: [PATCH] feat: add hover styles for clickable elements

---
 components/AppHeader.vue                 | 2 +-
 components/NatureApplianceCardButton.vue | 2 +-
 components/NatureApplianceCardLink.vue   | 2 +-
 components/NatureApplianceDeviceInfo.vue | 2 +-
 components/NatureDeviceCard.vue          | 2 +-
 package.json                             | 2 +-
 utils/constants.ts                       | 3 +++
 7 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index cd1ccca..45563ca 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -26,7 +26,7 @@
             :class="STYLE_FOCUS_VISIBLE_RING"
           >
             <UAvatar
-              class="select-none"
+              class="select-none hover:bg-gray-200 dark:hover:bg-gray-700"
               :alt="user.name ?? undefined"
               size="sm"
             />
diff --git a/components/NatureApplianceCardButton.vue b/components/NatureApplianceCardButton.vue
index 39bbf3c..d6ba840 100644
--- a/components/NatureApplianceCardButton.vue
+++ b/components/NatureApplianceCardButton.vue
@@ -2,7 +2,7 @@
   <UCard
     as="button"
     class="disabled:opacity-60"
-    :class="STYLE_FOCUS_VISIBLE_RING"
+    :class="[STYLE_CLICKABLE_CARD, STYLE_FOCUS_VISIBLE_RING]"
     :disabled="disabled"
   >
     <NatureApplianceCardContent
diff --git a/components/NatureApplianceCardLink.vue b/components/NatureApplianceCardLink.vue
index 6389e9f..e2c4efd 100644
--- a/components/NatureApplianceCardLink.vue
+++ b/components/NatureApplianceCardLink.vue
@@ -3,7 +3,7 @@
     class="group focus:outline-none focus-visible:outline-0"
     :to="`/appliances/${appliance.id}`"
   >
-    <UCard :class="STYLE_FOCUS_VISIBLE_RING_GROUP">
+    <UCard :class="[STYLE_CLICKABLE_CARD, STYLE_FOCUS_VISIBLE_RING_GROUP]">
       <NatureApplianceCardContent :appliance="appliance" :status="status" />
     </UCard>
   </ULink>
diff --git a/components/NatureApplianceDeviceInfo.vue b/components/NatureApplianceDeviceInfo.vue
index 22af37f..1cc536e 100644
--- a/components/NatureApplianceDeviceInfo.vue
+++ b/components/NatureApplianceDeviceInfo.vue
@@ -3,7 +3,7 @@
     class="flex flex-col items-start sm:items-center gap-1 sm:gap-2 opacity-80"
   >
     <ULink
-      class="max-w-full truncate rounded-sm"
+      class="max-w-full truncate rounded-sm inline-flex items-center gap-1 hover:text-primary-600 dark:hover:text-primary-400"
       :class="STYLE_FOCUS_VISIBLE_RING"
       :to="`/devices/${device.id}`"
     >
diff --git a/components/NatureDeviceCard.vue b/components/NatureDeviceCard.vue
index da75c3e..8764e28 100644
--- a/components/NatureDeviceCard.vue
+++ b/components/NatureDeviceCard.vue
@@ -3,7 +3,7 @@
     class="group focus:outline-none focus-visible:outline-0"
     :to="`/devices/${device.id}`"
   >
-    <UCard :class="STYLE_FOCUS_VISIBLE_RING_GROUP">
+    <UCard :class="[STYLE_CLICKABLE_CARD, STYLE_FOCUS_VISIBLE_RING_GROUP]">
       <div class="flex flex-row items-center gap-4">
         <div class="flex-1 flex flex-col items-center gap-4 overflow-hidden">
           <div
diff --git a/package.json b/package.json
index 7a368ca..fa7df65 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "luonto",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/utils/constants.ts b/utils/constants.ts
index 38c6ad3..58f0714 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -7,6 +7,9 @@ export const REFRESH_INTERVAL_DEVICE_PAGE = REFRESH_INTERVAL_HOME;
 
 export const SWIPE_THRESHOLD_DISTANCE_AC_TEMPERATURE = 1;
 
+export const STYLE_CLICKABLE_CARD =
+  "hover:[&:not(:disabled)]:bg-gray-50 dark:hover:[&:not(:disabled)]:bg-gray-800";
+
 export const STYLE_FOCUS_VISIBLE_RING =
   "focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400";