Use clsx properly

src/components/Cards/InfoCard.js

@@ -18,28 +18,28 @@ const InfoCard = ({ title, value, delta = null, small = false }) => {
       <CardBody className="flex flex-col">
         <div>
           <p
-            className={clsx(
-              small ? "mb-1 text-xs" : "mb-2 text-sm",
-              "dark:text-gray-400 text-gray-600 font-medium"
-            )}
+            className={clsx("dark:text-gray-400 text-gray-600 font-medium", {
+              "mb-1 text-xs": small,
+              "mb-2 text-sm": !small,
+            })}
           >
             {title}
           </p>
           <div className="flex">
             <animated.p
               className={clsx(
-                small ? "text-base" : "text-lg",
-                "dark:text-gray-200 text-gray-700 font-semibold"
+                "dark:text-gray-200 text-gray-700 font-semibold",
+                { "text-base": small, "text-lg": !small }
               )}
             >
               {_value.interpolate((x) => Math.round(x))}
             </animated.p>
             {delta !== null && (
               <animated.span
-                className={clsx(
-                  small ? "text-xs" : "text-sm",
-                  "ml-2 dark:text-gray-400 text-gray-600"
-                )}
+                className={clsx("ml-2 dark:text-gray-400 text-gray-600", {
+                  "text-xs": small,
+                  "text-sm": !small,
+                })}
               >
                 {_delta.interpolate((y) => {
                   const x = Math.round(y);

src/components/Cards/OxygenCard.js

@@ -1,6 +1,7 @@
 import { Card } from "@windmill/react-ui";
 import React from "react";
 import { OXYGEN_TYPES } from "../../utils/constants";
+import clsx from "clsx";
 
 const OxygenCard = ({ data }) => {
   const getSVG = (parameter) => {
@@ -94,9 +95,12 @@ const OxygenCard = ({ data }) => {
           >
             <div className="flex flex-row justify-center">
               <div
-                className={`text-gray-800 dark:text-gray-200 text-lg font-semibold ${
-                  data.is_low[idx] ? "text-red-500 dark:text-red-500" : ""
-                }`}
+                className={clsx(
+                  "dark:text-gray-200 text-gray-800 text-lg font-semibold",
+                  {
+                    "text-red-500 dark:text-red-500": data.is_low[idx],
+                  }
+                )}
               >
                 {val}
               </div>

src/components/DistrictDashboard/Capacity.js

@@ -1,6 +1,5 @@
 import { Button, Input } from "@windmill/react-ui";
 import Pagination from "../Pagination";
-import clsx from "clsx";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import fuzzysort from "fuzzysort";

src/components/DistrictDashboard/Filter.js

@@ -45,8 +45,8 @@ const Filter = ({
   return (
     <div
       className={clsx(
-        floating ? " mt-10 flex-shrink-0 " : "mb-8 rounded-lg",
-        "flex flex-col items-center justify-between px-1 py-1 dark:bg-gray-800 bg-white shadow-md sm:px-4 sm:py-2 md:flex-row"
+        "flex flex-col items-center justify-between px-1 py-1 dark:bg-gray-800 bg-white shadow-md sm:px-4 sm:py-2 md:flex-row",
+        { "mt-10 flex-shrink-0": floating, "mb-8 rounded-lg": !floating }
       )}
     >
       <p className="inline-flex dark:text-gray-400">Filters</p>

src/components/DistrictDashboard/GMap.js

@@ -9,15 +9,14 @@ import {
   GMAP_KEY,
 } from "../../utils/constants";
 import Marker from "../Marker";
+import clsx from "clsx";
 
-const selectedButtonClasses = (bool) => {
-  const d = " px-4 py-2 font-bold rounded-lg shadow ";
-  return (
-    d +
-    (bool
-      ? "bg-primary-500 text-white"
-      : "dark:hover:bg-primary-500 hover:text-white hover:bg-primary-500 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-white")
-  );
+const selectedButtonClasses = (isWhite) => {
+  return clsx("px-4 py-2 font-bold rounded-lg shadow", {
+    "bg-primary-500 text-white": isWhite,
+    "dark:hover:bg-primary-500 hover:text-white hover:bg-primary-500 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-white":
+      !isWhite,
+  });
 };
 
 const GMap = ({ district, facilities, className }) => {