Aplicada palaleta para gestion de catadores

tecnicas/forms/catador_form.py

@@ -6,12 +6,12 @@ class CatadorForm(forms.ModelForm):
         model =  Catador
         fields = "__all__"
         widgets = {
-            "usuarioCatador": forms.TextInput( attrs={ "class": "ct-inputs-pos-cata bg-gray-500 text-center w-full p-1 rounded-lg text-white disabled:bg-gray-700" } ),
-            "nombre": forms.TextInput( attrs={ "class": "ct-inputs-pos-cata bg-gray-500 text-center w-full p-1 rounded-lg text-white disabled:bg-gray-700" } ),
-            "apellido": forms.TextInput( attrs={ "class": "ct-inputs-pos-cata bg-gray-500 text-center w-full p-1 rounded-lg text-white disabled:bg-gray-700" } ),
-            "telefono": forms.NumberInput( attrs={ "class": "ct-inputs-pos-cata bg-gray-500 text-center w-full p-1 rounded-lg text-white disabled:bg-gray-700", "max": "10", "min": "10" } ),
-            "correo": forms.EmailInput( attrs={ "class": "ct-inputs-pos-cata bg-gray-500 text-center w-full p-1 rounded-lg text-white disabled:bg-gray-700" } ),
-            "fechaNacimiento": forms.DateInput( attrs={ "class": "ct-inputs-pos-cata bg-gray-500 text-center w-full p-1 rounded-lg text-white disabled:bg-gray-700", "type": "date", } ),
+            "usuarioCatador": forms.TextInput( attrs={ "class": "ct-inputs-pos-cata bg-surface-ligt text-center w-full p-1 rounded-lg text-black disabled:bg-surface-general" } ),
+            "nombre": forms.TextInput( attrs={ "class": "ct-inputs-pos-cata bg-surface-ligt text-center w-full p-1 rounded-lg text-black disabled:bg-surface-general" } ),
+            "apellido": forms.TextInput( attrs={ "class": "ct-inputs-pos-cata bg-surface-ligt text-center w-full p-1 rounded-lg text-black disabled:bg-surface-general" } ),
+            "telefono": forms.NumberInput( attrs={ "class": "ct-inputs-pos-cata bg-surface-ligt text-center w-full p-1 rounded-lg text-black disabled:bg-surface-general", "max": "10", "min": "10" } ),
+            "correo": forms.EmailInput( attrs={ "class": "ct-inputs-pos-cata bg-surface-ligt text-center w-full p-1 rounded-lg text-black disabled:bg-surface-general" } ),
+            "fechaNacimiento": forms.DateInput( attrs={ "class": "ct-inputs-pos-cata bg-surface-ligt text-center w-full p-1 rounded-lg text-black disabled:bg-surface-general", "type": "date", } ),
         }
 
     def clean(self):

tecnicas/templates/tecnicas/manage_tester/catador-buscar.html

@@ -4,28 +4,30 @@
 {% block title %}Buscar Catador{% 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="ct-container">
+    <article class="ct-wrap-content">
         <header class="flex-1 flex flex-col gap-7">
-            <div class="bg-gray-300 p-8 text-2xl font-bold rounded-2xl text-center capitalize">
+            <div class="bg-surface-card p-8 text-black text-2xl font-bold rounded-2xl text-center capitalize">
                 <h1>buscando catatador</h1>
             </div>
         </header>
-        <form action="" method="get" class="flex flex-col gap-5">
+        <form action="" method="get" class="flex flex-col gap-5 text-black">
             <h2 class="text-2xl mb-2 font-bold">Ingrese el nombre de usuario del catador</h2>
             <section class="">
                 <label for="usuario" class="text-lg flex flex-col px-2 w-full font-medium tracking-wide mb-4">
                     <div class="flex flex-wrap gap-4 justify-center items-center">
                         <p class="capitalize font-bold">nombre de usuario:</p>
-                        <input id="usuario" type="text" class="bg-gray-500 text-center w-fit p-1 rounded-lg text-white"
+                        <input id="usuario" type="text" class="bg-surface-ligt text-center w-fit p-1 rounded-lg"
                             name="user" required>
                         <button type="submit"
-                            class="uppercase text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 border-green-800  transition-all rounded-xl bg-green-600 active:bg-green-400 text-white w-fit">
-                            buscar
+                            class="w-fit text-black text-lg font-bold bg-btn-primary rounded-xl py-2 px-6 text-center border-b-green-800 btn-push">
+                            Buscar
                         </button>
-                        <a href="{% url 'cata_system:panel_catadores' %}"
-                            class="uppercase text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 border-yellow-800  transition-all rounded-xl bg-yellow-600 active:bg-yellow-400 text-white w-fit">
-                            regresar
+                        <a href="{% url 'cata_system:panel_catadores' %}">
+                            <button
+                                class="text-white w-fit bg-ct-error font-bold rounded-lg text-xl py-2 px-6 text-center border-pink-800 btn-push">
+                                Regresar
+                            </button>
                         </a>
                     </div>
                     {% if catador.errors %}
@@ -37,19 +39,21 @@
             </section>
         </form>
         {% if error %}
-        <p class="ct-notifica bg-red-500 text-center text-lg py-1 font-bold text-white tracking-wide capitalize rounded-2xl">
+        <p
+            class="ct-notifica bg-red-500 text-center text-lg py-1 font-bold text-white tracking-wide capitalize rounded-2xl">
             {{ error }}
         </p>
         {% endif %}
 
         {% if message %}
-        <p class="ct-notifica bg-green-600 text-center text-lg py-1 font-bold text-white tracking-wide capitalize rounded-2xl">
+        <p
+            class="ct-notifica bg-green-600 text-center text-lg py-1 font-bold text-white tracking-wide capitalize rounded-2xl">
             {{ message }}
         </p>
         {% endif %}
-        
+
         {% if form_catador %}
-        <form action="" method="post">
+        <form action="" method="post" class="text-black">
             {% csrf_token %}
             <section class="grid grid-cols-2 max-sm:grid-cols-1 [&>label]:px-6 max-sm:[&>label]:px-2">
                 <label for="{{ form_catador.usuarioCatador.id_for_label }}"

tecnicas/templates/tecnicas/manage_tester/catador-crear.html

@@ -4,14 +4,14 @@
 {% block title %}Crear Catador{% 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">
-        <header class="flex-1 flex flex-col gap-7">
-            <div class="bg-gray-300 p-8 text-2xl font-bold rounded-2xl text-center">
+<article class="ct-container">
+    <article class="ct-wrap-content">
+        <header class="flex flex-col gap-7">
+            <div class="bg-surface-card p-8 text-black text-2xl font-bold rounded-2xl text-center">
                 <h1>Creando Catador</h1>
             </div>
         </header>
-        <section>
+        <section class="text-black">
             {% if error %}
             <p class="ct-notificacion bg-red-400 py-4 text-2xl tracking-wide font-bold text-center capitalize">
                 {{ error }}
@@ -70,12 +70,14 @@
                 </section>
                 <section class="cs-escalas-radio flex justify-center items-center gap-4">
                     <button type="submit"
-                        class="uppercase text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 border-green-800  transition-all rounded-xl bg-green-600 active:bg-green-400 text-white w-fit">
-                        crear catador
+                        class="text-black text-lg bg-btn-primary font-bold rounded-xl px-8 py-4 text-center border-b-green-800 btn-push">
+                        Crear cadator
                     </button>
-                    <a href="{% url 'cata_system:panel_catadores' %}"
-                        class="uppercase text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 border-yellow-800  transition-all rounded-xl bg-yellow-600 active:bg-yellow-400 text-white w-fit">
-                        regresar
+                    <a href="{% url 'cata_system:panel_catadores' %}">
+                        <button type="button"
+                            class="text-white text-lg bg-ct-error font-bold rounded-xl px-8 py-4 text-center border-b-red-800 btn-push">
+                            Regresar
+                        </button>
                     </a>
                 </section>
             </form>

tecnicas/templates/tecnicas/manage_tester/catadores-panel.html

@@ -4,16 +4,19 @@
 {% block title %}Gestionar Catadores{% endblock %}
 
 {% block content %}
-<article class="w-full flex flex-col justify-center items-center min-sm:mt-10">
-    <article class="flex flex-col bg-gray-400 p-10 max-sm:py-10 max-sm:px-3 min-sm:rounded-2xl">
+<article class="ct-container">
+    <article class="ct-wrap-content">
         <article class="grid min-sm:grid-cols-2 gap-4 p-5 rounded-2xl">
             <header class="flex-1 flex flex-col gap-4">
-                <div class="bg-gray-600 p-8 text-2xl text-white font-bold rounded-2xl text-center">
+                <div class="bg-surface-card p-8 text-2xl text-black font-bold rounded-2xl text-center">
                     <h1>Adiministra los<br>catadores aquí</h1>
                 </div>
-                <a href="{% url 'cata_system:index' %}"
-                    class="text-white bg-blue-600 hover:bg-blue-700 active:outline-none active:ring-4 active:ring-blue-300 font-medium rounded-xl text-xl p-4 text-center uppercase">Panel
-                    principal</a>
+                <a href="{% url 'cata_system:index' %}">
+                    <button
+                        class="text-white w-full bg-ct-error font-bold rounded-lg text-xl p-4 text-center border-pink-800 btn-push">
+                        Ir al Panel principal
+                    </button>
+                </a>
                 <div class="w-full h-60 bg-gray-200 rounded-2xl relative">
                     <img src="{% static 'img/pn_gc_test.webp' %}" alt="un hombre en smokin probando vino"
                         class="h-full w-full object-cover rounded-xl">
@@ -24,13 +27,17 @@
                     <img src="{% static 'img/pn_gc_people.webp' %}" alt="varias personas en fila"
                         class="w-full h-full object-cover rounded-xl">
                 </div>
-                <a class="flex-1 text-white tracking-wider font-bold bg-green-600 border-green-800 border-r-4 border-b-4 active:border-r-0 active:border-b-0 active:border-t-4 active:border-l-4 transition-all rounded-xl text-xl p-4 flex justify-center items-center uppercase"
-                    href="{% url 'cata_system:crear_catador' %}">
-                    Crear Cadator
+                <a href="{% url 'cata_system:crear_catador' %}" class="flex-1">
+                    <button
+                        class="w-full h-full text-black bg-btn-primary font-bold rounded-xl px-8 py-4 text-center border-b-green-800 btn-push">
+                        Crear Cadator
+                    </button>
                 </a>
-                <a href="{% url 'cata_system:buscar_catador' %}"
-                    class="flex-1 text-white tracking-wider font-bold bg-yellow-600 border-yellow-800 border-r-4 border-b-4 active:border-r-0 active:border-b-0 active:border-t-4 active:border-l-4 transition-all rounded-xl text-xl p-4 flex justify-center items-center uppercase">
-                    Buscar Catador
+                <a href="{% url 'cata_system:buscar_catador' %}" class="flex-1">
+                    <button
+                        class="w-full h-full text-black bg-btn-secondary font-bold rounded-xl px-8 py-4 text-center border-b-pink-800 btn-push">
+                        Buscar Catador
+                    </button>
                 </a>
                 <div class="w-full h-40 rounded-2xl min-sm:hidden">
                     <img src="{% static 'img/pn_gc_people.webp' %}" alt="varias personas en fila"

theme/static_src/src/styles.css

@@ -24,7 +24,7 @@
 }
 
 .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;
+  @apply flex flex-col gap-8 bg-surface-alter p-10 max-lg:p-6 max-sm:px-2 max-sm:w-full rounded-xl max-lg:rounded-none;
 }
 
 /*