From e61657c05bcac68d4b8379f7004d325d5f60cb35 Mon Sep 17 00:00:00 2001
From: Ajit Mehrotra <ajitmehrotra2009@gmail.com>
Date: Mon, 15 Dec 2025 16:08:37 -0500
Subject: [PATCH] refactor(notification): use "size" for square css widths and
 height

---
 web/src/components/Docker/DockerContainerManagement.vue   | 2 +-
 .../Notifications/CriticalNotifications.standalone.vue    | 8 ++++----
 web/src/components/Notifications/Indicator.vue            | 2 +-
 web/src/components/Notifications/List.vue                 | 6 +++---
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/web/src/components/Docker/DockerContainerManagement.vue b/web/src/components/Docker/DockerContainerManagement.vue
index ca28660b6..7d9f79c7d 100644
--- a/web/src/components/Docker/DockerContainerManagement.vue
+++ b/web/src/components/Docker/DockerContainerManagement.vue
@@ -535,7 +535,7 @@ const [transitionContainerRef] = useAutoAnimate({
             </div>
             <DockerOverview v-else :item="detailsItem" :details="details" />
             <div v-if="isDetailsLoading" class="absolute inset-0 grid place-items-center">
-              <USkeleton class="h-6 w-6" />
+              <USkeleton class="size-6" />
             </div>
           </div>
         </UCard>
diff --git a/web/src/components/Notifications/CriticalNotifications.standalone.vue b/web/src/components/Notifications/CriticalNotifications.standalone.vue
index fa7fe0a2b..a40cf2818 100644
--- a/web/src/components/Notifications/CriticalNotifications.standalone.vue
+++ b/web/src/components/Notifications/CriticalNotifications.standalone.vue
@@ -194,7 +194,7 @@ onNotificationAdded(({ data }) => {
   <section class="flex flex-col gap-4 rounded-lg border border-amber-200 bg-white p-4 shadow-sm">
     <header class="flex items-center justify-between gap-3">
       <div class="flex items-center gap-2">
-        <UIcon name="i-lucide-alert-triangle" class="h-5 w-5 text-amber-600" aria-hidden="true" />
+        <UIcon name="i-lucide-alert-triangle" class="size-5 text-amber-600" aria-hidden="true" />
         <h2 class="text-base font-semibold text-gray-900">Warnings & Alerts</h2>
       </div>
       <span v-if="!loading" class="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700">
@@ -207,7 +207,7 @@ onNotificationAdded(({ data }) => {
     </div>
 
     <div v-else-if="loading" class="flex items-center gap-2 text-sm text-gray-500">
-      <span class="h-2 w-2 animate-pulse rounded-full bg-amber-400" aria-hidden="true" />
+      <span class="size-2 animate-pulse rounded-full bg-amber-400" aria-hidden="true" />
       Loading latest notifications…
     </div>
 
@@ -215,7 +215,7 @@ onNotificationAdded(({ data }) => {
       <li v-for="{ notification, displayTimestamp, meta } in enrichedNotifications" :key="notification.id"
         class="grid gap-2 rounded-md border border-gray-200 p-3 transition hover:border-amber-300">
         <div class="flex items-start gap-3">
-          <UIcon :name="meta.icon" class="mt-0.5 h-5 w-5 flex-none" :class="meta.accent" aria-hidden="true" />
+          <UIcon :name="meta.icon" class="mt-0.5 size-5 flex-none" :class="meta.accent" aria-hidden="true" />
           <div class="flex flex-1 flex-col gap-1">
             <div class="flex flex-wrap items-center gap-2">
               <span class="rounded-full px-2 py-0.5 text-xs font-medium" :class="meta.badge">
@@ -253,7 +253,7 @@ onNotificationAdded(({ data }) => {
 
     <div v-else class="flex flex-col items-start gap-2 rounded-md border border-gray-200 p-3">
       <div class="flex items-center gap-2 text-sm font-medium text-gray-700">
-        <span class="h-2 w-2 rounded-full bg-emerald-400" aria-hidden="true" />
+        <span class="size-2 rounded-full bg-emerald-400" aria-hidden="true" />
         All clear. No active warnings or alerts.
       </div>
       <p class="text-sm text-gray-500">
diff --git a/web/src/components/Notifications/Indicator.vue b/web/src/components/Notifications/Indicator.vue
index fd45fadae..c72b94e1e 100644
--- a/web/src/components/Notifications/Indicator.vue
+++ b/web/src/components/Notifications/Indicator.vue
@@ -44,7 +44,7 @@ const icon = computed<{ name: string; color: string } | null>(() => {
 
 <template>
   <div class="relative flex items-center justify-center">
-    <UIcon name="i-heroicons-bell-20-solid" class="h-6 w-6" />
+    <UIcon name="i-heroicons-bell-20-solid" class="size-6" />
     <div
       v-if="!seen && indicatorLevel === 'UNREAD'"
       class="border-muted bg-unraid-green absolute top-0 right-0 size-2.5 rounded-full border"
diff --git a/web/src/components/Notifications/List.vue b/web/src/components/Notifications/List.vue
index 736a4047e..62a649a90 100644
--- a/web/src/components/Notifications/List.vue
+++ b/web/src/components/Notifications/List.vue
@@ -300,7 +300,7 @@ const displayErrorMessage = computed(() => {
       <div v-if="loading" class="space-y-4 py-3">
         <div v-for="n in 3" :key="n" class="py-3">
           <div class="flex items-center gap-2">
-            <USkeleton class="h-5 w-5 rounded-full" />
+            <USkeleton class="size-5 rounded-full" />
             <USkeleton class="h-4 w-40" />
             <div class="ml-auto">
               <USkeleton class="h-3 w-24" />
@@ -322,7 +322,7 @@ const displayErrorMessage = computed(() => {
     <div v-if="loading" class="w-full max-w-md space-y-4">
       <div v-for="n in 3" :key="n" class="py-1.5">
         <div class="flex items-center gap-2">
-          <USkeleton class="h-5 w-5 rounded-full" />
+          <USkeleton class="size-5 rounded-full" />
           <USkeleton class="h-4 w-40" />
         </div>
         <div class="mt-2">
@@ -346,7 +346,7 @@ const displayErrorMessage = computed(() => {
 
     <!-- Default (empty state) -->
     <div v-else class="contents">
-      <UIcon name="i-heroicons-check-20-solid" class="text-unraid-green h-10 w-10 translate-y-3" />
+      <UIcon name="i-heroicons-check-20-solid" class="text-unraid-green size-10 translate-y-3" />
       {{ noNotificationsMessage }}
     </div>
   </div>