From b0116ac0cb61bacb0dead04e2980991a74bf94cb Mon Sep 17 00:00:00 2001
From: Rami Bitar <rbitar@gmail.com>
Date: Wed, 10 Jun 2026 14:11:11 -0400
Subject: [PATCH] Redesign not-found and error states with clean black/white
 text

Replace red alert boxes, icons, borders, and buttons with simple
centered text for product/collection not-found, load-failure, and
empty states.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 components/shopify/collection-detail.tsx    | 45 +++++++--------------
 components/shopify/collections.tsx          | 33 +++++----------
 components/shopify/product-detail/index.tsx | 27 ++++---------
 components/shopify/products.tsx             | 31 +++++---------
 4 files changed, 42 insertions(+), 94 deletions(-)

diff --git a/components/shopify/collection-detail.tsx b/components/shopify/collection-detail.tsx
index 17913f4..2d4ee70 100644
--- a/components/shopify/collection-detail.tsx
+++ b/components/shopify/collection-detail.tsx
@@ -9,7 +9,7 @@ const CollectionDetail: React.FC = () => {
   const params = useParams();
   const handle = params?.handle as string;
 
-  const { collection, loading, error, refetch } = useCollectionProducts(handle);
+  const { collection, loading, error } = useCollectionProducts(handle);
 
   // Format title from handle
   const formattedTitle = handle
@@ -42,26 +42,14 @@ const CollectionDetail: React.FC = () => {
   if (error) {
     return (
       <div className="pt-4 pb-16">
-        <div className="container mx-auto px-4 text-center">
-          <h2 className="text-4xl font-medium tracking-tight mb-8 text-gray-900 font-heading">
-            {formattedTitle}
+        <div className="container mx-auto px-4 py-32 text-center">
+          <h2 className="text-2xl font-medium tracking-tight text-gray-900 font-heading mb-3">
+            Collection Not Found
           </h2>
-
-          <div className="bg-red-50 border border-red-200 rounded-md p-8 max-w-md mx-auto">
-            <i className="ri-error-warning-line text-4xl text-red-500 mb-4"></i>
-            <h3 className="text-lg font-medium text-red-800 mb-2">
-              Failed to Load Collection
-            </h3>
-            <p className="text-red-600 mb-4">
-              {error}
-            </p>
-            <button
-              onClick={() => refetch()}
-              className="bg-red-600 text-white px-6 py-2 rounded-md hover:bg-red-700 transition-colors"
-            >
-              Try Again
-            </button>
-          </div>
+          <p className="text-gray-500 max-w-md mx-auto">
+            The collection you are looking for does not exist or is no longer
+            available.
+          </p>
         </div>
       </div>
     );
@@ -78,16 +66,13 @@ const CollectionDetail: React.FC = () => {
         </h2>
 
         {products.length === 0 ? (
-          <div className="text-center py-12">
-            <div className="bg-gray-50 border border-gray-200 rounded-md p-8 max-w-md mx-auto">
-              <i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
-              <h3 className="text-lg font-medium text-gray-600 mb-2">
-                No Products in Collection
-              </h3>
-              <p className="text-gray-500">
-                This collection doesn&apos;t have any products yet.
-              </p>
-            </div>
+          <div className="text-center py-20">
+            <h3 className="text-lg font-medium text-gray-900 mb-2">
+              No Products in Collection
+            </h3>
+            <p className="text-gray-500">
+              This collection doesn&apos;t have any products yet.
+            </p>
           </div>
         ) : (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
diff --git a/components/shopify/collections.tsx b/components/shopify/collections.tsx
index 7d29577..303d500 100644
--- a/components/shopify/collections.tsx
+++ b/components/shopify/collections.tsx
@@ -5,7 +5,7 @@ import { useCollections } from '@/hooks/use-shopify-collections';
 import CollectionCard from './collection-card';
 
 const Collections: React.FC = () => {
-  const { collections, loading, error, refetch } = useCollections(20);
+  const { collections, loading, error } = useCollections(20);
 
   if (loading) {
     return (
@@ -32,26 +32,14 @@ const Collections: React.FC = () => {
   if (error) {
     return (
       <div className="py-16">
-        <div className="container mx-auto px-4 text-center">
-          <h2 className="text-4xl font-medium tracking-tight mb-8 text-gray-900 font-heading">
-            Our Collections
+        <div className="container mx-auto px-4 py-24 text-center">
+          <h2 className="text-2xl font-medium tracking-tight text-gray-900 font-heading mb-3">
+            Collections Unavailable
           </h2>
-
-          <div className="bg-red-50 border border-red-200 rounded-md p-8 max-w-md mx-auto">
-            <i className="ri-error-warning-line text-4xl text-red-500 mb-4"></i>
-            <h3 className="text-lg font-medium text-red-800 mb-2">
-              Failed to Load Collections
-            </h3>
-            <p className="text-red-600 mb-4">
-              {error}
-            </p>
-            <button
-              onClick={() => refetch()}
-              className="bg-red-600 text-white px-6 py-2 rounded-md hover:bg-red-700 transition-colors"
-            >
-              Try Again
-            </button>
-          </div>
+          <p className="text-gray-500 max-w-md mx-auto">
+            We couldn&apos;t load any collections right now. Please try again
+            later.
+          </p>
         </div>
       </div>
     );
@@ -65,9 +53,8 @@ const Collections: React.FC = () => {
             Our Collections
           </h2>
 
-          <div className="bg-gray-50 border border-gray-200 rounded-md p-8 max-w-md mx-auto">
-            <i className="ri-folder-line text-4xl text-gray-400 mb-4"></i>
-            <h3 className="text-lg font-medium text-gray-600 mb-2">
+          <div className="max-w-md mx-auto py-12">
+            <h3 className="text-lg font-medium text-gray-900 mb-2">
               No Collections Found
             </h3>
             <p className="text-gray-500">
diff --git a/components/shopify/product-detail/index.tsx b/components/shopify/product-detail/index.tsx
index ae2d7e0..1664120 100644
--- a/components/shopify/product-detail/index.tsx
+++ b/components/shopify/product-detail/index.tsx
@@ -8,9 +8,6 @@ import { useShopifyCart } from '@/hooks/use-shopify-cart';
 import ProductDetailGallery from './product-detail-gallery';
 import ProductDetailInfo from './product-detail-info';
 import ProductRecommendations from '../product-recommendations';
-import { Button } from '@/components/ui/button';
-import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
-import { RiErrorWarningLine } from '@remixicon/react';
 import {
   Breadcrumb,
   BreadcrumbList,
@@ -128,22 +125,14 @@ const ProductDetail: React.FC<ProductDetailProps> = ({ handle: handleProp }) =>
 
   if (error || !product) {
     return (
-      <div className="container mx-auto px-4 py-8 text-center">
-        <Alert variant="destructive" className="max-w-md mx-auto p-8">
-          <RiErrorWarningLine size={36} />
-          <AlertTitle className="text-lg font-medium">
-            Product Not Found
-          </AlertTitle>
-          <AlertDescription className="mb-4">
-            {error || 'The requested product could not be found.'}
-          </AlertDescription>
-          <Button
-            onClick={() => window.history.back()}
-            variant="destructive"
-          >
-            Go Back
-          </Button>
-        </Alert>
+      <div className="container mx-auto px-4 py-32 text-center">
+        <h2 className="text-2xl font-medium tracking-tight text-gray-900 font-heading mb-3">
+          Product Not Found
+        </h2>
+        <p className="text-gray-500 max-w-md mx-auto">
+          The product you are looking for does not exist or is no longer
+          available.
+        </p>
       </div>
     );
   }
diff --git a/components/shopify/products.tsx b/components/shopify/products.tsx
index e29ba38..8e528c7 100644
--- a/components/shopify/products.tsx
+++ b/components/shopify/products.tsx
@@ -142,26 +142,14 @@ const Products: React.FC<ProductsProps> = ({
   if (error) {
     return (
       <div className="py-16">
-        <div className="container mx-auto px-4 text-center">
-          <h2 className="text-4xl font-medium tracking-tight mb-8 text-gray-900 font-heading">
-            {title}
+        <div className="container mx-auto px-4 py-24 text-center">
+          <h2 className="text-2xl font-medium tracking-tight text-gray-900 font-heading mb-3">
+            Products Unavailable
           </h2>
-          
-          <div className="bg-red-50 border border-red-200 rounded-md p-8 max-w-md mx-auto">
-            <i className="ri-error-warning-line text-4xl text-red-500 mb-4 block"></i>
-            <h3 className="text-lg font-medium text-red-800 mb-2">
-              Failed to Load Products
-            </h3>
-            <p className="text-red-600 mb-4">
-              {error}
-            </p>
-            <Button
-              onClick={() => fetchProducts()}
-              variant="destructive"
-            >
-              Try Again
-            </Button>
-          </div>
+          <p className="text-gray-500 max-w-md mx-auto">
+            We couldn&apos;t load any products right now. Please try again
+            later.
+          </p>
         </div>
       </div>
     );
@@ -175,9 +163,8 @@ const Products: React.FC<ProductsProps> = ({
             {title}
           </h2>
           
-          <div className="bg-gray-50 border border-gray-200 rounded-md p-8 max-w-md mx-auto">
-            <i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
-            <h3 className="text-lg font-medium text-gray-600 mb-2">
+          <div className="max-w-md mx-auto py-12">
+            <h3 className="text-lg font-medium text-gray-900 mb-2">
               No Products Found
             </h3>
             <p className="text-gray-500">