From 8bf31f0149bce3e4a14223d6eb1e120405da12a2 Mon Sep 17 00:00:00 2001
From: Jared Rethman <jaredrethman@gmail.com>
Date: Wed, 27 Nov 2024 22:05:23 -0600
Subject: [PATCH] feat: update ui to use is-narrow card

---
 src/admin/style.scss                                       | 6 ++----
 src/wizards/audience/views/subscriptions/configuration.tsx | 6 ++----
 src/wizards/audience/views/subscriptions/index.tsx         | 2 +-
 src/wizards/audience/views/subscriptions/revenue.tsx       | 7 +++----
 src/wizards/audience/views/subscriptions/settings.tsx      | 2 --
 5 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/admin/style.scss b/src/admin/style.scss
index 5e7390b670..a9ad140b77 100644
--- a/src/admin/style.scss
+++ b/src/admin/style.scss
@@ -273,16 +273,14 @@ table.fixed {
 		}
 	}
 
-	&.newspack-card__is-center {
-		margin-inline: auto;
-		max-width: 575px;
+	&.newspack-card__is-narrow {
 		padding: 3rem 4rem;
 
 		h2 {
 			margin-block-start: 0;
 		}
 
-		p {
+		p:last-of-type {
 			margin-block: 0 2rem;
 		}
 	}
diff --git a/src/wizards/audience/views/subscriptions/configuration.tsx b/src/wizards/audience/views/subscriptions/configuration.tsx
index d6281ca470..3e3b510f66 100644
--- a/src/wizards/audience/views/subscriptions/configuration.tsx
+++ b/src/wizards/audience/views/subscriptions/configuration.tsx
@@ -8,15 +8,13 @@ import { __ } from '@wordpress/i18n';
  */
 import WizardsTab from '../../../wizards-tab';
 import WizardSection from '../../../wizards-section';
-import WizardsActionCard from '../../../wizards-action-card';
 import { Button, Card } from '../../../../components/src';
-import WizardsCard from '../../../wizards-card';
 
 function Configuration() {
 	return (
 		<WizardsTab title={ __( 'Configuration', 'newspack-plugin' ) }>
 			<WizardSection>
-				<WizardsCard className="newspack-card__is-center">
+				<Card isNarrow>
 					<h2>
 						{ __(
 							'Manage Subscriptions settings in Woo Memberships',
@@ -32,7 +30,7 @@ function Configuration() {
 					<Button variant="primary" href={ '#' }>
 						{ __( 'Manage Subscriptions', 'newspack-plugin' ) }
 					</Button>
-				</WizardsCard>
+				</Card>
 			</WizardSection>
 		</WizardsTab>
 	);
diff --git a/src/wizards/audience/views/subscriptions/index.tsx b/src/wizards/audience/views/subscriptions/index.tsx
index e00f628dd7..24674cc22b 100644
--- a/src/wizards/audience/views/subscriptions/index.tsx
+++ b/src/wizards/audience/views/subscriptions/index.tsx
@@ -36,7 +36,7 @@ function AudienceSubscriptions() {
 				'newspack-plugin'
 			) }
 			sections={ tabs }
-			// requiredPlugins={ [ 'woocommerce', 'woocommerce-memberships' ] }
+			requiredPlugins={ [ 'woocommerce', 'woocommerce-memberships' ] }
 		/>
 	);
 }
diff --git a/src/wizards/audience/views/subscriptions/revenue.tsx b/src/wizards/audience/views/subscriptions/revenue.tsx
index 0f98c7bbbd..09e2d5380d 100644
--- a/src/wizards/audience/views/subscriptions/revenue.tsx
+++ b/src/wizards/audience/views/subscriptions/revenue.tsx
@@ -6,8 +6,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { Button } from '../../../../components/src';
-import WizardsCard from '../../../wizards-card';
+import { Button, Card } from '../../../../components/src';
 import WizardSection from '../../../wizards-section';
 import WizardsTab from '../../../wizards-tab';
 
@@ -15,7 +14,7 @@ function Revenue() {
 	return (
 		<WizardsTab title={ __( 'Revenue', 'newspack-plugin' ) }>
 			<WizardSection>
-				<WizardsCard className="newspack-card__is-center">
+				<Card isNarrow>
 					<h2>
 						{ __(
 							'Manage Subscriptions settings in Woo Memberships',
@@ -31,7 +30,7 @@ function Revenue() {
 					<Button variant="primary" href={ '#' }>
 						{ __( 'Manage Subscriptions', 'newspack-plugin' ) }
 					</Button>
-				</WizardsCard>
+				</Card>
 			</WizardSection>
 		</WizardsTab>
 	);
diff --git a/src/wizards/audience/views/subscriptions/settings.tsx b/src/wizards/audience/views/subscriptions/settings.tsx
index 5fa984dffd..dab20d43ff 100644
--- a/src/wizards/audience/views/subscriptions/settings.tsx
+++ b/src/wizards/audience/views/subscriptions/settings.tsx
@@ -6,8 +6,6 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { Button } from '../../../../components/src';
-import WizardsCard from '../../../wizards-card';
 import WizardSection from '../../../wizards-section';
 import WizardsTab from '../../../wizards-tab';
 import BillingFields from '../../components/billing-fields';