refactor: design forgot password page

assets/css/theme.css

@@ -1968,6 +1968,11 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     left: 50%;
   }
 
+  .md\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .md\:mb-4 {
     margin-bottom: 1rem;
   }

templates/customer/password-email.tpl

@@ -25,11 +25,10 @@
 {extends file='page.tpl'}
 
 {block name='page_title'}
-  {l s='Forgot your password?' d='Shop.Theme.Customeraccount'}
 {/block}
 
 {block name='page_content'}
-  <form action="{$urls.pages.password}" class="forgotten-password" method="post">
+  <form action="{$urls.pages.password}" class="forgotten-password w-3/4 md:w-1/2 lg:w-1/4 mx-auto" method="post">
 
     <ul class="ps-alert-error">
       {foreach $errors as $error}
@@ -45,21 +44,21 @@
     </ul>
 
     <header>
-      <p class="send-renew-password-link">{l s='Please enter the email address you used to register. You will receive a temporary link to reset your password.' d='Shop.Theme.Customeraccount'}</p>
+      <span class="send-renew-password-link">{l s='Please enter the registerd email address to recieve a link to reset your password.' d='Shop.Theme.Customeraccount'}</span>
     </header>
 
-    <section class="form-fields">
+    <section class="form-fields mt-2 w-full">
-      <div class="form-group center-email-fields">
+      <div class="form-group center-email-fields flex flex-col gap-4">
-        <label class="col-md-3 form-control-label required">{l s='Email address' d='Shop.Forms.Labels'}</label>
+        <div class="flex flex-col gap-1">
-        <div class="col-md-5 email">
+        <label class="font-medium form-control-label required">{l s='Email address' d='Shop.Forms.Labels'}</label>
-          <input type="email" name="email" id="email" value="{if isset($smarty.post.email)}{$smarty.post.email|stripslashes}{/if}" class="form-control" required>
+          <input type="email" name="email" id="email" value="{if isset($smarty.post.email)}{$smarty.post.email|stripslashes}{/if}" class="form-control px-2 py-1 border border-gray-300 w-full" required>
         </div>
-        <button class="form-control-submit btn btn-primary hidden-xs-down" name="submit" type="submit">
+        <button class="uppercase font-medium mt-2 py-2 text-center w-full bg-blue-950 hover:bg-blue-900 text-gray-50" name="submit" type="submit">
-          {l s='Send reset link' d='Shop.Theme.Actions'}
-        </button>
-        <button class="form-control-submit btn btn-primary hidden-sm-up" name="submit" type="submit">
           {l s='Send' d='Shop.Theme.Actions'}
         </button>
+        <a href="{$urls.pages.my_account}" class="text-base hover:underline underline-offset-2 hover:text-blue-900 font-normal text-center">
+        <span>{l s='Back to login' d='Shop.Theme.Actions'}</span>
+        </a>
       </div>
     </section>
 
@@ -67,8 +66,4 @@
 {/block}
 
 {block name='page_footer'}
-  <a href="{$urls.pages.my_account}" class="account-link">
-    <i class="material-icons">&#xE5CB;</i>
-    <span>{l s='Back to login' d='Shop.Theme.Actions'}</span>
-  </a>
 {/block}

templates/customer/password-infos.tpl

@@ -25,26 +25,19 @@
 {extends file='page.tpl'}
 
 {block name='page_title'}
-  {l s='Forgot your password?' d='Shop.Theme.Customeraccount'}
 {/block}
 
 {block name='page_content'}
-  <ul class="ps-alert-success">
+<div class="w-full flex flex-col gap-4 items-center justify-center">
+  <ul class="ps-alert-success w-3/4 mx-auto">
     {foreach $successes as $success}
       <li class="item">
-        <i>
+      <p class="md:text-lg text-center">{$success}</p>
-          <svg viewBox="0 0 24 24">
-            <path fill="#fff" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
-          </svg>
-        </i>
-        <p>{$success}</p>
-      </li>
     {/foreach}
   </ul>
+<a href="{$urls.pages.authentication}" class="text-base hover:underline underline-offset-2 hover:text-blue-900 font-normal mx-auto">{l s='Back to Login' d='Shop.Theme.Actions'}</a>
+</div>
 {/block}
 
 {block name='page_footer'}
-  <ul>
-    <li><a href="{$urls.pages.authentication}">{l s='Back to Login' d='Shop.Theme.Actions'}</a></li>
-  </ul>
 {/block}