Ajustar estilos. Cambiar varios elementos span a button

src/BarraSuperior.tsx

@@ -2,7 +2,7 @@ import { estilosGlobales } from "./Estilos"
 import { StyleSheet, css } from "aphrodite"
 import { numWallpaper, setNumWallpaper } from "./Store"
 
-const ultimoIndiceWallpaper = 5
+const ultimoIndiceWallpaper = 2
 
 const e = StyleSheet.create({
     contCambiador: {

src/ContenedorHorarios/BotonMaxMin.tsx

@@ -25,7 +25,7 @@ export function BotonMaxMin(props: BotonMaxMinProps) {
     }
 
     return (
-        <div
+        <button
             title={tituloBoton()}
             onClick={funcionBoton}
             className={css(
@@ -37,6 +37,6 @@ export function BotonMaxMin(props: BotonMaxMinProps) {
             )}
         >
             <i className={`${css(estilosGlobales.botonPhospor)} ${iconoBoton()}`} />
-        </div>
+        </button>
     )
 }

src/ContenedorHorarios/CursosElem.tsx

@@ -27,6 +27,11 @@ const e = StyleSheet.create({
         padding: "0.25rem 0.35rem",
         borderRadius: "5px",
     },
+    botonCurso: {
+        backgroundColor: "transparent",
+        border: "none",
+        color: "var(--color)",
+    },
 })
 
 interface Props {
@@ -153,13 +158,13 @@ export function CursosElem(props: Props) {
 
                     return (
                         <div className={claseMemo()}>
-                            <div
+                            <button
-                                className={css(e.inline, e.lineaTexto, e.botonTexto, estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
+                                className={css(e.botonCurso, e.inline, e.lineaTexto, e.botonTexto, estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
                                 onMouseEnter={() => props.tablaObserver.resaltar(idCurso)}
                                 onMouseLeave={() => props.tablaObserver.quitarResaltado()}
                             >
                                 {datosCurso.abreviado} - {datosCurso.nombre}
-                            </div>
+                            </button>
                             <table>
                                 <tbody>
                                     <tr>
@@ -210,12 +215,12 @@ export function CursosElem(props: Props) {
                                     </tr>
                                 </tbody>
                             </table>
-                            <span
+                            <button
                                 className={css(e.botonTexto, estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
                                 onClick={() => props.fnAgregarCurso(datosCurso)}
                             >
                                 {tituloMemo}
-                            </span>
+                            </button>
                         </div>
                     )
                 }}

src/ContenedorHorarios/Horarios.tsx

@@ -44,9 +44,9 @@ export function Horarios(props: HorariosProps) {
                 })
 
                 return (
-                    <div className={clases()} title={`Cambiar a ${nombre}`} onClick={() => setAnioActual(nombre)}>
+                    <button className={clases()} title={`Cambiar a ${nombre}`} onClick={() => setAnioActual(nombre)}>
                         {nombre}
-                    </div>
+                    </button>
                 )
             }}
         </For>

src/ContenedorHorarios/Tabla.tsx

@@ -34,7 +34,8 @@ const e = StyleSheet.create({
         position: "relative",
         zIndex: 2,
         transition: "background-color 250ms",
-        marginLeft: "4.5rem",
+        // TODO: Vincular al valor en FilaTabla.tsx
+        marginLeft: "4rem",
         display: "flex",
         alignItems: "center",
         minHeight: "1.5rem",

src/ContenedorHorarios/Tabla/CeldaFila.tsx

@@ -187,7 +187,7 @@ export function CeldaFila(props: Props) {
                     )
 
                     return (
-                        <span className={clases()}
+                        <button className={clases()}
                               onMouseEnter={() => {
                                   props.tablaObserver.resaltar(id)
                               }}
@@ -197,7 +197,7 @@ export function CeldaFila(props: Props) {
                               onClick={fnSeleccionar}
                         >
                             {txt}
-                        </span>
+                        </button>
                     )
                 }}
             </For>

src/ContenedorHorarios/Tabla/FilaTabla.tsx

@@ -10,7 +10,7 @@ import { TablaObserver } from "../TablaObserver"
 const e = StyleSheet.create({
     celdaHora: {
         textAlign: "center",
-        width: "3rem",
+        width: "2.5rem",
         padding: "0.25rem 0",
         position: "absolute",
         top: "-0.75rem",
@@ -19,16 +19,16 @@ const e = StyleSheet.create({
         position: "absolute",
         zIndex: -1,
         height: "100%",
-        transform: "translateX(-1.5rem)",
+        transform: "translateX(-15px)",
     },
     fila: {
         position: "relative",
         zIndex: 2,
         transition: "background-color 250ms, border 100ms",
-        marginLeft: "4.5rem",
+        marginLeft: "calc(2.5rem + 20px)",
         display: "flex",
         alignItems: "center",
-        minHeight: "1.2rem",
+        minHeight: "1.1rem",
         ":hover": {
             // backgroundColor: "rgba(200, 200, 200, 0.25)"
         },
@@ -43,7 +43,7 @@ const e = StyleSheet.create({
     },
     celdaResaltado: {
         height: "101%",
-        width: "5px",
+        width: "4px",
         display: "inline-block",
     },
     celdaResaltadoTransparente: {

src/Estilos.ts

@@ -3,10 +3,10 @@ import { StyleSheet } from "aphrodite"
 export const estilosGlobales = StyleSheet.create({
     contenedor: {
         margin: "0.3rem",
-        padding: "0.75rem 0.75rem",
+        padding: "0.5rem 0.5rem",
-        borderRadius: "10px",
+        borderRadius: "0.4rem",
         backdropFilter: "blur(40px)",
-        backgroundColor: "rgba(100, 100, 100, 0.25)",
+        backgroundColor: "rgba(125, 125, 125, 0.3)",
         color: "var(--color-texto)",
         border: "solid 1px transparent",
     },

src/Store.ts

@@ -39,7 +39,7 @@ export const horasDescanso = [
     "17:30 - 17:40",
 ]
 
-const numImgGuardado = Number(localStorage.getItem("num-img") ?? "3")
+const numImgGuardado = Number(localStorage.getItem("num-img") ?? "1")
 
 export const [modoColor, setModoColor] = createSignal(ModoColor.Oscuro)
 export const [numWallpaper, setNumWallpaper] = createSignal(numImgGuardado)

src/Wallpaper.tsx

@@ -26,6 +26,7 @@ export function Wallpaper() {
             zIndex: -1,
             transition: `opacity ${duracionTransicion}ms`,
             filter: soportaBackdropFilter ? "" : "blur(40px)",
+            opacity: soportaBackdropFilter ? 1 : 0.75,
         },
         coverTransicion: {
             opacity: 0,

src/styles/global.css

@@ -1,3 +1,10 @@
 body {
+    font-size: 16px;
     font-family: Inter, sans-serif;
 }
+
+button {
+    background-color: transparent;
+    color: var(--color);
+    border: none;
+}