General UI improvements #2 (Sylius#17576)

<img width="1378" alt="image"
src="https://github.com/user-attachments/assets/46f3444e-6daf-42c8-b29d-511384e9b5fe"
/>
<img width="1387" alt="image"
src="https://github.com/user-attachments/assets/983b9145-53b5-4b35-8c8c-276baabc96a0"
/>
<img width="1404" alt="image"
src="https://github.com/user-attachments/assets/a608cf72-4c1d-4fe3-9ad7-4133207196de"
/>
<img width="1397" alt="image"
src="https://github.com/user-attachments/assets/088195ad-63ac-4cf3-9d3f-93bbc45025d9"
/>
<img width="236" alt="image"
src="https://github.com/user-attachments/assets/1c88b15b-0875-47a2-a358-05b71e03baee"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
	- Enhanced visual styling for dropdown items in the sidebar navigation.
- Improved layout for translation forms with a new three-column display.

- **Bug Fixes**
	- Adjusted the active state styling for dropdown items in the menu.

- **Style**
- Modified margin and layout properties across various templates to
improve visual spacing and organization.
	- Updated icon rendering in dropdown menus for consistent styling.
- Adjusted styling for product taxon selection interface and card
components.

- **Documentation**
	- No changes made.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -31,9 +31,10 @@
                 padding-top: 0.3rem;
                 padding-bottom: 0.3rem;
                 background: transparent;
+                color: $gray-500;
 
                 &.active {
-                    color: var(--tblr-white);
+                    color: $primary;
                 }
 
                 &:active {

src/Sylius/Bundle/AdminBundle/templates/product/form/sections/taxonomy/product_taxons.html.twig

@@ -2,10 +2,10 @@
 
 <div {{ sylius_test_html_attribute('product-taxons') }}>
     {{ form_label(product_taxons_form) }}
-    <div class="card"{{ stimulus_controller('product-taxon-tree', {treeData: this.tree, autoOpen: hookableMetadata.configuration.auto_open}) }}>
+    <div {{ stimulus_controller('product-taxon-tree', {treeData: this.tree, autoOpen: hookableMetadata.configuration.auto_open}) }}>
         {{ form_widget(product_taxons_form, {attr: {'data-product-taxon-tree-target': 'productTaxons'}}) }}
 
-        <div class="p-3 pb-5">
+        <div class="pb-5">
             <div class="d-flex align-items-center mb-4">
                 <div class="input-group input-group-flat">
                     <input class="form-control" placeholder="{{ 'sylius.ui.filter'|trans }}" type="text"

src/Sylius/Bundle/AdminBundle/templates/product_attribute/form/configuration.html.twig

@@ -2,7 +2,7 @@
 
 {% if form.configuration is defined %}
     {% set attribute_type = form.vars.value.type %}
-    <div class="card g-col-12 g-col-xl-12" {{ sylius_test_html_attribute('configuration') }}>
+    <div class="card g-col-12" {{ sylius_test_html_attribute('configuration') }}>
         <div class="card-header">
             <div class="card-title">
                 {{ 'sylius.ui.configuration'|trans }}

src/Sylius/Bundle/AdminBundle/templates/product_attribute/form/general.html.twig

@@ -1,4 +1,4 @@
-<div class="card g-col-12 g-col-xl-6">
+<div class="card g-col-12">
     <div class="card-header">
         <div class="card-title">
             {{ 'sylius.ui.general'|trans }}

src/Sylius/Bundle/AdminBundle/templates/product_attribute/form/translations.html.twig

@@ -3,7 +3,7 @@
 {% set form = hookable_metadata.context.form %}
 {% set prefixes = hookable_metadata.prefixes %}
 
-<div class="card g-col-12 g-col-xl-6">
+<div class="card g-col-12">
     <div class="card-header">
         <div class="card-title">
             {{ 'sylius.ui.translations'|trans }}

src/Sylius/Bundle/AdminBundle/templates/product_option/form/sections/values/value.html.twig

@@ -1,4 +1,4 @@
-<div class="col-12 col-md-6" {{ sylius_test_html_attribute('option-value', hookable_metadata.context.value_form.code.vars.value) }}>
+<div class="col-12" {{ sylius_test_html_attribute('option-value', hookable_metadata.context.value_form.code.vars.value) }}>
     <div class="card mb-3">
         <div class="card-body">
             {% hook 'value' with { form: hookable_metadata.context.value_form } %}

src/Sylius/Bundle/AdminBundle/templates/product_option/form/sections/values/value/translations.html.twig

@@ -1,36 +1,38 @@
-{% for translation_form_key, translation_form in hookable_metadata.context.value_form.translations %}
-    <div class="row mb-2" {{ sylius_test_html_attribute('option-value-locale', translation_form_key) }}>
-        <div class="col-12">
-            {% if translation_form.vars.name is not null %}
-                <div class="d-flex">
-                    <div class="me-3 mt-1">{{ form_label(translation_form, translation_form.vars.name|sylius_locale_name) }}</div>
-                </div>
-            {% else %}
-                <div class="d-flex">
-                    <div class="me-3 mt-1">
-                        <span class="col-form-label">{{ 'sylius.ui.global'|trans }}</span>
+<div class="row mb-3">
+    {% for translation_form_key, translation_form in hookable_metadata.context.value_form.translations %}
+        <div class="col-3" {{ sylius_test_html_attribute('option-value-locale', translation_form_key) }}>
+            <div>
+                {% if translation_form.vars.name is not null %}
+                    <div class="d-flex">
+                        <div class="me-3 mt-1">{{ form_label(translation_form, translation_form.vars.name|sylius_locale_name) }}</div>
+                    </div>
+                {% else %}
+                    <div class="d-flex">
+                        <div class="me-3 mt-1">
+                            <span class="col-form-label">{{ 'sylius.ui.global'|trans }}</span>
+                        </div>
                     </div>
+                {% endif %}
+            </div>
+            <div>
+                <div class="input-group">
+                    {{ form_widget(translation_form.value) }}
+                    <button
+                        type="button"
+                        class="btn btn-icon"
+                        data-bs-toggle="tooltip"
+                        data-bs-title="{{ 'sylius.ui.apply_to_all'|trans }}"
+                        data-action="live#action:prevent"
+                        data-live-action-param="applyToAll"
+                        data-live-value-key-param="{{ hookable_metadata.context.value_form_key }}"
+                        data-live-translation-key-param="{{ translation_form_key }}"
+                        {{ sylius_test_html_attribute('apply-to-all') }}
+                    >
+                        {{ ux_icon('tabler:copy-plus') }}
+                    </button>
+                    {{ form_errors(translation_form.value) }}
                 </div>
-            {% endif %}
-        </div>
-        <div class="col-12">
-            <div class="input-group">
-                {{ form_widget(translation_form.value) }}
-                <button
-                    type="button"
-                    class="btn btn-icon"
-                    data-bs-toggle="tooltip"
-                    data-bs-title="{{ 'sylius.ui.apply_to_all'|trans }}"
-                    data-action="live#action:prevent"
-                    data-live-action-param="applyToAll"
-                    data-live-value-key-param="{{ hookable_metadata.context.value_form_key }}"
-                    data-live-translation-key-param="{{ translation_form_key }}"
-                    {{ sylius_test_html_attribute('apply-to-all') }}
-                >
-                    {{ ux_icon('tabler:copy-plus') }}
-                </button>
-                {{ form_errors(translation_form.value) }}
             </div>
         </div>
-    </div>
-{% endfor %}
+    {% endfor %}
+</div>

src/Sylius/Bundle/AdminBundle/templates/product_variant/form/content/update/header/actions/price_history.html.twig

@@ -19,7 +19,7 @@
                         class="dropdown-item{% if url is not defined %} disabled{% endif %}"
                         href="{{ url }}"
                     >
-                        {{ ux_icon(action.icon|default('tabler:eye')) }}
+                        {{ ux_icon(action.icon|default('tabler:eye'), {'class': 'icon dropdown-item-icon'}) }}
                         <span>
                             <span class="text-nowrap">{{ channel_pricing.channelCode|sylius_channel_name }}</span>
                         </span>

src/Sylius/Bundle/AdminBundle/templates/product_variant/form/sections/general.html.twig

@@ -8,32 +8,28 @@
             </h2>
         </div>
         <div class="card-body">
-            <div class="mb-3">
+            <div class="mb-4">
                 {{ form_row(form.code) }}
                 {{ form_row(form.enabled) }}
             </div>
-            <div class="mb-3">
+            <div class="mb-4">
                 {{ form_row(form.shippingCategory) }}
                 {{ form_row(form.shippingRequired) }}
             </div>
             {% if form.optionValues is defined and form.optionValues|length > 0 %}
-                <div class="mb-3">
+                <div class="mb-4">
                     <h4>{{ 'sylius.ui.options'|trans }}</h4>
                     {% for option_form in form.optionValues %}
                         {{ form_row(option_form) }}
                     {% endfor %}
                 </div>
             {% endif %}
-            <div class="card mb-3">
-                <div class="card-body">
-                    <div class="mb-3">
-                        <h4 class="ui dividing header">{{ 'sylius.ui.properties'|trans }}</h4>
-                        {{ form_row(form.height) }}
-                        {{ form_row(form.width) }}
-                        {{ form_row(form.depth) }}
-                        {{ form_row(form.weight) }}
-                    </div>
-                </div>
+            <div class="mb-4">
+                <h4 class="ui dividing header">{{ 'sylius.ui.properties'|trans }}</h4>
+                {{ form_row(form.height) }}
+                {{ form_row(form.width) }}
+                {{ form_row(form.depth) }}
+                {{ form_row(form.weight) }}
             </div>
         </div>
     </div>

src/Sylius/Bundle/AdminBundle/templates/shared/crud/common/sidebar/menu/menu.html.twig

@@ -89,9 +89,7 @@
         {%- set attributes = attributes|merge({'class': classes|join(' ')}) %}
     {%- endif %}
 
-    {% set is_active = matcher.isCurrent(item) %}
-
-    <a class="dropdown-item {{ is_active ? '' : 'text-muted' }} {% if attributes.class is defined %}{{ attributes.class }}{% endif %}" href="{{ item.uri }}" target="{{ target }}">
+    <a class="dropdown-item {% if attributes.class is defined %}{{ attributes.class }}{% endif %}" href="{{ item.uri }}" target="{{ target }}">
         {{ item.label|trans }}{% if target == '_blank' %}{{ ux_icon('tabler:external-link', {'class': 'icon icon-sm ms-1 mb-2 opacity-75'}) }}{% endif %}
     </a>
 {% endblock %}

src/Sylius/Bundle/AdminBundle/templates/shared/helper/table.html.twig

@@ -30,11 +30,7 @@
         {% endif %}
         {% for field in definition.enabledFields|sylius_sort_by('position') %}
             <td{% if field.options.vars.td_class is defined %} class="{{ field.options.vars.td_class }}"{% endif %}>
-                {% if field.name == 'code' %}
-                    <code>{{ sylius_grid_render_field(grid, field, row) }}</code>
-                {% else %}
-                    {{ sylius_grid_render_field(grid, field, row) }}
-                {% endif %}
+                {{ sylius_grid_render_field(grid, field, row) }}
             </td>
         {% endfor %}
         {% if definition.actionGroups.item is defined and definition.getEnabledActions('item')|length > 0 %}