carlos/almeira-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: estilo/color seleccionado con selector de solo imagenes y ajuste de texto en verificacion de talla

Browse Source
This commit is contained in:
AI Bot 2026-08-28 18:52:09 -05:00
parent ac82c9aaae
commit f8dec69586
4 changed files with 68 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
almeira-store-app/src/components/store/ProductModal.tsx
View File

@ -252,32 +252,37 @@ export const ProductModal: React.FC<ProductModalProps> = ({
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-xs font-black text-white uppercase flex items-center gap-1.5"> <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" /> <Palette className="w-3.5 h-3.5 text-purple-400" />
<span>Color Seleccionado:</span> <span>ESTILO/COLOR SELECCIONADO:</span>
</span> </span>
<span className="text-xs font-bold text-purple-300"> <span className="text-xs font-bold text-purple-300">
{selectedColor.colorName} {selectedColor.colorName}
</span> </span>
</div> </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) => { {colorsList.map((variant) => {
const isCurrent = selectedColor.id === variant.id; const isCurrent = selectedColor.id === variant.id;
return ( return (
<button <button
key={variant.id} key={variant.id}
onClick={() => handleColorChange(variant)} 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 isCurrent
? 'bg-purple-950/40 border-purple-500 shadow-md ring-1 ring-purple-500 text-white' ? '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'
: 'bg-neutral-950 hover:bg-neutral-800/70 border-neutral-800 text-neutral-300' : '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
<img src={variant.image} alt={variant.colorName} className="w-full h-full object-cover" /> 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> </div>
<span className="text-[11px] font-bold leading-tight line-clamp-2"> )}
{variant.colorName}
</span>
</button> </button>
); );
})} })}
@ -340,7 +345,7 @@ export const ProductModal: React.FC<ProductModalProps> = ({
</div> </div>
<div> <div>
<p className="text-[11px] font-bold text-white">¿No encuentras tu talla exacta?</p> <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>
</div> </div>
<button <button

27
dripzone-app/src/components/store/ProductModal.tsx
View File

@ -252,32 +252,37 @@ export const ProductModal: React.FC<ProductModalProps> = ({
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-xs font-black text-white uppercase flex items-center gap-1.5"> <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" /> <Palette className="w-3.5 h-3.5 text-purple-400" />
<span>Color Seleccionado:</span> <span>ESTILO/COLOR SELECCIONADO:</span>
</span> </span>
<span className="text-xs font-bold text-purple-300"> <span className="text-xs font-bold text-purple-300">
{selectedColor.colorName} {selectedColor.colorName}
</span> </span>
</div> </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) => { {colorsList.map((variant) => {
const isCurrent = selectedColor.id === variant.id; const isCurrent = selectedColor.id === variant.id;
return ( return (
<button <button
key={variant.id} key={variant.id}
onClick={() => handleColorChange(variant)} 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 isCurrent
? 'bg-purple-950/40 border-purple-500 shadow-md ring-1 ring-purple-500 text-white' ? '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'
: 'bg-neutral-950 hover:bg-neutral-800/70 border-neutral-800 text-neutral-300' : '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
<img src={variant.image} alt={variant.colorName} className="w-full h-full object-cover" /> 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> </div>
<span className="text-[11px] font-bold leading-tight line-clamp-2"> )}
{variant.colorName}
</span>
</button> </button>
); );
})} })}
@ -340,7 +345,7 @@ export const ProductModal: React.FC<ProductModalProps> = ({
</div> </div>
<div> <div>
<p className="text-[11px] font-bold text-white">¿No encuentras tu talla exacta?</p> <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>
</div> </div>
<button <button

27
sneaky-app/src/components/store/ProductModal.tsx
View File

@ -252,32 +252,37 @@ export const ProductModal: React.FC<ProductModalProps> = ({
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-xs font-black text-white uppercase flex items-center gap-1.5"> <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" /> <Palette className="w-3.5 h-3.5 text-purple-400" />
<span>Color Seleccionado:</span> <span>ESTILO/COLOR SELECCIONADO:</span>
</span> </span>
<span className="text-xs font-bold text-purple-300"> <span className="text-xs font-bold text-purple-300">
{selectedColor.colorName} {selectedColor.colorName}
</span> </span>
</div> </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) => { {colorsList.map((variant) => {
const isCurrent = selectedColor.id === variant.id; const isCurrent = selectedColor.id === variant.id;
return ( return (
<button <button
key={variant.id} key={variant.id}
onClick={() => handleColorChange(variant)} 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 isCurrent
? 'bg-purple-950/40 border-purple-500 shadow-md ring-1 ring-purple-500 text-white' ? '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'
: 'bg-neutral-950 hover:bg-neutral-800/70 border-neutral-800 text-neutral-300' : '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
<img src={variant.image} alt={variant.colorName} className="w-full h-full object-cover" /> 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> </div>
<span className="text-[11px] font-bold leading-tight line-clamp-2"> )}
{variant.colorName}
</span>
</button> </button>
); );
})} })}
@ -340,7 +345,7 @@ export const ProductModal: React.FC<ProductModalProps> = ({
</div> </div>
<div> <div>
<p className="text-[11px] font-bold text-white">¿No encuentras tu talla exacta?</p> <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>
</div> </div>
<button <button

27
zapply-app/src/components/store/ProductModal.tsx
View File

@ -252,32 +252,37 @@ export const ProductModal: React.FC<ProductModalProps> = ({
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-xs font-black text-white uppercase flex items-center gap-1.5"> <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" /> <Palette className="w-3.5 h-3.5 text-purple-400" />
<span>Color Seleccionado:</span> <span>ESTILO/COLOR SELECCIONADO:</span>
</span> </span>
<span className="text-xs font-bold text-purple-300"> <span className="text-xs font-bold text-purple-300">
{selectedColor.colorName} {selectedColor.colorName}
</span> </span>
</div> </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) => { {colorsList.map((variant) => {
const isCurrent = selectedColor.id === variant.id; const isCurrent = selectedColor.id === variant.id;
return ( return (
<button <button
key={variant.id} key={variant.id}
onClick={() => handleColorChange(variant)} 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 isCurrent
? 'bg-purple-950/40 border-purple-500 shadow-md ring-1 ring-purple-500 text-white' ? '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'
: 'bg-neutral-950 hover:bg-neutral-800/70 border-neutral-800 text-neutral-300' : '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
<img src={variant.image} alt={variant.colorName} className="w-full h-full object-cover" /> 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> </div>
<span className="text-[11px] font-bold leading-tight line-clamp-2"> )}
{variant.colorName}
</span>
</button> </button>
); );
})} })}
@ -340,7 +345,7 @@ export const ProductModal: React.FC<ProductModalProps> = ({
</div> </div>
<div> <div>
<p className="text-[11px] font-bold text-white">¿No encuentras tu talla exacta?</p> <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>
</div> </div>
<button <button