[not verified] Boost: Update ISA summary colors when there are issues (…

…#31908) * Update UI feedback regarding ISA issues * add changelog
Automattic · Jul 19, 2023 · 8dfe41c · 8dfe41c
1 parent 9cd5215
commit 8dfe41c
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
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
@@ -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/...ts/plugins/boost/app/assets/src/js/modules/image-size-analysis/RecommendationsMeta.svelte b/...ts/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
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Update ISA summary UI colors when there are issues with the report.
+
+