From 6ecd4516283f90b556fdb5f59a0dff34178f0870 Mon Sep 17 00:00:00 2001
From: Ray C <rayc2045@gmail.com>
Date: Thu, 23 May 2024 17:21:27 +0800
Subject: [PATCH] Update cart items spacing

---
 src/pages/shop/cart.html     | 18 +++++++++++-------
 src/pages/shop/checkout.html | 23 +++++++++++++----------
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/pages/shop/cart.html b/src/pages/shop/cart.html
index 541fa7c..3e7491a 100644
--- a/src/pages/shop/cart.html
+++ b/src/pages/shop/cart.html
@@ -3,9 +3,9 @@
     x-show="cart.items.length"
     class="grid lg:grid-cols-12 gap-8 md:px-12 lg:p-0 relative"
   >
-    <div class="lg:col-span-8">
+    <ul class="lg:col-span-8">
       <template x-for="item in cart.items" :key="item.name">
-        <div
+        <li
           x-data="{ lowerName: item.name.toLowerCase().replaceAll(' ', '_') }"
           class="py-8 grid grid-cols-12 gap-4 sm:gap-8 border-t border-gray-300"
         >
@@ -22,9 +22,13 @@
           </a>
 
           <div class="col-span-5 self-center space-y-2">
-            <h3 x-text="item.name" class="text-lg font-bold"></h3>
-            <div class="text-gray-500">
-              Color:
+            <a
+              :href="`#/shop/${item.category}/${lowerName}?color=${item.color}`"
+            >
+              <h3 x-text="item.name" class="text-lg font-bold"></h3>
+            </a>
+            <div class="flex items-center space-x-2 text-gray-500">
+              <span>Color:</span>
               <span x-text="capitalizeFirstLetter(item.color)"></span>
             </div>
             <div class="flex items-center space-x-2 text-gray-500">
@@ -71,9 +75,9 @@ <h3 x-text="item.name" class="text-lg font-bold"></h3>
               ✕
             </button>
           </div>
-        </div>
+        </li>
       </template>
-    </div>
+    </ul>
 
     <div
       id="order-summary"
diff --git a/src/pages/shop/checkout.html b/src/pages/shop/checkout.html
index df81cef..226d7d7 100644
--- a/src/pages/shop/checkout.html
+++ b/src/pages/shop/checkout.html
@@ -31,9 +31,9 @@ <h2 class="text-xl font-bold">Payment Options</h2>
         <div x-cloak x-show="open" x-transition.origin.top>
           <ul>
             <template x-for="(item, idx) in cart.items" :key="item.name">
-              <div
+              <li
                 x-data="{ lowerName: item.name.toLowerCase().replaceAll(' ', '_') }"
-                class="py-8 grid grid-cols-12 gap-x-4"
+                class="py-6 grid grid-cols-12 gap-x-4"
                 :class="idx > 0 && 'border-t border-gray-300'"
               >
                 <a
@@ -50,11 +50,15 @@ <h2 class="text-xl font-bold">Payment Options</h2>
 
                 <div
                   :class="item.num > 100 ? 'col-span-6' : 'col-span-7'"
-                  class="self-center space-y-2"
+                  class="self-center space-y-1"
                 >
-                  <h3 x-text="item.name" class="text-lg font-bold"></h3>
-                  <div class="text-gray-500">
-                    Color:
+                  <a
+                    :href="`#/shop/${item.category}/${lowerName}?color=${item.color}`"
+                  >
+                    <h3 x-text="item.name" class="text-lg font-bold"></h3>
+                  </a>
+                  <div class="flex items-center space-x-2 text-gray-500">
+                    <span>Color:</span>
                     <span x-text="capitalizeFirstLetter(item.color)"></span>
                   </div>
                   <div class="flex items-center space-x-2 text-gray-500">
@@ -74,11 +78,10 @@ <h3 x-text="item.name" class="text-lg font-bold"></h3>
                   :class="item.num > 100 ? 'col-span-3' : 'col-span-2'"
                   class="self-center mx-auto"
                 >
-                  <span class="text-sm">✕</span>&nbsp;<span
-                    x-text="`${item.num}`"
-                  ></span>
+                  <span class="text-sm">✕</span>
+                  <span x-text="`${item.num}`"></span>
                 </div>
-              </div>
+              </li>
             </template>
           </ul>
           <a href="#/cart" :class="btn.outlined">