update styles

Author: Steph Dietz

frontend/app/components/cart.tsx

@@ -1,6 +1,13 @@
 "use client";
 
+import {
+  MinusIcon,
+  PlusIcon,
+  ShoppingCartIcon,
+  XMarkIcon,
+} from "@heroicons/react/16/solid";
 import { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
 
 function Price({ amount, currencyCode, className }) {
   return (
@@ -11,24 +18,56 @@ function Price({ amount, currencyCode, className }) {
 }
 
 function CloseCart() {
-  return <span>X</span>;
+  return (
+    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
+      <XMarkIcon
+        className={clsx("h-6 transition-all ease-in-out hover:scale-110 ")}
+      />
+    </div>
+  );
 }
 
 function OpenCart({ quantity }) {
   return (
-    <div>
-      <span>Cart</span>
-      {quantity > 0 && <span>({quantity})</span>}
+    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border transition-colors border-neutral-700 text-white">
+      <ShoppingCartIcon className="h-4 transition-all ease-in-out hover:scale-110" />
+      <div className="flex items-center justify-center flex-none font-bold absolute top-0 bg-indigo-500 text-black w-5 h-5 rounded-full -mt-2 right-0 -mr-2 text-xs text-white">
+        {quantity > 0 && <span>{quantity}</span>}
+      </div>
     </div>
   );
 }
 
 function DeleteItemButton({ item }) {
-  return <button>Delete</button>;
+  return (
+    <button
+      type="submit"
+      aria-label="Remove cart item"
+      className="ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-neutral-500 transition-all duration-200"
+    >
+      <XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white" />
+    </button>
+  );
 }
 
 function EditItemQuantityButton({ item, type }) {
-  return <button>{type === "minus" ? "-" : "+"}</button>;
+  return (
+    <button
+      type="submit"
+      className={clsx(
+        "ease flex h-full min-w-[36px] max-w-[36px] flex-none items-center justify-center rounded-full px-2 transition-all duration-200 hover:border-neutral-800 hover:opacity-80",
+        {
+          "ml-auto": type === "minus",
+        }
+      )}
+    >
+      {type === "plus" ? (
+        <PlusIcon className="h-4 w-4 dark:text-neutral-500" />
+      ) : (
+        <MinusIcon className="h-4 w-4 dark:text-neutral-500" />
+      )}
+    </button>
+  );
 }
 
 export default function CartModal() {
@@ -101,7 +140,7 @@ export default function CartModal() {
       {isOpen && (
         <div className="relative z-50">
           <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
-          <div className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white p-6 text-black md:w-[390px]">
+          <div className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-700 bg-black p-6 text-white md:w-[390px]">
             <div className="flex items-center justify-between">
               <p className="text-lg font-semibold">My Cart</p>
               <button aria-label="Close cart" onClick={closeCart}>
@@ -121,7 +160,7 @@ export default function CartModal() {
                   {cart.lines.map((item, i) => (
                     <li
                       key={i}
-                      className="flex w-full flex-col border-b border-neutral-300"
+                      className="flex w-full flex-col border-b border-neutral-700"
                     >
                       <div className="relative flex w-full flex-row justify-between px-1 py-4">
                         <div className="absolute z-40 -mt-2 ml-[55px]">
@@ -132,7 +171,7 @@ export default function CartModal() {
                           onClick={closeCart}
                           className="z-30 flex flex-row space-x-4"
                         >
-                          <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300">
+                          <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-700 bg-neutral-700">
                             <img
                               className="h-full w-full object-cover"
                               width={64}
@@ -149,7 +188,7 @@ export default function CartModal() {
                               {item.merchandise.product.title}
                             </span>
                             {item.merchandise.title !== "Default Option" && (
-                              <p className="text-sm text-neutral-500">
+                              <p className="text-sm text-neutral-300">
                                 {item.merchandise.title}
                               </p>
                             )}
@@ -161,7 +200,7 @@ export default function CartModal() {
                             amount={item.cost.totalAmount.amount}
                             currencyCode={item.cost.totalAmount.currencyCode}
                           />
-                          <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200">
+                          <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-700">
                             <EditItemQuantityButton item={item} type="minus" />
                             <p className="w-6 text-center">
                               <span className="w-full text-sm">
@@ -175,31 +214,31 @@ export default function CartModal() {
                     </li>
                   ))}
                 </ul>
-                <div className="py-4 text-sm text-neutral-500">
-                  <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1">
+                <div className="py-4 text-sm text-neutral-300">
+                  <div className="mb-3 flex items-center justify-between border-b border-neutral-700 pb-1">
                     <p>Taxes</p>
                     <Price
-                      className="text-right text-base text-black"
+                      className="text-right text-base text-white"
                       amount={cart.cost.totalTaxAmount.amount}
                       currencyCode={cart.cost.totalTaxAmount.currencyCode}
                     />
                   </div>
-                  <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1">
+                  <div className="mb-3 flex items-center justify-between border-b border-neutral-700 pb-1 pt-1">
                     <p>Shipping</p>
                     <p className="text-right">Calculated at checkout</p>
                   </div>
-                  <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1">
+                  <div className="mb-3 flex items-center justify-between border-b border-neutral-700 pb-1 pt-1">
                     <p>Total</p>
                     <Price
-                      className="text-right text-base text-black"
+                      className="text-right text-base text-white"
                       amount={cart.cost.totalAmount.amount}
                       currencyCode={cart.cost.totalAmount.currencyCode}
                     />
                   </div>
                 </div>
                 <a
                   href={cart.checkoutUrl}
-                  className="block w-full rounded-full bg-blue-600 p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
+                  className="block w-full rounded-full bg-indigo-500 p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
                 >
                   Proceed to Checkout
                 </a>