Make error message toasts more visually distinct

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;
+}

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) {