From c8af2389796cabed54aa4d79f32cf11cbf69a232 Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Sat, 15 Jul 2023 12:21:49 -0500
Subject: [PATCH] Adds focus styles. (#1080)

---
 app/globals.css                          | 6 ++++++
 app/product/[handle]/page.tsx            | 2 +-
 components/carousel.tsx                  | 6 +++---
 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, 22 insertions(+), 22 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..408e24e4f 100644
--- a/components/carousel.tsx
+++ b/components/carousel.tsx
@@ -9,13 +9,13 @@ 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">
+    <div className=" w-full overflow-x-auto pb-6 pt-1">
+      <div className="flex animate-carousel gap-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"
+            className="h-[30vh] w-2/3 flex-none md:w-1/3"
           >
             <GridTileImage
               alt={product.title}
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 (