(refactor) Use classnames library to apply multiple classes

package.json

@@ -99,6 +99,7 @@
   },
   "packageManager": "[email protected]",
   "dependencies": {
+    "classnames": "^2.3.2",
     "dotenv": "^16.3.1"
   }
 }

src/cohort-builder.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-
+import classNames from "classnames";
 import { Tab, Tabs, TabList, TabPanels, TabPanel } from "@carbon/react";
 import { showToast, useLayoutType } from "@openmrs/esm-framework";
 import { useTranslation } from "react-i18next";
@@ -169,12 +169,16 @@ const CohortBuilder: React.FC = () => {
 
   return (
     <div
-      className={`omrs-main-content ${styles.mainContainer} ${styles.cohortBuilder}`}
+      className={classNames(
+        "omrs-main-content",
+        styles.mainContainer,
+        styles.cohortBuilder
+      )}
     >
       <div
-        className={
+        className={classNames(
           isLayoutTablet ? styles.tabletContainer : styles.desktopContainer
-        }
+        )}
       >
         <p className={styles.title}>{t("cohortBuilder", "Cohort Builder")}</p>
         <div className={styles.tabContainer}>
@@ -183,9 +187,10 @@ const CohortBuilder: React.FC = () => {
           </p>
           <div className={styles.tab}>
             <Tabs
-              className={`${styles.verticalTabs} ${
-                isLayoutTablet ? styles.tabletTab : styles.desktopTab
-              }`}
+              className={classNames(styles.verticalTabs, {
+                [styles.tabletTab]: isLayoutTablet,
+                [styles.desktopTab]: !isLayoutTablet,
+              })}
             >
               <TabList aria-label="navigation">
                 {tabs.map((tab: TabItem, index: number) => (

src/components/search-by-demographics/search-by-demographics.component.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-
+import classNames from "classnames";
 import {
   DatePicker,
   DatePickerInput,
@@ -84,7 +84,7 @@ const SearchByDemographics: React.FC<SearchByProps> = ({ onSubmit }) => {
   return (
     <>
       <Column>
-        <p className={`${styles.text} ${styles.genderTitle}`}>
+        <p className={classNames(styles.text, styles.genderTitle)}>
           {t("gender", "Gender")}
         </p>
         <div className={styles.genderContainer}>

yarn.lock

@@ -3042,6 +3042,7 @@ __metadata:
     "@types/webpack-env": ^1.18.0
     "@typescript-eslint/eslint-plugin": ^5.51.0
     "@typescript-eslint/parser": ^5.51.0
+    classnames: ^2.3.2
     concurrently: ^7.6.0
     css-loader: ^6.7.3
     dayjs: ^1.11.7
@@ -6217,7 +6218,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:2.3.2":
+"classnames@npm:2.3.2, classnames@npm:^2.3.2":
   version: 2.3.2
   resolution: "classnames@npm:2.3.2"
   checksum: 2c62199789618d95545c872787137262e741f9db13328e216b093eea91c85ef2bfb152c1f9e63027204e2559a006a92eb74147d46c800a9f96297ae1d9f96f4e