feat: add icon to list

impress-org · Aug 7, 2023 · 2f1de84 · 2f1de84
1 parent 2306283
commit 2f1de84
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/assets/src/css/admin/paypal-commerce.scss b/assets/src/css/admin/paypal-commerce.scss
@@ -56,6 +56,12 @@
 		li{
 			font-size: 0.8em;
 			color: #666;
+
+            span.icon{
+                position: relative;
+                top: 3px;
+                padding-right: 8px;
+            }
 		}
 	}
 
@@ -82,7 +88,7 @@
 		}
 	}
 
-    span{
+    span:not(.icon){
 		color: #0B72D9;
 		font-size: 0.7em;
         float: right;

diff --git a/assets/src/js/admin/paypal-commerce/index.js b/assets/src/js/admin/paypal-commerce/index.js
@@ -24,6 +24,10 @@ window.addEventListener( 'DOMContentLoaded', function() {
 			  } );
 		  } );
 
+        const checkVerifiedIcon =   "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
+            "<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.06407 0.984993C7.34006 0.772558 7.6701 0.666583 8.00008 0.666664C8.33006 0.666583 8.6601 0.772558 8.93609 0.984993L9.71851 1.58576L10.699 1.45673C11.3891 1.3658 12.0529 1.75031 12.3191 2.39199L12.6958 3.30444L13.6069 3.68059L13.6082 3.68113C14.2499 3.94736 14.6343 4.61155 14.5433 5.30156L14.4144 6.28125L15.0155 7.06417C15.1744 7.27101 15.2738 7.50834 15.3135 7.75332C15.3425 7.93195 15.3398 8.11464 15.3054 8.29254C15.2611 8.52121 15.1644 8.74192 15.0155 8.93582L14.4144 9.71874L14.5433 10.6984C14.6343 11.3884 14.2499 12.0526 13.6082 12.3189L13.6069 12.3194L12.6958 12.6956L12.3191 13.608C12.0529 14.2497 11.3891 14.6342 10.699 14.5433L9.71851 14.4142L8.93609 15.015C8.6601 15.2274 8.33006 15.3334 8.00008 15.3333C7.6701 15.3334 7.34006 15.2274 7.06407 15.015L6.28166 14.4142L5.30112 14.5433C4.61107 14.6342 3.94724 14.2497 3.68104 13.608L3.30436 12.6956L2.39328 12.3194L2.39198 12.3189C1.75029 12.0526 1.3659 11.3884 1.45682 10.6984L1.58572 9.71874L0.984629 8.93582C0.81173 8.71067 0.709272 8.44939 0.677476 8.18144C0.631358 7.79295 0.733966 7.39059 0.984629 7.06417L1.58572 6.28125L1.45682 5.30156C1.3659 4.61155 1.75029 3.94736 2.39198 3.68113L2.39328 3.68059L3.30436 3.30444L3.68104 2.39199C3.94724 1.75031 4.61107 1.3658 5.30112 1.45673L6.28166 1.58576L7.06407 0.984993ZM10.8048 6.80474C11.0652 6.54439 11.0652 6.12228 10.8048 5.86193C10.5445 5.60158 10.1224 5.60158 9.86201 5.86193L7.33342 8.39052L6.47149 7.52859C6.21114 7.26824 5.78903 7.26824 5.52868 7.52859C5.26833 7.78894 5.26833 8.21105 5.52868 8.4714L6.86201 9.80474C7.12236 10.0651 7.54447 10.0651 7.80482 9.80474L10.8048 6.80474Z\" fill=\"#459948\"/>\n" +
+            "</svg>";
+
     // This object will check if a class added to body or not.
     // If class added that means modal opened.
     // If class removed that means modal closed.
@@ -132,8 +136,8 @@ window.addEventListener( 'DOMContentLoaded', function() {
                             </label>
                         </p>
                         <ul>
-                            <li>${__( 'Accept Credit & Debit Cards', 'givewp')}</li>
-                            <li>${__( 'Seller Protection', 'givewp')}</li>
+                            <li><span class="icon">${checkVerifiedIcon}</span>${__( 'Accept Credit & Debit Cards', 'givewp')}</li>
+                            <li><span class="icon">${checkVerifiedIcon}</span>${__( 'Seller Protection', 'givewp')}</li>
                         </ul>
                         <p>
                             <label for="paypal_donations_connection_account_type_express_checkout">
@@ -145,10 +149,10 @@ window.addEventListener( 'DOMContentLoaded', function() {
                             <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>
+                            <li><span class="icon">${checkVerifiedIcon}</span>${__( 'Accept Credit & Debit Cards', 'give')}</li>
+                            <li><span class="icon">${checkVerifiedIcon}</span>${__( 'Seller Protection', 'give')}</li>
+                            <li><span class="icon">${checkVerifiedIcon}</span>${__( 'Fraud Protection', 'give')}</li>
+                            <li><span class="icon">${checkVerifiedIcon}</span>${__( 'Chargeback Protection', 'give')}</li>
                         </ul>
                         <div class="give-field-description">
                             <a href="https://docs.givewp.com/connection-comparison" target="_blank">