From fc48d9cd55117960c29e5bfaa981f3ef20bd6f2a Mon Sep 17 00:00:00 2001
From: Araozu <faraoz@unsa.edu.pe>
Date: Fri, 15 Jan 2021 08:34:24 -0500
Subject: [PATCH] Agregar estilos para diferenciar links de botones

---
 src/BarraSuperior.tsx                |  4 +--
 src/ContenedorHorarios/Horarios.tsx  |  7 ++++-
 src/ContenedorHorarios/MiHorario.tsx | 42 ++++++++++++++++++++++++----
 src/ContenedorHorarios/Tabla.tsx     |  3 +-
 src/Estilos.ts                       | 10 +++++--
 src/Store.ts                         |  6 +---
 6 files changed, 55 insertions(+), 17 deletions(-)

diff --git a/src/BarraSuperior.tsx b/src/BarraSuperior.tsx
index 80c4b65..29bec04 100644
--- a/src/BarraSuperior.tsx
+++ b/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>
diff --git a/src/ContenedorHorarios/Horarios.tsx b/src/ContenedorHorarios/Horarios.tsx
index 5003be8..d285013 100644
--- a/src/ContenedorHorarios/Horarios.tsx
+++ b/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>
         }
diff --git a/src/ContenedorHorarios/MiHorario.tsx b/src/ContenedorHorarios/MiHorario.tsx
index d30286b..db7fe1e 100644
--- a/src/ContenedorHorarios/MiHorario.tsx
+++ b/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 className={css(
-            estilosGlobales.inlineBlock,
-            estilosGlobales.contenedor
-        )}>
-            Mi horario
+        <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
diff --git a/src/ContenedorHorarios/Tabla.tsx b/src/ContenedorHorarios/Tabla.tsx
index 26efb5e..ce065db 100644
--- a/src/ContenedorHorarios/Tabla.tsx
+++ b/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 = [
diff --git a/src/Estilos.ts b/src/Estilos.ts
index 4d585e1..5ec6323 100644
--- a/src/Estilos.ts
+++ b/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"
     }
diff --git a/src/Store.ts b/src/Store.ts
index d010670..978511b 100644
--- a/src/Store.ts
+++ b/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);