feat: improve styling mixin

users/forms/info.py

@@ -15,6 +15,8 @@ class UserInfoForm(StylingMixin, forms.ModelForm):
         "last_name": _("Moreno"),
     }
 
+    classes = StylingMixin.classes.difference({'w-full'})
+
     class Meta:
         model = User
         fields = (

web/mixins.py

@@ -34,6 +34,25 @@ class PaginatedQuerysetMixin:
 class StylingMixin:
     placeholder_for_field = {}
     styled_fields = []
+    classes = {
+        "my-2",
+        "bg-gray-50",
+        "border",
+        "border-gray-300",
+        "text-gray-900",
+        "sm:text-sm rounded-lg",
+        "focus:ring-primary-600",
+        "focus:border-primary-600",
+        "block",
+        "w-full",
+        "p-2.5",
+        "dark:bg-gray-700",
+        "dark:border-gray-600",
+        "dark:placeholder-gray-400",
+        "dark:text-white",
+        "dark:focus:ring-primary-500",
+        "dark:focus:border-primary-500",
+    }
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
@@ -45,10 +64,7 @@ class StylingMixin:
             field.required = True
             field.widget.attrs.update(
                 {
-                    "class": "my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg "
+                    "class": ' '.join(self.classes)
-                    "focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 "
-                    "dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 "
-                    "dark:focus:border-primary-500"
                 }
             )
 

web/templates/components/users/info.html

@@ -17,11 +17,11 @@
     <span class="flex justify-center mb-2 text-sm font-medium text-red-900 dark:text-red-400">{{ error }}</span>
     {% endfor %}
 
-    <button class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none
+    <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 'Actualizar datos' %}
+        {% translate 'Guardar' %}
     </button>