Merge pull request #40 from flanksource/fix/mixed-indicator

fix: "mixed" status indicator color not showing
flanksource · Oct 22, 2021 · 0702ae3 · 0702ae3
2 parents 60583eb + 0d3be9a
commit 0702ae3
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 14 deletions.
diff --git a/src/components/Status/index.js b/src/components/Status/index.js
@@ -1,16 +1,10 @@
-import "./style.css";
+import style from "./style.module.css";
 
 export function Status({ good, mixed, className = "" }) {
-  if (mixed) {
-    className += " bg-mixed";
-  } else if (good) {
-    className += " bg-green-400";
-  } else {
-    className += " bg-red-400";
-  }
+  const color = mixed ? style.mixed : good ? "bg-green-400" : "bg-red-400";
   return (
     <span
-      className={`${className} flex-shrink-0 inline-block h-3 w-3 rounded-full shadow-md`}
+      className={`flex-shrink-0 inline-block h-3 w-3 rounded-full shadow-md ${className} ${color}`}
       aria-hidden="true"
     />
   );

diff --git a/src/components/Status/style.css b/src/components/Status/style.css
diff --git a/src/components/Status/style.module.css b/src/components/Status/style.module.css
@@ -0,0 +1,5 @@
+.mixed {
+  border-radius: 2;
+  border: 3px solid rgba(52, 211, 153, 1);
+  background: rgba(248, 113, 113, 1);
+}