Make error message toasts more visually distinct

diff --git a/src-ui/src/app/components/common/toasts/toasts.component.scss b/src-ui/src/app/components/common/toasts/toasts.component.scss
index e6dcb7a5702df611e207e38ad09e93f4e05edfa1..52f8f89579220b680223a7e2b42a53ab3f30b69c 100644 (file)
--- a/src-ui/src/app/components/common/toasts/toasts.component.scss
+++ b/src-ui/src/app/components/common/toasts/toasts.component.scss
@@ -9,3 +9,14 @@
 .toast:not(.show) {
   display: block; // this corrects an ng-bootstrap bug that prevented animations
 }
+
+::ng-deep .toast.error .toast-header {
+  background-color: hsla(350, 79%, 40%, 0.8); // bg-danger
+  border-color: black;
+}
+
+::ng-deep .toast.error .toast-body {
+  background-color: hsla(350, 79%, 40%, 0.8); // bg-danger
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+}

diff --git a/src-ui/src/app/services/toast.service.ts b/src-ui/src/app/services/toast.service.ts
index 7c35b624cea65fd1768257dd6e7aded41a162971..6bd1158bc1961382627c766788c57f5880f0ebd0 100644 (file)
--- a/src-ui/src/app/services/toast.service.ts
+++ b/src-ui/src/app/services/toast.service.ts
@@ -11,6 +11,8 @@ export interface Toast {
   action?: any
 
   actionName?: string
+
+  classname?: string
 }
 
 @Injectable({
@@ -29,7 +31,12 @@ export class ToastService {
   }
 
   showError(content: string, delay: number = 10000) {
-    this.show({ title: $localize`Error`, content: content, delay: delay })
+    this.show({
+      title: $localize`Error`,
+      content: content,
+      delay: delay,
+      classname: 'error',
+    })
   }
 
   showInfo(content: string, delay: number = 5000) {