From 4fde9a7d00f1adcfc7ad47ab35a3e3ab78484513 Mon Sep 17 00:00:00 2001
From: Naman Malhotra <naman03malhotra@gmail.com>
Date: Wed, 19 May 2021 21:11:13 +0530
Subject: [PATCH] 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                                      |  1 +
 client/deposits/list/index.js                      |  4 +++-
 client/deposits/list/style.scss                    | 14 ++++++++++++++
 .../deposits/list/test/__snapshots__/index.js.snap |  4 ++--
 client/transactions/list/style.scss                |  4 ++--
 readme.txt                                         |  1 +
 6 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 client/deposits/list/style.scss

diff --git a/changelog.txt b/changelog.txt
index fc824927003..1aa7a31c198 100644
--- a/changelog.txt
+++ b/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.
diff --git a/client/deposits/list/index.js b/client/deposits/list/index.js
index 9670410e459..81c4c4bbbe6 100644
--- a/client/deposits/list/index.js
+++ b/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 }
diff --git a/client/deposits/list/style.scss b/client/deposits/list/style.scss
new file mode 100644
index 00000000000..ac6c452ed9b
--- /dev/null
+++ b/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;
+	}
+}
diff --git a/client/deposits/list/test/__snapshots__/index.js.snap b/client/deposits/list/test/__snapshots__/index.js.snap
index 3a632bdd222..335c87f9908 100644
--- a/client/deposits/list/test/__snapshots__/index.js.snap
+++ b/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"
diff --git a/client/transactions/list/style.scss b/client/transactions/list/style.scss
index b31efa02997..13535e9a7bb 100644
--- a/client/transactions/list/style.scss
+++ b/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;
diff --git a/readme.txt b/readme.txt
index 0a981122f7a..fd0d1797d1b 100644
--- a/readme.txt
+++ b/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.