...

13 files changed, 63 insertions, 44 deletions

diff --git a/FrontEnd/src/pages/timeline/TimelineCard.tsx b/FrontEnd/src/pages/timeline/TimelineCard.tsx
index cdc8a5a7..b287c620 100644
--- a/FrontEnd/src/pages/timeline/TimelineCard.tsx
+++ b/FrontEnd/src/pages/timeline/TimelineCard.tsx
@@ -47,7 +47,7 @@ export default function TimelineCard(props: TimelinePageCardProps) {
   ]);
 
   const content = (
-    <div className="cru-primary">
+    <div>
       <h3 className="timeline-card-title">
         {timeline.title}
         <small className="timeline-card-title-name">{timeline.nameV2}</small>
@@ -123,6 +123,7 @@ export default function TimelineCard(props: TimelinePageCardProps) {
 
   return (
     <Card
+      color="secondary"
       className={`timeline-card timeline-card-${
         collapse ? "collapse" : "expand"
       }`}
diff --git a/FrontEnd/src/pages/timeline/TimelineDeleteDialog.tsx b/FrontEnd/src/pages/timeline/TimelineDeleteDialog.tsx
index 0a5a2491..7d7b9527 100644
--- a/FrontEnd/src/pages/timeline/TimelineDeleteDialog.tsx
+++ b/FrontEnd/src/pages/timeline/TimelineDeleteDialog.tsx
@@ -23,14 +23,14 @@ const TimelineDeleteDialog: React.FC<TimelineDeleteDialog> = (props) => {
       onClose={props.onClose}
       title="timeline.deleteDialog.title"
       color="danger"
-      inputPrompt={() => (
+      inputPromptNode={
         <Trans
           i18nKey="timeline.deleteDialog.inputPrompt"
           values={{ name: timeline.nameV2 }}
         >
           0<code className="mx-2">1</code>2
         </Trans>
-      )}
+      }
       inputs={{
         inputs: [
           {
diff --git a/FrontEnd/src/pages/timeline/TimelinePostContentView.tsx b/FrontEnd/src/pages/timeline/TimelinePostContentView.tsx
index 41080e10..ad5465c1 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostContentView.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePostContentView.tsx
@@ -40,7 +40,7 @@ const TextView: React.FC<TimelinePostContentViewProps> = (props) => {
               setError("error");
             }
           }
-        }
+        },
       );
 
     return () => {
@@ -77,7 +77,7 @@ const ImageView: React.FC<TimelinePostContentViewProps> = (props) => {
       src={getHttpTimelineClient().generatePostDataUrl(
         post.timelineOwnerV2,
         post.timelineNameV2,
-        post.id
+        post.id,
       )}
       className={classnames(className, "timeline-content-image")}
       style={style}
@@ -113,7 +113,7 @@ const MarkdownView: React.FC<TimelinePostContentViewProps> = (props) => {
               setError("error");
             }
           }
-        }
+        },
       );
 
     return () => {
@@ -123,7 +123,10 @@ const MarkdownView: React.FC<TimelinePostContentViewProps> = (props) => {
 
   const markdownHtml = React.useMemo<string | null>(() => {
     if (markdown == null) return null;
-    return marked.parse(markdown);
+    return marked.parse(markdown, {
+      mangle: false,
+      headerIds: false,
+    });
   }, [markdown]);
 
   if (error != null) {
@@ -168,7 +171,7 @@ const viewMap: Record<string, React.FC<TimelinePostContentViewProps>> = {
 };
 
 const TimelinePostContentView: React.FC<TimelinePostContentViewProps> = (
-  props
+  props,
 ) => {
   const { post, className, style } = props;
 
diff --git a/FrontEnd/src/services/TimelinePostBuilder.ts b/FrontEnd/src/services/TimelinePostBuilder.ts
index 83d63abe..0440e136 100644
--- a/FrontEnd/src/services/TimelinePostBuilder.ts
+++ b/FrontEnd/src/services/TimelinePostBuilder.ts
@@ -96,7 +96,10 @@ export default class TimelinePostBuilder {
   }
 
   renderHtml(): string {
-    return marked.parse(this._text);
+    return marked.parse(this._text, {
+      mangle: false,
+      headerIds: false,
+    });
   }
 
   dispose(): void {
diff --git a/FrontEnd/src/views/common/Card.css b/FrontEnd/src/views/common/Card.css
index f4cdc31c..c677abd7 100644
--- a/FrontEnd/src/views/common/Card.css
+++ b/FrontEnd/src/views/common/Card.css
@@ -1,7 +1,5 @@
 .cru-card {

-  border: solid 1px;

   border-radius: var(--cru-card-border-radius);

   background-color: var(--cru-key-container-color);

-  border-color: var(--cru-key-container-color);

   transition: all 0.3s;

-}

+}
\ No newline at end of file
diff --git a/FrontEnd/src/views/common/Card.tsx b/FrontEnd/src/views/common/Card.tsx
index 35e605af..381e58e7 100644
--- a/FrontEnd/src/views/common/Card.tsx
+++ b/FrontEnd/src/views/common/Card.tsx
@@ -16,11 +16,10 @@ export default function Card({
   containerRef,
   ...otherProps
 }: CardProps) {
-  color = color ?? "primary";
   return (
     <div
       ref={containerRef}
-      className={classNames("cru-card", `cru-${color}`, className)}
+      className={classNames("cru-card", color && `cru-${color}`, className)}
       {...otherProps}
     >
       {children}
diff --git a/FrontEnd/src/views/common/Icon.tsx b/FrontEnd/src/views/common/Icon.tsx
index c91d514b..2ac3a7ca 100644
--- a/FrontEnd/src/views/common/Icon.tsx
+++ b/FrontEnd/src/views/common/Icon.tsx
@@ -14,13 +14,14 @@ interface IconButtonProps extends ComponentPropsWithoutRef<"i"> {
 export default function Icon(props: IconButtonProps) {
   const { icon, color, size, style, className, ...otherProps } = props;
 
-  const colorName = color === "on-surface" ? "surface-on" : color ?? "primary";
+  const colorName = color === "on-surface" ? "surface-on" : color;
 
   return (
     <i
       style={size != null ? { ...style, fontSize: size } : style}
       className={classNames(
-        `bi-${icon} cru-${colorName}-color cru-icon`,
+        colorName && `cru-${colorName}`,
+        `bi-${icon} cru-icon`,
         className,
       )}
       {...otherProps}
diff --git a/FrontEnd/src/views/common/Spinner.tsx b/FrontEnd/src/views/common/Spinner.tsx
index e99a9d1b..ec0c2c35 100644
--- a/FrontEnd/src/views/common/Spinner.tsx
+++ b/FrontEnd/src/views/common/Spinner.tsx
@@ -1,20 +1,18 @@
-import * as React from "react";
+import { CSSProperties } from "react";
 import classnames from "classnames";
 
-import { PaletteColorType } from "@/palette";
+import { ThemeColor } from "./common";
 
 import "./Spinner.css";
 
 export interface SpinnerProps {
   size?: "sm" | "md" | "lg" | number | string;
-  color?: PaletteColorType;
+  color?: ThemeColor;
   className?: string;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
 }
 
-export default function Spinner(
-  props: SpinnerProps
-): React.ReactElement | null {
+export default function Spinner(props: SpinnerProps) {
   const { size, color, className, style } = props;
   const calculatedSize =
     size === "sm"
@@ -28,15 +26,10 @@ export default function Spinner(
       : size == null
       ? "20px"
       : size;
-  const calculatedColor = color ?? "primary";
 
   return (
     <span
-      className={classnames(
-        "cru-spinner",
-        `cru-color-${calculatedColor}`,
-        className
-      )}
+      className={classnames("cru-spinner", color && `cru-${color}`, className)}
       style={{ width: calculatedSize, height: calculatedSize, ...style }}
     />
   );
diff --git a/FrontEnd/src/views/common/button/Button.tsx b/FrontEnd/src/views/common/button/Button.tsx
index 0f1bbf2b..e01023c0 100644
--- a/FrontEnd/src/views/common/button/Button.tsx
+++ b/FrontEnd/src/views/common/button/Button.tsx
@@ -33,7 +33,7 @@ export default function Button(props: ButtonProps) {
     <button
       ref={buttonRef}
       className={classNames(
-        "cru-" + (color ?? "primary"),
+        color && `cru-${color}`,
         "cru-button",
         outline && "outline",
         className,
diff --git a/FrontEnd/src/views/common/button/FlatButton.tsx b/FrontEnd/src/views/common/button/FlatButton.tsx
index ed01f613..15b21224 100644
--- a/FrontEnd/src/views/common/button/FlatButton.tsx
+++ b/FrontEnd/src/views/common/button/FlatButton.tsx
@@ -24,7 +24,7 @@ export default function FlatButton(props: FlatButtonProps) {
     <button
       ref={buttonRef}
       className={classNames(
-        "cru-" + (color ?? "primary"),
+        color && `cru-${color}`,
         "cru-flat-button",
         className,
       )}
diff --git a/FrontEnd/src/views/common/button/IconButton.tsx b/FrontEnd/src/views/common/button/IconButton.tsx
index ac746a7b..2d7e86e5 100644
--- a/FrontEnd/src/views/common/button/IconButton.tsx
+++ b/FrontEnd/src/views/common/button/IconButton.tsx
@@ -20,11 +20,7 @@ export default function IconButton(props: IconButtonProps) {
         "cru-icon-button",
         large && "large",
         "bi-" + icon,
-        color === "on-surface"
-          ? "on-surface"
-          : color != null
-          ? "cru-" + color
-          : "cru-primary",
+        color && (color === "on-surface" ? "on-surface" : `cru-${color}`),
         className,
       )}
       {...otherProps}
diff --git a/FrontEnd/src/views/common/button/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx
index bfa5b6b8..441abbbd 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.tsx
+++ b/FrontEnd/src/views/common/button/LoadingButton.tsx
@@ -26,7 +26,8 @@ export default function LoadingButton(props: LoadingButtonProps) {
     <button
       disabled={disabled || loading}
       className={classNames(
-        `cru-${color ?? "primary"} cru-button outline cru-loading-button`,
+        color && `cru-${color}`,
+        "cru-button outline cru-loading-button",
         className,
       )}
       {...otherProps}
diff --git a/FrontEnd/src/views/common/dialog/OperationDialog.tsx b/FrontEnd/src/views/common/dialog/OperationDialog.tsx
index de92e541..4335b2b0 100644
--- a/FrontEnd/src/views/common/dialog/OperationDialog.tsx
+++ b/FrontEnd/src/views/common/dialog/OperationDialog.tsx
@@ -19,19 +19,20 @@ export type { InputInitializer, InputValueDict, InputErrorDict };
 
 interface OperationDialogPromptProps {
   message?: Text;
-  customMessage?: ReactNode;
+  customMessage?: Text;
+  customMessageNode?: ReactNode;
   className?: string;
 }
 
 function OperationDialogPrompt(props: OperationDialogPromptProps) {
-  const { message, customMessage, className } = props;
+  const { message, customMessage, customMessageNode, className } = props;
 
   const c = useC();
 
   return (
     <div className={classNames(className, "cru-operation-dialog-prompt")}>
       {message && <p>{c(message)}</p>}
-      {customMessage}
+      {customMessageNode ?? (customMessage != null ? c(customMessage) : null)}
     </div>
   );
 }
@@ -43,9 +44,12 @@ export interface OperationDialogProps<TData> {
   color?: ThemeColor;
   inputColor?: ThemeColor;
   title: Text;
-  inputPrompt?: () => ReactNode;
-  successPrompt?: (data: TData) => ReactNode;
-  failurePrompt?: (error: unknown) => ReactNode;
+  inputPrompt?: Text;
+  inputPromptNode?: ReactNode;
+  successPrompt?: (data: TData) => Text;
+  successPromptNode?: (data: TData) => ReactNode;
+  failurePrompt?: (error: unknown) => Text;
+  failurePromptNode?: (error: unknown) => ReactNode;
 
   inputs: InputInitializer;
 
@@ -61,13 +65,28 @@ function OperationDialog<TData>(props: OperationDialogProps<TData>) {
     inputColor,
     title,
     inputPrompt,
+    inputPromptNode,
     successPrompt,
+    successPromptNode,
     failurePrompt,
+    failurePromptNode,
     inputs,
     onProcess,
     onSuccessAndClose,
   } = props;
 
+  if (process.env.NODE_ENV === "development") {
+    if (inputPrompt && inputPromptNode) {
+      console.log("InputPrompt and inputPromptNode are both set.");
+    }
+    if (successPrompt && successPromptNode) {
+      console.log("SuccessPrompt and successPromptNode are both set.");
+    }
+    if (failurePrompt && failurePromptNode) {
+      console.log("FailurePrompt and failurePromptNode are both set.");
+    }
+  }
+
   type Step =
     | { type: "input" }
     | { type: "process" }
@@ -128,7 +147,10 @@ function OperationDialog<TData>(props: OperationDialogProps<TData>) {
 
     body = (
       <div>
-        <OperationDialogPrompt customMessage={inputPrompt?.()} />
+        <OperationDialogPrompt
+          customMessage={inputPrompt}
+          customMessageNode={inputPromptNode}
+        />
         <InputGroup
           containerClassName="cru-operation-dialog-input-group"
           color={inputColor ?? "primary"}
@@ -168,10 +190,12 @@ function OperationDialog<TData>(props: OperationDialogProps<TData>) {
         ? {
             message: "operationDialog.success",
             customMessage: successPrompt?.(result.data),
+            customMessageNode: successPromptNode?.(result.data),
           }
         : {
             message: "operationDialog.error",
             customMessage: failurePrompt?.(result.data),
+            customMessageNode: failurePromptNode?.(result.data),
           };
     body = (
       <div>