From f8dec69586139554d4f3a6a4b779b62f8f800c3a Mon Sep 17 00:00:00 2001
From: AI Bot <bot@almeira.com>
Date: Fri, 28 Aug 2026 18:52:09 -0500
Subject: [PATCH] fix: estilo/color seleccionado con selector de solo imagenes
 y ajuste de texto en verificacion de talla

---
 .../src/components/store/ProductModal.tsx     | 29 +++++++++++--------
 .../src/components/store/ProductModal.tsx     | 29 +++++++++++--------
 .../src/components/store/ProductModal.tsx     | 29 +++++++++++--------
 .../src/components/store/ProductModal.tsx     | 29 +++++++++++--------
 4 files changed, 68 insertions(+), 48 deletions(-)

diff --git a/almeira-store-app/src/components/store/ProductModal.tsx b/almeira-store-app/src/components/store/ProductModal.tsx
index 8633576..2e3de62 100644
--- a/almeira-store-app/src/components/store/ProductModal.tsx
+++ b/almeira-store-app/src/components/store/ProductModal.tsx
@@ -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
diff --git a/dripzone-app/src/components/store/ProductModal.tsx b/dripzone-app/src/components/store/ProductModal.tsx
index 8633576..2e3de62 100644
--- a/dripzone-app/src/components/store/ProductModal.tsx
+++ b/dripzone-app/src/components/store/ProductModal.tsx
@@ -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
diff --git a/sneaky-app/src/components/store/ProductModal.tsx b/sneaky-app/src/components/store/ProductModal.tsx
index 8633576..2e3de62 100644
--- a/sneaky-app/src/components/store/ProductModal.tsx
+++ b/sneaky-app/src/components/store/ProductModal.tsx
@@ -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
diff --git a/zapply-app/src/components/store/ProductModal.tsx b/zapply-app/src/components/store/ProductModal.tsx
index 8633576..2e3de62 100644
--- a/zapply-app/src/components/store/ProductModal.tsx
+++ b/zapply-app/src/components/store/ProductModal.tsx
@@ -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