From 863a04737c3b5867c337a5a4ab5235702215aa23 Mon Sep 17 00:00:00 2001
From: Pablo Moreno <pablo@kasfactory.net>
Date: Fri, 3 Jan 2025 14:12:32 +0100
Subject: [PATCH] fix: styling

---
 .../components/cart/add_to_cart.html          |  7 ++--
 web/templates/components/generic/navbar.html  | 35 ++++++-------------
 web/templates/components/product_card.html    | 11 +++---
 3 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/web/templates/components/cart/add_to_cart.html b/web/templates/components/cart/add_to_cart.html
index 842797a..e37169f 100644
--- a/web/templates/components/cart/add_to_cart.html
+++ b/web/templates/components/cart/add_to_cart.html
@@ -3,8 +3,11 @@
   {% csrf_token %}
   <input type="hidden" name="product" value="{{ product.pk }}">
   <input id="quantity" type="hidden" name="quantity" value="1">
-  <button
-          class="inline-flex items-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">
+  <button class="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"
+  >
     {% include 'components/icons/add_cart.svg' %}
     {% translate 'Añadir al carrito' %}
   </button>
diff --git a/web/templates/components/generic/navbar.html b/web/templates/components/generic/navbar.html
index 38735ec..9eee69a 100644
--- a/web/templates/components/generic/navbar.html
+++ b/web/templates/components/generic/navbar.html
@@ -23,12 +23,12 @@
             </a>
           </li>
           {% for category in navbar_categories %}
-          <li class="shrink-0">
-            <a href="{% url 'web:category_view' slug=category.slug %}" title=""
-               class="flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500">
-              {{ category.name }}
-            </a>
-          </li>
+            <li class="shrink-0">
+              <a href="{% url 'web:category_view' slug=category.slug %}" title=""
+                 class="flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500">
+                {{ category.name }}
+              </a>
+            </li>
           {% endfor %}
         </ul>
       </div>
@@ -86,26 +86,13 @@
           <a href="{% url 'web:index' %}"
              class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Inicio' %}</a>
         </li>
+
+        {% for category in navbar_categories %}
         <li>
-          <a href="{% url 'web:index' %}"
-             class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Más vendidos' %}</a>
-        </li>
-        <li>
-          <a href="{% url 'web:index' %}"
-             class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Ideas de regalo' %}</a>
-        </li>
-        <li>
-          <a href="{% url 'web:index' %}"
-             class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Juegos' %}</a>
-        </li>
-        <li>
-          <a href="{% url 'web:index' %}"
-             class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Electrónica' %}</a>
-        </li>
-        <li>
-          <a href="{% url 'web:index' %}"
-             class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Ofertas del día' %}</a>
+          <a href="{% url 'web:category_view' slug=category.slug %}"
+             class="hover:text-primary-700 dark:hover:text-primary-500">{{ category.name }}</a>
         </li>
+        {% endfor %}
       </ul>
     </div>
   </div>
diff --git a/web/templates/components/product_card.html b/web/templates/components/product_card.html
index 7de63b2..3878e99 100644
--- a/web/templates/components/product_card.html
+++ b/web/templates/components/product_card.html
@@ -27,12 +27,15 @@
         <p class="text-sm font-medium text-gray-900 dark:text-white">5.0</p>
         <p class="text-sm font-medium text-gray-500 dark:text-gray-400">(455)</p>
       </div>
-      <div class="mt-4 flex items-center justify-between gap-4">
-        <p
-          class="text-2xl font-extrabold leading-tight text-gray-900 dark:text-white">{{ product.price.price_with_tax }}€</p>
-
+      <div class="mt-4 flex gap-4">
+        <p class="text-2xl font-extrabold leading-tight text-gray-900 dark:text-white">
+          {{ product.price.price_with_tax }}€
+        </p>
+      </div>
+      <div class="mt-4">
         {% include 'components/cart/add_to_cart.html' %}
       </div>
+
     </div>
   </div>
 </article>
\ No newline at end of file