Pull request #22: Toasts styling

Merge in RED/ui from toasts to master

* commit '25bf78960a019674138c3adf146f60db85c70c3b':
  Toasts styling

apps/red-ui/src/app/app.module.ts

@@ -167,7 +167,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
         MatTabsModule,
         MatButtonToggleModule,
         MatFormFieldModule,
-        ToastrModule.forRoot(),
+        ToastrModule.forRoot({ closeButton: true }),
         MatSelectModule,
         MatSidenavModule,
         FileUploadModule,

apps/red-ui/src/assets/styles/red-theme.scss

@@ -17,3 +17,4 @@
 @import 'red-components';
 @import 'red-controls';
 @import 'red-logo';
+@import 'red-toasts';

apps/red-ui/src/assets/styles/red-toasts.scss

@@ -0,0 +1,67 @@
+@import 'red-variables';
+
+.toast-container .ngx-toastr {
+    padding: 11px 16px;
+    border-radius: 8px;
+    background-image: none;
+    font-family: Inter, sans-serif;
+    font-size: 13px;
+    line-height: 18px;
+    width: 400px;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+    box-shadow: none;
+
+    &:hover {
+        box-shadow: none;
+    }
+}
+
+.toast-close-button {
+    position: initial;
+    opacity: 1;
+    font-weight: 500;
+    font-size: 22px;
+    text-shadow: none;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.toast-warning,
+.toast-success {
+    .toast-message {
+        color: $grey-1;
+    }
+
+    .toast-close-button {
+        color: $grey-1;
+    }
+}
+
+.toast-error,
+.toast-info {
+    .toast-close-button:hover {
+        color: $white;
+    }
+}
+
+.toast-success {
+    background-color: $green-2;
+}
+
+.toast-error {
+    background-color: $red-1;
+}
+
+.toast-warning {
+    background-color: $yellow-2;
+}
+
+.toast-info {
+    background-color: $grey-1;
+}

apps/red-ui/src/assets/styles/red-variables.scss

@@ -15,7 +15,7 @@ $blue-3: #5b97db;
 $blue-4: #374c81;
 $red-1: #dd4d50;
 $yellow-1: #ffb83b;
-$yellow-2: #ffff02;
+$yellow-2: #fdbd00;
 $green-1: #00ff00;
 $green-2: #5ce594;
 $orange-1: #ff801a;