...

6 files changed, 36 insertions, 34 deletions

diff --git a/FrontEnd/src/views/timeline/CollapseButton.tsx b/FrontEnd/src/views/timeline/CollapseButton.tsx
index 31976228..b8d06916 100644
--- a/FrontEnd/src/views/timeline/CollapseButton.tsx
+++ b/FrontEnd/src/views/timeline/CollapseButton.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import classnames from "classnames";
+
+import IconButton from "../common/button/IconButton";
 
 const CollapseButton: React.FC<{
   collapse: boolean;
@@ -8,13 +9,10 @@ const CollapseButton: React.FC<{
   style?: React.CSSProperties;
 }> = ({ collapse, onClick, className, style }) => {
   return (
-    <i
+    <IconButton
+      icon={collapse ? "arrows-angle-expand" : "arrows-angle-contract"}
       onClick={onClick}
-      className={classnames(
-        collapse ? "bi-arrows-angle-expand" : "bi-arrows-angle-contract",
-        "cru-color-primary icon-button",
-        className
-      )}
+      className={className}
       style={style}
     />
   );
diff --git a/FrontEnd/src/views/timeline/MarkdownPostEdit.tsx b/FrontEnd/src/views/timeline/MarkdownPostEdit.tsx
index 35a2bbf5..9ab40e54 100644
--- a/FrontEnd/src/views/timeline/MarkdownPostEdit.tsx
+++ b/FrontEnd/src/views/timeline/MarkdownPostEdit.tsx
@@ -10,6 +10,7 @@ import FlatButton from "../common/button/FlatButton";
 import TabPages from "../common/tab/TabPages";
 import ConfirmDialog from "../common/dailog/ConfirmDialog";
 import Spinner from "../common/Spinner";
+import IconButton from "../common/button/IconButton";
 
 import "./MarkdownPostEdit.css";
 
@@ -113,8 +114,11 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
             <Spinner />
           ) : (
             <div>
-              <i
-                className="icon-button large bi-x cru-color-danger cru-align-middle me-2"
+              <IconButton
+                icon="x"
+                color="danger"
+                large
+                className="cru-align-middle me-2"
                 onClick={() => {
                   if (canLeave) {
                     onClose();
@@ -158,9 +162,11 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
                       src={image.url}
                       className="timeline-markdown-post-edit-image"
                     />
-                    <i
+                    <IconButton
+                      icon="trash"
+                      color="danger"
                       className={classnames(
-                        "bi-trash text-danger icon-button timeline-markdown-post-edit-image-delete-button",
+                        "timeline-markdown-post-edit-image-delete-button",
                         process && "d-none"
                       )}
                       onClick={() => {
diff --git a/FrontEnd/src/views/timeline/TimelineCard.tsx b/FrontEnd/src/views/timeline/TimelineCard.tsx
index d258dc75..b1146ad5 100644
--- a/FrontEnd/src/views/timeline/TimelineCard.tsx
+++ b/FrontEnd/src/views/timeline/TimelineCard.tsx
@@ -19,6 +19,7 @@ import ConnectionStatusBadge from "./ConnectionStatusBadge";
 import CollapseButton from "./CollapseButton";
 import { TimelineMemberDialog } from "./TimelineMember";
 import TimelinePropertyChangeDialog from "./TimelinePropertyChangeDialog";
+import IconButton from "../common/button/IconButton";
 
 export interface TimelinePageCardProps {
   timeline: HttpTimelineInfo;
@@ -67,11 +68,9 @@ const TimelineCard: React.FC<TimelinePageCardProps> = (props) => {
       </small>
       <div className="mt-2 cru-text-end">
         {user != null ? (
-          <i
-            className={classnames(
-              timeline.isBookmark ? "bi-bookmark-fill" : "bi-bookmark",
-              "icon-button cru-color-primary me-3"
-            )}
+          <IconButton
+            icon={timeline.isBookmark ? "bookmark-fill" : "bookmark"}
+            className="me-3"
             onClick={() => {
               getHttpBookmarkClient()
                 [timeline.isBookmark ? "delete" : "post"](
@@ -90,8 +89,9 @@ const TimelineCard: React.FC<TimelinePageCardProps> = (props) => {
             }}
           />
         ) : null}
-        <i
-          className={"icon-button bi-people cru-color-primary me-3"}
+        <IconButton
+          icon="people"
+          className="me-3"
           onClick={() => setDialog("member")}
         />
         {timeline.manageable ? (
@@ -112,7 +112,7 @@ const TimelineCard: React.FC<TimelinePageCardProps> = (props) => {
             ]}
             containerClassName="d-inline"
           >
-            <i className="icon-button bi-three-dots-vertical cru-color-primary" />
+            <IconButton icon="three-dots-vertical" />
           </PopupMenu>
         ) : null}
       </div>
diff --git a/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx b/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx
index 5b57b0c4..3a339622 100644
--- a/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx
+++ b/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx
@@ -27,7 +27,7 @@ const TimelineDeleteDialog: React.FC<TimelineDeleteDialog> = (props) => {
         return (
           <Trans
             i18nKey="timeline.deleteDialog.inputPrompt"
-            values={[{ name: timeline.nameV2 }]}
+            values={{ name: timeline.nameV2 }}
           >
             0<code className="mx-2">1</code>2
           </Trans>
diff --git a/FrontEnd/src/views/timeline/TimelinePostEdit.tsx b/FrontEnd/src/views/timeline/TimelinePostEdit.tsx
index 3b42f38d..f1c5b22c 100644
--- a/FrontEnd/src/views/timeline/TimelinePostEdit.tsx
+++ b/FrontEnd/src/views/timeline/TimelinePostEdit.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import classnames from "classnames";
 import { useTranslation } from "react-i18next";
 
 import { UiLogicError } from "@/common";
@@ -20,6 +19,7 @@ import LoadingButton from "../common/button/LoadingButton";
 import PopupMenu from "../common/menu/PopupMenu";
 import MarkdownPostEdit from "./MarkdownPostEdit";
 import TimelinePostEditCard from "./TimelinePostEditCard";
+import IconButton from "../common/button/IconButton";
 
 import "./TimelinePostEdit.css";
 
@@ -104,10 +104,10 @@ const TimelinePostEditImage: React.FC<TimelinePostEditImageProps> = (props) => {
 
 type PostKind = "text" | "markdown" | "image";
 
-const postKindIconClassNameMap: Record<PostKind, string> = {
-  text: "bi-fonts",
-  markdown: "bi-markdown",
-  image: "bi-image",
+const postKindIconMap: Record<PostKind, string> = {
+  text: "fonts",
+  markdown: "markdown",
+  image: "image",
 };
 
 export interface TimelinePostEditProps {
@@ -237,7 +237,7 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
                 items={(["text", "image", "markdown"] as const).map((kind) => ({
                   type: "button",
                   text: `timeline.post.type.${kind}`,
-                  iconClassName: postKindIconClassNameMap[kind],
+                  iconClassName: postKindIconMap[kind],
                   onClick: () => {
                     if (kind === "markdown") {
                       setShowMarkdown(true);
@@ -247,12 +247,7 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
                   },
                 }))}
               >
-                <i
-                  className={classnames(
-                    postKindIconClassNameMap[kind],
-                    "icon-button large"
-                  )}
-                />
+                <IconButton large icon={postKindIconMap[kind]} />
               </PopupMenu>
             </div>
             <LoadingButton
diff --git a/FrontEnd/src/views/timeline/TimelinePostView.tsx b/FrontEnd/src/views/timeline/TimelinePostView.tsx
index 8a4da9ab..ca6ee2c5 100644
--- a/FrontEnd/src/views/timeline/TimelinePostView.tsx
+++ b/FrontEnd/src/views/timeline/TimelinePostView.tsx
@@ -14,6 +14,7 @@ import ConfirmDialog from "../common/dailog/ConfirmDialog";
 import TimelineLine from "./TimelineLine";
 import TimelinePostContentView from "./TimelinePostContentView";
 import PostPropertyChangeDialog from "./PostPropertyChangeDialog";
+import IconButton from "../common/button/IconButton";
 
 export interface TimelinePostViewProps {
   post: HttpTimelinePostInfo;
@@ -70,8 +71,10 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
         style={cardStyle}
       >
         {post.editable ? (
-          <i
-            className="bi-chevron-down icon-button primary-enhance cru-float-right"
+          <IconButton
+            icon="chevron-down"
+            color="primary-enhance"
+            className="cru-float-right"
             onClick={(e) => {
               setOperationMaskVisible(true);
               e.stopPropagation();