IBX-10473: Refactor custom URL form styles and templates to match the design and improve maintainability and consistency. (#1707)

Author: RopRaptor

src/bundle/Resources/public/scss/_custom-url-form.scss

@@ -17,6 +17,7 @@
     &__info-text {
         font-size: $ibexa-text-font-size-small;
         color: $ibexa-color-dark-400;
+        margin-top: calculateRem(6px);
 
         &--checked {
             display: none;
@@ -31,6 +32,11 @@
                 display: none;
             }
         }
+
+        .ibexa-icon {
+            fill: currentColor;
+            margin-top: calculateRem(-3px);
+        }
     }
 
     &__helper-text {

src/bundle/Resources/views/themes/admin/content/tab/url/modal_add_custom_url.html.twig

@@ -13,6 +13,17 @@
         {{ form_start(form, {'action': path('ibexa.custom_url.add')}) }}
     {% endblock %}
     {% block body_content %}
+        {% macro info_text(message, modifier = '') %}
+            <div class="ibexa-custom-url-from__info-text{{ modifier ? ' ibexa-custom-url-from__info-text--' ~ modifier : '' }}">
+                <svg class="ibexa-icon ibexa-icon--small">
+                    <use xlink:href="{{ ibexa_icon_path('system-information') }}"></use>
+                </svg>
+                {{ message }}
+            </div>
+        {% endmacro %}
+
+        {% import _self as component %}
+
         <div class="ibexa-custom-url-from">
             <div class="ibexa-custom-url-from__item">
                 <label class="ibexa-label required">{{ 'tab.urls.add.path'|trans|desc('URL') }}</label>
@@ -25,29 +36,26 @@
             <div class="ibexa-custom-url-from__item">
                 <label class="ibexa-label">{{ 'tab.urls.add.redirect'|trans|desc('Redirect to alias destination') }}</label>
                 {{ form_widget(form.redirect) }}
-                <div class="ibexa-custom-url-from__info-text ibexa-custom-url-from__info-text--checked">{{ 'tab.urls.add.redirect.helper.checked'|trans|desc('The alias will redirect to the destination using an HTTP 301 response.') }}</div>
-                <div class="ibexa-custom-url-from__info-text ibexa-custom-url-from__info-text--unchecked">{{ 'tab.urls.add.redirect.helper.unchecked'|trans|desc('The alias will not redirect to the destination and the URL will stay the same.') }}</div>
+                {{ component.info_text('tab.urls.add.redirect.helper.checked'|trans|desc('The alias will redirect to the destination using an HTTP 301 response.'), 'checked') }}
+                {{ component.info_text('tab.urls.add.redirect.helper.unchecked'|trans|desc('The alias will not redirect to the destination and the URL will stay the same.'), 'unchecked') }}
             </div>
             <div class="ibexa-custom-url-from__item">
                 <label class="ibexa-label">{{ 'tab.urls.add.site_root'|trans|desc('Place at the site root') }}</label>
                 {{ form_widget(form.site_root) }}
-                <div class="ibexa-custom-url-from__info-text ibexa-custom-url-from__info-text--checked">{{ 'tab.urls.add.site_root.helper.checked'|trans|desc('The alias will be placed at the site root.') }}</div>
-                <div class="ibexa-custom-url-from__info-text ibexa-custom-url-from__info-text--unchecked">
-                    {% if parent_name is not null %}
-                        {{ 'tab.urls.add.site_root.helper.unchecked'|trans({'%parent_name%': parent_name})|desc('The alias will be placed under %parent_name%') }}
-                    {% else %}
-                        {{ 'tab.urls.add.site_root.helper.no_parent_name'|trans|desc('The alias will be placed under the parent of this Location') }}
-                    {% endif %}
-                </div>
+                {{ component.info_text('tab.urls.add.site_root.helper.checked'|trans|desc('The alias will be placed at the site root.'), 'checked') }}
+                {{ component.info_text(
+                    parent_name is not null
+                    ? 'tab.urls.add.site_root.helper.unchecked'|trans({'%parent_name%': parent_name})|desc('The alias will be placed under %parent_name%')
+                    : 'tab.urls.add.site_root.helper.no_parent_name'|trans|desc('The alias will be placed under the parent of this Location'),
+                    'unchecked'
+                ) }}
             </div>
             <div class="ibexa-custom-url-from__item ibexa-custom-url-from__item--siteacces">
                 <label class="ibexa-label">{{ 'tab.urls.add.site_access'|trans|desc('SiteAccess') }}</label>
                 {{ form_widget(form.site_access) }}
-                <div class="ibexa-custom-url-from__info-text">
-                    {{ 'tab.urls.add.root_location_id.helper_secondary'|trans|desc(
-                        "If no SiteAccess selected, the alias will be placed at main root Location."
-                    ) }}
-                </div>
+                {{ component.info_text('tab.urls.add.root_location_id.helper_secondary'|trans|desc(
+                    "If no SiteAccess selected, the alias will be placed at main root Location."
+                )) }}
             </div>
         </div>
     {% endblock %}