From 8428fc6cf668a6a7b6bdedd73430aebb3f1ed017 Mon Sep 17 00:00:00 2001
From: Brock H Caldwell <brock@caldwellnetworks.com>
Date: Mon, 12 May 2025 14:17:22 -0500
Subject: [PATCH] fix: adds status badges

---
 src/Twig/Components/StatusBadge.php         | 10 ++++++++++
 templates/components/Card.html.twig         |  6 +++---
 templates/components/DownloadList.html.twig |  4 +---
 templates/components/MonitorList.html.twig  | 12 +++---------
 templates/components/StatusBadge.html.twig  |  3 +++
 templates/partial/alert-status.html.twig    |  5 +++++
 6 files changed, 25 insertions(+), 15 deletions(-)
 create mode 100644 src/Twig/Components/StatusBadge.php
 create mode 100644 templates/components/StatusBadge.html.twig
 create mode 100644 templates/partial/alert-status.html.twig

diff --git a/src/Twig/Components/StatusBadge.php b/src/Twig/Components/StatusBadge.php
new file mode 100644
index 0000000..04b179e
--- /dev/null
+++ b/src/Twig/Components/StatusBadge.php
@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Twig\Components;
+
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+#[AsTwigComponent]
+final class StatusBadge
+{
+}
diff --git a/templates/components/Card.html.twig b/templates/components/Card.html.twig
index 872681f..cb6d3a2 100644
--- a/templates/components/Card.html.twig
+++ b/templates/components/Card.html.twig
@@ -1,9 +1,9 @@
 <div{{ attributes }}>
-    <div class="flex flex-col bg-white border border-gray-200 border-t-4 border-t-orange-500 shadow-2xs rounded-xl dark:bg-sky-950 dark:border-neutral-700 dark:border-t-orange-500 dark:shadow-neutral-700/70
-    dark:backdrop-filter dark:backdrop-blur-md dark:bg-opacity-40
+    <div class="flex flex-col bg-sky-950 border-neutral-700 border-t-4 border-t-orange-500 rounded-xl
+     backdrop-filter backdrop-blur-md bg-opacity-40
 ">
         <div class="p-4 md:p-5">
-            <h3 class="mb-4 text-lg font-bold text-gray-800 dark:text-white">
+            <h3 class="mb-4 text-lg font-bold text-white">
                 {{ title }}
             </h3>
 
diff --git a/templates/components/DownloadList.html.twig b/templates/components/DownloadList.html.twig
index e31078c..fa682d6 100644
--- a/templates/components/DownloadList.html.twig
+++ b/templates/components/DownloadList.html.twig
@@ -26,9 +26,7 @@
                             <span class="w-4 inline-block text-center text-gray-50">{{ download.progress }}</span>
                         </span>
                         {% else %}
-                        <span class="p-1.5 bg-green-600 rounded-full">
-                            <span class="inline-block text-center text-gray-50">Complete</span>
-                        </span>
+                            <twig:StatusBadge color="green" status="Completed" />
                         {% endif %}
                     </td>
                 </tr>
diff --git a/templates/components/MonitorList.html.twig b/templates/components/MonitorList.html.twig
index 51da7ad..aa3474b 100644
--- a/templates/components/MonitorList.html.twig
+++ b/templates/components/MonitorList.html.twig
@@ -43,17 +43,11 @@
                     </td>
                     <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
                         {% if monitor.status == "New" %}
-                        <span class="p-1.5 bg-orange-500 rounded-full">
-                            <span class="w-4 inline-block text-center text-gray-50">{{ monitor.status }}</span>
-                        </span>
+                            <twig:StatusBadge color="orange" status="{{ monitor.status }}" />
                         {% elseif monitor.status == "In Progress" or monitor.status == "Active" %}
-                        <span class="p-1.5 bg-purple-600 rounded-full">
-                            <span class="inline-block text-center text-gray-50">{{ monitor.status }}</span>
-                        </span>
+                            <twig:StatusBadge color="purple" status="{{ monitor.status }}" />
                         {% else %}
-                        <span class="p-1.5 bg-green-600 rounded-full">
-                            <span class="inline-block text-center text-gray-50">{{ monitor.status }}</span>
-                        </span>
+                            <twig:StatusBadge color="green" status="{{ monitor.status }}" />
                         {% endif %}
                     </td>
                 </tr>
diff --git a/templates/components/StatusBadge.html.twig b/templates/components/StatusBadge.html.twig
new file mode 100644
index 0000000..2e5b5e9
--- /dev/null
+++ b/templates/components/StatusBadge.html.twig
@@ -0,0 +1,3 @@
+<span {{ attributes }} class="py-[3px] px-[8px] bg-{{ color|default('green') }}-600 rounded-lg inline-block text-center text-xs text-gray-50">
+    {{ status }}
+</span>
\ No newline at end of file
diff --git a/templates/partial/alert-status.html.twig b/templates/partial/alert-status.html.twig
new file mode 100644
index 0000000..9ea8ebc
--- /dev/null
+++ b/templates/partial/alert-status.html.twig
@@ -0,0 +1,5 @@
+{# The status indicator for the Alert button. Rendering this will add a small colored span
+   to the Alert button, indicating there are unread alerts.
+#}
+
+<span style="position: absolute;width: 8px;height: 8px;background: greenyellow;border-radius: 5px; z-index: 1000;margin-left: 3px;margin-top: -5px;"></span>