From 80f381d46d649ef345e996734121e7308d896888 Mon Sep 17 00:00:00 2001
From: "v.carkaxhija" <vegim.carkaxhija@gmail.com>
Date: Thu, 21 Nov 2024 11:26:40 +0100
Subject: [PATCH] fix style for hosted fields

---
 .../buckaroo_magento2_creditcards.html        | 111 +++++++++---------
 1 file changed, 57 insertions(+), 54 deletions(-)

diff --git a/view/frontend/web/template/payment/buckaroo_magento2_creditcards.html b/view/frontend/web/template/payment/buckaroo_magento2_creditcards.html
index babcc987c..7bc7be80f 100644
--- a/view/frontend/web/template/payment/buckaroo_magento2_creditcards.html
+++ b/view/frontend/web/template/payment/buckaroo_magento2_creditcards.html
@@ -8,13 +8,13 @@
                        data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
                 <label class="label" data-bind="attr: {'for': getCode()}">
                     <!-- ko text: getTitle() --><!-- /ko -->
-                    <!-- ko if: subtext !== null && subtext.length > 0 -->
+                    <!-- ko if: subtext && subtext.length -->
                     <p class="bk-description" data-bind="text: subtext, style: subTextStyle"></p>
                     <!-- /ko -->
                 </label>
             </div>
             <div class="bk-img-wrap">
-                <img data-bind="attr: { src: require.toUrl('Buckaroo_Magento2/images/svg/creditcards.svg') }" />
+                <img data-bind="attr: { src: require.toUrl('Buckaroo_Magento2/images/svg/creditcards.svg') }"/>
             </div>
         </div>
     </div>
@@ -23,79 +23,82 @@
         <div class="payment-method-billing-address">
             <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
             <!-- ko template: getTemplate() --><!-- /ko -->
-            <!--/ko-->
+            <!-- /ko -->
         </div>
 
-
         <div class="payment-method-second-col billing-address-form">
             <form class="bg-white px-8 pt-6 pb-8">
-                    <div class="mb-4">
-                        <label id="cc-name-label" class="text-gray-700 text-sm font-bold">
-                            Cardholder Name
-                        </label>
-                        <div id="cc-name-wrapper"
-                             class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
-                        </div>
-                        <p id="cc-name-error" class="text-red-500 text-xs italic mt-1"></p>
+                <div class="mb-4">
+                    <label id="cc-name-label" class="label">
+                        <span data-bind="i18n: 'Cardholder Name:'"> </span>
+                    </label>
+                    <div id="cc-name-wrapper"
+                         class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                     </div>
+                    <p id="cc-name-error" class="text-red-500 text-xs italic mt-1"></p>
+                </div>
 
-                    <div class="mb-4">
-                        <label id="cc-number-label" class="text-gray-700 text-sm font-bold">
-                            Card Number
-                        </label>
-                        <div id="cc-number-wrapper"
-                             class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
-                        </div>
-                        <p id="cc-number-error" class="text-red-500 text-xs italic mt-1"></p>
+                <div class="mb-4">
+                    <label id="cc-number-label" class="label">
+                        <span data-bind="i18n: 'Card Number:'"> </span>
+                    </label>
+                    <div id="cc-number-wrapper"
+                         class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                     </div>
+                    <p id="cc-number-error" class="text-red-500 text-xs italic mt-1"></p>
+                </div>
 
-                    <div class="mb-6">
-                        <div class="grid grid-cols-2 gap-4">
-                            <div class="col-span-1">
-                                <label id="cc-expiry-label" class="text-gray-700 text-sm font-bold">
-                                    Expiry Date
-                                </label>
-                                <div id="cc-expiry-wrapper"
-                                     class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
-                                </div>
-                                <p id="cc-expiry-error"  class="text-red-500 text-xs italic mt-1"></p>
+                <div class="mb-6">
+                    <div class="grid grid-cols-2 gap-4">
+                        <div class="col-span-1">
+                            <label id="cc-expiry-label" class="label">
+                                <span data-bind="i18n: 'Expiry Date:'"> </span>
+                            </label>
+                            <div id="cc-expiry-wrapper"
+                                 class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                             </div>
-                            <div class="col-span-1">
-                                <label id="cc-cvc-label" class="text-gray-700 text-sm font-bold">
-                                    CVC
-                                </label>
-                                <div id="cc-cvc-wrapper"
-                                     class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
-                                </div>
-                                <p id="cc-cvc-error" class="text-red-500 text-xs italic mt-1"></p>
+                            <p id="cc-expiry-error" class="text-red-500 text-xs italic mt-1"></p>
+                        </div>
+                        <div class="col-span-1">
+                            <label id="cc-cvc-label" class="label">
+                                <span data-bind="i18n: 'CVC:'"> </span>
+                            </label>
+                            <div id="cc-cvc-wrapper"
+                                 class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                             </div>
+                            <p id="cc-cvc-error" class="text-red-500 text-xs italic mt-1"></p>
                         </div>
                     </div>
+                </div>
 
-                    <div class="field">
-                        <span data-bind="i18n: 'Please make sure all fields are filled in correctly before proceeding.'"></span>
-                    </div>
+                <div class="field">
+                    <span
+                        data-bind="i18n: 'Please make sure all fields are filled in correctly before proceeding.'"></span>
+                </div>
 
-                    <div class="field oauth-token-error text-red-500" data-bind="text: oauthTokenError, visible: oauthTokenError"></div>
-                    <div class="field payment-error text-red-500" data-bind="text: paymentError, visible: paymentError"></div>
+                <div class="field oauth-token-error text-red-500"
+                     data-bind="text: oauthTokenError, visible: oauthTokenError"></div>
+                <div class="field payment-error text-red-500"
+                     data-bind="text: paymentError, visible: paymentError"></div>
 
-                    <div class="flex items-center justify-between">
-                        <button id="pay"
-                                class="bg-[#ff5555] hover:bg-blue-700 text-white py-2 px-4 rounded focus:outline-none focus:shadow-outline"
-                                type="button">
-                            Submit
-                        </button>
-                        <a class="inline-block align-baseline text-sm text-gray-500 hover:text-gray-800" href="#" data-bind="click: resetForm">
-                            Cancel
-                        </a>
-                    </div>
+                <div class="flex items-center justify-between">
+                    <button id="pay"
+                            class="action primary checkout"
+                            type="submit">
+                        <span data-bind="i18n: 'Place Order'"></span>
+                    </button>
+                    <a class="inline-block align-baseline text-sm text-gray-500 hover:text-gray-800" href="#"
+                       data-bind="click: resetForm">
+                        Cancel
+                    </a>
+                </div>
             </form>
         </div>
 
         <div class="checkout-agreements-block">
             <!-- ko foreach: $parent.getRegion('before-place-order') -->
             <!-- ko template: getTemplate() --><!-- /ko -->
-            <!--/ko-->
+            <!-- /ko -->
         </div>
     </div>
 </div>