From 1381783490968164a925e1663874b585bfeb5a9b Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Sat, 15 Jul 2023 00:30:22 -0500
Subject: [PATCH] Adds focus styles

---
 app/globals.css                          |  6 ++++
 app/product/[handle]/page.tsx            |  2 +-
 components/carousel.tsx                  | 44 +++++++++++-------------
 components/cart/modal.tsx                |  8 ++---
 components/grid/index.tsx                |  9 ++---
 components/grid/tile.tsx                 |  9 +++--
 components/layout/product-grid-items.tsx |  2 +-
 components/product/gallery.tsx           |  2 +-
 8 files changed, 40 insertions(+), 42 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index c0eca5423..a941157bd 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -7,3 +7,9 @@
     clip-path: inset(0.6px);
   }
 }
+
+a,
+input,
+button {
+  @apply focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-gray-600 dark:focus:ring-offset-dark;
+}
diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx
index 4fc443f9a..d9c7b9e40 100644
--- a/app/product/[handle]/page.tsx
+++ b/app/product/[handle]/page.tsx
@@ -115,7 +115,7 @@ async function RelatedProducts({ id }: { id: string }) {
   return (
     <div className="px-4 py-8">
       <div className="mb-4 text-3xl font-bold">Related Products</div>
-      <div className="flex flex-row space-x-4 overflow-auto">
+      <div className="flex w-full gap-4 overflow-x-auto pt-1">
         {relatedProducts.map((product, i) => {
           return (
             <Link
diff --git a/components/carousel.tsx b/components/carousel.tsx
index 100123166..0c2c45580 100644
--- a/components/carousel.tsx
+++ b/components/carousel.tsx
@@ -9,29 +9,27 @@ export async function Carousel() {
   if (!products?.length) return null;
 
   return (
-    <div className="relative w-full overflow-hidden pb-6">
-      <div className="flex animate-carousel space-x-4">
-        {[...products, ...products].map((product, i) => (
-          <Link
-            key={`${product.handle}${i}`}
-            href={`/product/${product.handle}`}
-            className="relative h-[30vh] w-2/3 flex-none rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black md:w-1/3"
-          >
-            <GridTileImage
-              alt={product.title}
-              labels={{
-                isSmall: true,
-                title: product.title,
-                amount: product.priceRange.maxVariantPrice.amount,
-                currencyCode: product.priceRange.maxVariantPrice.currencyCode
-              }}
-              src={product.featuredImage?.url}
-              width={600}
-              height={600}
-            />
-          </Link>
-        ))}
-      </div>
+    <div className="flex w-full gap-4 overflow-x-auto pb-6 pt-1">
+      {[...products, ...products].map((product, i) => (
+        <Link
+          key={`${product.handle}${i}`}
+          href={`/product/${product.handle}`}
+          className="h-[30vh] w-2/3 flex-none md:w-1/3"
+        >
+          <GridTileImage
+            alt={product.title}
+            labels={{
+              isSmall: true,
+              title: product.title,
+              amount: product.priceRange.maxVariantPrice.amount,
+              currencyCode: product.priceRange.maxVariantPrice.currencyCode
+            }}
+            src={product.featuredImage?.url}
+            width={600}
+            height={600}
+          />
+        </Link>
+      ))}
     </div>
   );
 }
diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
index 25e3ccfd0..c2ed2d1ae 100644
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@@ -79,7 +79,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                   <p className="mt-6 text-center text-2xl font-bold">Your cart is empty.</p>
                 </div>
               ) : (
-                <div className="flex h-full flex-col justify-between overflow-hidden">
+                <div className="flex h-full flex-col justify-between overflow-hidden p-1">
                   <ul className="flex-grow overflow-auto py-4">
                     {cart.lines.map((item, i) => {
                       const merchandiseSearchParams = {} as MerchandiseSearchParams;
@@ -101,7 +101,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                           data-testid="cart-item"
                           className="flex w-full flex-col border-b border-gray-300 dark:border-gray-700"
                         >
-                          <div className="relative flex w-full flex-row justify-between py-4">
+                          <div className="relative flex w-full flex-row justify-between px-1 py-4">
                             <div className="absolute z-40 -mt-2 ml-[55px]">
                               <DeleteItemButton item={item} />
                             </div>
@@ -180,9 +180,9 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                   </div>
                   <a
                     href={cart.checkoutUrl}
-                    className="flex w-full items-center justify-center rounded-full bg-blue-600 p-3 text-sm font-medium text-white opacity-90 hover:opacity-100"
+                    className="block w-full rounded-full bg-blue-600 p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
                   >
-                    <span>Proceed to Checkout</span>
+                    Proceed to Checkout
                   </a>
                 </div>
               )}
diff --git a/components/grid/index.tsx b/components/grid/index.tsx
index 346a7833b..2af9a9767 100644
--- a/components/grid/index.tsx
+++ b/components/grid/index.tsx
@@ -10,17 +10,12 @@ function Grid(props: React.ComponentProps<'ul'>) {
 
 function GridItem(props: React.ComponentProps<'li'>) {
   return (
-    <li
-      {...props}
-      className={clsx(
-        'relative aspect-square h-full w-full overflow-hidden transition-opacity',
-        props.className
-      )}
-    >
+    <li {...props} className={clsx('aspect-square transition-opacity', props.className)}>
       {props.children}
     </li>
   );
 }
 
 Grid.Item = GridItem;
+
 export default Grid;
diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx
index c039a6727..87ec8f3f1 100644
--- a/components/grid/tile.tsx
+++ b/components/grid/tile.tsx
@@ -22,12 +22,11 @@ export function GridTileImage({
   return (
     <div
       className={clsx(
-        'relative flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white hover:border-blue-600 dark:bg-black',
-        active !== undefined && active
-          ? 'border-2 border-blue-600'
-          : 'border-gray-200 dark:border-gray-800',
+        'flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white hover:border-blue-600 dark:bg-black',
         {
-          relative: labels
+          relative: labels,
+          'border-2 border-blue-600': active,
+          'border-gray-200 dark:border-gray-800': !active
         }
       )}
     >
diff --git a/components/layout/product-grid-items.tsx b/components/layout/product-grid-items.tsx
index 0c0e907ed..364d4e5df 100644
--- a/components/layout/product-grid-items.tsx
+++ b/components/layout/product-grid-items.tsx
@@ -8,7 +8,7 @@ export default function ProductGridItems({ products }: { products: Product[] })
     <>
       {products.map((product) => (
         <Grid.Item key={product.handle} className="animate-fadeIn">
-          <Link className="h-full w-full" href={`/product/${product.handle}`}>
+          <Link className="inline-block h-full w-full" href={`/product/${product.handle}`}>
             <GridTileImage
               alt={product.title}
               labels={{
diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
index b0730a9d8..745ea4bd4 100644
--- a/components/product/gallery.tsx
+++ b/components/product/gallery.tsx
@@ -57,7 +57,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
       </div>
 
       {images.length > 1 ? (
-        <div className="flex items-center justify-center space-x-2 overflow-auto">
+        <div className="flex items-center justify-center gap-2 overflow-auto py-1">
           {images.map((image, index) => {
             const isActive = index === currentImage;
             return (