From 8dfe41c20a842ed49a8e67d0fa910ec8de6df4e7 Mon Sep 17 00:00:00 2001
From: Peter Petrov <peter.petrov89@gmail.com>
Date: Tue, 18 Jul 2023 03:37:05 +0300
Subject: [PATCH] [not verified] Boost: Update ISA summary colors when there
 are issues (#31908)

* Update UI feedback regarding ISA issues

* add changelog
---
 .../image-size-analysis/MultiProgress.svelte     | 16 ++++++++++------
 .../RecommendationsMeta.svelte                   |  6 +++---
 .../boost/changelog/update-isa-summary-colors    |  5 +++++
 3 files changed, 18 insertions(+), 9 deletions(-)
 create mode 100644 projects/plugins/boost/changelog/update-isa-summary-colors

diff --git a/projects/plugins/boost/app/assets/src/js/modules/image-size-analysis/MultiProgress.svelte b/projects/plugins/boost/app/assets/src/js/modules/image-size-analysis/MultiProgress.svelte
index df8d647160ee5..e1a4066b31562 100644
--- a/projects/plugins/boost/app/assets/src/js/modules/image-size-analysis/MultiProgress.svelte
+++ b/projects/plugins/boost/app/assets/src/js/modules/image-size-analysis/MultiProgress.svelte
@@ -4,6 +4,7 @@
 	import OtherGroupContext from '../../elements/OtherGroupContext.svelte';
 	import ProgressBar from '../../elements/ProgressBar.svelte';
 	import Spinner from '../../elements/Spinner.svelte';
+	import WarningIcon from '../../svg/warning-outline.svg';
 	import { isaGroupLabels, isaSummary } from './store/isa-summary';
 
 	function safePercent( value: number, outOf: number ): number {
@@ -34,8 +35,12 @@
 					class="jb-navigator-link"
 					to="/image-size-analysis/{group}/1"
 				>
-					<span class="jb-bubble" class:done={isDone}>
-						{isDone ? '✓' : index + 1}
+					<span class="jb-bubble" class:done={isDone} class:has-issues={hasIssues}>
+						{#if hasIssues}
+							<WarningIcon class="icon" />
+						{:else}
+							{isDone ? '✓' : index + 1}
+						{/if}
 					</span>
 				</ConditionalLink>
 			{/if}
@@ -117,15 +122,14 @@
 		&.done {
 			background-color: var( --jetpack-green-50 );
 		}
+		&.has-issues {
+			background: transparent;
+		}
 	}
 	.jb-status {
 		grid-area: status;
 		font-size: 0.875rem;
 		color: var( --gray-50 );
-		:global( a ),
-		&.has-issues {
-			color: var( --color_warning );
-		}
 	}
 	.jb-category-name {
 		grid-area: category;
diff --git a/projects/plugins/boost/app/assets/src/js/modules/image-size-analysis/RecommendationsMeta.svelte b/projects/plugins/boost/app/assets/src/js/modules/image-size-analysis/RecommendationsMeta.svelte
index ec1cf29d85597..08ab27548cd0f 100644
--- a/projects/plugins/boost/app/assets/src/js/modules/image-size-analysis/RecommendationsMeta.svelte
+++ b/projects/plugins/boost/app/assets/src/js/modules/image-size-analysis/RecommendationsMeta.svelte
@@ -3,8 +3,8 @@
 	import { __, sprintf } from '@wordpress/i18n';
 	import Button from '../../elements/Button.svelte';
 	import ErrorNotice from '../../elements/ErrorNotice.svelte';
-	import NoticeIcon from '../../svg/notice-outline.svg';
 	import RefreshIcon from '../../svg/refresh.svg';
+	import WarningIcon from '../../svg/warning-outline.svg';
 	import MultiProgress from './MultiProgress.svelte';
 	import { resetIsaQuery } from './store/isa-data';
 	import {
@@ -89,7 +89,7 @@
 		<div class="summary-line">
 			{#if totalIssues > 0}
 				<div class="has-issues summary">
-					<NoticeIcon class="icon" />
+					<WarningIcon class="icon" />
 					{sprintf(
 						/* translators: %d is the number of issues that were found */
 						__( 'Found a total of %d issues', 'jetpack-boost' ),
@@ -177,7 +177,7 @@
 	}
 
 	.has-issues {
-		color: $red_50;
+		color: var( --jp-orange-20 );
 	}
 
 	.has-issues :global( svg ) {
diff --git a/projects/plugins/boost/changelog/update-isa-summary-colors b/projects/plugins/boost/changelog/update-isa-summary-colors
new file mode 100644
index 0000000000000..bcb04cd225d48
--- /dev/null
+++ b/projects/plugins/boost/changelog/update-isa-summary-colors
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Update ISA summary UI colors when there are issues with the report.
+
+