more hardcodes are done

assets/views/shop/_cart_body.html

@@ -1,6 +1,7 @@
 {# Cart contents, swapped in via htmx on quantity change / removal so the page
    never does a full reload. Rendered inside <div id="cart-body"> in cart.html
    and returned on its own by /cart/update and /cart/remove. #}
+{% import "macros/ui.html" as ui %}
 {% if items | length > 0 %}
 <div class="overflow-hidden rounded-radius border border-outline dark:border-outline-dark">
   <table class="w-full text-left text-sm">
@@ -60,12 +61,12 @@
 </div>
 
 <div class="mt-6 flex flex-wrap justify-between gap-3">
-  <a href="/shop" class="inline-flex items-center rounded-radius border border-outline px-4 py-2 text-sm font-medium text-on-surface transition hover:bg-surface-alt dark:border-outline-dark dark:text-on-surface-dark dark:hover:bg-surface-dark-alt">{{ t(key="cart-continue", lang=lang | default(value='sk')) }}</a>
-  <a href="/checkout" class="inline-flex items-center justify-center rounded-radius bg-primary px-5 py-2 text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 dark:bg-primary-dark dark:text-on-primary-dark">{{ t(key="cart-checkout", lang=lang | default(value='sk')) }}</a>
+  {{ ui::button_outline(label=t(key="cart-continue", lang=lang | default(value='sk')), href="/shop") }}
+  {{ ui::button_primary(label=t(key="cart-checkout", lang=lang | default(value='sk')), href="/checkout") }}
 </div>
 {% else %}
 <div class="rounded-radius border border-outline px-6 py-16 text-center dark:border-outline-dark">
   <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="cart-empty", lang=lang | default(value='sk')) }}</p>
-  <a href="/shop" class="mt-4 inline-flex items-center justify-center rounded-radius bg-primary px-4 py-2 text-sm font-medium text-on-primary transition hover:opacity-75 dark:bg-primary-dark dark:text-on-primary-dark">{{ t(key="cart-continue", lang=lang | default(value='sk')) }}</a>
+  {{ ui::button_primary(label=t(key="cart-continue", lang=lang | default(value='sk')), href="/shop", extra="mt-4") }}
 </div>
 {% endif %}

assets/views/shop/cart.html

@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% import "macros/ui.html" as ui %}
 
 {% block title %}{{ t(key="cart-title", lang=lang | default(value='sk')) }}{% endblock title %}
 

assets/views/shop/checkout.html

@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% import "macros/ui.html" as ui %}
 
 {% block title %}{{ t(key="checkout-title", lang=lang | default(value='sk')) }}{% endblock title %}
 
@@ -211,10 +212,7 @@
       <span>{{ t(key="cart-total", lang=lang | default(value='sk')) }}</span>
       <span class="tabular-nums text-primary dark:text-primary-dark" x-text="fmt(subtotal + carrierPrice) + ' {{ currency }}'"></span>
     </div>
-    <button type="submit" :disabled="!canSubmit"
-      class="inline-flex w-full items-center justify-center rounded-radius bg-primary px-6 py-2.5 text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 disabled:cursor-not-allowed disabled:opacity-40 dark:bg-primary-dark dark:text-on-primary-dark">
-      {{ t(key="checkout-place-order", lang=lang | default(value='sk')) }}
-    </button>
+    {{ ui::button_primary(label=t(key="checkout-place-order", lang=lang | default(value='sk')), type="submit", attrs=':disabled="!canSubmit"', extra="w-full disabled:opacity-40") }}
   </aside>
 </form>
 {% endblock content %}

assets/views/shop/order_confirmed.html

@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% import "macros/ui.html" as ui %}
 
 {% block title %}{{ t(key="order-confirmed-title", lang=lang | default(value='sk')) }}{% endblock title %}
 
@@ -55,7 +56,7 @@
   {% endif %}
 
   <div class="text-center">
-    <a href="/shop" class="inline-flex items-center justify-center rounded-radius border border-outline px-5 py-2 text-sm font-medium text-on-surface transition hover:bg-surface-alt dark:border-outline-dark dark:text-on-surface-dark dark:hover:bg-surface-dark-alt">{{ t(key="cart-continue", lang=lang | default(value='sk')) }}</a>
+    {{ ui::button_outline(label=t(key="cart-continue", lang=lang | default(value='sk')), href="/shop") }}
   </div>
 </div>
 {% endblock content %}

assets/views/shop/show.html

@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% import "macros/ui.html" as ui %}
 
 {% block title %}{{ product.name }}{% endblock title %}
 
@@ -47,10 +48,7 @@
         <input id="quantity" name="quantity" type="number" min="1" max="{{ product.stock }}" value="1"
           class="w-24 rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
       </div>
-      <button type="submit"
-        class="inline-flex items-center justify-center rounded-radius bg-primary px-5 py-2 text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 dark:bg-primary-dark dark:text-on-primary-dark">
-        {{ t(key="add-to-cart", lang=lang | default(value='sk')) }}
-      </button>
+      {{ ui::button_primary(label=t(key="add-to-cart", lang=lang | default(value='sk')), type="submit") }}
     </form>
     <p class="text-sm text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="in-stock", lang=lang | default(value='sk')) }}: {{ product.stock }}</p>
     {% else %}