more hardcodes are done

assets/views/admin/catalog/categories.html

@@ -1,4 +1,5 @@
 {% extends "admin/base.html" %}
+{% import "macros/ui.html" as ui %}
 
 {% block title %}{{ t(key="admin-categories", lang=lang | default(value='sk')) }}{% endblock title %}
 {% block crumb %}{{ t(key="admin-categories", lang=lang | default(value='sk')) }}{% endblock crumb %}
@@ -9,10 +10,7 @@
     <h1 class="text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="admin-categories", lang=lang | default(value='sk')) }}</h1>
     <p class="text-sm text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="admin-categories-desc", lang=lang | default(value='sk')) }}</p>
   </div>
-  <a href="/admin/catalog/categories/new"
-    class="inline-flex items-center justify-center rounded-radius bg-primary px-4 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="new-category", lang=lang | default(value='sk')) }}
-  </a>
+  {{ ui::button_primary(label=t(key="new-category", lang=lang | default(value='sk')), href="/admin/catalog/categories/new") }}
 </div>
 
 <div class="mt-6 overflow-hidden rounded-radius border border-outline dark:border-outline-dark">
@@ -38,9 +36,9 @@
         <td class="px-4 py-3 tabular-nums">{{ row.product_count }}</td>
         <td class="px-4 py-3">
           {% if row.category.published %}
-          <span class="inline-flex rounded-full bg-success/15 px-2 py-0.5 text-xs font-medium text-success">{{ t(key="published", lang=lang | default(value='sk')) }}</span>
+          {{ ui::badge(label=t(key="published", lang=lang | default(value='sk')), variant="success") }}
           {% else %}
-          <span class="inline-flex rounded-full bg-surface-alt px-2 py-0.5 text-xs font-medium text-on-surface/70 dark:bg-surface-dark-alt dark:text-on-surface-dark/70">{{ t(key="draft", lang=lang | default(value='sk')) }}</span>
+          {{ ui::badge(label=t(key="draft", lang=lang | default(value='sk')), variant="neutral") }}
           {% endif %}
         </td>
         <td class="px-4 py-3">
@@ -60,10 +58,7 @@
   {% else %}
   <div class="flex flex-col items-center gap-3 px-4 py-16 text-center">
     <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="admin-no-categories", lang=lang | default(value='sk')) }}</p>
-    <a href="/admin/catalog/categories/new"
-      class="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="new-category", lang=lang | default(value='sk')) }}
-    </a>
+    {{ ui::button_primary(label=t(key="new-category", lang=lang | default(value='sk')), href="/admin/catalog/categories/new") }}
   </div>
   {% endif %}
 </div>

assets/views/admin/catalog/category_form.html

@@ -1,4 +1,5 @@
 {% extends "admin/base.html" %}
+{% import "macros/ui.html" as ui %}
 
 {% block title %}{% if category %}{{ t(key="edit-category", lang=lang | default(value='sk')) }}{% else %}{{ t(key="new-category", lang=lang | default(value='sk')) }}{% endif %}{% endblock title %}
 {% block crumb %}{{ t(key="admin-categories", lang=lang | default(value='sk')) }}{% endblock crumb %}
@@ -8,8 +9,7 @@
   <h1 class="text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">
     {% if category %}{{ t(key="edit-category", lang=lang | default(value='sk')) }}{% else %}{{ t(key="new-category", lang=lang | default(value='sk')) }}{% endif %}
   </h1>
-  <a href="/admin/catalog/categories"
-    class="inline-flex items-center rounded-radius border border-outline px-3 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="cancel", lang=lang | default(value='sk')) }}</a>
+  {{ ui::button_outline(label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/categories") }}
 </div>
 
 <form method="post" enctype="multipart/form-data"
@@ -71,12 +71,8 @@
   </label>
 
   <div class="flex gap-3 pt-2">
-    <button type="submit"
-      class="inline-flex items-center justify-center rounded-radius bg-primary px-4 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="save", lang=lang | default(value='sk')) }}
-    </button>
-    <a href="/admin/catalog/categories"
-      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="cancel", lang=lang | default(value='sk')) }}</a>
+    {{ ui::button_primary(label=t(key="save", lang=lang | default(value='sk')), type="submit") }}
+    {{ ui::button_outline(label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/categories") }}
   </div>
 </form>
 {% endblock content %}

assets/views/admin/catalog/product_form.html

@@ -1,4 +1,5 @@
 {% extends "admin/base.html" %}
+{% import "macros/ui.html" as ui %}
 
 {% block title %}{% if product %}{{ t(key="edit-product", lang=lang | default(value='sk')) }}{% else %}{{ t(key="new-product", lang=lang | default(value='sk')) }}{% endif %}{% endblock title %}
 {% block crumb %}{{ t(key="admin-products", lang=lang | default(value='sk')) }}{% endblock crumb %}
@@ -8,8 +9,7 @@
   <h1 class="text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">
     {% if product %}{{ t(key="edit-product", lang=lang | default(value='sk')) }}{% else %}{{ t(key="new-product", lang=lang | default(value='sk')) }}{% endif %}
   </h1>
-  <a href="/admin/catalog/products"
-    class="inline-flex items-center rounded-radius border border-outline px-3 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="cancel", lang=lang | default(value='sk')) }}</a>
+  {{ ui::button_outline(label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/products") }}
 </div>
 
 <form method="post" enctype="multipart/form-data"
@@ -89,12 +89,8 @@
   </label>
 
   <div class="flex gap-3 pt-2">
-    <button type="submit"
-      class="inline-flex items-center justify-center rounded-radius bg-primary px-4 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="save", lang=lang | default(value='sk')) }}
-    </button>
-    <a href="/admin/catalog/products"
-      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="cancel", lang=lang | default(value='sk')) }}</a>
+    {{ ui::button_primary(label=t(key="save", lang=lang | default(value='sk')), type="submit") }}
+    {{ ui::button_outline(label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/products") }}
   </div>
 </form>
 {% endblock content %}

assets/views/admin/catalog/products.html

@@ -1,4 +1,5 @@
 {% extends "admin/base.html" %}
+{% import "macros/ui.html" as ui %}
 
 {% block title %}{{ t(key="admin-products", lang=lang | default(value='sk')) }}{% endblock title %}
 {% block crumb %}{{ t(key="admin-products", lang=lang | default(value='sk')) }}{% endblock crumb %}
@@ -9,10 +10,7 @@
     <h1 class="text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="admin-products", lang=lang | default(value='sk')) }}</h1>
     <p class="text-sm text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="admin-products-desc", lang=lang | default(value='sk')) }}</p>
   </div>
-  <a href="/admin/catalog/products/new"
-    class="inline-flex items-center justify-center rounded-radius bg-primary px-4 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="new-product", lang=lang | default(value='sk')) }}
-  </a>
+  {{ ui::button_primary(label=t(key="new-product", lang=lang | default(value='sk')), href="/admin/catalog/products/new") }}
 </div>
 
 <div class="mt-6 overflow-hidden rounded-radius border border-outline dark:border-outline-dark">
@@ -47,9 +45,9 @@
         <td class="px-4 py-3 tabular-nums">{{ product.stock }}</td>
         <td class="px-4 py-3">
           {% if product.published %}
-          <span class="inline-flex rounded-full bg-success/15 px-2 py-0.5 text-xs font-medium text-success">{{ t(key="published", lang=lang | default(value='sk')) }}</span>
+          {{ ui::badge(label=t(key="published", lang=lang | default(value='sk')), variant="success") }}
           {% else %}
-          <span class="inline-flex rounded-full bg-surface-alt px-2 py-0.5 text-xs font-medium text-on-surface/70 dark:bg-surface-dark-alt dark:text-on-surface-dark/70">{{ t(key="draft", lang=lang | default(value='sk')) }}</span>
+          {{ ui::badge(label=t(key="draft", lang=lang | default(value='sk')), variant="neutral") }}
           {% endif %}
         </td>
         <td class="px-4 py-3">
@@ -71,10 +69,7 @@
   {% else %}
   <div class="flex flex-col items-center gap-3 px-4 py-16 text-center">
     <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="admin-no-products", lang=lang | default(value='sk')) }}</p>
-    <a href="/admin/catalog/products/new"
-      class="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="new-product", lang=lang | default(value='sk')) }}
-    </a>
+    {{ ui::button_primary(label=t(key="new-product", lang=lang | default(value='sk')), href="/admin/catalog/products/new") }}
   </div>
   {% endif %}
 </div>