refactor: replace clsx with classnames.

9 files changed, 22 insertions, 22 deletions

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>