From 062e5a46d315255ea9ee6e6bdaf880a0e0607485 Mon Sep 17 00:00:00 2001
From: abhisheks <abhisheks@consultbop.com>
Date: Wed, 6 Dec 2023 17:37:42 +0530
Subject: [PATCH] refactor: udpate Address checkout step styles

---
 templates/checkout/_partials/address-form.tpl | 17 +++---
 .../_partials/address-selector-block.tpl      | 51 ++++++++--------
 .../checkout/_partials/steps/addresses.tpl    | 60 ++++++++++---------
 templates/customer/_partials/address-form.tpl |  2 +-
 4 files changed, 69 insertions(+), 61 deletions(-)

diff --git a/templates/checkout/_partials/address-form.tpl b/templates/checkout/_partials/address-form.tpl
index 435d5f4..f09387e 100644
--- a/templates/checkout/_partials/address-form.tpl
+++ b/templates/checkout/_partials/address-form.tpl
@@ -14,16 +14,17 @@
       action="{url entity='order' params=['id_address' => $id_address]}"
       data-id-address="{$id_address}"
       data-refresh-url="{url entity='order' params=['ajax' => 1, 'action' => 'addressForm']}"
+      class="w-full flex"
     >
 {/block}
 
 {block name='form_fields' append}
   <input type="hidden" name="saveAddress" value="{$type}">
   {if $type === "delivery"}
-    <div class="form-group row">
-      <div class="col-md-9 col-md-offset-3">
+    <div class="form-group w-full">
+      <div class="col-md-9 col-md-offset-3 flex items-center gap-2 py-2">
         <input name = "use_same_address" id="use_same_address" type = "checkbox" value = "1" {if $use_same_address} checked {/if}>
-        <label for="use_same_address">{l s='Use this address for invoice too' d='Shop.Theme.Checkout'}</label>
+        <label for="use_same_address" class="font-semibold">{l s='Use this address for invoice too' d='Shop.Theme.Checkout'}</label>
       </div>
     </div>
   {/if}
@@ -31,15 +32,15 @@
 
 {block name='form_buttons'}
   {if !$form_has_continue_button}
-    <button type="submit" class="btn btn-primary float-xs-right">{l s='Save' d='Shop.Theme.Actions'}</button>
-    <a class="js-cancel-address cancel-address float-xs-right" href="{url entity='order' params=['cancelAddress' => {$type}]}">{l s='Cancel' d='Shop.Theme.Actions'}</a>
+    <button type="submit" class="btn btn-primary float-xs-right flex-1 uppercase py-2 font-medium text-center bg-blue-950 text-gray-50 hover:text-gray-50 hover:bg-blue-900">{l s='Save' d='Shop.Theme.Actions'}</button>
+    <a class="js-cancel-address cancel-address float-xs-right flex-1 uppercase py-2 font-medium text-center border border-blue-950 text-blue-950 hover:text-blue-900 hover:border-blue-900" href="{url entity='order' params=['cancelAddress' => {$type}]}">{l s='Cancel' d='Shop.Theme.Actions'}</a>
   {else}
-    <form>
-      <button type="submit" class="continue btn btn-primary float-xs-right" name="confirm-addresses" value="1">
+    <form class="w-full flex">
+      <button type="submit" class="continue btn btn-primary float-xs-right flex-1 uppercase py-2 font-medium text-center bg-blue-950 text-gray-50 hover:text-gray-50 hover:bg-blue-900" name="confirm-addresses" value="1">
           {l s='Continue' d='Shop.Theme.Actions'}
       </button>
       {if $customer.addresses|count > 0}
-        <a class="js-cancel-address cancel-address float-xs-right" href="{url entity='order' params=['cancelAddress' => {$type}]}">{l s='Cancel' d='Shop.Theme.Actions'}</a>
+        <a class="js-cancel-address cancel-address float-xs-right flex-1 uppercase py-2 font-medium text-center border border-blue-950 text-blue-950 hover:text-blue-900 hover:border-blue-900" href="{url entity='order' params=['cancelAddress' => {$type}]}">{l s='Cancel' d='Shop.Theme.Actions'}</a>
       {/if}
     </form>
   {/if}
diff --git a/templates/checkout/_partials/address-selector-block.tpl b/templates/checkout/_partials/address-selector-block.tpl
index d46347e..4a5dd75 100644
--- a/templates/checkout/_partials/address-selector-block.tpl
+++ b/templates/checkout/_partials/address-selector-block.tpl
@@ -24,11 +24,11 @@
  *}
 {block name='address_selector_blocks'}
   {foreach $addresses as $address}
-    <article
-      class="address-item{if $address.id == $selected} selected{/if}"
+    <div
+      class="address-item{if $address.id == $selected} selected{/if} w-full md:w-1/2 flex justify-between pr-4 md:pr-12  mb-2"
       id="{$name|classname}-address-{$address.id}"
     >
-      <header class="h4">
+      <div class="flex gap-2">
         <label class="radio-block">
           <span class="custom-radio">
             <input
@@ -39,34 +39,35 @@
             >
             <span></span>
           </span>
-          <span class="address-alias h4">{$address.alias}</span>
-          <div class="address">{$address.formatted nofilter}</div>
         </label>
-      </header>
-      <hr>
-      <footer class="address-footer">
+        <div class="flex flex-col gap-1">
+          <span class="address-alias font-semibold">{$address.alias}</span>
+          <div class="address">{$address.formatted nofilter}</div>
+        </div>
+      </div>
         {if $interactive}
-          <a
-            class="edit-address text-muted"
-            data-link-action="edit-address"
-            href="{url entity='order' params=['id_address' => $address.id, 'editAddress' => $type, 'token' => $token]}"
-          >
-            <i class="material-icons edit">&#xE254;</i>{l s='Edit' d='Shop.Theme.Actions'}
-          </a>
-          <a
-            class="delete-address text-muted"
-            data-link-action="delete-address"
-            href="{url entity='order' params=['id_address' => $address.id, 'deleteAddress' => true, 'token' => $token]}"
-          >
-            <i class="material-icons delete">&#xE872;</i>{l s='Delete' d='Shop.Theme.Actions'}
-          </a>
+        <div class="flex flex-col justify-center gap-4">
+            <a
+              class="edit-address text-muted"
+              data-link-action="edit-address"
+              href="{url entity='order' params=['id_address' => $address.id, 'editAddress' => $type, 'token' => $token]}"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg>
+            </a>
+            <a
+              class="delete-address text-muted"
+              data-link-action="delete-address"
+              href="{url entity='order' params=['id_address' => $address.id, 'deleteAddress' => true, 'token' => $token]}"
+            >
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7l16 0" /><path d="M10 11l0 6" /><path d="M14 11l0 6" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg>
+            </a>
+          </div>
         {/if}
-      </footer>
-    </article>
+    </div>
   {/foreach}
   {if $interactive}
     <p>
-      <button class="ps-hidden-by-js form-control-submit center-block" type="submit">{l s='Save' d='Shop.Theme.Actions'}</button>
+      <button class="ps-hidden-by-js form-control-submit center-block flex-1 uppercase py-2 font-medium text-center bg-blue-950 text-gray-50 hover:text-gray-50 hover:bg-blue-900" type="submit">{l s='Save' d='Shop.Theme.Actions'}</button>
     </p>
   {/if}
 {/block}
diff --git a/templates/checkout/_partials/steps/addresses.tpl b/templates/checkout/_partials/steps/addresses.tpl
index a095b13..5699d15 100644
--- a/templates/checkout/_partials/steps/addresses.tpl
+++ b/templates/checkout/_partials/steps/addresses.tpl
@@ -26,25 +26,27 @@
 
 {block name='step_content'}
   {if !$step_is_complete}
-    <div class="js-address-form">
+    <div class="js-address-form p-4 flex flex-col gap-4">
       <form
         method="POST"
         action="{url entity='order' params=['id_address' => $id_address]}"
         data-refresh-url="{url entity='order' params=['ajax' => 1, 'action' => 'addressForm']}"
+        class="w-full flex flex-col gap-8"
       >
 
+      <div class="w-full flex flex-col gap-4">
         {if !$use_same_address}
-          <h2 class="h4">{l s='Shipping Address' d='Shop.Theme.Checkout'}</h2>
+          <h2 class="text-lg">{l s='Shipping Address' d='Shop.Theme.Checkout'}</h2>
         {/if}
 
         {if $use_same_address && !$cart.is_virtual}
-          <p>
+          <span class="font-semibold mb-2">
             {l s='The selected address will be used both as your personal address (for invoice) and as your delivery address.' d='Shop.Theme.Checkout'}
-          </p>
+          </span>
         {elseif $use_same_address && $cart.is_virtual}
-          <p>
+          <span class="font-semibold mb-2">
             {l s='The selected address will be used as your personal address (for invoice).' d='Shop.Theme.Checkout'}
-          </p>
+          </span>
         {/if}
 
         {if $show_delivery_address_form}
@@ -57,7 +59,7 @@
             }
           </div>
         {elseif $customer.addresses|count > 0}
-          <div id="delivery-addresses" class="address-selector js-address-selector">
+          <div id="delivery-addresses" class="address-selector js-address-selector w-full flex max-md:flex-col gap-4 flex-wrap md:gap-0">
             {include  file        = 'checkout/_partials/address-selector-block.tpl'
               addresses   = $customer.addresses
               name        = "id_address_delivery"
@@ -73,24 +75,24 @@
             <p class="alert alert-danger js-address-error" name="alert-delivery" style="display: none">{l s="Your address is incomplete, please update it." d="Shop.Notifications.Error"}</p>
           {/if}
 
-          <p class="add-address">
-            <a href="{$new_address_delivery_url}"><i class="material-icons">&#xE145;</i>{l s='add new address' d='Shop.Theme.Actions'}</a>
-          </p>
-
-          {if $use_same_address && !$cart.is_virtual}
-            <p>
-              <a data-link-action="different-invoice-address" href="{$use_different_address_url}">
+          <div class="add-address w-full flex flex-col gap-2">
+            <a href="{$new_address_delivery_url}" class="flex items-center gap-2">
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19 12h2l-9 -9l-9 9h2v7a2 2 0 0 0 2 2h5.5" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2" /><path d="M16 19h6" /><path d="M19 16v6" /></svg>
+              {l s='add new address' d='Shop.Theme.Actions'}
+            </a>
+            {if $use_same_address && !$cart.is_virtual}
+              <a data-link-action="different-invoice-address" class="flex items-center gap-2" href="{$use_different_address_url}">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-layers-difference" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M16 16v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2h2v-2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2" /><path d="M10 8l-2 0l0 2" /><path d="M8 14l0 2l2 0" /><path d="M14 8l2 0l0 2" /><path d="M16 14l0 2l-2 0" /></svg>
                 {l s='Billing address differs from shipping address' d='Shop.Theme.Checkout'}
               </a>
-            </p>
-          {/if}
-
+            {/if}
+          </div>
         {/if}
-
+      </div>
         {if !$use_same_address}
-
-          <h2 class="h4">{l s='Your Invoice Address' d='Shop.Theme.Checkout'}</h2>
-
+      <hr>
+      <div class="w-full flex flex-col gap-4">
+          <h2 class="text-lg">{l s='Your Invoice Address' d='Shop.Theme.Checkout'}</h2>
           {if $show_invoice_address_form}
             <div id="invoice-address">
               {render file                      = 'checkout/_partials/address-form.tpl'
@@ -101,7 +103,7 @@
               }
             </div>
           {else}
-            <div id="invoice-addresses" class="address-selector js-address-selector">
+            <div id="invoice-addresses" class="address-selector js-address-selector w-full flex max-md:flex-col gap-4 flex-wrap md:gap-0">
               {include  file        = 'checkout/_partials/address-selector-block.tpl'
                 addresses   = $customer.addresses
                 name        = "id_address_invoice"
@@ -117,16 +119,20 @@
               <p class="alert alert-danger js-address-error" name="alert-invoice" style="display: none">{l s="Your address is incomplete, please update it." d="Shop.Notifications.Error"}</p>
             {/if}
 
-            <p class="add-address">
-              <a href="{$new_address_invoice_url}"><i class="material-icons">&#xE145;</i>{l s='add new address' d='Shop.Theme.Actions'}</a>
-            </p>
+            <div class="add-address w-full">
+              <a href="{$new_address_invoice_url}"  class="flex items-center gap-2">
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19 12h2l-9 -9l-9 9h2v7a2 2 0 0 0 2 2h5.5" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2" /><path d="M16 19h6" /><path d="M19 16v6" /></svg>
+              {l s='add new address' d='Shop.Theme.Actions'}
+              </a>
+            </div>
+          </div>
           {/if}
 
         {/if}
 
         {if !$form_has_continue_button}
-          <div class="clearfix">
-            <button type="submit" class="btn btn-primary continue float-xs-right" name="confirm-addresses" value="1">
+          <div class="clearfix w-full flex">
+            <button type="submit" class="flex-1 uppercase py-2 font-medium text-center bg-blue-950 text-gray-50 hover:text-gray-50 hover:bg-blue-900" name="confirm-addresses" value="1">
               {l s='Continue' d='Shop.Theme.Actions'}
             </button>
             <input type="hidden" id="not-valid-addresses" value="{$not_valid_addresses}">
diff --git a/templates/customer/_partials/address-form.tpl b/templates/customer/_partials/address-form.tpl
index 3f30e0f..e43ddc5 100644
--- a/templates/customer/_partials/address-form.tpl
+++ b/templates/customer/_partials/address-form.tpl
@@ -48,7 +48,7 @@
       {/block}
 
       {block name="address_form_footer"}
-      <footer class="form-footer clearfix">
+      <footer class="form-footer w-full flex max-md:flex-col gap-2">
         <input type="hidden" name="submitAddress" value="1">
         {block name='form_buttons'}
           <button class="btn btn-primary float-xs-right" type="submit" class="form-control-submit">