refactor: replace clsx with classnames.

18 files changed, 43 insertions, 43 deletions

diff --git a/FrontEnd/src/app/views/admin/UserAdmin.tsx b/FrontEnd/src/app/views/admin/UserAdmin.tsx
index 5e1fdce7..74b3503f 100644
--- a/FrontEnd/src/app/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/app/views/admin/UserAdmin.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import clsx from "clsx";
+import classnames from "classnames";
 import { ListGroup, Row, Col, Spinner, Button } from "react-bootstrap";
 
 import OperationDialog, {
@@ -228,7 +228,7 @@ const UserItem: React.FC<UserItemProps> = ({ user, on }) => {
         })}
       </div>
       <div
-        className={clsx("edit-mask", !editMaskVisible && "d-none")}
+        className={classnames("edit-mask", !editMaskVisible && "d-none")}
         onClick={() => setEditMaskVisible(false)}
       >
         <button className="text-button primary" onClick={on[kModify]}>
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
diff --git a/FrontEnd/src/app/views/home/TimelineBoard.tsx b/FrontEnd/src/app/views/home/TimelineBoard.tsx
index d1a77bda..e0511422 100644
--- a/FrontEnd/src/app/views/home/TimelineBoard.tsx
+++ b/FrontEnd/src/app/views/home/TimelineBoard.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import clsx from "clsx";
+import classnames from "classnames";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Spinner } from "react-bootstrap";
@@ -226,7 +226,7 @@ const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
   const [editing, setEditing] = React.useState<boolean>(false);
 
   return (
-    <div className={clsx("timeline-board", className)}>
+    <div className={classnames("timeline-board", className)}>
       <div className="timeline-board-header">
         {title != null && <h3>{title}</h3>}
         {editable &&
diff --git a/FrontEnd/src/app/views/timeline-common/CollapseButton.tsx b/FrontEnd/src/app/views/timeline-common/CollapseButton.tsx
index da54f3fd..12a3b710 100644
--- a/FrontEnd/src/app/views/timeline-common/CollapseButton.tsx
+++ b/FrontEnd/src/app/views/timeline-common/CollapseButton.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import clsx from "clsx";
+import classnames from "classnames";
 
 const CollapseButton: React.FC<{
   collapse: boolean;
@@ -10,7 +10,7 @@ const CollapseButton: React.FC<{
   return (
     <i
       onClick={onClick}
-      className={clsx(
+      className={classnames(
         collapse ? "bi-arrows-angle-expand" : "bi-arrows-angle-contract",
         "text-primary icon-button",
         className
diff --git a/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx b/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx
index ac4baae8..f293bb21 100644
--- a/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx
+++ b/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import clsx from "clsx";
+import classnames from "classnames";
 import { Form, Spinner } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { Prompt } from "react-router";
@@ -156,7 +156,7 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
                       className="timeline-markdown-post-edit-image"
                     />
                     <i
-                      className={clsx(
+                      className={classnames(
                         "bi-trash text-danger icon-button timeline-markdown-post-edit-image-delete-button",
                         process && "d-none"
                       )}
diff --git a/FrontEnd/src/app/views/timeline-common/TimelineLine.tsx b/FrontEnd/src/app/views/timeline-common/TimelineLine.tsx
index d020f22c..0a828b32 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelineLine.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelineLine.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import clsx from "clsx";
+import classnames from "classnames";
 
 export interface TimelineLineProps {
   current?: boolean;
@@ -18,7 +18,7 @@ const TimelineLine: React.FC<TimelineLineProps> = ({
 }) => {
   return (
     <div
-      className={clsx(
+      className={classnames(
         "timeline-line",
         current && "current",
         center === "loading" && "loading",
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx
index 56783e89..ad9b7ede 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import clsx from "clsx";
+import classnames from "classnames";
 import { useTranslation } from "react-i18next";
 
 import { getHttpHighlightClient } from "@/http/highlight";
@@ -52,7 +52,7 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
       </small>
       <div className="text-right mt-2">
         <i
-          className={clsx(
+          className={classnames(
             timeline.isHighlight ? "bi-star-fill" : "bi-star",
             "icon-button text-yellow mr-3"
           )}
@@ -75,7 +75,7 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
         />
         {user != null ? (
           <i
-            className={clsx(
+            className={classnames(
               timeline.isBookmark ? "bi-bookmark-fill" : "bi-bookmark",
               "icon-button text-yellow mr-3"
             )}
@@ -109,7 +109,7 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
   return (
     <>
       <div
-        className={clsx("cru-card p-2 clearfix", className)}
+        className={classnames("cru-card p-2 clearfix", className)}
         style={{ zIndex: collapse ? 1029 : 1031 }}
       >
         <div className="float-right d-flex align-items-center">
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostContentView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostContentView.tsx
index 58fae4c7..607b72c9 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostContentView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostContentView.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import clsx from "clsx";
+import classnames from "classnames";
 import { Remarkable } from "remarkable";
 
 import { UiLogicError } from "@/common";
@@ -78,7 +78,7 @@ const ImageView: React.FC<TimelinePostContentViewProps> = (props) => {
         post.timelineName,
         post.id
       )}
-      className={clsx(className, "timeline-content-image")}
+      className={classnames(className, "timeline-content-image")}
       style={style}
     />
   );
@@ -152,7 +152,7 @@ const MarkdownView: React.FC<TimelinePostContentViewProps> = (props) => {
     }
     return (
       <div
-        className={clsx(className, "markdown-container")}
+        className={classnames(className, "markdown-container")}
         style={style}
         dangerouslySetInnerHTML={{
           __html: markdownHtml,
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx
index a474d2f6..db2dc23d 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import clsx from "clsx";
+import classnames from "classnames";
 import { useTranslation } from "react-i18next";
 import { Row, Col, Form } from "react-bootstrap";
 
@@ -213,7 +213,7 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
   return (
     <div
       ref={containerRef}
-      className={clsx("container-fluid bg-light", className)}
+      className={classnames("container-fluid bg-light", className)}
     >
       {showMarkdown ? (
         <MarkdownPostEdit
@@ -266,7 +266,7 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
                 }))}
               >
                 <i
-                  className={clsx(
+                  className={classnames(
                     postKindIconClassNameMap[kind],
                     "icon-button large"
                   )}
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx
index bc7b72ad..d9c45a4c 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx
@@ -1,5 +1,5 @@
 import React, { Fragment } from "react";
-import clsx from "clsx";
+import classnames from "classnames";
 
 import { HttpTimelinePostInfo } from "@/http/timeline";
 
@@ -53,7 +53,7 @@ const TimelinePostListView: React.FC<TimelinePostListViewProps> = (props) => {
   }, [posts]);
 
   return (
-    <div style={style} className={clsx("timeline", className)}>
+    <div style={style} className={classnames("timeline", className)}>
       {groupedPosts.map((group) => {
         return (
           <Fragment key={group.date.toDateString()}>
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
index fd59203a..295ee3b9 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import clsx from "clsx";
+import classnames from "classnames";
 import { Link } from "react-router-dom";
 
 import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
@@ -48,7 +48,7 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
   return (
     <div
       id={`timeline-post-${post.id}`}
-      className={clsx("timeline-item", current && "current", className)}
+      className={classnames("timeline-item", current && "current", className)}
       style={style}
     >
       <TimelineLine center="node" current={current} />
diff --git a/FrontEnd/src/app/views/timeline-common/TimelineTop.tsx b/FrontEnd/src/app/views/timeline-common/TimelineTop.tsx
index 6382d2c5..dabbdf1e 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelineTop.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelineTop.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import clsx from "clsx";
+import classnames from "classnames";
 
 import TimelineLine, { TimelineLineProps } from "./TimelineLine";
 
@@ -17,7 +17,7 @@ const TimelineTop: React.FC<TimelineTopProps> = (props) => {
   return (
     <div
       style={{ ...style, height: height }}
-      className={clsx("timeline-top", className)}
+      className={classnames("timeline-top", className)}
     >
       <TimelineLine {...lineProps} />
     </div>