...

3 files changed, 14 insertions, 9 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