From e0d5269148176011a4bf76fb2e22733a68624eb6 Mon Sep 17 00:00:00 2001
From: Xabier Arbulu Insausti <xarbulu@suse.com>
Date: Mon, 20 Feb 2023 12:16:19 +0100
Subject: [PATCH] Fix home page filters background color on selected (#1205)

---
 .../HealthSummary/HealthSummaryBox.jsx        | 41 ++++++++-----------
 1 file changed, 16 insertions(+), 25 deletions(-)

diff --git a/assets/js/components/HealthSummary/HealthSummaryBox.jsx b/assets/js/components/HealthSummary/HealthSummaryBox.jsx
index 0316ae48d0..5d1d8a8b3b 100644
--- a/assets/js/components/HealthSummary/HealthSummaryBox.jsx
+++ b/assets/js/components/HealthSummary/HealthSummaryBox.jsx
@@ -32,33 +32,24 @@ const iconByHealth = {
 
 const styleByHealth = {
   passing: (selected, asButton) =>
-    classNames(
-      'tn-health-passing w-1/3 px-5 border rounded-lg my-2 mr-4 bg-white',
-      {
-        'bg-jungle-green-500 border-green-600 text-white hover:opacity-75':
-          selected,
-        'text-jungle-green-500': !selected,
-        'hover:opacity-75': asButton && !selected,
-      }
-    ),
+    classNames('tn-health-passing w-1/3 px-5 border rounded-lg my-2 mr-4', {
+      'bg-jungle-green-500 border-green-600 text-white hover:opacity-75':
+        selected,
+      'text-jungle-green-500 bg-white': !selected,
+      'hover:opacity-75': asButton && !selected,
+    }),
   warning: (selected, asButton) =>
-    classNames(
-      'tn-health-warning w-1/3 px-5 border rounded-lg my-2 mr-4 bg-white',
-      {
-        'bg-yellow-400 border-yellow-400 text-white hover:opacity-75': selected,
-        'text-yellow-400': !selected,
-        'hover:opacity-75': asButton && !selected,
-      }
-    ),
+    classNames('tn-health-warning w-1/3 px-5 border rounded-lg my-2 mr-4', {
+      'bg-yellow-400 border-yellow-400 text-white hover:opacity-75': selected,
+      'text-yellow-400 bg-white': !selected,
+      'hover:opacity-75': asButton && !selected,
+    }),
   critical: (selected, asButton) =>
-    classNames(
-      'tn-health-critical w-1/3 px-5 border rounded-lg my-2 mr-4 bg-white',
-      {
-        'bg-red-600 border-red-600 text-white hover:opacity-75': selected,
-        'text-red-600': !selected,
-        'hover:opacity-75': asButton && !selected,
-      }
-    ),
+    classNames('tn-health-critical w-1/3 px-5 border rounded-lg my-2 mr-4', {
+      'bg-red-600 border-red-600 text-white hover:opacity-75': selected,
+      'text-red-600 bg-white': !selected,
+      'hover:opacity-75': asButton && !selected,
+    }),
 };
 
 const labelByHealth = {