fix: update collections page styling
This commit is contained in:
parent
aef3d9db69
commit
28b4dae91e
|
@ -10,32 +10,38 @@ export default function ProductCard({product}) {
|
||||||
return (
|
return (
|
||||||
<div className="text-lg mb-4 relative">
|
<div className="text-lg mb-4 relative">
|
||||||
<Link to={`/products/${product.handle}`}>
|
<Link to={`/products/${product.handle}`}>
|
||||||
{!selectedVariant?.availableForSale && (
|
<div className="rounded-lg border-2 border-gray-200 mb-2 relative flex items-center justify-center overflow-hidden object-cover h-96">
|
||||||
<div className="absolute text-xs bg-black text-white p-3 z-50">
|
|
||||||
Out of stock
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="border-2 border-black mb-2 relative flex items-center justify-center overflow-hidden object-cover h-96">
|
|
||||||
<Image
|
<Image
|
||||||
className="bg-white absolute w-full h-full transition-all duration-500 ease-in-out transform bg-center bg-cover object-center object-contain hover:scale-110"
|
className="bg-white absolute w-full h-full transition-all duration-500 ease-in-out transform bg-center bg-cover object-center object-contain hover:scale-110"
|
||||||
image={selectedVariant.image}
|
image={selectedVariant.image}
|
||||||
/>
|
/>
|
||||||
|
{!selectedVariant?.availableForSale && (
|
||||||
|
<div className="absolute top-3 left-3 rounded-3xl text-xs bg-black text-white py-3 px-4">
|
||||||
|
Out of stock
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<span className="text-black font-medium">{product.title}</span>
|
<span className="text-black font-semibold mb-0.5">{product.title}</span>
|
||||||
|
|
||||||
|
{product.vendor && (
|
||||||
|
<p className="text-gray-900 font-medium text-sm mb-0.5">
|
||||||
|
{product.vendor}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="flex ">
|
<div className="flex ">
|
||||||
{selectedVariant.compareAtPriceV2 && (
|
{selectedVariant.compareAtPriceV2 && (
|
||||||
<Money money={selectedVariant.compareAtPriceV2}>
|
<Money money={selectedVariant.compareAtPriceV2}>
|
||||||
{({amount, currencyNarrowSymbol}) => (
|
{({amount, currencyNarrowSymbol}) => (
|
||||||
<span className="line-through mr-2.5 text-gray-500">
|
<span className="line-through text-lg mr-2.5 text-gray-500">
|
||||||
{currencyNarrowSymbol}
|
{currencyNarrowSymbol}
|
||||||
{amount}
|
{amount}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</Money>
|
</Money>
|
||||||
)}
|
)}
|
||||||
<Money className="text-black" money={selectedVariant.priceV2}>
|
<Money className="text-black text-lg" money={selectedVariant.priceV2}>
|
||||||
{({amount, currencyNarrowSymbol, currencyCode}) => (
|
{({amount, currencyNarrowSymbol, currencyCode}) => (
|
||||||
<>
|
<>
|
||||||
{currencyCode}
|
{currencyCode}
|
||||||
|
@ -46,9 +52,6 @@ export default function ProductCard({product}) {
|
||||||
</Money>
|
</Money>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
{!selectedVariant.availableForSale && (
|
|
||||||
<p className="text-xs mt-2">Avaliable in 2-3 weeks</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -37,11 +37,11 @@ export default function Collection({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<h1 className="font-black text-4xl md:text-5xl text-black mb-6 mt-6">
|
<h1 className="font-bold text-4xl md:text-5xl text-gray-900 mb-6 mt-6">
|
||||||
{collection.title}
|
{collection.title}
|
||||||
</h1>
|
</h1>
|
||||||
<RawHtml string={collection.descriptionHtml} className="text-2xl" />
|
<RawHtml string={collection.descriptionHtml} className="text-2xl" />
|
||||||
<p className="text-sm text-gray-900 mt-5 mb-5">
|
<p className="text-sm text-gray-500 mt-5 mb-5">
|
||||||
{products.length} {products.length > 1 ? 'products' : 'product'}
|
{products.length} {products.length > 1 ? 'products' : 'product'}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue