feat: cleaning up some ui elements

Automattic · May 23, 2024 · fb896cd · fb896cd
1 parent 4a4fa4e
commit fb896cd
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 106 deletions.
diff --git a/assets/newspack-ui/fonts/inter/Inter-VariableFont_slnt,wght.ttf b/assets/newspack-ui/fonts/inter/Inter-VariableFont_slnt,wght.ttf
diff --git a/assets/newspack-ui/fonts/inter/OFL.txt b/assets/newspack-ui/fonts/inter/OFL.txt
diff --git a/assets/newspack-ui/scss/_modals.scss b/assets/newspack-ui/scss/_modals.scss
@@ -77,7 +77,7 @@
 			}
 		}
 
-		.newspack-ui__close {
+		.newspack-ui__modal__close {
 			margin: -6px -6px -6px 0; // Accounts for the header padding. TODO: Can this be improved to work w/variables?
 		}
 

diff --git a/assets/newspack-ui/scss/elements/forms/_labels.scss b/assets/newspack-ui/scss/elements/forms/_labels.scss
@@ -3,7 +3,7 @@
 		color: var( --newspack-ui-label-color );
 		display: block;
 		font-family: var( --newspack-ui-font-family);
-		font-size: var( --newspack-ui-font-size-s ) !important; // !important to override Newspack Theme.
+		font-size: var( --newspack-ui-font-size-s );
 		font-weight: 600;
 		line-height: var( --newspack-ui-line-height-s );
 		margin: 0 0 var( --newspack-ui-spacer-base );

diff --git a/assets/newspack-ui/scss/elements/woocommerce/_overrides.scss b/assets/newspack-ui/scss/elements/woocommerce/_overrides.scss
@@ -51,6 +51,7 @@
 		margin-top: var( --newspack-ui-spacer-5 );
 	}
 
+
 	// Override checkout payment method box.
 	.wc_payment_method {
 
@@ -107,10 +108,11 @@
 
 					&.form-row {
 						display: flex;
+						gap: var(--newspack-ui-spacer-2);
 						align-items: flex-start;
 
 						input {
-							margin-right: var(--newspack-ui-spacer-2);
+							margin: 0;
 						}
 
 						label {
@@ -121,12 +123,16 @@
 				}
 			}
 
-			.newspack-cover-fees {
+			.newspack-cover-fees,
+			.woocommerce-SavedPaymentMethods-saveNew {
 				label {
-					color: var(--newspack-ui-color-neutral-60);
 					font-size: var( --newspack-ui-font-size-xs );
 					line-height: var( --newspack-ui-line-height-xs );
 				}
+
+				&::before {
+					display: none;
+				}
 			}
 		}
 
@@ -146,6 +152,13 @@
 		}
 	}
 
+	// WooCommerce Payments
+	#payment {
+		.payment_method_woocommerce_payments .testmode-info {
+			margin-bottom: 0;
+		}
+	}
+
 	// Stripe inputs
 	.wc-credit-card-form {
 		.form-row-wide {
@@ -195,7 +208,7 @@
 	// Woo Payments inputs
 	#wcpay-upe-element,
 	.wcpay-upe-element {
-		margin: var(--newspack-ui-spacer-5) 0;
+		margin: var(--newspack-ui-spacer-3) 0;
 		padding: 0;
 	}
 
@@ -217,6 +230,17 @@
 				margin-bottom: var( --newspack-ui-spacer-2 );
 			}
 		}
+
+		// Override label styles from theme
+		.woocommerce-billing-fields,
+		.woocommerce-account-fields,
+		.woocommerce-shipping-fields,
+		.woocommerce-additional-fields {
+			label {
+				font-size: var( --newspack-ui-font-size-s );
+			}
+
+		}
 	}
 
 	// Override billing details spacing.
@@ -279,6 +303,7 @@
 		margin-bottom: var(--newspack-ui-spacer-5);
 
 		h3 {
+			color: var( --newspack-ui-label-color );
 			margin-bottom: var( --newspack-ui-spacer-base );
 		}
 

diff --git a/assets/newspack-ui/scss/variables/_fonts.scss b/assets/newspack-ui/scss/variables/_fonts.scss
@@ -1,12 +1,6 @@
-@font-face {
-	font-family: Inter;
-	font-display: swap;
-	src: url('/wp-content/plugins/newspack-plugin/assets/newspack-ui/fonts/inter/Inter-VariableFont_slnt,wght.ttf');
-}
-
 :root {
 	// Fonts - general
-	--newspack-ui-font-family: 'Inter', system-ui, sans-serif;
+	--newspack-ui-font-family: system-ui, sans-serif;
 	--newspack-ui-font-weight-strong: 600;
 
 	// Fonts - sizes