Address minor styling issues in settings (#2316)

* Adjust improperly shifted modal header

* Remove excess spacing within webhook information

* Remove unnecessary margin at top of account keys modal content

Author: Paul Dechov

client/components/confirmation-modal/style.scss

@@ -24,7 +24,6 @@
 	}
 
 	.components-modal__header {
-		margin: 0 -#{$grid-unit-30} $grid-unit-30;
 		padding: 0 $grid-unit-30;
 		@media ( max-width: 599px ) {
 			button {

client/settings/account-details/index.js

@@ -82,17 +82,17 @@ const WebhooksSection = () => {
 			</div>
 			<div className="account-details__desc">
 				<WebhookInformation />
-				<br />
-				<br />
-				{ message }{ ' ' }
-				<Button
-					disabled={ requestStatus === 'pending' }
-					onClick={ refreshMessage }
-					isBusy={ requestStatus === 'pending' }
-					isLink
-				>
-					{ __( 'Refresh', 'woocommerce-gateway-stripe' ) }
-				</Button>
+				<p>
+					{ message }{ ' ' }
+					<Button
+						disabled={ requestStatus === 'pending' }
+						onClick={ refreshMessage }
+						isBusy={ requestStatus === 'pending' }
+						isLink
+					>
+						{ __( 'Refresh', 'woocommerce-gateway-stripe' ) }
+					</Button>
+				</p>
 			</div>
 		</>
 	);

client/settings/payment-settings/account-keys-modal.js

@@ -167,6 +167,7 @@ const StyledConfirmationModal = styled( ConfirmationModal )`
 		margin: 0 -24px 24px;
 	}
 	.wcstripe-inline-notice {
+		margin-top: -24px;
 		margin-bottom: 0;
 	}
 	.wcstripe-confirmation-modal__separator {