From 0d44432e6ddc214b7d4cf6bca1c6be5b2fd8bcef Mon Sep 17 00:00:00 2001
From: abhisheks <abhisheks@consultbop.com>
Date: Wed, 20 Dec 2023 12:03:03 +0530
Subject: [PATCH] refactor: design forgot password page

---
 assets/css/theme.css                  |  5 +++++
 templates/customer/password-email.tpl | 27 +++++++++++----------------
 templates/customer/password-infos.tpl | 17 +++++------------
 3 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/assets/css/theme.css b/assets/css/theme.css
index 274f908..2c42d0e 100644
--- a/assets/css/theme.css
+++ b/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;
   }
diff --git a/templates/customer/password-email.tpl b/templates/customer/password-email.tpl
index dcfbc60..f1a6ef6 100644
--- a/templates/customer/password-email.tpl
+++ b/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">
-      <div class="form-group center-email-fields">
-        <label class="col-md-3 form-control-label required">{l s='Email address' d='Shop.Forms.Labels'}</label>
-        <div class="col-md-5 email">
-          <input type="email" name="email" id="email" value="{if isset($smarty.post.email)}{$smarty.post.email|stripslashes}{/if}" class="form-control" required>
+    <section class="form-fields mt-2 w-full">
+      <div class="form-group center-email-fields flex flex-col gap-4">
+        <div class="flex flex-col gap-1">
+        <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 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">
-          {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">
+        <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' 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}
diff --git a/templates/customer/password-infos.tpl b/templates/customer/password-infos.tpl
index d829349..00f0033 100644
--- a/templates/customer/password-infos.tpl
+++ b/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>
-          <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>
+      <p class="md:text-lg text-center">{$success}</p>
     {/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}