fix(badge): Regenerate assets and tweak health badge width

controller/handler/badge.go

@@ -266,9 +266,9 @@ func generateHealthBadgeSVG(healthStatus string) []byte {
 	var labelWidth, valueWidth int
 	switch healthStatus {
 	case HealthStatusUp:
-		valueWidth = 18
+		valueWidth = 28
 	case HealthStatusDown:
-		valueWidth = 36
+		valueWidth = 44
 	case HealthStatusUnknown:
 		valueWidth = 10
 	default:
@@ -294,10 +294,10 @@ func generateHealthBadgeSVG(healthStatus string) []byte {
   </g>
   <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
     <text x="%d" y="15" fill="#010101" fill-opacity=".3">
-      status
+      health
     </text>
     <text x="%d" y="14">
-      status
+      health
     </text>
     <text x="%d" y="15" fill="#010101" fill-opacity=".3">
       %s

web/app/src/views/Details.vue

@@ -20,10 +20,6 @@
       <h1 class="text-xl xl:text-3xl font-mono text-gray-400">UPTIME</h1>
       <hr/>
       <div class="flex space-x-4 text-center text-2xl mt-6 relative bottom-2 mb-10">
-        <div class="flex-1">
-          <h2 class="text-sm text-gray-400 mb-1">Now</h2>
-          <img :src="generateHealthBadgeImageURL()" alt="health badge" class="mx-auto"/>
-        </div>
         <div class="flex-1">
           <h2 class="text-sm text-gray-400 mb-1">Last 7 days</h2>
           <img :src="generateUptimeBadgeImageURL('7d')" alt="7d uptime badge" class="mx-auto"/>
@@ -57,9 +53,18 @@
         </div>
       </div>
     </div>
+    <div v-if="endpointStatus && endpointStatus.key">
+      <h1 class="text-xl xl:text-3xl font-mono text-gray-400 mt-4">CURRENT HEALTH</h1>
+      <hr />
+      <div class="flex space-x-4 text-center text-2xl mt-6 relative bottom-2 mb-10">
+        <div class="flex-1">
+          <img :src="generateHealthBadgeImageURL()" alt="health badge" class="mx-auto"/>
+        </div>
+      </div>
+    </div>
     <div v-if="endpointStatus && endpointStatus.key">
       <h1 class="text-xl xl:text-3xl font-mono text-gray-400 mt-4">EVENTS</h1>
-      <hr class="mb-4"/>
+      <hr />
       <div>
         <slot v-for="event in events" :key="event">
           <div class="p-3 my-4">