From 0f2f102dcadf4016dbdc35648878dc4f6ae82ff6 Mon Sep 17 00:00:00 2001
From: Pablo Moreno <pablomoreno.inf@gmail.com>
Date: Thu, 16 Jan 2025 00:39:11 +0100
Subject: [PATCH] fix: styling

---
 .../components/cart/cart_navbar.html          | 98 +++++++++----------
 web/templates/users/user_details.html         |  4 +-
 2 files changed, 48 insertions(+), 54 deletions(-)

diff --git a/web/templates/components/cart/cart_navbar.html b/web/templates/components/cart/cart_navbar.html
index bb44bd8..1622126 100644
--- a/web/templates/components/cart/cart_navbar.html
+++ b/web/templates/components/cart/cart_navbar.html
@@ -1,81 +1,75 @@
 {% load i18n %}
 <button
-  hx-on:click="htmx.toggleClass(htmx.find('#myCartDropdown1'), 'hidden'); htmx.addClass(htmx.find('#userDropdown1'), 'hidden')"
-  id="myCartDropdownButton1"
-  data-dropdown-toggle="myCartDropdown1" type="button"
-  class="inline-flex items-center rounded-lg justify-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white">
-  {% include 'components/icons/cart.svg' %}
-  <span class="hidden sm:flex">
+        hx-on:click="htmx.toggleClass(htmx.find('#myCartDropdown1'), 'hidden'); htmx.addClass(htmx.find('#userDropdown1'), 'hidden')"
+        id="myCartDropdownButton1"
+        data-dropdown-toggle="myCartDropdown1" type="button"
+        class="inline-flex items-center rounded-lg justify-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white">
+    {% include 'components/icons/cart.svg' %}
+    <span class="hidden sm:flex">
     {% blocktranslate %}
       Carrito
     {% endblocktranslate %}</span>
-  <span class="ml-1">({{ cart.items.count }})</span>
+    <span class="ml-1">({{ cart.items.count }})</span>
 </button>
 
 <!-- Cart -->
 <div id="myCartDropdown1"
      class="absolute top-10 z-10 mx-auto max-w-sm space-y-4 overflow-hidden rounded-lg bg-white p-4 antialiased shadow-lg dark:bg-gray-800 hidden"
 >
-  <div>
-    {% if cart.items.count == 0 %}
-      <h2 class="text-sm font-medium text-gray-900 dark:text-white">No hay nada en el carrito</h2>
-    {% endif %}
+    <div>
+        {% if cart.items.count == 0 %}
+        <h2 class="text-sm font-medium text-gray-900 dark:text-white">No hay nada en el carrito</h2>
+        {% endif %}
 
-    {% for cart_item in cart.items.all %}
-      <div>
-        <a href="{% url 'web:product_detail' pk=cart_item.product.pk slug=cart_item.product.slug %}"
-           class="truncate text-sm font-semibold leading-none text-gray-900 dark:text-white hover:underline">
-          {{ cart_item.product.name }}
-        </a>
+        {% for cart_item in cart.items.all %}
+        <div>
+            <a href="{% url 'web:product_detail' pk=cart_item.product.pk slug=cart_item.product.slug %}"
+               class="truncate text-sm font-semibold leading-none text-gray-900 dark:text-white hover:underline">
+                {{ cart_item.product.name }}
+            </a>
 
-        <div class="flex items-center justify-between gap-6">
-          <p
-            class="mt-0.5 truncate text-sm font-normal text-gray-500 dark:text-gray-400">
-            {{ cart_item.product.price.price_with_tax }}€
-          </p>
+            <div class="flex items-center justify-between gap-6">
+                <p
+                        class="mt-0.5 truncate text-sm font-normal text-gray-500 dark:text-gray-400">
+                    {{ cart_item.product.price.price_with_tax }}€
+                </p>
 
-          <form hx-post="{% url 'web:delete_cart_item' pk=cart_item.pk %}"
-                hx-swap="none">
+                <form hx-post="{% url 'web:delete_cart_item' pk=cart_item.pk %}"
+                      hx-swap="none">
             <span class="mt-0.5 truncate text-sm font-normal text-gray-500 dark:text-gray-400 mr-2">
               {% translate 'Cantidad' %}: {{ cart_item.quantity }}
 
             </span>
-            <button data-tooltip-target="tooltipRemoveItem1a" type="submit"
-                    class="text-red-600 hover:text-red-700 dark:text-red-500 dark:hover:text-red-600"
-            >
-              {% csrf_token %}
-              <span class="sr-only">{% translate 'Quitar' %}</span>
-              {% include 'components/icons/remove.svg' %}
-            </button>
-          </form>
+                    <button data-tooltip-target="tooltipRemoveItem1a" type="submit"
+                            class="text-red-600 hover:text-red-700 dark:text-red-500 dark:hover:text-red-600"
+                    >
+                        {% csrf_token %}
+                        <span class="sr-only">{% translate 'Quitar' %}</span>
+                        {% include 'components/icons/remove.svg' %}
+                    </button>
+                </form>
 
-          <div id="tooltipRemoveItem1a" role="tooltip"
-               class="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium
+                <div id="tooltipRemoveItem1a" role="tooltip"
+                     class="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium
                       text-white opacity-0 shadow-sm transition-opacity duration-300 dark:bg-gray-700"
-          >
-            {% translate 'Quitar del carrito' %}
-            <div class="tooltip-arrow" data-popper-arrow></div>
-          </div>
+                >
+                    {% translate 'Quitar del carrito' %}
+                    <div class="tooltip-arrow" data-popper-arrow></div>
+                </div>
+            </div>
         </div>
-      </div>
 
 
-    {% endfor %}
-  </div>
+        {% endfor %}
+    </div>
 
-  {% if cart.items.count > 0 %}
+    {% 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-gray-200 px-5 py-2.5 text-sm
-              font-medium dark:text-white hover:bg-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-300
-              dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800"
+       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
+              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>
-    <a href="#" title=""
-       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
-     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 'Comprar' %}
-    </a>
-  {% endif %}
+    {% endif %}
 
 </div>
\ No newline at end of file
diff --git a/web/templates/users/user_details.html b/web/templates/users/user_details.html
index 946f8fc..2f9c35a 100644
--- a/web/templates/users/user_details.html
+++ b/web/templates/users/user_details.html
@@ -17,7 +17,7 @@
         </div>
       </div>
 
-      <div class="mt-2 p-6 border border-gray-100 rounded-md dark:border-gray-600">
+      <div class="mt-4 p-6 border border-gray-100 rounded-md dark:border-gray-600">
         <div class="flex space-x-4">
           <div>
             <h3 class="flex items-center text-xl font-bold leading-none text-gray-900 dark:text-white sm:text-2xl">
@@ -29,7 +29,7 @@
         <hr class="h-px my-2 bg-gray-200 border-0 dark:bg-gray-700">
 
         {% if customer_addresses.count == 0 %}
-          <span>No hay ninguna dirección</span>
+          <span class="text-gray-500 dark:text-gray-400">{% translate 'No hay ninguna dirección' %}</span>
         {% endif %}
 
         {% for address in customer_addresses %}