Add gray button

rayc2045 · May 11, 2024 · da68ef2 · da68ef2
1 parent 4938d2d
commit da68ef2
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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')"