Se termina de aplicarla paleta de colores para crear una sesion

tecnicas/forms/word_form.py

@@ -14,7 +14,7 @@ class WordForm(forms.ModelForm):
             "max_length": "la palabra es muy larga",
         },
         widget=forms.TextInput(attrs={
-            "class": "bg-gray-300 border-b text-center text-black pb-1 rounded",
+            "class": "bg-surface-sweet border-b text-center text-black pb-1 rounded",
             "placeholder": "Ingrese palabra",
             "oninput": "this.value = this.value.toLowerCase()",
         })

tecnicas/static/js/create-session.js

@@ -43,18 +43,17 @@ function renderElementsResponse({
   const loadElement = document.querySelector(".ct-load-create");
 
   const message = document.createElement("p");
-  message.classList.add("text-2xl", "text-white", "text-center", "font-bold");
+  message.classList.add("text-2xl", "text-center", "font-bold");
 
   const nameSessionP = document.createElement("p");
   nameSessionP.classList.add(
     "text-lg",
-    "text-white",
     "text-center",
     "font-bold"
   );
 
   const idSession = document.createElement("p");
-  idSession.classList.add("text-lg", "text-white", "text-center", "font-bold");
+  idSession.classList.add("text-lg", "text-center", "font-bold");
   const pHelp = document.createElement("p");
 
   // ******************************** //
@@ -68,7 +67,7 @@ function renderElementsResponse({
     idSession.innerHTML = `El ID de la seesion es:<br><strong class="border-b border-white">${sessionId}</strong>`;
     nameSessionP.textContent = `Nombre de sesion: ${nameSession}`;
 
-    pHelp.classList.add("text-lg", "text-white", "text-center");
+    pHelp.classList.add("text-lg", "text-center");
     pHelp.textContent =
       "Puedes pasar este ID a los catadores para que ingresen a la sesion";
   }
@@ -84,16 +83,9 @@ function renderElementsResponse({
 
   const stylesBtns = [
     "uppercase",
-    "text-lg",
     "tracking-wider",
-    "font-medium",
-    "p-2",
-    "px-4",
-    "border-b-2",
-    "active:border-b-0",
-    "active:border-t-2",
-    "transition-all",
-    "rounded-xl",
+    "cts-btn-general",
+    "btn-push",
     "w-fit",
   ];
 
@@ -103,27 +95,21 @@ function renderElementsResponse({
 
   aIndex.classList.add(
     ...stylesBtns,
-    "active:border-blue-500",
-    "border-blue-800",
-    "bg-blue-500",
-    "text-white"
+    "cts-btn-secondary"
   );
 
-  const aMonitor = document.createElement("a");
-  aMonitor.href = "/cata";
-  aMonitor.textContent = "Monitorear la sesion";
+  const aDetails = document.createElement("a");
+  aDetails.href = `/cata/detalles-sesion/${sessionId}`;
+  aDetails.textContent = "Ver detalles la sesion";
 
-  aMonitor.classList.add(
+  aDetails.classList.add(
     ...stylesBtns,
-    "active:border-yellow-500",
-    "border-yellow-800",
-    "bg-yellow-500",
-    "text-black"
+    "cts-btn-tertiary"
   );
 
   divBtns.appendChild(aIndex);
   if (!error) {
-    divBtns.appendChild(aMonitor);
+    divBtns.appendChild(aDetails);
   }
 
   loadElement.classList.add("hidden");

tecnicas/static/js/panel-words.js

@@ -57,8 +57,8 @@ async function getWordsByName(e) {
 function createWordElement({ word, add = true, callback = null }) {
   const li = document.createElement("li");
   li.classList.add(
-    add ? "bg-gray-600" : "bg-gray-400",
-    add ? "text-white" : "text-black",
+    add ? "bg-surface-card" : "bg-surface-sweet",
+    "text-black",
     "rounded",
     "font-bold",
     "text-lg",

tecnicas/templates/tecnicas/create_sesion/configuracion-panel-words.html

@@ -4,13 +4,13 @@
 {% block title %}Panel Configuracion{% endblock %}
 
 {% block content %}
-<article class="w-full flex flex-col justify-center items-center bg-gray-600 my-10">
+<article class="cts-container-main">
     <section class="w-fit h-fit relative">
-        <article class="flex flex-col gap-4 bg-gray-400 md:p-10 p-5 rounded-2xl lg:w-4xl w-full">
+        <article class="cts-wrap-content text-black lg:w-4xl w-full">
             <h1 class="text-center font-bold text-4xl">Panel de configuración</h1>
             <hr>
             {% if error %}
-            <p class="bg-red-400 font-bold text-lg tracking-wide text-white capitalize text-center py-2">
+            <p class="bg-red-400 font-bold text-lg tracking-wide capitalize text-center py-2">
                 {{ error }}
             </p>
             {% endif %}
@@ -19,22 +19,21 @@
                 <section class="flex-3/5 flex flex-col gap-4">
                     <form action="" method="get" class="ct-serach-words">
                         {% csrf_token %}
-                        <p class="text-lg font-bold text-center mb-2 bg-gray-600 p-2 rounded text-white">
+                        <p class="text-lg font-bold text-center mb-2 bg-surface-card p-2 rounded">
                             Dejar en blaco para buscar las primeras 10 palabras
                         </p>
                         <section class="flex flex-row gap-2">
                             <label for="search" class="w-full">
                                 <input type="text" name="search" id="search" placeholder="Buscar palabra"
-                                    class="p-2 px-4 bg-gray-200 rounded-lg w-full text-lg font-medium">
+                                    class="p-2 px-4 bg-surface-ligt rounded-lg w-full text-lg font-medium">
                             </label>
                             <button type="submit"
-                                class="text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 active:border-blue-500 border-blue-800  transition-all rounded-xl bg-blue-500 text-white w-fit capitalize">
+                                class="font-bold rounded-lg text-xl px-3 text-center cts-btn-tertiary btn-push">
                                 Buscar
                             </button>
                         </section>
                     </form>
-                    <p
-                        class="ct-error-words hidden capitalize text-white bg-red-600 text-center text-2xl p-1.5 rounded">
+                    <p class="ct-error-words hidden capitalize bg-red-600 text-center text-2xl p-1.5 rounded">
                         error</p>
                     <ul class="ct-palabras-encontradas gap-2 grid-cols-2 max-h-96 overflow-y-auto">
                         <div class="flex justify-center items-center">
@@ -42,9 +41,9 @@
                         </div>
                     </ul>
                 </section>
-                <section class="flex-1/3 bg-gray-600 text-white p-4 rounded-lg text-center min-h-96">
+                <section class="flex-1/3 bg-surface-card p-4 rounded-lg text-center min-h-96">
                     <p class="text-xl font-bold pb-3">Lista de palabras</p>
-                    <hr class="mb-3 text-white">
+                    <hr class="mb-3">
                     <ul class="ct-palabras-usadas flex flex-col gap-3">
                         {% if not words %}
                         <img src="{% static 'img/list.svg' %}" alt="lista de palabras" class="ct-img-list">
@@ -61,23 +60,22 @@
                 </section>
             </article>
 
-            <article class="ct-new-tags bg-gray-600 p-5 flex justify-center items-center rounded-2xl">
+            <article class="ct-new-tags bg-surface-card p-5 flex justify-center items-center rounded-2xl">
                 <form method="post" action="" class="ct-form-new-word p-3">
                     {% csrf_token %}
-                    <p class="mb-4 text-2xl min-md:text-xl font-bold text-center text-white">
+                    <p class="mb-4 text-2xl min-md:text-xl font-bold text-center">
                         ¿No encuentras una palabra?
                     </p>
                     <label for="{{ form_word.nombre_palabra.id_for_label }}"
-                        class="font-medium text-xl text-white flex flex-wrap justify-center items-center gap-3 mb-4">
+                        class="font-medium text-xl  flex flex-wrap justify-center items-center gap-3 mb-4">
                         <p class="px-4">Nueva palabra:</p>
                         {{ form_word.nombre_palabra }}
                     </label>
-                    <p
-                        class="ct-error-word mb-4 font-bold bg-red-500 text-white text-md capitalize text-center rounded hidden">
+                    <p class="ct-error-word mb-4 font-bold bg-red-500 text-md capitalize text-center rounded hidden">
                         error
                     </p>
-                    <hr class="text-white">
-                    <article class="flex justify-center gap-8 mt-4 text-white font-medium tracking-wide">
+                    <hr>
+                    <article class="flex justify-center gap-8 mt-4 font-medium tracking-wide">
                         <button
                             class="text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 active:border-green-500 border-green-800  transition-all rounded-xl bg-green-600 text-white w-fit"
                             type="submit">
@@ -90,10 +88,24 @@
             <article>
                 <form action="" method="post" class="ct-creat-session flex justify-center mt-4">
                     {% csrf_token %}
-                    <button type="submit" name="start"
-                        class="text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 active:border-yellow-500 border-yellow-800  transition-all rounded-xl bg-yellow-500 text-white w-fit capitalize">
-                        Crear sesión
-                    </button>
+                    <article class="cs-escalas-radio w-full flex flex-col gap-4">
+                        <section class="flex max-sm:flex-col flex-wrap items-center justify-center gap-4">
+                            <button type="submit" name="start"
+                                class="cts-btn-general cts-btn-primary btn-push flex-1 w-full">
+                                Crear sesión
+                            </button>
+                            <a href="{% url 'cata_system:seleccion_tecnica' %}" class="flex-1 w-full">
+                                <button type="button" class="cts-btn-general cts-btn-secondary btn-push w-full">
+                                    Paso anterior
+                                </button>
+                            </a>
+                        </section>
+                        <a href="{% url 'cata_system:seleccion_tecnica' %}" class="flex-1 w-full">
+                            <button type="button" class="cts-btn-general cts-btn-error btn-push w-full">
+                                Cancelar la creación
+                            </button>
+                        </a>
+                    </article>
                 </form>
             </article>
 

tecnicas/templates/tecnicas/create_sesion/creando_sesion.html

@@ -4,20 +4,20 @@
 {% block title %}Creando sesion{% endblock %}
 
 {% block content %}
-<article class="w-full flex flex-col justify-center items-center bg-gray-600 my-10">
-    <article class="flex flex-col gap-4 bg-gray-400 md:p-10 p-5 rounded-2xl lg:w-4xl w-full">
+<article class="cts-container-main">
+    <article class="cts-wrap-content text-black lg:w-4xl w-full">
         <h1 class="text-center font-bold text-4xl">Creando Sesion</h1>
         <hr>
-        <section class="ct-load-create flex flex-col gap-4 bg-gray-600 p-6 rounded-xl">
-            <p class="text-lg text-white text-center font-bold">
+        <section class="ct-load-create flex flex-col gap-4 bg-surface-card p-6 rounded-xl">
+            <p class="text-lg text-center font-bold">
                 Estamos creando la sesion, por favor espere...
             </p>
-            <hr class="text-white">
+            <hr>
             <div class="w-full h-4 bg-green-500 rounded-full overflow-hidden">
                 <div class="h-full bg-red-400 animate-pulse" style="width: 100%"></div>
             </div>
         </section>
-        <section class="ct-message-create flex flex-col gap-4 bg-gray-600 p-6 rounded-xl hidden"></section>
+        <section class="ct-message-create flex flex-col gap-4 bg-surface-card p-6 rounded-xl hidden"></section>
         <form action="" method="post" class="hidden ct-cretae-session-form">
             {% csrf_token %}
             <input type="hidden" name="action" value="create_session">

theme/static_src/src/styles.css

@@ -23,7 +23,7 @@
 }
 
 .cts-btn-tertiary {
-  @apply text-white bg-btn-tertiary border-pink-800;
+  @apply text-gray-700 bg-btn-tertiary border-green-600;
 }
 
 .cts-btn-error {

theme/static_src/tailwind.config.js

@@ -16,7 +16,7 @@ module.exports = {
         "surface-alter-card": "#91C4C3",
         "btn-primary": "#4CAF50",
         "btn-secondary": "#E45A92",
-        "btn-tertiary": "#FFACAC",
+        "btn-tertiary": "#CCECC0",
         "ct-success": "#2E7D32",
         "ct-error": "#E62727",
       },