feat: tweaking styles that affect the checkout modal

Automattic · Apr 11, 2024 · 39ca220 · 39ca220
1 parent 796a9da
commit 39ca220
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git a/assets/newspack-ui/scss/elements/forms/_buttons.scss b/assets/newspack-ui/scss/elements/forms/_buttons.scss
@@ -12,10 +12,13 @@
 		gap: var( --newspack-ui-spacer-2 );
 		justify-content: center;
 		line-height: var( --newspack-ui-line-height-l );
-		margin-bottom: var( --newspack-ui-spacer-2 );
 		padding: var( --newspack-ui-spacer-2 ) var( --newspack-ui-spacer-3 ); // TODO: correct this
 		transition: background-color 150ms ease-in-out;
 
+		&:not( :last-child ) {
+			margin-bottom: var( --newspack-ui-spacer-2 );
+		}
+
 		&:hover {
 			color: inherit;
 		}

diff --git a/assets/newspack-ui/scss/elements/forms/_index.scss b/assets/newspack-ui/scss/elements/forms/_index.scss
@@ -42,7 +42,7 @@
 	// Form response inline error text.
 	&__inline-error,
 	&__inline-info {
-		font-size: var( --newspack-ui-font-size-xs );
+		font-size: var( --newspack-ui-font-size-s );
 		line-height: var( --newspack-ui-line-height-s );
 		margin: var( --newspack-ui-spacer-base ) 0 var( --newspack-ui-spacer-5 );
 		a {

diff --git a/assets/newspack-ui/scss/elements/woocommerce/_overrides.scss b/assets/newspack-ui/scss/elements/woocommerce/_overrides.scss
@@ -40,6 +40,7 @@
 		}
 
 		.payment_box {
+			background: transparent;
 			font-weight: normal;
 			padding: 0;
 
@@ -49,7 +50,7 @@
 
 			ul.wc-saved-payment-methods {
 				li {
-					margin-bottom: 16px;
+					margin-bottom: var(--newspack-ui-spacer-3);
 
 					input {
 						margin-right: 8px;
@@ -58,7 +59,7 @@
 			}
 
 			fieldset {
-				margin-bottom: 12px;
+				margin-bottom: var(--newspack-ui-spacer-2);
 
 				&:last-child {
 					margin-bottom: 0;
@@ -73,7 +74,7 @@
 						align-items: flex-start;
 
 						input {
-							margin-right: 12px;
+							margin-right: var(--newspack-ui-spacer-2);
 						}
 
 						label {
@@ -86,9 +87,39 @@
 		}
 	}
 
+	// Override billing details spacing.
+	.billing-details {
+		p {
+			margin: 0;
+		}
+
+		h3 {
+			margin-bottom: var(--newspack-ui-spacer-base);
+		}
+	}
+
+	// Order review table.
+	.woocommerce-checkout-review-order-table {
+		thead th,
+		.recurring-totals th {
+			background: transparent;
+		}
+
+		.cart-subtotal th,
+		.cart-subtotal td,
+		small {
+			font-size: var( --newspack-font-size-xs );
+		}
+	}
+
+	.woocommerce .first-payment-date {
+		font-family: var( --newspack-ui-font-family );
+	}
+
 	// Override checkout form terms and condition text.
 	.woocommerce-terms-and-conditions-wrapper {
 		font-size: var(--newspack-ui-font-size-xs);
+		margin-bottom: 0;
 	}
 
 	// Override checkout form coupon field.
@@ -99,7 +130,7 @@
 			margin: var(--newspack-ui-spacer-2) 0;
 
 			input {
-				margin-right: 8px;
+				margin-right: var(--newspack-ui-spacer-base);
 			}
 
 			button {