chore: add clsx and tailwind-merge for class management

Author: kyrers

web/package.json

@@ -81,6 +81,7 @@
     "@yornaath/batshit": "^0.9.0",
     "chart.js": "^3.9.1",
     "chartjs-adapter-moment": "^1.0.1",
+    "clsx": "^2.1.1",
     "core-js": "^3.35.0",
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.2",
@@ -102,6 +103,7 @@
     "react-toastify": "^9.1.3",
     "react-use": "^17.4.3",
     "subgraph-status": "^1.2.4",
+    "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.16",
     "viem": "^2.27.2",
     "wagmi": "^2.14.10",

web/src/global.css

@@ -1,5 +1,4 @@
 @import "../../node_modules/@kleros/ui-components-library/dist/assets/theme.css";
-@plugin "tailwindcss-react-aria-components";
 @source "../../node_modules/@kleros/ui-components-library";
 @tailwind utilities;
 

web/src/utils/index.ts

@@ -1,4 +1,6 @@
 import { Roles } from "@kleros/kleros-app";
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export const isUndefined = (maybeObject: any): maybeObject is undefined => typeof maybeObject === "undefined";
 export const capitalize = (str: string) => {
@@ -38,3 +40,7 @@ export const getFileUploaderMsg = (role: Roles, roleRestrictions?: Role[]) => {
     (1024 * 1024)
   ).toFixed(2)} MB.`;
 };
+
+export const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};

yarn.lock

@@ -5563,6 +5563,7 @@ __metadata:
     "@yornaath/batshit": "npm:^0.9.0"
     chart.js: "npm:^3.9.1"
     chartjs-adapter-moment: "npm:^1.0.1"
+    clsx: "npm:^2.1.1"
     core-js: "npm:^3.35.0"
     eslint: "npm:^8.56.0"
     eslint-config-prettier: "npm:^8.10.0"
@@ -5589,6 +5590,7 @@ __metadata:
     react-toastify: "npm:^9.1.3"
     react-use: "npm:^17.4.3"
     subgraph-status: "npm:^1.2.4"
+    tailwind-merge: "npm:^3.3.1"
     tailwindcss: "npm:^4.1.16"
     typescript: "npm:^5.3.3"
     viem: "npm:^2.27.2"
@@ -31116,7 +31118,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwind-merge@npm:^3.0.2":
+"tailwind-merge@npm:^3.0.2, tailwind-merge@npm:^3.3.1":
   version: 3.3.1
   resolution: "tailwind-merge@npm:3.3.1"
   checksum: ad97f0763afdfdce785b8de50bc546951bb3cc803ab4f809cb10d654d9b7e28b0d19dead70ab9070edf479af68622a5f6ba16a21584fa8c21236855709dc648f