Fix Task List Title Style (#5437)

* Updates to the format of the wcpaySettings interface, and update to pass the requirements from the server to the client JS.

* WIP: create the business details modal and set up test data

* Updates to support showing the modal in cases where there is more than one error.

* Updates to the modal logic and the task list.

* Updates to the modal styling and logic to display it.

* Update changelog

* Fixes based on initial review to make code more efficient and performant.

* Fixes based on initial review to make code more efficient and performant.

* Added snapshot tests for the new modal.

* Added logic to filter out error messages which are not helpful.

* Adding comment to give more context.

* Various fixes to the logic, adding i8n strings and adding a new line to show the date more clearly to the user.

* Fixing the padding on the notices, update snapshots.

* Fix broken test.

* Update to use a Flex element, and removed some styling no longer needed.

* Revert accidental change to accounts array

* Remove some CSS which is no longer needed.

Author: dmallory42

changelog/fix-5436-task-list-title

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Updates to the styling of the task list title on the main account overview page to match the component default.

client/overview/style.scss

@@ -10,20 +10,6 @@
 
 // Adapted from woocommerce-admin:client/homescreen/style.scss
 .components-card.woocommerce-task-card {
-	.components-card__header.is-size-large,
-	.components-card__header.is-size-medium {
-		min-height: 63px;
-		min-height: unset;
-		display: grid;
-		grid-template-columns: auto 24px;
-
-		// IE doesn't support `align-items` on grid container
-
-		& > * {
-			align-self: center;
-		}
-	}
-
 	.components-card__body.is-size-large {
 		padding: 0;
 	}
@@ -32,14 +18,6 @@
 		padding: 0 $gap-smaller;
 	}
 
-	.wooocommerce-task-card__header {
-		display: flex;
-
-		.woocommerce-badge {
-			margin-left: 16px;
-		}
-	}
-
 	.wcpay-task-list.woocommerce-experimental-list {
 		position: relative;
 

client/overview/task-list/index.js

@@ -5,9 +5,15 @@
  */
 import React from 'react';
 import { __ } from '@wordpress/i18n';
-import { Card, CardBody, CardHeader } from '@wordpress/components';
+import {
+	Card,
+	CardBody,
+	CardHeader,
+	FlexItem,
+	FlexBlock,
+} from '@wordpress/components';
 import { Badge } from '@woocommerce/components';
-import { CollapsibleList, TaskItem, Text } from '@woocommerce/experimental';
+import { CollapsibleList, TaskItem } from '@woocommerce/experimental';
 import { useDispatch } from '@wordpress/data';
 import { useCallback, useEffect, useState } from '@wordpress/element';
 const DAY_IN_MS = 24 * 60 * 60 * 1000;
@@ -163,15 +169,15 @@ const TaskList = ( { overviewTasksVisibility, tasks } ) => {
 			size="large"
 			className="woocommerce-task-card woocommerce-homescreen-card"
 		>
-			<CardHeader size="medium">
-				<div className="wooocommerce-task-card__header">
-					<Text variant="title.small">
-						{ __( 'Things to do', 'woocommerce-payments' ) }
-					</Text>
+			<CardHeader size="medium" justify="left">
+				<FlexItem>
+					{ __( 'Things to do', 'woocommerce-payments' ) }
+				</FlexItem>
+				<FlexBlock>
 					{ 0 < pendingTaskCount && (
 						<Badge count={ pendingTaskCount } />
 					) }
-				</div>
+				</FlexBlock>
 			</CardHeader>
 			<CardBody>
 				<CollapsibleList