feat: add hover styles for clickable elements

SegaraRai · Jul 2, 2024 · 2c83a71 · 2c83a71
1 parent cb76b7e
commit 2c83a71
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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";