From 0aa3be0ab137d0b0a2a980897cd2ba55a94c22b9 Mon Sep 17 00:00:00 2001
From: Daniel Dudzic <d.dudzic@syde.com>
Date: Mon, 24 Feb 2025 12:37:21 +0100
Subject: [PATCH] Settings UI: Tighten up the payment methods footer and modal
 styling

---
 .../_payment-method-item.scss                  |  5 +++++
 .../_payment-method-modal.scss                 | 11 +----------
 .../Settings/Components/Payment/Modal.js       | 18 ++++++++++--------
 3 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss
index 1a838e008..0b5bef65f 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss
+++ b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss
@@ -63,6 +63,10 @@
 			&:hover {
 				transform: rotate(45deg);
 			}
+
+			&.components-button {
+				height: auto;
+			}
 		}
 
 		.ppcp--method-icon {
@@ -79,6 +83,7 @@
 			justify-content: space-between;
 			align-items: center;
 			margin-top: auto;
+			min-height: 24px;
 		}
 	}
 }
diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-modal.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-modal.scss
index 1efe54236..0aa25d536 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-modal.scss
+++ b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-modal.scss
@@ -73,7 +73,6 @@
 		gap: 8px;
 
 		&--save {
-			margin-top: -4px;
 			align-items: flex-end;
 		}
 
@@ -87,7 +86,7 @@
 	&__field-rows {
 		display: flex;
 		flex-direction: column;
-		gap: 24px;
+		gap: 18px;
 
 		&--acdc {
 			gap: 18px;
@@ -98,19 +97,11 @@
 		}
 
 		.components-radio-control {
-			.components-flex {
-				gap: 18px;
-			}
-
 			label {
 				@include font(14, 20, 400);
 				color: $color-black;
 			}
 
-			&__option {
-				gap: 18px;
-			}
-
 			&__input {
 				border-color: $color-gray-700;
 				margin-right: 0;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js
index a749c7420..cddf17bf5 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js
@@ -100,14 +100,16 @@ const Modal = ( { method, setModalIsVisible, onSave } ) => {
 			case 'radio':
 				return (
 					<>
-						<strong className="ppcp-r-modal__content-title">
-							{ field.label }
-						</strong>
-						{ field.description && (
-							<p className="ppcp-r-modal__description">
-								{ field.description }
-							</p>
-						) }
+						<div className="ppcp-r-modal__field-row">
+							<strong className="ppcp-r-modal__content-title">
+								{ field.label }
+							</strong>
+							{ field.description && (
+								<span className="ppcp-r-modal__field-description">
+									{ field.description }
+								</span>
+							) }
+						</div>
 						<div className="ppcp-r-modal__field-row">
 							<RadioControl
 								selected={ settings[ key ] }