From 440be0218ede3e78c407c3096800b4663444227e Mon Sep 17 00:00:00 2001
From: Dinesh Salunke <dineshsalunke@consultbop.com>
Date: Mon, 6 Nov 2023 14:37:11 +0530
Subject: [PATCH] refactor: add some basic styling for the form fields and
 errors

---
 templates/_partials/form-errors.tpl |  4 ++--
 templates/_partials/form-fields.tpl | 24 ++++++------------------
 2 files changed, 8 insertions(+), 20 deletions(-)

diff --git a/templates/_partials/form-errors.tpl b/templates/_partials/form-errors.tpl
index 73e3948..8b9d251 100644
--- a/templates/_partials/form-errors.tpl
+++ b/templates/_partials/form-errors.tpl
@@ -23,11 +23,11 @@
  * International Registered Trademark & Property of PrestaShop SA
  *}
 {if $errors|count}
-  <div class="help-block">
+  <div class="help-block mb-4">
     {block name='form_errors'}
       <ul>
         {foreach $errors as $error}
-          <li class="alert alert-danger">{$error|nl2br nofilter}</li>
+          <li class="alert alert-danger px-4 py-2 border border-red-100 bg-red-50 text-red-900">{$error|nl2br nofilter}</li>
         {/foreach}
       </ul>
     {/block}
diff --git a/templates/_partials/form-fields.tpl b/templates/_partials/form-fields.tpl
index 32ffe5a..ce2d197 100644
--- a/templates/_partials/form-fields.tpl
+++ b/templates/_partials/form-fields.tpl
@@ -30,8 +30,8 @@
 
 {else}
 
-  <div class="form-group row {if !empty($field.errors)}has-error{/if}">
-    <label class="col-md-3 form-control-label{if $field.required} required{/if}">
+  <div class="form-group row {if !empty($field.errors)}has-error{/if} flex flex-col">
+    <label class="font-medium form-control-label{if $field.required} required{/if} mb-1">
       {if $field.type !== 'checkbox'}
         {$field.label}
       {/if}
@@ -88,9 +88,8 @@
 
         {block name='form_field_item_checkbox'}
           <span class="custom-checkbox">
-            <label>
+            <label class="font-light text-sm">
               <input name="{$field.name}" type="checkbox" value="1" {if $field.value}checked="checked"{/if} {if $field.required}required{/if}>
-              <span><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></span>
               {$field.label nofilter}
             </label>
           </span>
@@ -132,9 +131,9 @@
       {elseif $field.type === 'password'}
 
         {block name='form_field_item_password'}
-          <div class="input-group js-parent-focus">
+          <div class="input-group js-parent-focus relative">
             <input
-              class="form-control js-child-focus js-visible-password"
+              class="form-control js-child-focus js-visible-password px-2 py-1 border border-gray-300 w-full"
               name="{$field.name}"
               title="{l s='At least 5 characters long' d='Shop.Forms.Help'}"
               type="password"
@@ -142,17 +141,6 @@
               pattern=".{literal}{{/literal}5,{literal}}{/literal}"
               {if $field.required}required{/if}
             >
-            <span class="input-group-btn">
-              <button
-                class="btn"
-                type="button"
-                data-action="show-password"
-                data-text-show="{l s='Show' d='Shop.Theme.Actions'}"
-                data-text-hide="{l s='Hide' d='Shop.Theme.Actions'}"
-              >
-                {l s='Show' d='Shop.Theme.Actions'}
-              </button>
-            </span>
           </div>
         {/block}
 
@@ -160,7 +148,7 @@
 
         {block name='form_field_item_other'}
           <input
-            class="form-control"
+            class="form-control px-2 py-1 border border-gray-300 w-full"
             name="{$field.name}"
             type="{$field.type}"
             value="{$field.value}"