Agregar estilos a botones de info los cursos

src/ContenedorHorarios/Cursos.tsx

@@ -18,6 +18,10 @@ const e = StyleSheet.create({
     contenedorCurso: {
         display: "inline-block",
         verticalAlign: "top"
+    },
+    botonTexto: {
+        padding: "0.25rem 0.35rem",
+        borderRadius: "5px"
     }
 });
 
@@ -27,6 +31,13 @@ interface Props {
     listaCursosUsuario: ListaCursosUsuario
 }
 
+function IndicadorGrupo(props: { nombre: string, esLab: boolean }) {
+    return <span className={css(e.botonTexto, estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
+                 style={props.esLab ? {"font-style": "italic"} : {"font-weight": "bold"}}>
+        {props.esLab ? "L" : ""}{props.nombre}
+    </span>
+}
+
 const agruparProfesores = (datos: { [k: string]: DatosVariante }) => {
     const profesores: { [k: string]: string[] } = {};
     for (const [grupo, datosGrupo] of Object.entries(datos)) {
@@ -43,16 +54,12 @@ export function Cursos(props: Props) {
 
     const claseCursoNoAgregado = css(
         e.contenedorCurso,
-        estilosGlobales.contenedor,
-        // estilosGlobales.contenedorCursor,
-        // estilosGlobales.contenedorCursorSoft
+        estilosGlobales.contenedor
     );
 
     const claseCursoAgregado = css(
         e.contenedorCurso,
         estilosGlobales.contenedor,
-        // estilosGlobales.contenedorCursor,
-        // estilosGlobales.contenedorCursorSoft,
         estilosGlobales.contenedorCursorActivo,
     );
 
@@ -73,8 +80,7 @@ export function Cursos(props: Props) {
                     : `Agregar a mi horario`
                 );
 
-                const claseMemo = createMemo(() =>
-                    cursoAgregadoMemo()
+                const claseMemo = createMemo(() => cursoAgregadoMemo()
                     ? claseCursoAgregado
                     : claseCursoNoAgregado
                 );
@@ -95,9 +101,9 @@ export function Cursos(props: Props) {
                                         <span>
                                             {profesor}&nbsp;
                                         </span>
-                                        <span style={{"font-weight": "bold"}}>
-                                            {grupos.reduce((x, y) => x + " " + y)}&nbsp;
-                                        </span>
+                                        <For each={grupos}>
+                                            {x => <IndicadorGrupo nombre={x} esLab={false}/>}
+                                        </For>
                                     </td>
                                 }}
                             </For>
@@ -109,16 +115,17 @@ export function Cursos(props: Props) {
                                         <span>
                                             {profesor}&nbsp;
                                         </span>
-                                        <span style={{"font-style": "italic"}}>
-                                            {grupos.map(x => `L${x}`).reduce((x, y) => x + " " + y)}&nbsp;
-                                        </span>
+                                        <For each={grupos}>
+                                            {x => <IndicadorGrupo nombre={x} esLab={true}/>}
+                                        </For>
                                     </td>
                                 }}
                             </For>
                         </tr>
                         </tbody>
                     </table>
-                    <span className={css(estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
+                    <span
+                        className={css(e.botonTexto, estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
                         onClick={() => props.fnAgregarCurso(datosCurso)}
                     >
                         {tituloMemo}

src/ContenedorHorarios/Tabla.tsx

@@ -146,10 +146,19 @@ const procesarAnio = (data: AnioData, anio: string, version: number) => {
     return obj;
 }
 
-export function Tabla(props: { data: AnioData, anio: string, version: number }) {
+interface Props {
+    data: AnioData,
+    anio: string,
+    version: number,
+    idHover: () => string,
+    setIdHover: (v: string) => string
+}
+
+export function Tabla(props: Props) {
     const anio = () => props.anio.substring(0, props.anio.indexOf(" "));
     const data = createMemo(() => procesarAnio(props.data, anio(), props.version));
-    const [idHover, setIdHover] = createSignal("");
+    const idHover = props.idHover;
+    const setIdHover = props.setIdHover;
 
     const celdas = createMemo(() => {
         // Hace reaccionar a la reactividad de Solid