From 4a6d8c606fab0215065ce65d2f105fafd8db7169 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 31 Aug 2023 02:19:01 +0800
Subject: ...

---
 FrontEnd/src/components/alert/AlertHost.tsx   |  9 +++--
 FrontEnd/src/components/alert/AlertService.ts |  7 +++-
 FrontEnd/src/components/alert/alert.css       |  7 ++--
 FrontEnd/src/pages/setting/index.tsx          | 54 ++++++++++++++-------------
 4 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/FrontEnd/src/components/alert/AlertHost.tsx b/FrontEnd/src/components/alert/AlertHost.tsx
index 23f62472..59f8f27c 100644
--- a/FrontEnd/src/components/alert/AlertHost.tsx
+++ b/FrontEnd/src/components/alert/AlertHost.tsx
@@ -46,11 +46,14 @@ export default function AlertHost() {
   const [alerts, setAlerts] = useState<AlertInfoWithId[]>([]);
 
   useEffect(() => {
-    alertService.registerListener(setAlerts);
+    const listener = (alerts: AlertInfoWithId[]) => {
+      setAlerts(alerts);
+    };
+
+    alertService.registerListener(listener);
 
     return () => {
-      alertService.unregisterListener(setAlerts);
-      alert;
+      alertService.unregisterListener(listener);
     };
   }, []);
 
diff --git a/FrontEnd/src/components/alert/AlertService.ts b/FrontEnd/src/components/alert/AlertService.ts
index b3565b8a..b9cda752 100644
--- a/FrontEnd/src/components/alert/AlertService.ts
+++ b/FrontEnd/src/components/alert/AlertService.ts
@@ -1,5 +1,7 @@
 import { ThemeColor, Text } from "../common";
 
+const defaultDismissTime = 5000;
+
 export interface AlertInfo {
   color?: ThemeColor;
   message: Text;
@@ -50,7 +52,7 @@ export class AlertService {
       timerId: null,
     };
 
-    this.alerts.push(newAlert);
+    this.alerts = [...this.alerts, newAlert];
     this._resetDismissTimer(newAlert);
 
     this.notify();
@@ -91,7 +93,8 @@ export class AlertService {
   ) {
     this._clearDismissTimer(alert);
 
-    const realDismissTime = dismissTime ?? alert.dismissTime;
+    const realDismissTime =
+      dismissTime ?? alert.dismissTime ?? defaultDismissTime;
 
     if (typeof realDismissTime === "number") {
       alert.timerId = window.setTimeout(() => {
diff --git a/FrontEnd/src/components/alert/alert.css b/FrontEnd/src/components/alert/alert.css
index 063af933..948256de 100644
--- a/FrontEnd/src/components/alert/alert.css
+++ b/FrontEnd/src/components/alert/alert.css
@@ -5,18 +5,17 @@
 
 .cru-alert {
   border-radius: 5px;
-  border: var(--cru-theme-color) 1px solid;
+  border: var(--cru-theme-color) 2px solid;
   color: var(--cru-text-primary-color);
   background-color: var(--cru-container-background-color);
 
-  padding: 0.5em 2em;
+  margin: 1em;
+  padding: 0.5em 1em;
 
   display: flex;
   align-items: center;
 }
 
-.cru-alert-message {}
-
 .cru-alert-close-button {
   margin-left: auto;
 }
\ No newline at end of file
diff --git a/FrontEnd/src/pages/setting/index.tsx b/FrontEnd/src/pages/setting/index.tsx
index 25434339..88ab5cb2 100644
--- a/FrontEnd/src/pages/setting/index.tsx
+++ b/FrontEnd/src/pages/setting/index.tsx
@@ -176,34 +176,36 @@ function RegisterCodeSettingItem() {
   }, [user, registerCode]);
 
   return (
-    <SettingItemContainer
-      title="settings.myRegisterCode"
-      description="settings.myRegisterCodeDesc"
-      className="register-code-setting-item"
-      onClick={createDialogSwitch("confirm")}
-    >
-      {registerCode === undefined ? (
-        <Spinner />
-      ) : registerCode === null ? (
-        <span>Noop</span>
-      ) : (
-        <code
-          className="register-code"
-          onClick={(event) => {
-            void navigator.clipboard.writeText(registerCode).then(() => {
-              pushAlert({
-                color: "create",
-                message: "settings.myRegisterCodeCopied",
+    <>
+      <SettingItemContainer
+        title="settings.myRegisterCode"
+        description="settings.myRegisterCodeDesc"
+        className="register-code-setting-item"
+        onClick={createDialogSwitch("confirm")}
+      >
+        {registerCode === undefined ? (
+          <Spinner />
+        ) : registerCode === null ? (
+          <span>Noop</span>
+        ) : (
+          <code
+            className="register-code"
+            onClick={(event) => {
+              void navigator.clipboard.writeText(registerCode).then(() => {
+                pushAlert({
+                  color: "create",
+                  message: "settings.myRegisterCodeCopied",
+                });
               });
-            });
-            event.stopPropagation();
-          }}
-        >
-          {registerCode}
-        </code>
-      )}
+              event.stopPropagation();
+            }}
+          >
+            {registerCode}
+          </code>
+        )}
+      </SettingItemContainer>
       <DialogProvider controller={controller} />
-    </SettingItemContainer>
+    </>
   );
 }
 
-- 
cgit v1.2.3