Update ThreatDataView list view fixer status

projects/js-packages/components/components/threats-data-view/fixer-status.tsx

@@ -75,7 +75,11 @@ export default function FixerStatusIcon( {
 	}
 
 	if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) {
-		return <Spinner color="black" />;
+		return (
+			<div className={ styles[ 'icon-spinner' ] }>
+				<Spinner color="black" />
+			</div>
+		);
 	}
 
 	return <Icon icon={ check } className={ styles[ 'icon-check' ] } size={ 28 } />;
@@ -87,20 +91,28 @@ export default function FixerStatusIcon( {
  * @param {boolean} props.fixer - The fixer status.
  * @return {string} The component.
  */
-function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): string {
+function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
 	if ( fixer && fixerStatusIsStale( fixer ) ) {
-		return __( 'Fixer is taking longer than expected', 'jetpack' );
+		return (
+			<span className={ styles[ 'info-spacer' ] }>
+				{ __( 'Fixer is taking longer than expected', 'jetpack' ) }
+			</span>
+		);
 	}
 
 	if ( fixer && 'error' in fixer && fixer.error ) {
-		return __( 'Error auto-fixing threat', 'jetpack' );
+		return (
+			<span className={ styles[ 'info-spacer' ] }>
+				{ __( 'An error occurred auto-fixing this threat', 'jetpack' ) }
+			</span>
+		);
 	}
 
 	if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) {
-		return __( 'Auto-fix in progress', 'jetpack' );
+		return <span className={ styles[ 'spinner-spacer' ] }>{ __( 'Auto-fixing', 'jetpack' ) }</span>;
 	}
 
-	return __( 'Auto-fixable', 'jetpack' );
+	return <span className={ styles[ 'check-spacer' ] }>{ __( 'Auto-fixable', 'jetpack' ) }</span>;
 }
 
 /**
@@ -111,15 +123,15 @@ function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): string {
  */
 export function FixerStatusBadge( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
 	return (
-		<div className={ styles[ 'fixer-status-badge' ] }>
-			<FixerStatusIcon fixer={ fixer } size={ 12 } />
+		<div className={ styles[ 'fixer-status' ] }>
+			<FixerStatusIcon fixer={ fixer } />
 			<FixerStatusText fixer={ fixer } />
 		</div>
 	);
 }
 
 /**
- * FixerStatusText component.
+ * DataViewFixerStatus component.
  * @param {object}  props       - Component props.
  * @param {boolean} props.fixer - The fixer status.
  * @param {object}  props.view  - The view.

projects/js-packages/components/components/threats-data-view/styles.module.scss

@@ -5,9 +5,9 @@
 		min-height: 0;
 	}
 
-    .dataviews-view-table td, .dataviews-view-table th {
-        white-space: initial;
-    }
+	.dataviews-view-table td, .dataviews-view-table th {
+		white-space: initial;
+	}
 
 	.dataviews-view-table td .components-flex {
 		gap: 4px;
@@ -51,26 +51,21 @@
 	}
 }
 
-.fixer-status-badge {
-	border-radius: 32px;
-	flex-shrink: 0;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 600;
-	line-height: 16px;
-	padding: calc( var( --spacing-base ) / 2 ); // 4px
-	padding-right: calc( var( --spacing-base ) * 1.75 ); // 14px
-	position: relative;
-	text-align: center;
-	background: var( --jp-green-0 );
-	color: var( --jp-green-50 );
+.fixer-status {
 	display: flex;
 	align-items: center;
-
-	> svg {
-		height: 20px;
-		margin-top: -2px;
-		margin-bottom: -2px;
+	line-height: 0;
+
+	.icon-spinner {
+		margin-left: 1px;
+	}
+
+	.icon-info {
+		margin-left: -3px;
+	}
+
+	.icon-check {
+		margin-left: -6px;
 	}
 }
 
@@ -103,7 +98,25 @@
 	font-size: 12px;
 }
 
+.icon-spinner {
+	svg {
+		margin: 0;
+	}
+}
+
+.spinner-spacer {
+	margin-left: 8px;
+}
+
+.info-spacer {
+	margin-left: 4px;
+}
+
+.check-spacer {
+	margin-left: -2px;
+}
+
 .threat__fixer {
-	min-width: 48px;
+	min-width: 54px;
 	text-align: center;
 }