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:
@@ -635,7 +635,12 @@ textarea:focus {
|
|||||||
background: rgba(0, 0, 0, 0.6);
|
background: rgba(0, 0, 0, 0.6);
|
||||||
display: flex; align-items: center; justify-content: center;
|
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;
|
position: relative;
|
||||||
background: #17110e;
|
background: #17110e;
|
||||||
border: 2px solid #d79602;
|
border: 2px solid #d79602;
|
||||||
@@ -643,6 +648,9 @@ textarea:focus {
|
|||||||
padding: 26px 30px;
|
padding: 26px 30px;
|
||||||
max-width: 90vw; min-width: 260px;
|
max-width: 90vw; min-width: 260px;
|
||||||
text-align: center;
|
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 {
|
.modal-close {
|
||||||
position: absolute; top: 6px; right: 12px;
|
position: absolute; top: 6px; right: 12px;
|
||||||
|
|||||||
@@ -411,7 +411,13 @@ export function StoreBrowser({
|
|||||||
</table>
|
</table>
|
||||||
</form>
|
</form>
|
||||||
<hr />
|
<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>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user