Feature: compact toasts (#4545)

src-ui/src/app/components/common/toasts/toasts.component.scss

@@ -2,7 +2,7 @@
   position: fixed;
   top: 0;
   right: 0;
-  margin: 0.5em;
+  margin: 0.3em;
   z-index: 1200;
 }
 
@@ -10,13 +10,23 @@
   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-body {
+  position: relative;
+}
+
+::ng-deep .toast.error {
+  border-color: hsla(350, 79%, 40%, 0.4); // bg-danger
 }
 
 ::ng-deep .toast.error .toast-body {
   background-color: hsla(350, 79%, 40%, 0.8); // bg-danger
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
 }
+
+.progress {
+  background-color: var(--pngx-primary);
+  opacity: .07;
+}