feat: improved styling

config/mixins.py

@@ -11,6 +11,7 @@ class HTMXFormComponent(TemplateView):
     template_name: str = "components/default/form.html"
     hx_trigger = ""
     view_name = ""
+    save_button_text = ""
 
     def get_view_name(self):
         return self.view_name
@@ -38,6 +39,7 @@ class HTMXFormComponent(TemplateView):
         return {
             "form": form,
             "url": self.get_view_name(),
+            "save_button_text": self.save_button_text,
         }
 
     def post(self, request, *args, **kwargs):

web/templates/components/default/form.html

@@ -16,10 +16,13 @@
     <span class="flex justify-center mb-2 text-sm font-medium text-red-900 dark:text-red-400">{{ error }}</span>
   {% endfor %}
 
-  <button class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none
+  <footer class="flex justify-end">
+    <button class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none
                    focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600
                    dark:hover:bg-primary-700 dark:focus:ring-primary-800"
-  >
-    {% translate 'Guardar' %}
-  </button>
+    >
+      {{ save_button_text }}
+    </button>
+  </footer>
+
 </form>

web/templates/users/user_details.html

@@ -9,18 +9,33 @@
       >
         {% translate 'Mi cuenta' %}
       </h2>
-      <div
-        class="mt-4 p-6 border border-gray-100 rounded-md dark:border-gray-600"
-        hx-get="{% url 'web:user_info_component' %}" hx-trigger="load, updated_user_info"
-      >
+      <div class="md:grid md:grid-cols-2 md:gap-4">
+        <section
+          class="p-6 border border-gray-100 rounded-md dark:border-gray-600"
 
-      </div>
-
-      <div
-        class="mt-4 p-6 border border-gray-100 rounded-md dark:border-gray-600"
-        hx-get="{% url 'web:change_password_component' %}" hx-trigger="load, changed_password"
-      >
+        >
+          <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl md:mb-6">
+            {% translate 'Datos de usuario' %}
+          </h2>
+          <div hx-get="{% url 'web:user_info_component' %}" hx-trigger="load, updated_user_info">
+            <div class="flex justify-center items-center">
+              {% include 'components/generic/spinner.html' %}
+            </div>
+          </div>
+        </section>
 
+        <section
+          class="p-6 border border-gray-100 rounded-md dark:border-gray-600 mt-4 md:mt-0"
+        >
+          <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl md:mb-6">
+            {% translate 'Contraseña' %}
+          </h2>
+          <div hx-get="{% url 'web:change_password_component' %}" hx-trigger="load, changed_password">
+            <div class="flex justify-center items-center">
+              {% include 'components/generic/spinner.html' %}
+            </div>
+          </div>
+        </section>
       </div>
 
       <div class="mt-4 p-6 border border-gray-100 rounded-md dark:border-gray-600">
@@ -45,4 +60,4 @@
     </div>
 
   </section>
-{% endblock %}
+{% endblock %}

web/views/components.py

@@ -4,6 +4,7 @@ from django.db import models
 from django.http import HttpResponse
 from django.shortcuts import get_object_or_404, render
 from django.urls import reverse
+from django.utils.text import gettext_lazy as _
 from django.views.generic import TemplateView
 
 from config.mixins import HTMXFormComponent
@@ -152,6 +153,7 @@ class WishlistButton(TemplateView):
 class UserInfoFormComponentView(HTMXFormComponent):
     form_class = UserInfoForm
     hx_trigger = "updated_user_info"
+    save_button_text = _("Actualizar datos")
 
     def get_object(self) -> models.Model:
         return self.request.user
@@ -170,6 +172,7 @@ class UserInfoFormComponentView(HTMXFormComponent):
 class ChangePasswordFormComponentView(HTMXFormComponent):
     form_class = ChangePasswordForm
     hx_trigger = "changed_password"
+    save_button_text = _("Cambiar contraseña")
 
     def get_form(self, initial=True):
         if initial: