Agregar estilos para diferenciar links de botones

src/BarraSuperior.tsx

@@ -56,12 +56,12 @@ function CambiadorImg() {
     return <div className={css(estilosGlobales.inlineBlock, e.contCambiador)}>
         <span className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>
             <i
-                className={"ph-arrow-left " + css(e.boton, e.botonLeft)}
+                className={"ph-arrow-left " + css(e.boton, e.botonLeft, estilosGlobales.contenedorCursorSoft)}
                 onClick={retrocederWallpaper}
             />
             Img. {numWallpaper() + 1}
             <i
-                className={"ph-arrow-right " + css(e.boton, e.botonRight)}
+                className={"ph-arrow-right " + css(e.boton, e.botonRight, estilosGlobales.contenedorCursorSoft)}
                 onClick={avanzarWallpaper}
             />
         </span>

src/ContenedorHorarios/Horarios.tsx

@@ -7,7 +7,12 @@ export function Horarios(props: { data: DatosHorario }) {
 
     const elAnios = <For each={Object.entries(props.data.años)}>
         {([nombre]) =>
-            <div className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock, estilosGlobales.contenedorCursor)}>
+            <div className={css(
+                estilosGlobales.contenedor,
+                estilosGlobales.inlineBlock,
+                estilosGlobales.contenedorCursor,
+                estilosGlobales.contenedorCursorSoft
+            )}>
                 {nombre}
             </div>
         }

src/ContenedorHorarios/MiHorario.tsx

@@ -1,19 +1,49 @@
 import { estilosGlobales } from "../Estilos";
 import { StyleSheet, css } from "aphrodite";
 import { Tabla } from "./Tabla";
+import { mostrarDescansos, setMostrarDescansos } from "../Store";
 
 export function MiHorario() {
     const e = StyleSheet.create({
-        horario: {}
+        horario: {},
+        boton: {
+            textDecoration: "none",
+            // paddingRight: "0.5rem",
+            "::before": {
+                fontSize: "1rem",
+                // transform: "translateY(0.2rem)",
+                textDecoration: "none"
+            }
+        }
     });
 
+    const claseBotonMostrarDescansos = () =>
+        mostrarDescansos()
+            ? "ph-check " + css(e.boton)
+            : "ph-circle " + css(e.boton);
+
     return <div>
+        <div>
             <div className={css(
                 estilosGlobales.inlineBlock,
                 estilosGlobales.contenedor
             )}>
                 Mi horario
             </div>
+            <div
+                className={css(
+                    estilosGlobales.inlineBlock,
+                    estilosGlobales.contenedor,
+                    estilosGlobales.contenedorCursor,
+                    estilosGlobales.contenedorCursorSoft
+                )}
+                onClick={() => setMostrarDescansos(!mostrarDescansos())}
+            >
+                <i className={claseBotonMostrarDescansos()}/>
+                &nbsp;Mostrar descansos
+            </div>
+        </div>
+
         <div className={css(
             e.horario,
             estilosGlobales.contenedor

src/ContenedorHorarios/Tabla.tsx

@@ -1,6 +1,7 @@
 import { StyleSheet, css } from "aphrodite";
-import { For } from "solid-js";
+import { For, Show } from "solid-js";
 import { estilosGlobales } from "../Estilos";
+import { mostrarDescansos } from "../Store";
 
 const dias = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes"];
 const horas = [

src/Estilos.ts

@@ -13,11 +13,17 @@ export const estilosGlobales = StyleSheet.create({
         cursor: "pointer",
         userSelect: "none",
         transition: "background-color 200ms",
-        textDecoration: "underline",
+        textDecoration: "underline solid white 2px",
         ":hover": {
-            backgroundColor: "rgba(255, 255, 255, 0.2)"
+            backgroundColor: "rgba(200, 200, 200, 0.2)"
         }
     },
+    contenedorCursorSoft: {
+        textDecoration: "underline rgba(255, 255, 255, 0.4)"
+    },
+    contenedorCursorActivo: {
+        backgroundColor: "rgba(255, 255, 255, 0.2)"
+    },
     inlineBlock: {
         display: "inline-block"
     }

src/Store.ts

@@ -11,8 +11,4 @@ console.log(numImgGuardado);
 
 export const [modoColor, setModoColor] = createSignal(ModoColor.Oscuro);
 export const [numWallpaper, setNumWallpaper] = createSignal(numImgGuardado);
-createEffect(() => {
-    const num = numWallpaper();
-    localStorage.setItem("num-img", num.toString());
-    console.log("Establecer item!");
-});
+export const [mostrarDescansos, setMostrarDescansos] = createSignal(true);