From f6c40a6bdce64756487590761d263c961d52a5ec Mon Sep 17 00:00:00 2001
From: jatiny <jatiny@consultbop.com>
Date: Wed, 20 Nov 2024 08:53:18 +0000
Subject: [PATCH] fix: styling of the guest tracking login

---
 templates/customer/guest-login.tpl | 37 +++++++++++++++++-------------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/templates/customer/guest-login.tpl b/templates/customer/guest-login.tpl
index 356e81b..a0c9b71 100644
--- a/templates/customer/guest-login.tpl
+++ b/templates/customer/guest-login.tpl
@@ -29,51 +29,56 @@
 {/block}
 
 {block name='page_content'}
+  <div class="border p-6">
   <form id="guestOrderTrackingForm" action="{$urls.pages.guest_tracking}" method="get">
-    <header>
-      <p>{l s='To track your order, please enter the following information:' d='Shop.Theme.Customeraccount'}</p>
-    </header>
+    <section class="space-y-8 px-4 py-6 sm:px-8 md:px-12">
 
-    <section class="form-fields">
-
-      <div class="form-group row">
-        <label class="col-md-3 form-control-label required">
+      
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <label class="font-semibold text-gray-700">
           {l s='Order Reference:' d='Shop.Forms.Labels'}
         </label>
-        <div class="col-md-6">
+        <div class="md:col-span-2">
           <input
-            class="form-control"
+            class="w-full p-3 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
             name="order_reference"
             type="text"
             size="8"
             value="{if isset($smarty.request.order_reference)}{$smarty.request.order_reference}{/if}"
+            placeholder="Enter Order Reference"
           >
-          <div class="form-control-comment">
+          <div class="text-sm text-gray-500 mt-2">
             {l s='For example: QIIXJXNUI or QIIXJXNUI#1' d='Shop.Theme.Customeraccount'}
           </div>
         </div>
       </div>
 
-      <div class="form-group row">
-        <label class="col-md-3 form-control-label required">
+      
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <label class="font-semibold text-gray-700">
           {l s='Email:' d='Shop.Forms.Labels'}
         </label>
-        <div class="col-md-6">
+        <div class="md:col-span-2">
           <input
-            class="form-control"
+            class="w-full p-3 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
             name="email"
             type="email"
             value="{if isset($smarty.request.email)}{$smarty.request.email}{/if}"
+            placeholder="Enter your email"
           >
         </div>
       </div>
 
     </section>
 
-    <footer class="form-footer text-sm-center clearfix">
-      <button class="btn btn-primary" type="submit">
+    
+    <footer class="text-center mt-8">
+      <button class="w-full md:w-auto px-6 py-3 font-medium text-white bg-blue-950 
+       hover:bg-blue-900 focus:ring-2 focus:ring-blue-500 focus:outline-none">
         {l s='Send' d='Shop.Theme.Actions'}
       </button>
     </footer>
   </form>
+  </div>
 {/block}
+