From da68ef2f4f4eddd5e2760e491329f949ee6685c3 Mon Sep 17 00:00:00 2001
From: Ray C <rayc2045@gmail.com>
Date: Sat, 11 May 2024 11:43:55 +0800
Subject: [PATCH] Add gray button

---
 src/app.js                       | 6 ++++++
 src/components/product-card.html | 2 +-
 src/pages/shop/shop.html         | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/app.js b/src/app.js
index ec61097..dead55e 100644
--- a/src/app.js
+++ b/src/app.js
@@ -41,6 +41,9 @@ const style = {
     get light() {
       return `${this.raw} text-zinc-700 bg-zinc-100 border-zinc-100 hover:brightness-95`;
     },
+    get gray() {
+      return this.light.replaceAll('zinc-100', 'zinc-200');
+    },
     get outlined() {
       return `${this.raw} text-zinc-700 bg-zinc-100 border-zinc-600 hover:brightness-95`;
     },
@@ -51,6 +54,9 @@ const style = {
     get roundedLight() {
       return this.light.replace(this.raw, this.roundedRaw);
     },
+    get roundedGray() {
+      return this.gray.replace(this.raw, this.roundedRaw);
+    },
     get roundedOutlined() {
       return this.outlined.replace(this.raw, this.roundedRaw);
     },
diff --git a/src/components/product-card.html b/src/components/product-card.html
index 08a78e9..abe2d72 100644
--- a/src/components/product-card.html
+++ b/src/components/product-card.html
@@ -41,7 +41,7 @@
           id="cart-button"
           x-html="svg('bag')"
           class="mt-4 ml-1"
-          :class="btn.roundedLight"
+          :class="btn.roundedGray"
           @click="cart.addItem({
             name: product.name,
             color: currentColor,
diff --git a/src/pages/shop/shop.html b/src/pages/shop/shop.html
index 3cefae4..9829e24 100644
--- a/src/pages/shop/shop.html
+++ b/src/pages/shop/shop.html
@@ -56,7 +56,7 @@
           }"
           x-text="`${length} product${length > 1 ? 's' : ''}`"
         ></div>
-        <button :class="btn.roundedLight" @click="filter.hide()">✕</button>
+        <button :class="btn.roundedGray" @click="filter.hide()">✕</button>
       </section>
       <div
         x-html="component('products-filter')"