Fix dot status when exited (#2204)

gethomepage · Oct 18, 2023 · cbad95b · cbad95b
1 parent 47db8be
commit cbad95b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/src/components/services/kubernetes-status.jsx b/src/components/services/kubernetes-status.jsx
@@ -35,8 +35,10 @@ export default function KubernetesStatus({ service, style }) {
 
   return (
     <div className={`w-auto text-center overflow-hidden ${backgroundClass} rounded-b-[3px] k8s-status`} title={statusTitle}>
-      {style !== 'dot' && <div className={`text-[8px] font-bold ${colorClass} uppercase`}>{statusLabel}</div>}
-      {style === 'dot' && <div className={`rounded-full h-3 w-3 ${colorClass}`}/>}
+      {style !== 'dot' ? 
+        <div className={`text-[8px] font-bold ${colorClass} uppercase`}>{statusLabel}</div> :
+        <div className={`rounded-full h-3 w-3 ${colorClass}`}/>
+      }
     </div>
   );
 }
diff --git a/src/components/services/status.jsx b/src/components/services/status.jsx
@@ -45,14 +45,17 @@ export default function Status({ service, style }) {
   }
 
   if (style === 'dot') {
-    colorClass = colorClass.replace('text-', 'bg-').replace(/\/\d\d$/, '');
+    colorClass = colorClass.replace(/text-/g, 'bg-').replace(/\/\d\d/g, '');
     backgroundClass = "p-4 hover:bg-theme-500/10 dark:hover:bg-theme-900/20";
+    statusTitle = statusLabel;
   }
 
   return (
     <div className={`w-auto text-center overflow-hidden ${backgroundClass} rounded-b-[3px] docker-status`} title={statusTitle}>
-      {style !== 'dot' && <div className={`text-[8px] font-bold ${colorClass} uppercase`}>{statusLabel}</div>}
-      {style === 'dot' && <div className={`rounded-full h-3 w-3 ${colorClass}`}/>}
+      {style !== 'dot' ?
+        <div className={`text-[8px] font-bold ${colorClass} uppercase`}>{statusLabel}</div> :
+        <div className={`rounded-full h-3 w-3 ${colorClass}`}/>
+      }
     </div>
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -70,8 +70,11 @@ module.exports = {
     'lg:grid-cols-6',
     'lg:grid-cols-7',
     'lg:grid-cols-8',
+    // for status
     'bg-white',
     'bg-black',
     'dark:bg-white',
+    'bg-orange-400',
+    'dark:bg-orange-400',
   ],
 }