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);
|
||||
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;
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user