Improve table header (#16161)

<img width="1306" alt="Screenshot 2024-04-22 at 15 24 41"
src="https://github.com/Sylius/Sylius/assets/15385420/2e1f468e-d57d-4860-b7e3-83502a92e71c">

src/Sylius/Bundle/AdminBundle/Resources/assets/styles/_body.scss

@@ -30,6 +30,10 @@ a {
     text-underline-offset: 0.25em;
 }
 
+a.link-reset {
+    text-decoration: none;
+}
+
 .btn-collapse {
     &.collapsed {
         .icon-chevron-right {

src/Sylius/Bundle/AdminBundle/Resources/views/Shared/Helper/sorting.html.twig

@@ -0,0 +1,38 @@
+{% macro tableHeader(grid, field, attributes) %}
+    {% from _self import link %}
+    {% set order = grid.getSortingOrder(field.name) %}
+
+    {% if grid.isSortedBy(field.name) %}
+        <th class="sortable sorted {{ order == 'desc' ? 'descending' : 'ascending' }} sylius-table-column-{{ field.name }}">
+            <a class="link-reset" href="{{ link(field.name, attributes, (order == 'desc' ? 'asc' : 'desc'), grid.parameters.all) }}">
+                {{ field.label|trans }}
+                {% if order == 'desc' %}
+                    <svg style="transform: translateY(-1px)" xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
+                    </svg>
+                {% endif %}
+                {% if order == 'asc' %}
+                    <svg style="transform: translateY(-1px)" xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"/>
+                    </svg>
+                {% endif %}
+            </a>
+        </th>
+    {% else %}
+        <th class="sortable sylius-table-column-{{ field.name }}">
+            <a class="link-reset" href="{{ link(field.name, attributes, order, grid.parameters.all) }}">
+                {{ field.label|trans }}
+                <svg style="opacity: 0.7; transform: translateY(-1px)" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-chevron-expand" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708m0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708"/>
+                </svg>
+            </a>
+        </th>
+    {% endif %}
+{% endmacro %}
+
+{% macro link(fieldName, attributes, order, parameters) %}
+    {% set params = attributes.all('_route_params')|merge(parameters) %}
+    {% set sorting = {'sorting': {(fieldName): (order)}} %}
+
+    {{ path(attributes.get('_route'), params|merge(sorting)|merge({'page': 1})) }}
+{% endmacro %}

src/Sylius/Bundle/AdminBundle/Resources/views/Shared/Helper/table.html.twig

@@ -1,5 +1,5 @@
 {% macro headers(grid, definition, requestAttributes) %}
-    {% import '@SyliusUi/Macro/sorting.html.twig' as sorting %}
+    {% import '@SyliusAdmin/Shared/Helper/sorting.html.twig' as sorting %}
 
     {% if definition.actionGroups.bulk is defined and definition.getEnabledActions('bulk')|length > 0 %}
         <th class="center aligned">
@@ -12,12 +12,12 @@
             {% if field.isSortable %}
                 {{ sorting.tableHeader(grid, field, requestAttributes) }}
             {% else %}
-                <th class="sylius-table-column-{{ field.name }}">{{ field.label|trans }}</th>
+                <th class="text-body sylius-table-column-{{ field.name }}">{{ field.label|trans }}</th>
             {% endif %}
         {% endif %}
     {% endfor %}
     {% if definition.actionGroups.item is defined and definition.getEnabledActions('item')|length > 0 %}
-        <th class="sylius-table-column-actions">{{ 'sylius.ui.actions'|trans }}</th>
+        <th class="text-body text-center sylius-table-column-actions">{{ 'sylius.ui.actions'|trans }}</th>
     {% endif %}
 {% endmacro %}