refactor: style the login and registration forms

templates/customer/_partials/customer-form.tpl

@@ -28,7 +28,7 @@
   {/block}
 
 <form action="{block name='customer_form_actionurl'}{$action}{/block}" id="customer-form" class="js-customer-form" method="post">
-  <section>
+  <section class="flex flex-col gap-2">
     {block "form_fields"}
       {foreach from=$formFields item="field"}
         {block "form_field"}
@@ -40,10 +40,10 @@
   </section>
 
   {block name='customer_form_footer'}
-    <footer class="form-footer clearfix">
+    <footer class="flex w-full mt-8">
       <input type="hidden" name="submitCreate" value="1">
       {block "form_buttons"}
-        <button class="btn btn-primary form-control-submit float-xs-right" data-link-action="save-customer" type="submit">
+        <button class="py-2 w-full uppercase font-medium bg-blue-950 text-gray-50" data-link-action="save-customer" type="submit">
           {l s='Save' d='Shop.Theme.Actions'}
         </button>
       {/block}

templates/customer/_partials/login-form.tpl

@@ -29,8 +29,7 @@
   {/block}
 
   <form id="login-form" action="{block name='login_form_actionurl'}{$action}{/block}" method="post">
-
+    <section class="flex flex-col gap-2">
-    <section>
       {block name='login_form_fields'}
         {foreach from=$formFields item="field"}
           {block name='form_field'}
@@ -39,17 +38,17 @@
         {/foreach}
       {/block}
       <div class="forgot-password">
-        <a href="{$urls.pages.password}" rel="nofollow">
+        <a class="text-base hover:underline underline-offset-2 hover:text-blue-900" href="{$urls.pages.password}" rel="nofollow">
           {l s='Forgot your password?' d='Shop.Theme.Customeraccount'}
         </a>
       </div>
     </section>
 
     {block name='login_form_footer'}
-      <footer class="form-footer text-sm-center clearfix">
+      <footer class="form-footer w-full mt-8">
         <input type="hidden" name="submitLogin" value="1">
         {block name='form_buttons'}
-          <button id="submit-login" class="btn btn-primary" data-link-action="sign-in" type="submit" class="form-control-submit">
+          <button id="submit-login" class="uppercase font-medium py-2 text-center w-full bg-blue-950 text-gray-50" data-link-action="sign-in" type="submit" >
             {l s='Sign in' d='Shop.Theme.Actions'}
           </button>
         {/block}

templates/customer/authentication.tpl

@@ -22,25 +22,27 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
-{extends file='page.tpl'}
+{extends file=$layout}
-
+{block name='content'}
+  <div class="flex items-center flex-col">
     {block name='page_title'}
+      <span class="text-lg font-medium mb-4">
       {l s='Log in to your account' d='Shop.Theme.Customeraccount'}
+      </span>
     {/block}
-
-{block name='page_content'}
     {block name='login_form_container'}
-      <section class="login-form">
+      <section class="login-form w-1/4">
         {render file='customer/_partials/login-form.tpl' ui=$login_form}
       </section>
       <hr/>
       {block name='display_after_login_form'}
         {hook h='displayCustomerLoginFormAfter'}
       {/block}
-      <div class="no-account">
+      <div class="no-account mt-2">
-        <a href="{$urls.pages.register}" data-link-action="display-register-form">
+        <a class="text-base hover:underline underline-offset-2 hover:text-blue-900 font-normal" href="{$urls.pages.register}" data-link-action="display-register-form">
           {l s='No account? Create one here' d='Shop.Theme.Customeraccount'}
         </a>
       </div>
     {/block}
+  </div>
 {/block}

templates/customer/registration.tpl

@@ -22,18 +22,26 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
-{extends file='page.tpl'}
+{extends file=$layout}
-
+{block name='content'}
+  <div class="flex flex-col items-center">
     {block name='page_title'}
+      <span class="text-lg font-medium mb-4">
       {l s='Create an account' d='Shop.Theme.Customeraccount'}
+      </span>
     {/block}
-
-{block name='page_content'}
     {block name='register_form_container'}
+      <div class="w-full md:w-1/2 lg:w-1/3">
       {$hook_create_account_top nofilter}
       <section class="register-form">
-        <p>{l s='Already have an account?' d='Shop.Theme.Customeraccount'} <a href="{$urls.pages.authentication}">{l s='Log in instead!' d='Shop.Theme.Customeraccount'}</a></p>
         {render file='customer/_partials/customer-form.tpl' ui=$register_form}
+        <div class="flex justify-center mt-8">
+          <a class="text-base hover:underline underline-offset-2 hover:text-blue-900 font-normal" href="{$urls.pages.authentication}">
+            {l s='Already have an account? Log in instead!' d='Shop.Theme.Customeraccount'}
+          </a>
+        </div>
       </section>
+      </div>
     {/block}
+  </div>
 {/block}