Minor improvements

Automattic · Dec 3, 2024 · 47daee8 · 47daee8
1 parent 2248505
commit 47daee8
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
@@ -12,7 +12,12 @@ interface AdminSectionHeroProps {
 }
 
 interface AdminSectionHeroComponent extends React.FC< AdminSectionHeroProps > {
-	Heading: React.FC< { children: React.ReactNode; showIcon?: boolean; variant?: string } >;
+	Heading: React.FC< {
+		children: React.ReactNode;
+		showIcon?: boolean;
+		variant?: 'default' | 'success' | 'error';
+		outline?: boolean;
+	} >;
 	Subheading: React.FC< { children: React.ReactNode } >;
 }
 
@@ -51,7 +56,14 @@ AdminSectionHero.Heading = ( {
 	return (
 		<H3 className={ styles.heading } mt={ 2 } mb={ 2 }>
 			{ children }
-			{ showIcon && <ShieldIcon variant={ variant } className={ styles[ 'heading-icon' ] } /> }
+			{ showIcon && (
+				<ShieldIcon
+					height={ 38 }
+					variant={ variant }
+					outline
+					className={ styles[ 'heading-icon' ] }
+				/>
+			) }
 		</H3>
 	);
 };

diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
@@ -13,7 +13,7 @@
 }
 
 .heading-icon {
-    margin-left: var( --spacing-base ); // 8px
+    margin-left: calc( var( --spacing-base ) * 1.5 ); // 12px
     margin-bottom: calc( var( --spacing-base ) / 2 * -1 ); // -4px
 }
 
@@ -23,4 +23,4 @@
 
 .connection-error-col {
 	margin-top: calc( var( --spacing-base ) * 3 + 1px ); // 25px
-}
+}
diff --git a/projects/plugins/protect/src/js/components/shield-icon/index.tsx b/projects/plugins/protect/src/js/components/shield-icon/index.tsx
@@ -2,6 +2,7 @@ import { type JSX } from 'react';
 
 const COLORS = {
 	error: '#D63638',
+	warning: '#F0B849',
 	success: '#069E08',
 	default: '#1d2327',
 };
@@ -32,7 +33,7 @@ export default function ShieldIcon( {
 	fill?: string;
 	height?: number;
 	outline?: boolean;
-	variant: 'default' | 'success' | 'error';
+	variant: 'default' | 'success' | 'warning' | 'error';
 } ): JSX.Element {
 	fill = fill || COLORS[ variant ];
 

diff --git a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
@@ -60,7 +60,7 @@ const HistoryAdminSectionHero: React.FC = () => {
 							__( 'Most recent results', 'jetpack-protect' )
 						) }
 					</Text>
-					<AdminSectionHero.Heading showIcon variant="success">
+					<AdminSectionHero.Heading>
 						{ numAllThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats  */