Fix: dot visibility in some cases, translation strings (#2129)

public/locales/en/common.json

@@ -79,10 +79,12 @@
         "partial": "Partial"
     },
     "ping": {
+        "http_status": "HTTP status",
         "error": "Error",
         "ping": "Ping",
         "down": "Down",
-        "up": "Up"
+        "up": "Up",
+        "not_available": "Not Available"
     },
     "emby": {
         "playing": "Playing",

src/components/services/kubernetes-status.jsx

@@ -29,7 +29,7 @@ export default function KubernetesStatus({ service, style }) {
   }
 
   if (style === 'dot') {
-    colorClass = colorClass.replace('text-', 'bg-').replace(/\/\d\d$/, '');
+    colorClass = colorClass.replace('text-', 'bg-').replace(/\/\d\d/, '');
     backgroundClass = "p-3 hover:bg-theme-500/10 dark:hover:bg-theme-900/20";
   }
 

src/components/services/ping.jsx

@@ -7,44 +7,43 @@ export default function Ping({ group, service, style }) {
     refreshInterval: 30000
   });
 
-  let colorClass = ""
+  let colorClass = "text-black/20 dark:text-white/40";
   let backgroundClass = "bg-theme-500/10 dark:bg-theme-900/50 px-1.5 py-0.5";
-  let statusTitle = "HTTP status";
+  let statusTitle = t("ping.http_status");
-  let statusText;
+  let statusText = "";
 
   if (error) {
-    colorClass = "text-rose-500"
+    colorClass = "text-rose-500";
-    statusText = t("ping.error")
+    statusText = t("ping.error");
-    statusTitle += " error"
+    statusTitle += ` ${t("ping.error")}`;
   } else if (!data) {
-    colorClass = "text-black/20 dark:text-white/40"
+    statusText = t("ping.ping");
-    statusText = t("ping.ping")
+    statusTitle += ` ${t("ping.not_available")}`;
-    statusTitle += " not available"
   } else if (data.status > 403) {
-    colorClass = "text-rose-500/80"
+    colorClass = "text-rose-500/80";
-    statusTitle += ` ${data.status}`
+    statusTitle += ` ${data.status}`;
 
     if (style === "basic") {
-      statusText = t("ping.down")
+      statusText = t("ping.down");
     } else {
-      statusText = data.status
+      statusText = data.status;
     }
   } else {
     const ping = t("common.ms", { value: data.latency, style: "unit", unit: "millisecond", maximumFractionDigits: 0 })
     statusTitle += ` ${data.status} (${ping})`;
-    colorClass = "text-emerald-500/80"
+    colorClass = "text-emerald-500/80";
 
     if (style === "basic") {
-      statusText = t("ping.up")
+      statusText = t("ping.up");
     } else {
-      statusText = ping
+      statusText = ping;
-      colorClass += " lowercase"
+      colorClass += " lowercase";
     }
   }
 
   if (style === "dot") {
     backgroundClass = 'p-3';
-    colorClass = colorClass.replace('text-', 'bg-').replace(/\/\d\d$/, '');
+    colorClass = colorClass.replace('text-', 'bg-').replace(/\/\d\d/, '');
   }
 
   return (