Mostrar los errores de send-gift: el tema los dejaba invisibles

El botón «Mostrar regalos» parecía no hacer nada: setFormError se llamaba
bien, pero el tema deja `.alert-message` con display:none esperando que la
rellene y la revele el JS antiguo (jQuery), que ya no existe. La caja se
pintaba y no se veía. Se fuerza el display desde React, como el resto de
formularios.

De paso, `.modal-content` estaba definida en globals.css Y en theme.css.
Como theme.css se importa el último (a propósito, para ganarle al preflight
de Tailwind), ganaba él a igual especificidad y el bloque de globals.css era
código muerto: el modal de la tienda salía como hoja pegada al fondo con
borde gris en vez de tarjeta centrada dorada. Se acota a
`.modal-div .modal-content` para ganar por especificidad y no por orden.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-15 17:03:30 +00:00
parent 97ccb8a179
commit 47b5a2a145
2 changed files with 16 additions and 2 deletions
+9 -1
View File
@@ -635,7 +635,12 @@ textarea:focus {
background: rgba(0, 0, 0, 0.6);
display: flex; align-items: center; justify-content: center;
}
.modal-content {
/* Acotada al overlay a propósito: el tema trae su propia `.modal-content`
(hoja pegada al fondo, borde gris) para un `.modal` que aquí ya no usa
nadie. Como theme.css se importa el último, a igual especificidad ganaba
él y este bloque no pintaba nada. `.modal-div .modal-content` (0,2,0) le
gana al (0,1,0) del tema sin depender del orden de carga. */
.modal-div .modal-content {
position: relative;
background: #17110e;
border: 2px solid #d79602;
@@ -643,6 +648,9 @@ textarea:focus {
padding: 26px 30px;
max-width: 90vw; min-width: 260px;
text-align: center;
/* el tema las aplica vía su `.modal-content`; sin esto se cuelan */
left: auto; bottom: auto; width: auto;
margin: 0; transform: none; animation: none;
}
.modal-close {
position: absolute; top: 6px; right: 12px;
+7 -1
View File
@@ -411,7 +411,13 @@ export function StoreBrowser({
</table>
</form>
<hr />
{formError && <div className="alert-message red-form-response" id="show-gif-response">{formError}</div>}
{/* `display:block` a mano: el tema deja `.alert-message` OCULTA
(display:none) para que la rellene y la revele el JS. Sin esto la
caja se pintaba pero NO se veía: al pulsar «Mostrar regalos» no
salía ningún error. El resto de formularios ya lo hacen así. */}
<div className="alert-message" id="show-gif-response" style={{ display: formError ? 'block' : 'none' }}>
{formError && <span className="red-form-response">{formError}</span>}
</div>
</div>
)}