From b96a6a52337d5a5ba3ba32c0d5ce03d52b261102 Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Thu, 2 Jan 2025 10:19:21 +0000
Subject: [PATCH] Change border color for warning callout; change icon for
 error callouts

---
 .../app/components/callout/callout.component.html   |  3 +--
 .../app/components/callout/callout.component.scss   | 13 ++++++-------
 .../consent-dialog/consent-dialog.component.scss    |  2 +-
 modules/ui/src/app/model/callout-type.ts            |  3 +--
 .../general-settings.component.html                 |  2 +-
 .../testrun-table/testrun-table.component.html      |  2 +-
 6 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/modules/ui/src/app/components/callout/callout.component.html b/modules/ui/src/app/components/callout/callout.component.html
index e346bc4dd..918dc0c16 100644
--- a/modules/ui/src/app/components/callout/callout.component.html
+++ b/modules/ui/src/app/components/callout/callout.component.html
@@ -17,8 +17,7 @@
   <mat-icon
     *ngIf="type() !== CalloutType.InfoPilot"
     class="callout-icon"
-    fontSet="material-icons-outlined"
-    color="primary">
+    fontSet="material-symbols-outlined">
     {{ type() }}
   </mat-icon>
   <span
diff --git a/modules/ui/src/app/components/callout/callout.component.scss b/modules/ui/src/app/components/callout/callout.component.scss
index cb5a9131b..2909b26f3 100644
--- a/modules/ui/src/app/components/callout/callout.component.scss
+++ b/modules/ui/src/app/components/callout/callout.component.scss
@@ -33,30 +33,29 @@
 }
 
 .check_circle {
-  border-color: colors.$on-tertiary-container;
   color: colors.$on-tertiary-container;
   background-color: rgba(20, 108, 46, 0.1);
 }
 
 .info {
-  border-color: colors.$primary;
   color: colors.$primary;
   background-color: rgba(127, 207, 255, 0.16);
 }
 
-.error,
-.error_outline {
-  border-color: colors.$on-error-container;
+.error {
   color: colors.$on-error-container;
   background-color: rgba(179, 38, 30, 0.1);
 }
 
-.warning_amber {
-  border-color: colors.$orange-60;
+.warning {
   color: colors.$orange-40;
   background-color: colors.$orange-98;
 }
 
+.warning .callout-border {
+  color: colors.$orange-60;
+}
+
 .callout-container {
   position: relative;
   overflow: hidden;
diff --git a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.scss b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.scss
index 12caa7726..c03a57e0f 100644
--- a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.scss
+++ b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.scss
@@ -36,7 +36,7 @@
   align-items: start !important;
 
   &.check_circle,
-  &.warning_amber {
+  &.warning {
     padding-top: 16px;
   }
 }
diff --git a/modules/ui/src/app/model/callout-type.ts b/modules/ui/src/app/model/callout-type.ts
index c8f86d1c4..2e2707066 100644
--- a/modules/ui/src/app/model/callout-type.ts
+++ b/modules/ui/src/app/model/callout-type.ts
@@ -17,7 +17,6 @@ export enum CalloutType {
   Info = 'info',
   InfoPilot = 'info pilot',
   Check = 'check_circle',
-  Warning = 'warning_amber',
+  Warning = 'warning',
   Error = 'error',
-  ErrorOutline = 'error_outline',
 }
diff --git a/modules/ui/src/app/pages/general-settings/general-settings.component.html b/modules/ui/src/app/pages/general-settings/general-settings.component.html
index 54ba54970..e0944c366 100644
--- a/modules/ui/src/app/pages/general-settings/general-settings.component.html
+++ b/modules/ui/src/app/pages/general-settings/general-settings.component.html
@@ -15,7 +15,7 @@
 -->
 <div class="setting-drawer-content" *ngIf="viewModel$ | async as vm">
   <app-callout
-    [type]="CalloutType.ErrorOutline"
+    [type]="CalloutType.Error"
     *ngIf="settingsDisable"
     action="Go to Testing tab"
     (onAction)="navigateToRuntime()">
diff --git a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html
index e9b850747..dea2a68fc 100644
--- a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html
+++ b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html
@@ -50,7 +50,7 @@
             "></ng-container>
         </mat-expansion-panel-header>
         <div class="expansion-panel-content cel-description">
-          <app-callout [type]="CalloutType.ErrorOutline">
+          <app-callout [type]="CalloutType.Error">
             Steps to resolve
             <ul class="cel-description-list">
               <li *ngFor="let point of item.recommendations">{{ point }}</li>