Se aplica paleta de colores a detalles de sesion y monitoreo

tecnicas/templates/tecnicas/main-panel.html

@@ -3,8 +3,8 @@
 {% block title %}Panel principal{% endblock %}
 
 {% block content %}
-<article class="w-full flex flex-col justify-center items-center min-sm:mt-10">
-    <article class="flex flex-col bg-surface-alter p-10 max-sm:py-10 max-sm:px-3 min-sm:rounded-2xl">
+<article class="ct-container">
+    <article class="ct-wrap-content">
         <header class="flex flex-col flex-wrap justify-center items-center gap-8">
             <section class="bg-surface-card p-8 rounded-md w-full shadow-lg">
                 <h1 class="text-black text-4xl font-bold text-center max-sm:text-2xl">Panel Principal</h1>

tecnicas/templates/tecnicas/manage_sesions/detalles-sesion.html

@@ -4,8 +4,8 @@
 {% block title %}Detalles Sesion{% endblock %}
 
 {% block content %}
-<article class="w-full flex flex-col justify-center items-center bg-surface-general mt-10 mb-10">
-    <article class="flex flex-col gap-8 bg-surface-alter p-10 max-lg:p-6 max-sm:px-2 rounded-xl max-lg:rounded-none">
+<article class="ct-container">
+    <article class="ct-wrap-content">
         <header class="text-center flex-row w-full flex justify-around items-center flex-wrap gap-10">
             <h1 class="text-black rounded-xl font-bold text-2xl bg-surface-card shadow-lg p-4 flex-1">
                 Detalles de la sesión
@@ -38,7 +38,7 @@
             Información general
         </p>
         <article
-            class="text-black rounded-xl grid grid-cols-2 max-sm:grid-cols-1 gap-3 *:bg-surface-card *:flex *:flex-wrap *:items-center *:justify-center *:max-sm:justify-normal *:gap-x-2 *:p-4 *:rounded-2xl text-xl max-sm:text-base">
+            class="text-black rounded-xl grid grid-cols-2 max-sm:grid-cols-1 gap-3 max-sm:gap-1 *:bg-surface-card *:flex *:flex-wrap *:items-center *:justify-center *:max-sm:justify-normal *:gap-x-2 *:p-4 *:rounded-2xl text-xl max-sm:text-base">
             <section class="col-span-2 max-sm:col-span-1">
                 <p class="font-bold">
                     Código:
@@ -183,13 +183,13 @@
         </p>
 
         {% if calificaciones.error %}
-        <article class="bg-surface-general p-4 text-white rounded-xl">
+        <article class="bg-surface-card p-4 text-white rounded-xl">
             <p class="block font-sans text-xl antialiased font-normal uppercase tracking-wider text-center">
                 {{ calificaciones.error }}
             </p>
         </article>
         {% else %}
-        <article class="bg-surface-general p-4 text-white rounded-xl">
+        <article class="bg-surface-card p-4 text-white rounded-xl">
         </article>
         {% endif %}
         <form action="" method="post" class="form-action-session hidden">

tecnicas/templates/tecnicas/manage_sesions/monitor-sesion.html

@@ -3,11 +3,10 @@
 {% block title %}Monitoreo{% endblock %}
 
 {% block content %}
-<article class="w-full flex flex-col justify-center items-center bg-gray-600 mt-10 mb-10">
-    <article
-        class="flex flex-col gap-8 bg-gray-400 p-10 max-lg:p-6 max-sm:px-2 max-sm:w-full rounded-2xl max-lg:rounded-none">
+<article class="ct-container">
+    <article class="ct-wrap-content">
         <header class="text-center">
-            <h1 class="text-3xl font-bold">Sesión sensorial en curso</h1>
+            <h1 class="text-3xl font-bold text-black">Sesión sensorial en curso</h1>
         </header>
 
         {% if error %}
@@ -19,21 +18,21 @@
         {% endif %}
 
         <section class="flex flex-col sm:flex-row justify-between items-center gap-10 mb-6">
-            <p class="text-xl text-center bg-gray-600 p-4 text-white rounded-lg">
+            <p class="text-xl text-center bg-surface-card p-4 text-black rounded-lg shadow-lg">
                 Código de sesión:<br>
                 <span class="font-mono text-2xl font-bold">{{ code_session }}</span>
             </p>
             <button
-                class="uppercase text-lg max-sm:text-base tracking-wider p-4 border-b-2 active:border-b-0 active:border-t-2 active:border-red-500 border-red-800 transition-all rounded-xl bg-red-600 text-white font-bold disabled:bg-amber-600">
+                class="uppercase text-lg max-sm:text-base tracking-wider p-4 rounded-xl bg-ct-error text-white font-bold border-red-800 btn-push">
                 Finalizar sesión
             </button>
         </section>
 
         <section aria-labelledby="catadores-titulo">
             <article
-                class="flex max-sm:flex-col justify-around bg-gray-200 border border-gray-300 rounded-md p-3 mb-4 items-center">
+                class="flex max-sm:flex-col justify-around bg-surface-card border border-gray-300 rounded-md p-3 mb-4 items-center shadow-lg">
                 <button
-                    class="uppercase text-lg max-sm:text-base tracking-wider p-2 px-3 border-b-3 active:border-b-0 active:border-t-3 active:border-blue-500 border-blue-800 transition-all rounded-xl bg-blue-600 text-white font-bold"
+                    class="uppercase text-lg max-sm:text-base tracking-wider p-2 px-3 transition-all rounded-xl bg-btn-secondary font-bold btn-push border-pink-800"
                     onclick="reloadPage()">
                     Actualizar lista
                 </button>
@@ -43,7 +42,7 @@
             </article>
 
             <article
-                class="flex flex-col justify-center gap-3 bg-gray-200 border border-gray-300 rounded-md p-3 mb-4 text-lg max-sm:text-sm text-gray-700">
+                class="flex flex-col justify-center gap-3 bg-surface-card border border-gray-300 rounded-md p-3 mb-4 text-lg max-sm:text-sm text-gray-700 shadow-lg">
                 <div class="flex justify-center items-center">
                     <h2 class="text-xl font-semibold">Participantes</h2>
                 </div>
@@ -63,19 +62,19 @@
                 </section>
             </article>
 
-            <article class="max-sm:overflow-x-auto">
+            <article class="max-sm:overflow-x-auto shadow-lg">
                 <div class="min-w-[400px] sm:min-w-0">
                     <div
-                        class="grid grid-cols-4 bg-gray-300 text-center font-semibold text-sm rounded-t-lg max-sm:w-full [&_>*]:px-2">
+                        class="grid grid-cols-4 bg-surface-sweet text-center font-semibold text-black text-sm rounded-t-lg max-sm:w-full [&_>*]:px-2">
                         <div class="py-2 border-r border-gray-400">Usuario</div>
                         <div class="py-2 border-r border-gray-400">Nombre</div>
                         <div class="py-2 border-r border-gray-400">Estado</div>
                         <div class="py-2">Finalizado</div>
                     </div>
 
-                    <ul class="divide-y divide-gray-400 max-sm:w-full">
+                    <ul class="divide-y divide-gray-400 max-sm:w-full text-black">
                         {% for parti in participations %}
-                        <li class="grid grid-cols-4 text-center bg-gray-200 py-2 [&_>*]:px-2">
+                        <li class="grid grid-cols-4 text-center bg-surface-card py-2 [&_>*]:px-2">
                             <p class="border-r border-gray-400">{{ parti.catador.usuarioCatador }}</p>
                             <p class="border-r border-gray-400">
                                 {{ parti.catador.nombre }}

tecnicas/templates/tecnicas/manage_sesions/sesiones-panel.html

@@ -4,8 +4,8 @@
 {% block title %}Panel Sesiones{% endblock %}
 
 {% block content %}
-<article class="w-full flex flex-col justify-center items-center bg-surface-general mt-10 mb-10">
-    <article class="max-sm:w-full flex flex-col gap-8 bg-surface-alter p-10 max-lg:p-6 max-sm:px-0 rounded-2xl">
+<article class="ct-container">
+    <article class="ct-wrap-content">
         <header class="text-center flex flex-row max-sm:flex-col gap-8 items-center w-full">
             <div class="bg-surface-card p-4 text-black shadow-lg rounded-xl flex-1">
                 <h1 class="font-bold text-2xl">Administra las<br>sesiones sensoriales</h1>
@@ -20,9 +20,9 @@
             </div>
         </header>
 
-        <section class="grid grid-cols-3 max-lg:grid-cols-2 max-sm:grid-cols-1 gap-4 justify-center">
+        <section class="grid grid-cols-3 max-lg:grid-cols-2 max-sm:grid-cols-1 w-full gap-4 justify-center">
             {% for sesion in sessions %}
-            <div class="card bg-surface-card shadow-lg text-black max-w-80 w-full">
+            <div class="card bg-surface-card shadow-lg text-black sm:max-w-80 w-full flex justify-center items-center">
                 <div class="card-body flex flex-col justify-between">
                     <div class="flex flex-col gap-1 [&>*]:first:text-xl [&>*]:first:font-bold [&>*]:first:border-b">
                         {% if sesion.nombre_sesion %}
@@ -65,7 +65,7 @@
                 <button class="join-item btn bg-btn-secondary">
                     <img class="h-full" src="{% static 'img/less-than.svg' %}" alt="menor que">
                 </button>
-                <button class="join-item btn bg-btn-secondary">Page 22</button>
+                <button class="join-item btn bg-btn-secondary">Page {{ page }}</button>
                 <button class="join-item btn bg-btn-secondary">
                     <img class="h-full" src="{% static 'img/greater-than.svg' %}" alt="mayor que">
                 </button>

tecnicas/views/sessions_management/sessions_panel.py

@@ -3,7 +3,7 @@ from ...controllers import SesionController
 
 
 def sesionsPanel(req, page: int):
-    context = {}
+    context = {"page": page}
 
     sessions_in_page = SesionController.getSessionsSavesByCretor(
         user_name="aguBido", page=page)
@@ -22,4 +22,4 @@ def sesionsPanel(req, page: int):
 
     context["num_paginas"] = number_pages
 
-    return render(req, "tecnicas/manage_sesions/sesiones-panel.html", context=context)
+    return render(req, "tecnicas/manage_sesions/sesiones-panel.html", context=context)

theme/static_src/src/styles.css

@@ -19,6 +19,14 @@
   @apply border-b-4 active:border-b-0 active:border-t-4 transition-all;
 }
 
+.ct-container {
+  @apply w-full flex flex-col justify-center items-center bg-surface-general mt-10 mb-10;
+}
+
+.ct-wrap-content {
+  @apply flex flex-col gap-8 bg-surface-alter p-10 max-lg:p-6 max-sm:px-2 rounded-xl max-lg:rounded-none;
+}
+
 /* 
 #FFECC0
 #FFC29B