mejora visual en la muestra de los horarios de una clase

src/app/planear/bloques/page.tsx

@@ -5,6 +5,7 @@ import Image from "next/image";
 import { EstadoBloques } from '@/types/contexto'
 import { eliminarBloque,obtenerBloquesGuardados, guardarBloque} from '@/services/almacenamiento/almacenamientoBloques';
 import { tiempoNumeroATexto } from '@/services/formateadorTiempo';
+import CasillasDias from '@/components/casillasDias';
 
 /*
   Contexto de los bloques de tiempo
@@ -162,8 +163,7 @@ function BloquePlaneado({ bloque , funcionEliminar }: { bloque: BloqueTiempo, fu
       </div>
       <h3 className="text-lg font-semibold">{bloque.titulo}</h3>
       <p>{bloque.lugar}</p>
-      <p>{["l", "m", "i", "j", "v", "s"].filter(dia => bloque.dias.includes(dia)).map(dia => dia.toUpperCase()).join(", ")}</p>
-      <p>{tiempoNumeroATexto(bloque.horaInicio) + " - " + tiempoNumeroATexto(bloque.horaFin)}</p>
+      <CasillasDias bloque={bloque} />
     </div>
   );
 }

src/app/planear/cursos/page.tsx

@@ -7,6 +7,7 @@ import { EstadosCursos } from '@/types/contexto'
 import Curso from '@/models/Curso';
 import Seccion from '@/models/Seccion';
 import Tooltip from '@/components/tooltip';
+import CasillasDias from '@/components/casillasDias';
 
 /*
   Contexto que comparte los estados y funciones que se comparten entre los componentes de la página de cursos
@@ -103,14 +104,14 @@ function DetallesCursosEncontrados({ cursos, funcionSeleccionDeCurso }: { cursos
 */
 function CursoEncontrado({ curso, funcionSeleccionDeCurso }: { curso: Curso, funcionSeleccionDeCurso: () => void }) {
   return (
-    <div className="bg-gray-100 dark:bg-neutral-600 text-center  flex  border border-3 border-black  h-36   my-3" >
-      <div className='mx-auto flex flex-col justify-center'>
+    <div className="bg-gray-100 dark:bg-neutral-600 text-center  flex  border border-3 border-black my-3 flex-" >
+      <div className='mx-auto py-3 w-full'>
         <h3 className="text-lg font-semibold">{curso.descripcion}</h3>
         <p>{curso.programa}</p>
         <p>{curso.curso}</p>
         <p>{curso.creditos}</p>
       </div>
-      <button className='bg-yellow-400 flex items-center justify-center w-8' onClick={funcionSeleccionDeCurso} title='Seleccionar curso'>
+      <button className='bg-yellow-400 flex items-center justify-center ml-auto w-8 min-w-8' onClick={funcionSeleccionDeCurso} title='Seleccionar curso'>
         <Image src="/Mi-Horario-Uniandes/static/lupa.svg" alt="Seleccionar curso" width="0" height="0" className='w-6 h-auto' />
       </button>
     </div>
@@ -141,7 +142,7 @@ function DetallesCursoSeleccionado({ curso }: { curso: Curso}) {
 */
 function CursoSeleccionado({ curso }: { curso: Curso }) {
   return (
-    <div className="bg-gray-300 dark:bg-neutral-600 text-center  flex border border-3 border-black  h-36  flex-col justify-center my-3">
+    <div className="bg-gray-300 dark:bg-neutral-600 text-center  flex border border-3 border-black   flex-col justify-center my-3 py-3">
       <h3 className="text-lg font-semibold">{curso.descripcion}</h3>
       <p>{curso.programa}{curso.curso}</p>
       <p>{curso.creditos} créditos</p>
@@ -236,7 +237,7 @@ function SeccionCursoSeleccionado({ seccion }: { seccion: Seccion }) {
     setCursosGuardados(obtenerCursosGuardados());
   }
   return (
-    <div className="bg-gray-100 dark:bg-neutral-600 text-center  flex  border border-3 border-black  sm:h-44  my-3">
+    <div className="bg-gray-100 dark:bg-neutral-600 text-center  flex  border border-3 border-black  my-3">
       <div className='mx-auto flex flex-col justify-center'>
         <h3 className="text-lg font-semibold">{seccion.titulo}</h3>
         <p>NRC: {seccion.nrc} SECCIÓN: {seccion.seccion}</p>
@@ -245,9 +246,9 @@ function SeccionCursoSeleccionado({ seccion }: { seccion: Seccion }) {
           {seccion.cuposMaximos > 0 && <div className="bg-yellow-400 h-3 rounded-full" style={{ width: `${(Math.min(seccion.cuposTomados,seccion.cuposMaximos) / seccion.cuposMaximos) * 100}%` }}></div>}
         </div>
         <p>{seccion.profesores.map((profesor) => profesor.nombre).join(", ")}</p>
-        <p>{seccion.horarios.map((bloque) => bloque.dias.map(dia => dia.toUpperCase()).join("") + " " + bloque.horaInicio + " " + bloque.horaFin).join(", ")}</p>
+        <p>{seccion.horarios.map((bloque) => <CasillasDias bloque={bloque} key={bloque.titulo}/>)}</p>
       </div>
-      <button className='bg-yellow-400 flex items-center justify-center w-8 text-2xl font-semibold dark:text-black' onClick={handleAñadir} title='Añadir o quitar sección'>{cursoTieneSeccionGuardada(seccion.curso.programa + seccion.curso.curso, seccion.seccion) ? "-" : "+"}</button>
+      <button className='bg-yellow-400 flex items-center justify-center w-8 min-w-8 text-2xl font-semibold dark:text-black' onClick={handleAñadir} title='Añadir o quitar sección'>{cursoTieneSeccionGuardada(seccion.curso.programa + seccion.curso.curso, seccion.seccion) ? "-" : "+"}</button>
     </div>
   )
 }

src/app/ver/page.tsx

@@ -13,6 +13,7 @@ import { atributosEspeciales, obtenerSeccionesPorAtributoYPrograma, programasEsp
 import { filtrarSeccionesQueColisionan } from "@/services/operacionesSobreHorario";
 import Spinner from "@/components/spinner";
 import Image from "next/image";
+import CasillasDias from "@/components/casillasDias";
 
 /*
   Página que muestra los horarios generados así como la opción de guardar un horario y ver cursos especiales que se ajustan
@@ -241,7 +242,7 @@ function SeccionEspecial({seccion}: {seccion: Seccion}){
         <p>Se han inscrito {seccion.cuposTomados} de {seccion.cuposMaximos} estudiantes</p>
         <p>{seccion.curso.programa + seccion.curso.curso}</p>
         <p>{seccion.profesores.map((profesor) => profesor.nombre).join(", ")}</p>
-        <p>{seccion.horarios.map((bloque) => bloque.dias.join("") + " " + bloque.horaInicio + " " + bloque.horaFin).join(", ")}</p>
+        <p>{seccion.horarios.map((bloque) => <CasillasDias bloque={bloque} key={bloque.titulo}/>)}</p>
         {seccion.curso.atributos.map((atributo) => (
           <p key={atributo}>{atributo}</p>
         ))}

src/components/calendario.tsx

@@ -236,7 +236,7 @@ function Bloque({bloque} : {bloque: BloqueTiempo}) {
   const tiempoFinalAPixeles = tiempoAPixeles(bloque.horaFin);
   const alturaBloqueEnPixeles = tiempoFinalAPixeles - tiempoInicialAPixeles;
   return (
-    <div className='absolute rounded border-2 border-gray-400 bg-gray-200 flex items-center justify-center' style={{ top: `${(tiempoInicialAPixeles)}px` , height: `${alturaBloqueEnPixeles}px`, width:"95%"}}>
+    <div className='absolute rounded border-2 border-gray-400 bg-gray-200 flex items-center justify-center dark:bg-neutral-600 text-center' style={{ top: `${(tiempoInicialAPixeles)}px` , height: `${alturaBloqueEnPixeles}px`, width:"95%"}}>
       <div>
         <p className="text-center text-sm">{bloque.titulo} <span className='md:hidden'>{tiempoNumeroATexto(bloque.horaInicio)} - {tiempoNumeroATexto(bloque.horaFin)}</span></p>
       </div>

src/components/casillasDias.tsx

@@ -0,0 +1,24 @@
+import BloqueTiempo from "@/models/BloqueTiempo";
+import { tiempoNumeroATexto } from "@/services/formateadorTiempo";
+
+/*
+    Componente que muestra en fila los días de la semana en los que se da un bloque de tiempo
+*/
+export default function CasillasDias({ bloque }: { bloque: BloqueTiempo }) {
+  const diasSemana = ["L", "M", "I", "J", "V", "S"];
+  return (
+    <div className="my-1">
+      {tiempoNumeroATexto(bloque.horaInicio)} - {tiempoNumeroATexto(bloque.horaFin)}
+      <div className="flex justify-center items-center space-x-1 ">
+        {diasSemana.map((letraDia, index) => (
+            <div key={index} className={`w-5 h-5 bg-black-300 flex items-center justify-center rounded-md  ${bloque.dias.includes(letraDia.toLowerCase()) ? 'bg-yellow-500' : 'bg-gray-300 dark:bg-neutral-800'}`}>
+            <span className="text-xl font-semibold text-gray-700 dark:text-gray-500">
+                {letraDia}
+            </span>
+            </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+