feat: improved UI

web/templates/components/cart/add_to_cart.html

@@ -4,9 +4,9 @@
   <input type="hidden" name="product" value="{{ product.pk }}">
 
   {% if product.has_variants %}
-    <div class="mb-4">
-      <label for="variant">{% translate 'Variante' %}</label>
-      <select class="input" id="variant" name="variant">
+    <div class="mb-3">
+      <label for="variant" class="sr-only">{% translate 'Variante' %}</label>
+      <select class="select select-bordered {% if size == 'sm' %}select-sm{% endif %} w-full" id="variant" name="variant">
         {% for variant in product.variants.all %}
           <option value="{{ variant.pk }}" {% if not variant.stock %}disabled{% endif %}>
             {% for attribute_value in variant.attribute_values.all %}{{ attribute_value }}{% if not forloop.last %}, {% endif %}{% endfor %}
@@ -17,12 +17,11 @@
     </div>
   {% endif %}
 
-  <div class="flex items-center">
-  <input class="input mr-4" id="quantity" aria-label="quantity" type="number" min="1" max="10" name="quantity" value="1">
-  <button class="btn btn-primary">
-    {% include 'components/icons/add_cart.svg' %}
-    {% translate 'Añadir al carrito' %}
-  </button>
+  <div class="flex items-center gap-2">
+    <input class="input input-bordered {% if size == 'sm' %}input-sm w-16{% else %}w-20{% endif %} text-center" id="quantity" aria-label="{% translate 'Cantidad' %}" type="number" min="1" max="10" name="quantity" value="1">
+    <button class="btn btn-primary {% if size == 'sm' %}btn-sm{% endif %} flex-1">
+      {% include 'components/icons/add_cart.svg' %}
+      {% if size == 'sm' %}{% translate 'Añadir' %}{% else %}{% translate 'Añadir al carrito' %}{% endif %}
+    </button>
   </div>
-
 </form>