Fix delete domain dialog width and CTA (#96981)

* Reduce delete domain dialog width * Fix mobile view and fix primary button text on mobile
Automattic · Dec 3, 2024 · e18c37a · e18c37a
1 parent 7337b48
commit e18c37a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/client/me/purchases/remove-purchase/remove-domain-dialog/index.jsx b/client/me/purchases/remove-purchase/remove-domain-dialog/index.jsx
@@ -257,7 +257,7 @@ class RemoveDomainDialog extends Component {
 		return (
 			<Dialog
 				buttons={ buttons }
-				className="remove-domain-dialog__dialog"
+				additionalClassNames="remove-domain-dialog"
 				isVisible={ this.props.isDialogVisible }
 				onClose={ this.close }
 				leaveTimeout={ 0 }

diff --git a/client/me/purchases/remove-purchase/style.scss b/client/me/purchases/remove-purchase/style.scss
@@ -1,3 +1,6 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+
 .remove-purchase__card,
 .auto-renew-toggle__card {
 	margin: 10px auto;
@@ -17,10 +20,20 @@
 		vertical-align: middle;
 	}
 }
+.remove-domain-dialog {
+	&.dialog.card {
+		max-width: 90%;
+
+		@include break-small {
+			max-width: 565px;
+		}
+	}
+}
 .dialog__button--domains-remove {
 	> .dialog__button-label {
 		display: flex;
 		align-items: center;
+		justify-content: center;
 		column-gap: 7px;
 
 		> svg {