Settings UI: Tighten up the payment methods footer and modal styling

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;
 		}
 	}
 }

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;

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 ] }