From 5abad50c4ddb453f1134357e2aec51dbff7957e1 Mon Sep 17 00:00:00 2001
From: Ravinder Kumar <ravinder.kumar.apj@gmail.com>
Date: Fri, 4 Aug 2023 11:18:08 +0530
Subject: [PATCH] feat: improve list styling

---
 assets/src/css/admin/paypal-commerce.scss    | 17 +++++++++------
 assets/src/js/admin/paypal-commerce/index.js | 22 ++++++++++----------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/assets/src/css/admin/paypal-commerce.scss b/assets/src/css/admin/paypal-commerce.scss
index b7cc1b43b2..4d1e14126c 100644
--- a/assets/src/css/admin/paypal-commerce.scss
+++ b/assets/src/css/admin/paypal-commerce.scss
@@ -50,14 +50,15 @@
 .paypal-commerce-connection-account-type-selection-modal{
 		color: #0E0E0E;
 
-	p.welcome-text{
-		color: #404040;
-	}
+	ul{
+		margin-left: 22px;
 
-	li{
-		font-size: 0.8em;
-		color: #666;
+		li{
+			font-size: 0.8em;
+			color: #666;
+		}
 	}
+
     ul.flex2x2 {
         display: flex;
         flex-wrap: wrap;
@@ -75,6 +76,10 @@
 
 	p{
 		font-size: 16px;
+
+		&.welcome-text{
+			color: #404040;
+		}
 	}
 
     span{
diff --git a/assets/src/js/admin/paypal-commerce/index.js b/assets/src/js/admin/paypal-commerce/index.js
index 0eead55495..1bb570e90d 100644
--- a/assets/src/js/admin/paypal-commerce/index.js
+++ b/assets/src/js/admin/paypal-commerce/index.js
@@ -130,26 +130,26 @@ window.addEventListener( 'DOMContentLoaded', function() {
                                     id="paypal_donations_connection_account_type_ppcp"
                                     value="PPCP">&nbsp;${ __( 'Advancded Card Processing', 'givewp') }
                             </label>
-                            <ul>
-                                <li>${__( 'Accept Credit & Debit Cards', 'givewp')}</li>
-                                <li>${__( 'Seller Protection', 'givewp')}</li>
-                            </ul>
                         </p>
+                        <ul>
+                            <li>${__( 'Accept Credit & Debit Cards', 'givewp')}</li>
+                            <li>${__( 'Seller Protection', 'givewp')}</li>
+                        </ul>
                         <p>
                             <label for="paypal_donations_connection_account_type_express_checkout">
                                 <input type="radio"
                                     name="paypal_donations_connection_account_type"
                                     id="paypal_donations_connection_account_type_express_checkout"
                                     value="EXPRESS_CHECKOUT">&nbsp;${__( 'Standard Card Processing', 'give')}
-                                <span>${__( 'Requires Application Approval', 'give')}</span>
                             </label>
-                            <ul class="flex2x2">
-                                <li>${__( 'Accept Credit & Debit Cards', 'give')}</li>
-                                <li>${__( 'Seller Protection', 'give')}</li>
-                                <li>${__( 'Fraud Protection', 'give')}</li>
-                                <li>${__( 'Chargeback Protection', 'give')}</li>
-                            </ul>
+                            <span>${__( 'Requires Application Approval', 'give')}</span>
                         </p>
+                         <ul class="flex2x2">
+                            <li>${__( 'Accept Credit & Debit Cards', 'give')}</li>
+                            <li>${__( 'Seller Protection', 'give')}</li>
+                            <li>${__( 'Fraud Protection', 'give')}</li>
+                            <li>${__( 'Chargeback Protection', 'give')}</li>
+                        </ul>
                         <div class="give-field-description">
                             <a href="https://docs.givewp.com/connection-comparison" target="_blank">
                                 ${__('Read more about the connection types', 'give')}