From 12707ddbbcbd94ec4e5d223c9d3007bf5fb93ce2 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 10 Nov 2023 12:27:31 -0800
Subject: [PATCH] Updated styling with icon

---
 .../common/toasts/toasts.component.html       | 58 ++++++++++---------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/src-ui/src/app/components/common/toasts/toasts.component.html b/src-ui/src/app/components/common/toasts/toasts.component.html
index 82adc6d25..2372911ae 100644
--- a/src-ui/src/app/components/common/toasts/toasts.component.html
+++ b/src-ui/src/app/components/common/toasts/toasts.component.html
@@ -5,33 +5,39 @@
   [class.mb-2]="true"
   (shown)="onShow(toast)"
   (hidden)="toastService.closeToast(toast)">
-  <ngb-progressbar class="position-absolute h-100 w-100 top-90 start-0 bottom-0 end-0 pointer-events-none" type="dark" [max]="toast.delay" [value]="toast.delayRemaining"></ngb-progressbar>
+  <ngb-progressbar class="position-absolute h-100 w-100 top-90 start-0 bottom-0 end-0 pe-none" type="dark" [max]="toast.delay" [value]="toast.delayRemaining"></ngb-progressbar>
   <span class="visually-hidden">{{ toast.delayRemaining / 1000 | number: '1.0-0' }} seconds</span>
-  <div class="d-flex">
-    <p class="mb-0">{{toast.content}}</p>
-    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close" (click)="toastService.closeToast(toast);"></button>
-  </div>
-  <details *ngIf="toast.error">
-    <div class="p-3">
-      <dl class="row" *ngIf="isDetailedError(toast.error)">
-        <dt class="col-sm-3 fw-normal text-end">URL</dt>
-        <dd class="col-sm-9">{{ toast.error.url }}</dd>
-        <dt class="col-sm-3 fw-normal text-end" i18n>Status</dt>
-        <dd class="col-sm-9">{{ toast.error.status }} <em>{{ toast.error.statusText }}</em></dd>
-        <dt class="col-sm-3 fw-normal text-end" i18n>Error</dt>
-        <dd class="col-sm-9">{{ getErrorText(toast.error) }}</dd>
-      </dl>
-      <div class="row">
-        <div class="col offset-sm-3">
-          <button class="btn btn-sm btn-outline-dark" (click)="copyError(toast.error)">
-            <svg class="sidebaricon" fill="currentColor">
-              <use *ngIf="!copied" xlink:href="assets/bootstrap-icons.svg#clipboard" />
-              <use *ngIf="copied" xlink:href="assets/bootstrap-icons.svg#clipboard-check" />
-            </svg>&nbsp;<ng-container i18n>Copy Raw Error</ng-container>
-          </button>
+  <div class="d-flex align-items-top">
+    <svg class="sidebaricon-sm mt-1 me-2 flex-shrink-0" fill="currentColor">
+      <use *ngIf="!toast.error" xlink:href="assets/bootstrap-icons.svg#info-circle"/>
+      <use *ngIf="toast.error" xlink:href="assets/bootstrap-icons.svg#exclamation-triangle"/>
+    </svg>
+    <div>
+      <p class="mb-0">{{toast.content}}</p>
+      <details *ngIf="toast.error">
+        <div class="mt-2">
+          <dl class="row mb-0" *ngIf="isDetailedError(toast.error)">
+            <dt class="col-sm-3 fw-normal text-end">URL</dt>
+            <dd class="col-sm-9">{{ toast.error.url }}</dd>
+            <dt class="col-sm-3 fw-normal text-end" i18n>Status</dt>
+            <dd class="col-sm-9">{{ toast.error.status }} <em>{{ toast.error.statusText }}</em></dd>
+            <dt class="col-sm-3 fw-normal text-end" i18n>Error</dt>
+            <dd class="col-sm-9">{{ getErrorText(toast.error) }}</dd>
+          </dl>
+          <div class="row">
+            <div class="col offset-sm-3">
+              <button class="btn btn-sm btn-outline-dark" (click)="copyError(toast.error)">
+                <svg class="sidebaricon" fill="currentColor">
+                  <use *ngIf="!copied" xlink:href="assets/bootstrap-icons.svg#clipboard" />
+                  <use *ngIf="copied" xlink:href="assets/bootstrap-icons.svg#clipboard-check" />
+                </svg>&nbsp;<ng-container i18n>Copy Raw Error</ng-container>
+              </button>
+            </div>
+          </div>
         </div>
-      </div>
+      </details>
+      <p class="mb-0 mt-2" *ngIf="toast.action"><button class="btn btn-sm btn-outline-secondary" (click)="toastService.closeToast(toast); toast.action()">{{toast.actionName}}</button></p>
     </div>
-  </details>
-  <p class="mb-0 mt-2" *ngIf="toast.action"><button class="btn btn-sm btn-outline-secondary" (click)="toastService.closeToast(toast); toast.action()">{{toast.actionName}}</button></p>
+    <button type="button" class="btn-close ms-auto flex-shrink-0" data-bs-dismiss="toast" aria-label="Close" (click)="toastService.closeToast(toast);"></button>
+  </div>
 </ngb-toast>