fix: add correct styles for book cart

css/styles.css

@@ -421,6 +421,7 @@ site-content {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--spacing-md, 1rem); /* 16px */
+  padding-bottom: var(--spacing-md, 1rem);
 }
 
 /* ==========================================================================

index.html

@@ -52,8 +52,9 @@
                 stroke-linecap="round"
                 stroke-linejoin="round"
               >
-                <circle cx="12" cy="8" r="5"></circle>
+                <path d="M18 20a6 6 0 0 0-12 0" />
-                <path d="M20 21a8 8 0 0 0-16 0"></path>
+                <circle cx="12" cy="10" r="4" />
+                <circle cx="12" cy="12" r="10" />
               </svg>
             </button>
             <button class="icon-button" aria-label="Shopping basket">
@@ -68,11 +69,11 @@
                 stroke-linecap="round"
                 stroke-linejoin="round"
               >
+                <circle cx="8" cy="21" r="1" />
+                <circle cx="19" cy="21" r="1" />
                 <path
-                  d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"
+                  d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"
-                ></path>
+                />
-                <path d="M3 6h18"></path>
-                <path d="M16 10a4 4 0 0 1-8 0"></path>
               </svg>
             </button>
           </div>
@@ -132,69 +133,43 @@
         </section>
 
         <section class="section">
-          <section-title text="New Releases"></section-title>
+          <section-title text="Featured Books"></section-title>
           <div class="book-grid">
             <book-card
-              title="Tomorrow, and Tomorrow"
+              title="The Midnight Library"
-              author="Gabrielle Zevin"
+              description="A library of infinite possibilities"
-              price="$15.99"
+              author="Matt Haig"
-              rating="4"
-              href="book.html"
-            ></book-card>
-            <book-card
-              title="The House in the Pines"
-              author="Ana Reyes"
-              price="$13.99"
-              rating="3.5"
-              href="book.html"
-            ></book-card>
-            <book-card
-              title="Demon Copperhead"
-              author="Barbara Kingsolver"
-              price="$19.99"
-              rating="5"
-              href="book.html"
-            ></book-card>
-            <book-card
-              title="The Light We Carry"
-              author="Michelle Obama"
-              price="$17.99"
-              rating="4.5"
-              href="book.html"
-            ></book-card>
-          </div>
-        </section>
-
-        <section class="section">
-          <section-title text="Best Sellers"></section-title>
-          <div class="book-grid">
-            <book-card
-              title="Where the Crawdads Sing"
-              author="Delia Owens"
-              price="$11.99"
-              rating="4.5"
-              href="book.html"
-            ></book-card>
-            <book-card
-              title="The Silent Patient"
-              author="Alex Michaelides"
               price="$14.99"
-              rating="4"
-              href="book.html"
-            ></book-card>
-            <book-card
-              title="Educated"
-              author="Tara Westover"
-              price="$13.99"
               rating="4.5"
               href="book.html"
+              theme="dark"
             ></book-card>
             <book-card
-              title="Becoming"
+              title="Atomic Habits"
-              author="Michelle Obama"
+              description="A simple, proven system for breaking bad habits and forming good ones"
+              author="James Clear"
               price="$16.99"
               rating="5"
               href="book.html"
+              theme="dark"
+            ></book-card>
+            <book-card
+              title="The Psychology of Money"
+              description="A book about the psychology of money and how it affects our lives"
+              author="Morgan Housel"
+              price="$12.99"
+              rating="4"
+              href="book.html"
+              theme="dark"
+            ></book-card>
+            <book-card
+              title="Project Hail Mary"
+              description="A book about the science of space travel and the future of humanity"
+              author="Andy Weir"
+              price="$18.99"
+              rating="4.5"
+              href="book.html"
+              theme="dark"
             ></book-card>
           </div>
         </section>

js/components/add-to-cart-button.js

@@ -61,8 +61,8 @@ class AddToCartButton extends HTMLElement {
         }
 
         .add-to-cart-button svg {
-          width: 16px;
+          width: 24px;
-          height: 16px;
+          height: 24px;
           color: var(--color-text-inverse, #ffffff);
         }
       </style>

js/components/arrow-button.js

@@ -51,16 +51,12 @@ class ArrowButton extends HTMLElement {
           display: flex;
           align-items: center;
           justify-content: center;
-          width: 24px;
-          height: 24px;
-          border: 1.5px solid currentColor;
-          border-radius: 50%;
           flex-shrink: 0;
         }
 
         .arrow-icon svg {
-          width: 12px;
+          width: 24px;
-          height: 12px;
+          height: 24px;
           stroke: currentColor;
           fill: none;
         }
@@ -72,9 +68,10 @@ class ArrowButton extends HTMLElement {
       </style>
       <a class="arrow-button" href="${this.href}">
         <span class="arrow-icon">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M5 12h14"></path>
+            <circle cx="12" cy="12" r="10"/>
-            <path d="m12 5 7 7-7 7"></path>
+            <path d="m12 16 4-4-4-4"/>
+            <path d="M8 12h8"/>
           </svg>
         </span>
         <span class="button-text">

js/components/book-card.js

@@ -27,7 +27,8 @@ class BookCard extends HTMLElement {
   }
 
   setupEventListeners() {
-    const addToCartButton = this.shadowRoot?.querySelector("add-to-cart-button");
+    const addToCartButton =
+      this.shadowRoot?.querySelector("add-to-cart-button");
     if (addToCartButton) {
       addToCartButton.addEventListener("add-to-cart", (e) => {
         e.stopPropagation();

js/components/site-footer.js

@@ -5,7 +5,7 @@
 class SiteFooter extends HTMLElement {
   constructor() {
     super();
-    this.attachShadow({ mode: 'open' });
+    this.attachShadow({ mode: "open" });
   }
 
   connectedCallback() {
@@ -17,7 +17,7 @@ class SiteFooter extends HTMLElement {
       <style>
         :host {
           display: block;
-          background-color: var(--color-background-secondary, #f8fafc);
+          background-color: var(--color-button-primary, #951D51);
           border-top: 1px solid var(--color-border, #e2e8f0);
         }
 
@@ -34,13 +34,13 @@ class SiteFooter extends HTMLElement {
 
         .footer-link {
           font-size: var(--font-size-sm, 0.875rem);
-          color: var(--color-text-light, #64748b);
+          color: var(--color-text-inverse, #ffffff);
           text-decoration: none;
           transition: color var(--transition-fast, 150ms ease);
         }
 
         .footer-link:hover {
-          color: var(--color-primary, #2563eb);
+          color: rgba(255, 255, 255, 0.8);
         }
 
         .social-icons {
@@ -55,15 +55,15 @@ class SiteFooter extends HTMLElement {
           justify-content: center;
           width: 40px;
           height: 40px;
-          color: var(--color-text-light, #64748b);
+          color: var(--color-text-inverse, #ffffff);
-          background-color: var(--color-background, #ffffff);
+          background-color: rgba(255, 255, 255, 0.2);
           border-radius: var(--radius-full, 9999px);
           transition: all var(--transition-fast, 150ms ease);
         }
 
         .social-icon:hover {
-          color: var(--color-primary, #2563eb);
+          color: var(--color-text-inverse, #ffffff);
-          background-color: var(--color-background-tertiary, #f1f5f9);
+          background-color: rgba(255, 255, 255, 0.3);
         }
 
         .social-icon svg {
@@ -73,7 +73,7 @@ class SiteFooter extends HTMLElement {
 
         .copyright {
           font-size: var(--font-size-xs, 0.75rem);
-          color: var(--color-text-light, #64748b);
+          color: var(--color-text-inverse, #ffffff);
           text-align: center;
         }
       </style>
@@ -108,4 +108,4 @@ class SiteFooter extends HTMLElement {
   }
 }
 
-customElements.define('site-footer', SiteFooter);
+customElements.define("site-footer", SiteFooter);

js/icons/mic.js

@@ -23,9 +23,9 @@ export function micIcon({
       stroke-linecap="round"
       stroke-linejoin="round"
     >
-      <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
+      <path d="M12 19v3"/>
       <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
-      <line x1="12" x2="12" y1="19" y2="22"/>
+      <rect x="9" y="2" width="6" height="13" rx="3"/>
     </svg>
   `;
 }

js/icons/search.js

@@ -23,8 +23,8 @@ export function searchIcon({
       stroke-linecap="round"
       stroke-linejoin="round"
     >
+      <path d="m21 21-4.34-4.34"/>
       <circle cx="11" cy="11" r="8"/>
-      <path d="m21 21-4.3-4.3"/>
     </svg>
   `;
 }

js/icons/shopping-bag.js

@@ -23,9 +23,9 @@ export function shoppingBagIcon({
       stroke-linecap="round"
       stroke-linejoin="round"
     >
-      <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/>
+      <circle cx="8" cy="21" r="1"/>
-      <path d="M3 6h18"/>
+      <circle cx="19" cy="21" r="1"/>
-      <path d="M16 10a4 4 0 0 1-8 0"/>
+      <path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/>
     </svg>
   `;
 }

js/icons/user.js

@@ -23,8 +23,9 @@ export function userIcon({
       stroke-linecap="round"
       stroke-linejoin="round"
     >
-      <circle cx="12" cy="8" r="5"/>
+      <path d="M18 20a6 6 0 0 0-12 0"/>
-      <path d="M20 21a8 8 0 0 0-16 0"/>
+      <circle cx="12" cy="10" r="4"/>
+      <circle cx="12" cy="12" r="10"/>
     </svg>
   `;
 }