From a5fffdf95f02f17cf5e0cbab11d883e33098e47e Mon Sep 17 00:00:00 2001
From: Nagesh Pai <4162931+nagpai@users.noreply.github.com>
Date: Mon, 1 Apr 2024 10:06:02 +0530
Subject: [PATCH] Reporting: Payment activity widget wrapper - Remove unwanted
 CSS classes added in #8412 (#8507)

Co-authored-by: Nagesh Pai <nagesh.pai@automattic.com>
---
 .../refactor-8389-remove-unwanted-css-classes      |  4 ++++
 client/components/payment-activity/index.tsx       | 14 +++-----------
 .../test/__snapshots__/index.tsx.snap              |  6 +++---
 3 files changed, 10 insertions(+), 14 deletions(-)
 create mode 100644 changelog/refactor-8389-remove-unwanted-css-classes

diff --git a/changelog/refactor-8389-remove-unwanted-css-classes b/changelog/refactor-8389-remove-unwanted-css-classes
new file mode 100644
index 00000000000..18c2baba5ba
--- /dev/null
+++ b/changelog/refactor-8389-remove-unwanted-css-classes
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Remove unwanted css overrides on the Payment activity widget wrapper
diff --git a/client/components/payment-activity/index.tsx b/client/components/payment-activity/index.tsx
index c7ad731577a..2be148aba46 100644
--- a/client/components/payment-activity/index.tsx
+++ b/client/components/payment-activity/index.tsx
@@ -5,22 +5,14 @@ import * as React from 'react';
 import { Card, CardBody, CardHeader } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-/**
- * Internal dependencies.
- */
-import './style.scss';
-
 const PaymentActivity: React.FC = () => {
 	return (
-		<Card className="wcpay-payments-activity__card">
-			<CardHeader
-				className="wcpay-payments-activity__card__header"
-				isBorderless={ true }
-			>
+		<Card>
+			<CardHeader>
 				{ __( 'Your payment activity', 'woocommerce-payments' ) }
 				{ /* Filters go here */ }
 			</CardHeader>
-			<CardBody className="wcpay-payments-activity__card__body">
+			<CardBody>
 				<>{ /* Sub components go here */ }</>
 			</CardBody>
 		</Card>
diff --git a/client/components/payment-activity/test/__snapshots__/index.tsx.snap b/client/components/payment-activity/test/__snapshots__/index.tsx.snap
index bc996476eac..27c2d567ad0 100644
--- a/client/components/payment-activity/test/__snapshots__/index.tsx.snap
+++ b/client/components/payment-activity/test/__snapshots__/index.tsx.snap
@@ -3,7 +3,7 @@
 exports[`PaymentActivity component should render 1`] = `
 <div>
   <div
-    class="components-surface components-card wcpay-payments-activity__card css-nsno0f-View-Surface-getBorders-primary-Card-rounded em57xhy0"
+    class="components-surface components-card css-nsno0f-View-Surface-getBorders-primary-Card-rounded em57xhy0"
     data-wp-c16t="true"
     data-wp-component="Card"
   >
@@ -11,14 +11,14 @@ exports[`PaymentActivity component should render 1`] = `
       class="css-mgwsf4-View-Content em57xhy0"
     >
       <div
-        class="components-flex components-card__header components-card-header wcpay-payments-activity__card__header css-sz55ca-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium-borderless em57xhy0"
+        class="components-flex components-card__header components-card-header css-1g5oj2q-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
         data-wp-c16t="true"
         data-wp-component="CardHeader"
       >
         Your payment activity
       </div>
       <div
-        class="components-card__body components-card-body wcpay-payments-activity__card__body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
+        class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
         data-wp-c16t="true"
         data-wp-component="CardBody"
       />