From 668e8bafed26364e4ce6904bd6409f0f59faa92b Mon Sep 17 00:00:00 2001
From: Jed Fox <git@jedfox.com>
Date: Sun, 19 May 2024 14:01:14 -0700
Subject: [PATCH] Gray out label for up/down/maintenance labels when they are
 zero (#3037)

Co-authored-by: Frank Elsinga <frank@elsinga.de>
---
 src/pages/DashboardHome.vue | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index 3baf35a62..78bee91fc 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -9,15 +9,30 @@
                 <div class="row">
                     <div class="col">
                         <h3>{{ $t("Up") }}</h3>
-                        <span class="num">{{ $root.stats.up }}</span>
+                        <span
+                            class="num"
+                            :class="$root.stats.up === 0 && 'text-secondary'"
+                        >
+                            {{ $root.stats.up }}
+                        </span>
                     </div>
                     <div class="col">
                         <h3>{{ $t("Down") }}</h3>
-                        <span class="num text-danger">{{ $root.stats.down }}</span>
+                        <span
+                            class="num"
+                            :class="$root.stats.down > 0 ? 'text-danger' : 'text-secondary'"
+                        >
+                            {{ $root.stats.down }}
+                        </span>
                     </div>
                     <div class="col">
                         <h3>{{ $t("Maintenance") }}</h3>
-                        <span class="num text-maintenance">{{ $root.stats.maintenance }}</span>
+                        <span
+                            class="num"
+                            :class="$root.stats.maintenance > 0 ? 'text-maintenance' : 'text-secondary'"
+                        >
+                            {{ $root.stats.maintenance }}
+                        </span>
                     </div>
                     <div class="col">
                         <h3>{{ $t("Unknown") }}</h3>