From 14bffea27facdb3d07f6868a5571b1104c97d474 Mon Sep 17 00:00:00 2001
From: Pablo Moreno <pablo@kasfactory.net>
Date: Fri, 3 Jan 2025 13:48:42 +0100
Subject: [PATCH] fix: styling

---
 web/templates/components/cart/cart.html | 43 ++++++++++++++++---------
 1 file changed, 27 insertions(+), 16 deletions(-)

diff --git a/web/templates/components/cart/cart.html b/web/templates/components/cart/cart.html
index e016a47..be816b9 100644
--- a/web/templates/components/cart/cart.html
+++ b/web/templates/components/cart/cart.html
@@ -73,10 +73,11 @@
               </p>
             {% endif %}
 
-            <section>
-              <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
-                {% translate 'Dirección de envío' %}
-              </h2>
+            <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
+              {% translate 'Dirección de envío' %}
+            </h2>
+
+            <section class="p-4 rounded-lg border border-gray-200 dark:border-gray-600">
 
               <div class="grid gap-4 sm:grid-cols-2 sm:gap-6 my-2">
                 {% if user.is_anonymous %}
@@ -171,10 +172,11 @@
               </div>
             </section>
 
-            <section>
-              <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
-                {% translate 'Dirección de envío' %}
-              </h2>
+            <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
+              {% translate 'Dirección de facturación' %}
+            </h2>
+
+            <section class="p-4 rounded-lg border border-gray-200 dark:border-gray-600">
 
               <div class="grid gap-4 sm:grid-cols-2 sm:gap-6 my-2">
                 <div class="sm:col-span-2">
@@ -254,17 +256,26 @@
             </section>
 
             <section>
-              <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
+              <h2 class="text-xl mb-4 font-semibold text-gray-900 dark:text-white sm:text-2xl">
                 {% translate 'Opciones de envío' %}
               </h2>
+              <article class="rounded-lg border border-gray-200 dark:border-gray-600">
+
+                {% for shipping_method in shipping_methods %}
+                  <div class="p-4">
+                    <input type="radio" id="shipping_method_{{ shipping_method.pk }}" name="shipping_method"
+                           value="{{ shipping_method.pk }}" {% if forloop.first %}checked{% endif %}>
+                    <label for="shipping_method_{{ shipping_method.pk }}">
+                      {{ shipping_method.name }} - {{ shipping_method.shipping_product.price.price_with_tax }}€
+                    </label>
+                    {% if not forloop.last %}
+                      </div>
+                      <hr/>
+                    {% endif %}
+
+                {% endfor %}
+              </article>
 
-              {% for shipping_method in shipping_methods %}
-                <input type="radio" id="shipping_method_{{ shipping_method.pk }}" name="shipping_method"
-                       value="{{ shipping_method.pk }}">
-                <label for="shipping_method_{{ shipping_method.pk }}">
-                  {{ shipping_method.name }} - {{ shipping_method.shipping_product.price.price_with_tax }}€
-                </label>
-              {% endfor %}
             </section>
           </div>