fix: estilo/color seleccionado con selector de solo imagenes y ajuste de texto en verificacion de talla
This commit is contained in:
AI Bot
parent
ac82c9aaae
commit
f8dec69586
@ -252,32 +252,37 @@ export const ProductModal: React.FC<ProductModalProps> = ({
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-black text-white uppercase flex items-center gap-1.5">
|
||||
<Palette className="w-3.5 h-3.5 text-purple-400" />
|
||||
<span>Color Seleccionado:</span>
|
||||
<span>ESTILO/COLOR SELECCIONADO:</span>
|
||||
</span>
|
||||
<span className="text-xs font-bold text-purple-300">
|
||||
{selectedColor.colorName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
|
||||
<div className="flex items-center gap-2.5 overflow-x-auto pb-1.5 pt-0.5 scrollbar-none">
|
||||
{colorsList.map((variant) => {
|
||||
const isCurrent = selectedColor.id === variant.id;
|
||||
return (
|
||||
<button
|
||||
key={variant.id}
|
||||
onClick={() => handleColorChange(variant)}
|
||||
className={`flex items-center gap-2 p-2 rounded-xl border text-left transition-all cursor-pointer ${
|
||||
title={variant.colorName}
|
||||
className={`relative w-14 h-14 sm:w-16 sm:h-16 rounded-2xl overflow-hidden shrink-0 border-2 transition-all cursor-pointer p-0.5 ${
|
||||
isCurrent
|
||||
? 'bg-purple-950/40 border-purple-500 shadow-md ring-1 ring-purple-500 text-white'
|
||||
: 'bg-neutral-950 hover:bg-neutral-800/70 border-neutral-800 text-neutral-300'
|
||||
? 'border-purple-500 shadow-[0_0_15px_rgba(168,85,247,0.4)] scale-105 ring-2 ring-purple-400/50 bg-purple-950/50'
|
||||
: 'border-neutral-800 hover:border-neutral-600 bg-neutral-900 opacity-75 hover:opacity-100'
|
||||
}`}
|
||||
>
|
||||
<div className="w-9 h-9 rounded-lg overflow-hidden shrink-0 border border-neutral-700 bg-neutral-900">
|
||||
<img src={variant.image} alt={variant.colorName} className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<span className="text-[11px] font-bold leading-tight line-clamp-2">
|
||||
{variant.colorName}
|
||||
</span>
|
||||
<img
|
||||
src={variant.image}
|
||||
alt={variant.colorName}
|
||||
className="w-full h-full object-cover rounded-xl"
|
||||
/>
|
||||
{isCurrent && (
|
||||
<div className="absolute top-1 right-1 w-3.5 h-3.5 bg-purple-600 rounded-full flex items-center justify-center border border-white">
|
||||
<Check className="w-2.5 h-2.5 text-white" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
@ -340,7 +345,7 @@ export const ProductModal: React.FC<ProductModalProps> = ({
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[11px] font-bold text-white">¿No encuentras tu talla exacta?</p>
|
||||
<p className="text-[10px] text-neutral-400">Verificamos disponibilidad con bodega en 5 minutos.</p>
|
||||
<p className="text-[10px] text-neutral-400">Verificamos disponibilidad con bodega.</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
|
||||
@ -252,32 +252,37 @@ export const ProductModal: React.FC<ProductModalProps> = ({
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-black text-white uppercase flex items-center gap-1.5">
|
||||
<Palette className="w-3.5 h-3.5 text-purple-400" />
|
||||
<span>Color Seleccionado:</span>
|
||||
<span>ESTILO/COLOR SELECCIONADO:</span>
|
||||
</span>
|
||||
<span className="text-xs font-bold text-purple-300">
|
||||
{selectedColor.colorName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
|
||||
<div className="flex items-center gap-2.5 overflow-x-auto pb-1.5 pt-0.5 scrollbar-none">
|
||||
{colorsList.map((variant) => {
|
||||
const isCurrent = selectedColor.id === variant.id;
|
||||
return (
|
||||
<button
|
||||
key={variant.id}
|
||||
onClick={() => handleColorChange(variant)}
|
||||
className={`flex items-center gap-2 p-2 rounded-xl border text-left transition-all cursor-pointer ${
|
||||
title={variant.colorName}
|
||||
className={`relative w-14 h-14 sm:w-16 sm:h-16 rounded-2xl overflow-hidden shrink-0 border-2 transition-all cursor-pointer p-0.5 ${
|
||||
isCurrent
|
||||
? 'bg-purple-950/40 border-purple-500 shadow-md ring-1 ring-purple-500 text-white'
|
||||
: 'bg-neutral-950 hover:bg-neutral-800/70 border-neutral-800 text-neutral-300'
|
||||
? 'border-purple-500 shadow-[0_0_15px_rgba(168,85,247,0.4)] scale-105 ring-2 ring-purple-400/50 bg-purple-950/50'
|
||||
: 'border-neutral-800 hover:border-neutral-600 bg-neutral-900 opacity-75 hover:opacity-100'
|
||||
}`}
|
||||
>
|
||||
<div className="w-9 h-9 rounded-lg overflow-hidden shrink-0 border border-neutral-700 bg-neutral-900">
|
||||
<img src={variant.image} alt={variant.colorName} className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<span className="text-[11px] font-bold leading-tight line-clamp-2">
|
||||
{variant.colorName}
|
||||
</span>
|
||||
<img
|
||||
src={variant.image}
|
||||
alt={variant.colorName}
|
||||
className="w-full h-full object-cover rounded-xl"
|
||||
/>
|
||||
{isCurrent && (
|
||||
<div className="absolute top-1 right-1 w-3.5 h-3.5 bg-purple-600 rounded-full flex items-center justify-center border border-white">
|
||||
<Check className="w-2.5 h-2.5 text-white" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
@ -340,7 +345,7 @@ export const ProductModal: React.FC<ProductModalProps> = ({
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[11px] font-bold text-white">¿No encuentras tu talla exacta?</p>
|
||||
<p className="text-[10px] text-neutral-400">Verificamos disponibilidad con bodega en 5 minutos.</p>
|
||||
<p className="text-[10px] text-neutral-400">Verificamos disponibilidad con bodega.</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
|
||||
@ -252,32 +252,37 @@ export const ProductModal: React.FC<ProductModalProps> = ({
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-black text-white uppercase flex items-center gap-1.5">
|
||||
<Palette className="w-3.5 h-3.5 text-purple-400" />
|
||||
<span>Color Seleccionado:</span>
|
||||
<span>ESTILO/COLOR SELECCIONADO:</span>
|
||||
</span>
|
||||
<span className="text-xs font-bold text-purple-300">
|
||||
{selectedColor.colorName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
|
||||
<div className="flex items-center gap-2.5 overflow-x-auto pb-1.5 pt-0.5 scrollbar-none">
|
||||
{colorsList.map((variant) => {
|
||||
const isCurrent = selectedColor.id === variant.id;
|
||||
return (
|
||||
<button
|
||||
key={variant.id}
|
||||
onClick={() => handleColorChange(variant)}
|
||||
className={`flex items-center gap-2 p-2 rounded-xl border text-left transition-all cursor-pointer ${
|
||||
title={variant.colorName}
|
||||
className={`relative w-14 h-14 sm:w-16 sm:h-16 rounded-2xl overflow-hidden shrink-0 border-2 transition-all cursor-pointer p-0.5 ${
|
||||
isCurrent
|
||||
? 'bg-purple-950/40 border-purple-500 shadow-md ring-1 ring-purple-500 text-white'
|
||||
: 'bg-neutral-950 hover:bg-neutral-800/70 border-neutral-800 text-neutral-300'
|
||||
? 'border-purple-500 shadow-[0_0_15px_rgba(168,85,247,0.4)] scale-105 ring-2 ring-purple-400/50 bg-purple-950/50'
|
||||
: 'border-neutral-800 hover:border-neutral-600 bg-neutral-900 opacity-75 hover:opacity-100'
|
||||
}`}
|
||||
>
|
||||
<div className="w-9 h-9 rounded-lg overflow-hidden shrink-0 border border-neutral-700 bg-neutral-900">
|
||||
<img src={variant.image} alt={variant.colorName} className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<span className="text-[11px] font-bold leading-tight line-clamp-2">
|
||||
{variant.colorName}
|
||||
</span>
|
||||
<img
|
||||
src={variant.image}
|
||||
alt={variant.colorName}
|
||||
className="w-full h-full object-cover rounded-xl"
|
||||
/>
|
||||
{isCurrent && (
|
||||
<div className="absolute top-1 right-1 w-3.5 h-3.5 bg-purple-600 rounded-full flex items-center justify-center border border-white">
|
||||
<Check className="w-2.5 h-2.5 text-white" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
@ -340,7 +345,7 @@ export const ProductModal: React.FC<ProductModalProps> = ({
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[11px] font-bold text-white">¿No encuentras tu talla exacta?</p>
|
||||
<p className="text-[10px] text-neutral-400">Verificamos disponibilidad con bodega en 5 minutos.</p>
|
||||
<p className="text-[10px] text-neutral-400">Verificamos disponibilidad con bodega.</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
|
||||
@ -252,32 +252,37 @@ export const ProductModal: React.FC<ProductModalProps> = ({
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-black text-white uppercase flex items-center gap-1.5">
|
||||
<Palette className="w-3.5 h-3.5 text-purple-400" />
|
||||
<span>Color Seleccionado:</span>
|
||||
<span>ESTILO/COLOR SELECCIONADO:</span>
|
||||
</span>
|
||||
<span className="text-xs font-bold text-purple-300">
|
||||
{selectedColor.colorName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
|
||||
<div className="flex items-center gap-2.5 overflow-x-auto pb-1.5 pt-0.5 scrollbar-none">
|
||||
{colorsList.map((variant) => {
|
||||
const isCurrent = selectedColor.id === variant.id;
|
||||
return (
|
||||
<button
|
||||
key={variant.id}
|
||||
onClick={() => handleColorChange(variant)}
|
||||
className={`flex items-center gap-2 p-2 rounded-xl border text-left transition-all cursor-pointer ${
|
||||
title={variant.colorName}
|
||||
className={`relative w-14 h-14 sm:w-16 sm:h-16 rounded-2xl overflow-hidden shrink-0 border-2 transition-all cursor-pointer p-0.5 ${
|
||||
isCurrent
|
||||
? 'bg-purple-950/40 border-purple-500 shadow-md ring-1 ring-purple-500 text-white'
|
||||
: 'bg-neutral-950 hover:bg-neutral-800/70 border-neutral-800 text-neutral-300'
|
||||
? 'border-purple-500 shadow-[0_0_15px_rgba(168,85,247,0.4)] scale-105 ring-2 ring-purple-400/50 bg-purple-950/50'
|
||||
: 'border-neutral-800 hover:border-neutral-600 bg-neutral-900 opacity-75 hover:opacity-100'
|
||||
}`}
|
||||
>
|
||||
<div className="w-9 h-9 rounded-lg overflow-hidden shrink-0 border border-neutral-700 bg-neutral-900">
|
||||
<img src={variant.image} alt={variant.colorName} className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<span className="text-[11px] font-bold leading-tight line-clamp-2">
|
||||
{variant.colorName}
|
||||
</span>
|
||||
<img
|
||||
src={variant.image}
|
||||
alt={variant.colorName}
|
||||
className="w-full h-full object-cover rounded-xl"
|
||||
/>
|
||||
{isCurrent && (
|
||||
<div className="absolute top-1 right-1 w-3.5 h-3.5 bg-purple-600 rounded-full flex items-center justify-center border border-white">
|
||||
<Check className="w-2.5 h-2.5 text-white" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
@ -340,7 +345,7 @@ export const ProductModal: React.FC<ProductModalProps> = ({
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[11px] font-bold text-white">¿No encuentras tu talla exacta?</p>
|
||||
<p className="text-[10px] text-neutral-400">Verificamos disponibilidad con bodega en 5 minutos.</p>
|
||||
<p className="text-[10px] text-neutral-400">Verificamos disponibilidad con bodega.</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
|
||||
Loading…
Reference in New Issue
Block a user