7 files changed, 17 insertions, 17 deletions
diff --git a/FrontEnd/src/app/views/common/FlatButton.tsx b/FrontEnd/src/app/views/common/FlatButton.tsx
index 80bb654c..b1f7a051 100644
--- a/FrontEnd/src/app/views/common/FlatButton.tsx
+++ b/FrontEnd/src/app/views/common/FlatButton.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import clsx from "clsx";
+import classnames from "classnames";
 
 import { BootstrapThemeColor } from "@/common";
 
@@ -19,7 +19,7 @@ const FlatButton: React.FC<FlatButtonProps> = (props) => {
 
   return (
     <div
-      className={clsx(
+      className={classnames(
         "flat-button",
         variant,
         disabled ? "disabled" : null,
diff --git a/FrontEnd/src/app/views/common/FullPage.tsx b/FrontEnd/src/app/views/common/FullPage.tsx
index 283c4611..4048895a 100644
--- a/FrontEnd/src/app/views/common/FullPage.tsx
+++ b/FrontEnd/src/app/views/common/FullPage.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import clsx from "clsx";
+import classnames from "classnames";
 
 export interface FullPageProps {
   show: boolean;
@@ -25,7 +25,7 @@ const FullPage: React.FC<FullPageProps> = ({
         />
       </div>
       <div
-        className={clsx(
+        className={classnames(
           "cru-full-page-content-container",
           contentContainerClassName
         )}
diff --git a/FrontEnd/src/app/views/common/ImageCropper.tsx b/FrontEnd/src/app/views/common/ImageCropper.tsx
index b9db8b99..2ef5b7ed 100644
--- a/FrontEnd/src/app/views/common/ImageCropper.tsx
+++ b/FrontEnd/src/app/views/common/ImageCropper.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import clsx from "clsx";
+import classnames from "classnames";
 
 import { UiLogicError } from "@/common";
 
@@ -224,7 +224,7 @@ const ImageCropper = (props: ImageCropperProps): React.ReactElement => {
 
   return (
     <div
-      className={clsx("image-cropper-container", className)}
+      className={classnames("image-cropper-container", className)}
       style={containerStyle}
     >
       <img ref={onImageRef} src={imageUrl} onLoad={onImageLoad} alt="to crop" />
diff --git a/FrontEnd/src/app/views/common/Menu.tsx b/FrontEnd/src/app/views/common/Menu.tsx
index d942d452..a16199a5 100644
--- a/FrontEnd/src/app/views/common/Menu.tsx
+++ b/FrontEnd/src/app/views/common/Menu.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import clsx from "clsx";
+import classnames from "classnames";
 import { OverlayTrigger, OverlayTriggerProps, Popover } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 
@@ -29,7 +29,7 @@ const Menu: React.FC<MenuProps> = ({ items, className, onItemClicked }) => {
   const { t } = useTranslation();
 
   return (
-    <div className={clsx("cru-menu", className)}>
+    <div className={classnames("cru-menu", className)}>
       {items.map((item, index) => {
         if (item.type === "divider") {
           return <div key={index} className="cru-menu-divider" />;
@@ -37,7 +37,7 @@ const Menu: React.FC<MenuProps> = ({ items, className, onItemClicked }) => {
           return (
             <div
               key={index}
-              className={clsx(
+              className={classnames(
                 "cru-menu-item",
                 `color-${item.color ?? "primary"}`
               )}
@@ -47,7 +47,7 @@ const Menu: React.FC<MenuProps> = ({ items, className, onItemClicked }) => {
               }}
             >
               {item.iconClassName != null ? (
-                <i className={clsx(item.iconClassName, "cru-menu-item-icon")} />
+                <i className={classnames(item.iconClassName, "cru-menu-item-icon")} />
               ) : null}
               {convertI18nText(item.text, t)}
             </div>
diff --git a/FrontEnd/src/app/views/common/SearchInput.tsx b/FrontEnd/src/app/views/common/SearchInput.tsx
index eb127fcf..12e2126a 100644
--- a/FrontEnd/src/app/views/common/SearchInput.tsx
+++ b/FrontEnd/src/app/views/common/SearchInput.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import clsx from "clsx";
+import classnames from "classnames";
 import { useTranslation } from "react-i18next";
 import { Spinner, Form, Button } from "react-bootstrap";
 
@@ -37,7 +37,7 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
   );
 
   return (
-    <Form inline className={clsx(" flex-sm-nowrap", props.className)}>
+    <Form inline className={classnames(" flex-sm-nowrap", props.className)}>
       <Form.Control
         className="mr-sm-2 flex-grow-1"
         value={props.value}
diff --git a/FrontEnd/src/app/views/common/Skeleton.tsx b/FrontEnd/src/app/views/common/Skeleton.tsx
index c0c84d27..b3e0aa29 100644
--- a/FrontEnd/src/app/views/common/Skeleton.tsx
+++ b/FrontEnd/src/app/views/common/Skeleton.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import clsx from "clsx";
+import classnames from "classnames";
 import { range } from "lodash";
 
 export interface SkeletonProps {
@@ -13,11 +13,11 @@ const Skeleton: React.FC<SkeletonProps> = (props) => {
   const lineNumber = lineNumberProps ?? 3;
 
   return (
-    <div className={clsx(className, "cru-skeleton")} style={style}>
+    <div className={classnames(className, "cru-skeleton")} style={style}>
       {range(lineNumber).map((i) => (
         <div
           key={i}
-          className={clsx("cru-skeleton-line", i === lineNumber - 1 && "last")}
+          className={classnames("cru-skeleton-line", i === lineNumber - 1 && "last")}
         />
       ))}
     </div>
diff --git a/FrontEnd/src/app/views/common/ToggleIconButton.tsx b/FrontEnd/src/app/views/common/ToggleIconButton.tsx
index 76c48960..c4d2d132 100644
--- a/FrontEnd/src/app/views/common/ToggleIconButton.tsx
+++ b/FrontEnd/src/app/views/common/ToggleIconButton.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import clsx from "clsx";
+import classnames from "classnames";
 
 export interface ToggleIconButtonProps
   extends React.HTMLAttributes<HTMLElement> {
@@ -17,7 +17,7 @@ const ToggleIconButton: React.FC<ToggleIconButtonProps> = ({
 }) => {
   return (
     <i
-      className={clsx(
+      className={classnames(
         state ? trueIconClassName : falseIconClassName,
         "icon-button",
         className