9 files changed, 47 insertions, 35 deletions
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>