fix: refactor css

theme/static/css/components.css

@@ -77,4 +77,29 @@
     .cart-navbar-floating {
         @apply absolute top-12 z-10 w-75 divide-y divide-gray-100 overflow-hidden overflow-y-auto rounded-lg bg-white antialiased shadow dark:divide-gray-600 dark:bg-gray-700 right-0 p-4;
     }
+
+    .button-primary {
+        @apply w-full flex justify-center rounded-lg bg-primary-700 px-5 py-2.5
+                 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4
+                 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800
+                 content-center items-center cursor-pointer;
+    }
+
+    .input-number {
+        @apply bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600
+                focus:border-primary-600 block 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 mr-4;
+    }
+
+    .input-text {
+        @apply dark:focus:ring-primary-500 text-gray-900 dark:text-white block border-gray-300 border w-full dark:border-gray-600 p-2.5 bg-gray-50 dark:focus:border-primary-500 focus:ring-primary-600 dark:bg-gray-700 focus:border-primary-600 dark:placeholder-gray-400 sm:text-sm rounded-lg my-2;
+    }
+
+    .search-input {
+        @apply block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 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;
+    }
+
+    .txt-2xl {
+        @apply text-2xl font-extrabold leading-tight text-gray-900 dark:text-white;
+    }
 }

users/forms/login.py

@@ -13,9 +13,7 @@ class LoginForm(StylingMixin, AuthenticationForm):
         widget=forms.EmailInput(
             attrs={
                 "autofocus": True,
-                "class": "my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 "
+                "class": "input-text",
-                "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",
             }
         )
     )
@@ -25,10 +23,7 @@ class LoginForm(StylingMixin, AuthenticationForm):
         widget=forms.PasswordInput(
             attrs={
                 "autocomplete": "current-password",
-                "class": "my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg "
+                "class": "input-text",
-                "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",
             }
         ),
     )
@@ -37,8 +32,7 @@ class LoginForm(StylingMixin, AuthenticationForm):
         required=False,
         widget=forms.CheckboxInput(
             attrs={
-                "class": "my-2 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 "
+                "class": "input-text"
-                "dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
             }
         ),
     )

web/mixins.py

@@ -31,23 +31,7 @@ class StylingMixin:
     placeholder_for_field = {}
     styled_fields = []
     classes = {
-        "my-2",
+        "input-text",
-        "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):

web/templates/components/cart/add_to_cart.html

@@ -4,14 +4,9 @@
   <input type="hidden" name="product" value="{{ product.pk }}">
 
   <div class="flex">
-  <input class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600
+  <input class="input-number"
-                focus:border-primary-600 block 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 mr-4"
          id="quantity" aria-label="quantity" type="number" min="1" max="10" name="quantity" value="1">
-  <button class="w-full flex justify-center rounded-lg bg-primary-700 px-5 py-2.5
+  <button class="button-primary"
-                 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4
-                 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800
-                 content-center items-center cursor-pointer"
   >
     {% include 'components/icons/add_cart.svg' %}
     {% translate 'Añadir al carrito' %}

web/templates/components/cart/cart_navbar.html

@@ -62,9 +62,7 @@
 
     {% if cart.items.count > 0 %}
     <a href="{% url 'web:cart_detail' %}"
-       class="mb-2 me-2 inline-flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm
+       class="button-primary"
-              font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300
-              dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
        role="button"> {% translate 'Ver carrito' %}
     </a>
     {% endif %}

web/templates/components/product_card.html

@@ -28,7 +28,7 @@
 <!--        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">(455)</p>-->
 <!--      </div>-->
       <div class="mt-4 flex gap-4">
-        <p class="text-2xl font-extrabold leading-tight text-gray-900 dark:text-white">
+        <p class="txt-2xl">
           {{ product.price.price_with_tax }}€
         </p>
       </div>

web/templates/components/products/list_filters.html

@@ -20,7 +20,7 @@
                 type="text"
                 name="name"
                 id="simple-search"
-                class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 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"
+                class="search-input"
                 placeholder="{% translate 'Buscar' %}"
                 autocomplete="off">
             </div>

web/templates/components/users/retrieve_update_address.html

@@ -18,10 +18,7 @@
                     </label>
                 </dt>
                 <dd class="flex items-center gap-1 text-gray-500 dark:text-gray-400">
-                    <input class="my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg
+                    <input class="input-text"
-                                  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"
                            id="address_full_name" name="full_name" type="text" value="{{ address.full_name }}">
                 </dd>
             </dl>
@@ -32,10 +29,7 @@
                     </label>
                 </dt>
                 <dd class="flex items-center gap-1 text-gray-500 dark:text-gray-400">
-                    <input class="my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg
+                    <input class="input-text"
-                                  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"
                            id="address" name="address" type="text" value="{{ address.address }}">
                 </dd>
             </dl>
@@ -46,10 +40,7 @@
                     </label>
                 </dt>
                 <dd class="text-gray-500 dark:text-gray-400">
-                    <input class="my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg
+                    <input class="input-text"
-                                  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"
                            id="address_zip" name="address_zip" type="text" value="{{ address.address_zip }}">
                 </dd>
             </dl>
@@ -60,10 +51,7 @@
                     </label>
                 </dt>
                 <dd class="text-gray-500 dark:text-gray-400">
-                    <input class="my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg
+                    <input class="input-text"
-                                  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"
                            id="address_phone" name="address_phone" type="text" value="{{ address.address_phone }}">
                 </dd>
             </dl>
@@ -76,10 +64,7 @@
                     </label>
                 </dt>
                 <dd class="text-gray-500 dark:text-gray-400">
-                    <input class="my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg
+                    <input class="input-text"
-                                  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"
                            id="address_town" name="address_town" type="text" value="{{ address.address_town }}">
                 </dd>
             </dl>
@@ -90,10 +75,7 @@
                     </label>
                 </dt>
                 <dd class="text-gray-500 dark:text-gray-400">
-                    <input class="my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg
+                    <input class="input-text"
-                                  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"
                            id="address_state" name="address_state" type="text" value="{{ address.address_state }}">
                 </dd>
             </dl>

web/views/components.py

@@ -65,6 +65,8 @@ class ListWishlistedProducts(
         page = self.get_paginated_queryset(qs)
 
         return {
+            "current_page": page.number,
+            "num_pages": page.paginator.num_pages,
             "page": page,
             "has_next_page": page.has_next(),
             "has_previous_page": page.has_previous(),