Adds focus styles. (#1080)

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;
+}

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

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}

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>
               )}

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;

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
         }
       )}
     >

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={{

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 (