Fix: Columns are misaligned on Payments->Deposits (#1838)

* Fix: #1719 Misaligned columns on Payments->Deposits
- override alignment for deposits list page.
- slight adjustment in transaction table header margin.
- changelog update.
- updated failing snapshots.
- Review changes.
- Aligned data with currency conversion marker.

changelog.txt

@@ -4,6 +4,7 @@
 * Fix - Fix hover dialog for close button on modals, unify styling and layout of modal buttons.
 * Update - Use Site Language when rendering Stripe elements.
 * Update - Use blog ID for authenticating most of the requests.
+* Fix: Misaligned columns on Deposits page.
 
 = 2.4.0 - 2021-05-12 =
 * Update - Improve the Connect Account page.

client/deposits/list/index.js

@@ -22,6 +22,8 @@ import ClickableCell from 'components/clickable-cell';
 import Page from '../../components/page';
 import DepositsFilters from '../filters';
 
+import './style.scss';
+
 const getColumns = ( sortByDate ) => [
 	{
 		key: 'details',
@@ -159,7 +161,7 @@ export const DepositsList = () => {
 		<Page>
 			<DepositsFilters storeCurrencies={ storeCurrencies } />
 			<TableCard
-				className="deposits-list woocommerce-report-table"
+				className="wcpay-deposits-list woocommerce-report-table"
 				title={ __( 'Deposit history', 'woocommerce-payments' ) }
 				isLoading={ isLoading }
 				rowsPerPage={ getQuery().per_page || 25 }

client/deposits/list/style.scss

@@ -0,0 +1,14 @@
+$space-header-item: 25px;
+
+.wcpay-deposits-list {
+	// alignment override for header items
+	.woocommerce-table__header:not( .is-left-aligned ),
+	.woocommerce-table__item:not( .is-left-aligned ) {
+		text-align: center;
+	}
+
+	// slight adjustment to align header items with sorting button to account for icon width
+	.woocommerce-table__header.is-numeric .components-button {
+		margin-right: $space-header-item;
+	}
+}

client/deposits/list/test/__snapshots__/index.js.snap

@@ -46,7 +46,7 @@ exports[`Deposits list renders correctly with multiple currencies 1`] = `
       </div>
     </div>
     <div
-      class="woocommerce-card woocommerce-table woocommerce-analytics__card deposits-list woocommerce-report-table has-menu"
+      class="woocommerce-card woocommerce-table woocommerce-analytics__card wcpay-deposits-list woocommerce-report-table has-menu"
     >
       <div
         class="woocommerce-card__header"
@@ -478,7 +478,7 @@ exports[`Deposits list renders correctly with single currency 1`] = `
       />
     </div>
     <div
-      class="woocommerce-card woocommerce-table woocommerce-analytics__card deposits-list woocommerce-report-table has-menu"
+      class="woocommerce-card woocommerce-table woocommerce-analytics__card wcpay-deposits-list woocommerce-report-table has-menu"
     >
       <div
         class="woocommerce-card__header"

client/transactions/list/style.scss

@@ -1,6 +1,6 @@
 @import 'node_modules/@wordpress/components/src/tooltip/style.scss';
 
-$space-header-item: 15px;
+$space-header-item: 25px;
 
 .transactions-list {
 	.date-time {
@@ -9,7 +9,7 @@ $space-header-item: 15px;
 
 	.converted-amount {
 		display: flex; // Necessary for conversion tooltip to show.
-		justify-content: flex-end;
+		justify-content: center;
 
 		.conversion-indicator {
 			margin-right: 6px;

readme.txt

@@ -105,6 +105,7 @@ Please note that our support for the checkout block is still experimental and th
 * Fix - Fix hover dialog for close button on modals, unify styling and layout of modal buttons.
 * Update - Use Site Language when rendering Stripe elements.
 * Update - Use blog ID for authenticating most of the requests.
+* Fix: Misaligned columns on Deposits page.
 
 = 2.4.0 - 2021-05-12 =
 * Update - Improve the Connect Account page.