...

2 files changed, 56 insertions, 17 deletions

diff --git a/FrontEnd/src/views/common/alert/AlertHost.tsx b/FrontEnd/src/views/common/alert/AlertHost.tsx
index 21b9882d..ba6d6a0f 100644
--- a/FrontEnd/src/views/common/alert/AlertHost.tsx
+++ b/FrontEnd/src/views/common/alert/AlertHost.tsx
@@ -1,15 +1,13 @@
 import React from "react";
 import without from "lodash/without";
 import { useTranslation } from "react-i18next";
+import classNames from "classnames";
 
-import {
-  alertService,
-  AlertInfoEx,
-  kAlertHostId,
-  AlertInfo,
-} from "@/services/alert";
+import { alertService, AlertInfoEx, AlertInfo } from "@/services/alert";
 import { convertI18nText } from "@/common";
 
+import "./alert.css";
+
 interface AutoCloseAlertProps {
   alert: AlertInfo;
   close: () => void;
@@ -51,14 +49,29 @@ export const AutoCloseAlert: React.FC<AutoCloseAlertProps> = (props) => {
   };
 
   return (
-    <div className="m-3" onClick={cancelTimer}>
-      {(() => {
-        const { message } = alert;
-        if (typeof message === "function") {
-          const Message = message;
-          return <Message />;
-        } else return convertI18nText(message, t);
-      })()}
+    <div
+      className={classNames(
+        "m-3 cru-alert",
+        "cru-" + (alert.type ?? "primary")
+      )}
+      onClick={cancelTimer}
+    >
+      <div className="cru-alert-content">
+        {(() => {
+          const { message, customMessage } = alert;
+          if (customMessage != null) {
+            return customMessage;
+          } else {
+            return convertI18nText(message, t);
+          }
+        })()}
+      </div>
+      <div className="cru-alert-close-button-container">
+        <i
+          className={classNames("icon-button bi-x cru-alert-close-button")}
+          onClick={close}
+        />
+      </div>
     </div>
   );
 };
@@ -66,8 +79,6 @@ export const AutoCloseAlert: React.FC<AutoCloseAlertProps> = (props) => {
 const AlertHost: React.FC = () => {
   const [alerts, setAlerts] = React.useState<AlertInfoEx[]>([]);
 
-  // react guarantee that state setters are stable, so we don't need to add it to dependency list
-
   React.useEffect(() => {
     const consume = (alert: AlertInfoEx): void => {
       setAlerts((old) => [...old, alert]);
@@ -80,7 +91,7 @@ const AlertHost: React.FC = () => {
   }, []);
 
   return (
-    <div id={kAlertHostId} className="alert-container">
+    <div className="alert-container">
       {alerts.map((alert) => {
         return (
           <AutoCloseAlert
diff --git a/FrontEnd/src/views/common/alert/alert.css b/FrontEnd/src/views/common/alert/alert.css
index 12ce294e..328f5f9b 100644
--- a/FrontEnd/src/views/common/alert/alert.css
+++ b/FrontEnd/src/views/common/alert/alert.css
@@ -2,3 +2,31 @@
   position: fixed;

   z-index: 1040;

 }

+

+.cru-alert {

+  border-radius: 5px;

+  border: var(--cru-theme-color) 1px solid;

+  color: var(--cru-theme-t-color);

+  background-color: var(--cru-theme-r1-color);

+

+  display: flex;

+  overflow: hidden;

+}

+

+.cru-alert-content {

+  padding: 0.5em 2em;

+}

+

+.cru-alert-close-button-container {

+  margin-left: auto;

+  width: 2em;

+  text-align: center;

+  display: flex;

+  align-items: center;

+  justify-content: center;

+  background-color: var(--cru-theme-t-color);

+}

+

+.cru-alert-close-button {

+  color: var(--cru-theme-color);

+}