From 0a781e38d30f8ff33a04fc56f8fee5c542498692 Mon Sep 17 00:00:00 2001
From: Araozu <faraoz@unsa.edu.pe>
Date: Mon, 1 Mar 2021 17:17:55 -0500
Subject: [PATCH] Agregar opcion para ocultar mensaje de backdrop-filter

---
 src/App.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index e4a70c5..06c4829 100755
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,23 +1,35 @@
 import { BarraSuperior } from "./BarraSuperior";
 import { ContenedorHorarios } from "./ContenedorHorarios/ContenedorHorarios";
 import { Wallpaper } from "./Wallpaper";
-import { Show } from "solid-js";
+import { Show, createSignal } from "solid-js";
 import { css } from "aphrodite";
 import { estilosGlobales } from "./Estilos";
 
 function App() {
     /// @ts-ignore
     const soportaBackdropFilter = document.body.style.backdropFilter !== undefined;
+    const mostrarMensajeBackdropFilterRaw = localStorage.getItem("mensaje-backdrop-filter-oculto") !== undefined;
+
+    const [mostrarMensajeBackdropFilter, setMostrarMensaje] = createSignal(mostrarMensajeBackdropFilterRaw);
+
+    const ocultarMensajeBackdropFilter = () => {
+        setMostrarMensaje(false);
+        localStorage.setItem("mensaje-backdrop-filter-oculto", "true");
+    };
 
     return (
         <div class="App">
             <Wallpaper/>
             <BarraSuperior/>
-            <Show when={!soportaBackdropFilter}>
+            <Show when={!soportaBackdropFilter && mostrarMensajeBackdropFilter()}>
                 <div className={css(estilosGlobales.contenedor)}>
                     Tu navegador no soporta "backdrop-filter". Este es solo un efecto
                     visual, no afecta la funcionalidad de la página.&nbsp;
-                    <span>No volver a mostrar.</span>
+                    <span className={css(estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
+                          onClick={ocultarMensajeBackdropFilter}
+                    >
+                        No volver a mostrar.
+                    </span>
                 </div>
             </Show>
             <br/>