[TASK] Use callout component for slug hints

The hint when changing a slug previously was a
combination of utility classes and with color changes
in a recent Bootstrap version, it became barely readable.

Resolves: #101222
Releases: main, 12.4
Change-Id: I594c995f23c99d81b0d5e2d619e63f811c36576a
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/79694


Tested-by: Andreas Nedbal <andy@pixelde.su>
Reviewed-by: Oliver Bartsch <bo@cedev.de>
Reviewed-by: Andreas Nedbal <andy@pixelde.su>
Tested-by: Annett Jähnichen <mcmietz@web.de>
Tested-by: Oliver Bartsch <bo@cedev.de>
Tested-by: core-ci <typo3@b13.com>
Reviewed-by: Annett Jähnichen <mcmietz@web.de>

typo3/sysext/backend/Classes/Form/Element/InputSlugElement.php

@@ -196,8 +196,16 @@ class InputSlugElement extends AbstractFormElement
             $mainFieldHtml[] =      '</div>';
         }
         $mainFieldHtml[] =          '<div class="form-wizards-items-bottom">';
-        $mainFieldHtml[] =              '<span class="t3js-form-proposal-accepted hidden d-inline-block bg-success mt-2 p-1 ps-2 pe-2 lh-base">' . sprintf(htmlspecialchars($successMessage), '<samp class="text-nowrap">' . htmlspecialchars($baseUrl) . '<span class="fw-bold">/abc/</span></samp>') . '</span>';
-        $mainFieldHtml[] =              '<span class="t3js-form-proposal-different hidden d-inline-block bg-warning mt-2 p-1 ps-2 pe-2 lh-base">' . sprintf(htmlspecialchars($errorMessage), '<samp class="text-nowrap">' . htmlspecialchars($baseUrl) . '<span class="fw-bold">/abc/</span></samp>') . '</span>';
+        $mainFieldHtml[] =              '<div class="t3js-form-proposal-accepted callout callout-success hidden mt-3 mb-0">';
+        $mainFieldHtml[] =                  '<div class="callout-body">';
+        $mainFieldHtml[] =                      sprintf(htmlspecialchars($successMessage), '<samp class="text-nowrap">' . htmlspecialchars($baseUrl) . '<span class="fw-bold">/abc/</span></samp>');
+        $mainFieldHtml[] =                  '</div>';
+        $mainFieldHtml[] =              '</div>';
+        $mainFieldHtml[] =              '<div class="t3js-form-proposal-different callout callout-warning hidden mt-3 mb-0">';
+        $mainFieldHtml[] =                  '<div class="callout-body">';
+        $mainFieldHtml[] =                      sprintf(htmlspecialchars($errorMessage), '<samp class="text-nowrap">' . htmlspecialchars($baseUrl) . '<span class="fw-bold">/abc/</span></samp>');
+        $mainFieldHtml[] =                  '</div>';
+        $mainFieldHtml[] =              '</div>';
         $mainFieldHtml[] =              $fieldWizardHtml;
         $mainFieldHtml[] =          '</div>';
         $mainFieldHtml[] =      '</div>';