From 4a5bfee4ae068b7d2bb4e819963a5ffe865d700f Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 12 Feb 2024 11:19:30 -0800
Subject: [PATCH] Updated badge styling & show if OK

---
 src-ui/src/app/app.module.ts                       |  2 ++
 .../admin/settings/settings.component.html         | 14 ++++++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts
index a7f8d2f3d..568b2bc0e 100644
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@@ -153,6 +153,7 @@ import {
   doorOpen,
   download,
   envelope,
+  exclamationCircleFill,
   exclamationTriangle,
   exclamationTriangleFill,
   eye,
@@ -242,6 +243,7 @@ const icons = {
   doorOpen,
   download,
   envelope,
+  exclamationCircleFill,
   exclamationTriangle,
   exclamationTriangleFill,
   eye,
diff --git a/src-ui/src/app/components/admin/settings/settings.component.html b/src-ui/src/app/components/admin/settings/settings.component.html
index c1fff6e12..203033ae1 100644
--- a/src-ui/src/app/components/admin/settings/settings.component.html
+++ b/src-ui/src/app/components/admin/settings/settings.component.html
@@ -11,14 +11,20 @@
     [disabled]="!systemStatus"
     *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }">
     @if (!systemStatus) {
-      <div class="spinner-border spinner-border-sm me-1" role="status"></div>
+      <div class="spinner-border spinner-border-sm me-1 h-75" role="status"></div>
     } @else {
-      <i-bs class="me-1" name="card-checklist"></i-bs>
+      <i-bs class="me-2" name="card-checklist"></i-bs>
       @if (systemStatusHasErrors) {
-        <span class="badge bg-danger position-absolute top-0 start-100 translate-middle rounded-pill py-1 px-2">!</span>
+        <span class="badge bg-body position-absolute top-0 start-100 translate-middle rounded-pill p-0">
+          <i-bs name="exclamation-circle-fill" class="text-danger" width="1.75em" height="1.75em"></i-bs>
+        </span>
+      } @else {
+        <span class="badge bg-body position-absolute top-0 start-100 translate-middle rounded-pill p-0">
+          <i-bs name="check-circle-fill" class="text-success" width="1.75em" height="1.75em"></i-bs>
+        </span>
       }
     }
-    &nbsp;<ng-container i18n>System Status</ng-container>
+    <ng-container i18n>System Status</ng-container>
   </button>
   <a *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }" class="btn btn-sm btn-primary ms-3" href="admin/" target="_blank">
     <ng-container i18n>Open Django Admin</ng-container>