feat: update ui to use is-narrow card

Automattic · Nov 28, 2024 · 8bf31f0 · 8bf31f0
1 parent 7b3c2d1
commit 8bf31f0
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -6,16 +6,15 @@ 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';
 
 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
@@ -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';