itk-dev · turegjorup · Aug 26, 2026 · Aug 26, 2026 · Aug 26, 2026 · Aug 26, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- [#94](https://github.com/itk-dev/devops_itksites/pull/94)
+  Use EasyAdmin's own components in the admin templates
+  - Replace hand-rolled badge and icon markup with `<twig:ea:Badge>` and
+    `<twig:ea:Icon>`, so the admin follows EasyAdmin's theming
+  - Drop the unused `AutoBadgeMenuItem`/`AutoBadgeCrudMenuItem` pair: EasyAdmin
+    hides a badge whose content is null
+  - Set the ITK blue with the theme API instead of overriding EasyAdmin's
+    colour variables one by one
+  - Load the admin stylesheet again: it was added as `css/admin.css`, a file
+    deleted in #81, so every admin page carried a 404 and no ITK styling
 - [#93](https://github.com/itk-dev/devops_itksites/pull/93)
   Update composer dependencies, clearing 15 security advisories
   - `api-platform/core` 4.3.7 → 4.3.17, `easycorp/easyadmin-bundle` 5.0.11 → 5.5.1,

diff --git a/assets/styles/app.css b/assets/styles/app.css
@@ -1,17 +1,15 @@
+/* EasyAdmin overrides. The ITK blue is set with the theme API in
+   DashboardController; what is left here is what that API cannot express. */
 :root {
     --body-max-width: 100%;
     --sidebar-bg: #fff;
-    /* make the base font size smaller */
-    --button-primary-bg: rgb(0, 123, 166);
-    --pagination-active-bg: rgb(0, 123, 166);
-    --link-color: rgb(0, 123, 166);
-    --sidebar-menu-active-item-color: rgb(0, 123, 166);
-    --badge-boolean-true-bg: rgb(0, 123, 166);
+    /* ITK red, for a false boolean badge and for danger states */
     --badge-boolean-false-bg: rgb(228, 73, 48);
     --badge-boolean-false-color: var(--white);
+    --bs-danger-rgb: 228, 73, 48;
+    /* the theme API only takes named gray ramps, not an arbitrary gray */
     --sidebar-menu-color: rgb(66, 66, 66);
     --text-color-dark: rgb(66, 66, 66);
-    --bs-danger-rgb: 228, 73, 48;
 }
 
 /* Grouped dropdown group styling for index pages */

diff --git a/src/Controller/Admin/DashboardController.php b/src/Controller/Admin/DashboardController.php
@@ -10,6 +10,7 @@
 use EasyCorp\Bundle\EasyAdminBundle\Config\Crud;
 use EasyCorp\Bundle\EasyAdminBundle\Config\Dashboard;
 use EasyCorp\Bundle\EasyAdminBundle\Config\MenuItem;
+use EasyCorp\Bundle\EasyAdminBundle\Config\Theme;
 use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractDashboardController;
 use EasyCorp\Bundle\EasyAdminBundle\Router\AdminUrlGenerator;
 use Symfony\Component\HttpFoundation\Response;
@@ -39,7 +40,12 @@ public function configureDashboard(): Dashboard
         return Dashboard::new()
             ->setTitle('<img src="/img/itk-sites-logo.png" width="170px" alt="ITK sites logo">')
             ->setFaviconPath('img/favicon.ico')
-            ->renderContentMaximized();
+            ->renderContentMaximized()
+            // ITK blue. Since EasyAdmin 5.4 one primary colour drives buttons,
+            // links, the active sidebar item and boolean badges, and the theme
+            // computes the text colour that sits on top of it — which the
+            // stylesheet used to approximate variable by variable.
+            ->setTheme(Theme::new()->primaryColor('#007ba6'));
     }
 
     #[\Override]
@@ -56,7 +62,9 @@ public function configureMenuItems(): iterable
         yield MenuItem::section('Dependencies');
         yield MenuItem::linkTo(PackageCrudController::class, 'Packages', 'fas fa-cube');
         yield MenuItem::linkTo(PackageVersionCrudController::class, 'Package Versions', 'fas fa-cubes');
-        yield MenuItem::linkTo(AdvisoryCrudController::class, 'Advisories', 'fas fa-skull-crossbones')->setBadge($this->advisoryRepository->count([]), 'dark');
+        // `?: null` because EasyAdmin hides a badge whose content is null but
+        // renders a literal "0" for a zero count, which is noise on a menu item.
+        yield MenuItem::linkTo(AdvisoryCrudController::class, 'Advisories', 'fas fa-skull-crossbones')->setBadge($this->advisoryRepository->count([]) ?: null, 'dark');
         yield MenuItem::linkTo(ModuleCrudController::class, 'Modules', 'fas fa-cube');
         yield MenuItem::linkTo(ModuleVersionCrudController::class, 'Modules Versions', 'fas fa-cubes');
         yield MenuItem::linkTo(DockerImageCrudController::class, 'Docker Images', 'fas fa-cube');
@@ -67,6 +75,20 @@ public function configureMenuItems(): iterable
         yield MenuItem::linkTo(DetectionResultCrudController::class, 'Detection Results', 'fas fa-upload');
     }
 
+    /**
+     * The admin styles reach admin pages only from here.
+     *
+     * EasyAdmin renders its own layout rather than templates/base.html.twig, so
+     * neither `importmap()` nor that template's Encore tags apply to it. Until
+     * now this method added `css/admin.css`, a file deleted in #81, so every
+     * admin page carried a 404 and none of the ITK styling below it.
+     */
+    #[\Override]
+    public function configureAssets(): Assets
+    {
+        return Assets::new()->addWebpackEncoreEntry('admin');
+    }
+
     #[\Override]
     public function configureCrud(): Crud
     {
@@ -77,10 +99,4 @@ public function configureCrud(): Crud
             ->setPageTitle('detail', '%entity_label_singular%: %entity_as_string%')
         ;
     }
-
-    #[\Override]
-    public function configureAssets(): Assets
-    {
-        return Assets::new()->addCssFile('css/admin.css');
-    }
 }
diff --git a/src/EasyAdmin/Config/AutoBadgeMenuItem.php b/src/EasyAdmin/Config/AutoBadgeMenuItem.php
diff --git a/src/EasyAdmin/Config/Menu/AutoBadgeCrudMenuItem.php b/src/EasyAdmin/Config/Menu/AutoBadgeCrudMenuItem.php
diff --git a/templates/EasyAdminBundle/Fields/advisories.html.twig b/templates/EasyAdminBundle/Fields/advisories.html.twig
@@ -29,5 +29,5 @@
         </table>
     {% endif %}
 {% elseif field.formattedValue != 0 %}
-    <span class="badge badge-danger">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="danger">{{ field.formattedValue }}</twig:ea:Badge>
 {% endif %}
diff --git a/templates/EasyAdminBundle/Fields/advisory_count.html.twig b/templates/EasyAdminBundle/Fields/advisory_count.html.twig
@@ -2,5 +2,5 @@
 {# @var field \EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto #}
 {# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #}
 {% if field.formattedValue != 0 %}
-    <span class="badge badge-danger">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="danger">{{ field.formattedValue }}</twig:ea:Badge>
 {% endif %}
diff --git a/templates/EasyAdminBundle/Fields/affected_sites.html.twig b/templates/EasyAdminBundle/Fields/affected_sites.html.twig
@@ -29,5 +29,5 @@
         <span class="text-muted">None</span>
     {% endif %}
 {% else %}
-    <span class="badge badge-info">{{ sites|length }}</span>
+    <twig:ea:Badge variant="info">{{ sites|length }}</twig:ea:Badge>
 {% endif %}
diff --git a/templates/EasyAdminBundle/Fields/changes.html.twig b/templates/EasyAdminBundle/Fields/changes.html.twig
@@ -2,7 +2,7 @@
 {# @var field \EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto #}
 {# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #}
 {% if field.formattedValue == 0 %}
-    <span class="badge badge-secondary">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="secondary">{{ field.formattedValue }}</twig:ea:Badge>
 {% else %}
-    <span class="badge badge-warning">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="warning">{{ field.formattedValue }}</twig:ea:Badge>
 {% endif %}
diff --git a/templates/EasyAdminBundle/Fields/cloned_by.html.twig b/templates/EasyAdminBundle/Fields/cloned_by.html.twig
@@ -2,9 +2,9 @@
 {# @var field \EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto #}
 {# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #}
 {% if field.formattedValue == 'unknown' %}
-    <span class="badge badge-warning">?</span>
+    <twig:ea:Badge variant="warning">?</twig:ea:Badge>
 {% elseif field.formattedValue starts with 'ssh' %}
-    <span class="badge badge-secondary">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="secondary">{{ field.formattedValue }}</twig:ea:Badge>
 {% else %}
-    <span class="badge badge-dark">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="dark">{{ field.formattedValue }}</twig:ea:Badge>
 {% endif %}
diff --git a/templates/EasyAdminBundle/Fields/code.html.twig b/templates/EasyAdminBundle/Fields/code.html.twig
@@ -2,7 +2,7 @@
 {# @var field \EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto #}
 {# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #}
 {% if field.formattedValue is null %}
-    <span class="badge badge-secondary">{{ 'label.null'|trans(domain: 'EasyAdminBundle') }}</span>
+    <twig:ea:Badge variant="secondary">{{ 'label.null'|trans(domain: 'EasyAdminBundle') }}</twig:ea:Badge>
 {% else %}
     <code>{{ field.formattedValue }}</code>
 {% endif %}
diff --git a/templates/EasyAdminBundle/Fields/db_version.html.twig b/templates/EasyAdminBundle/Fields/db_version.html.twig
@@ -2,7 +2,7 @@
 {# @var field \EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto #}
 {# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #}
 {% if field.formattedValue is null %}
-    <span class="badge badge-secondary">{{ 'label.null'|trans(domain: 'EasyAdminBundle') }}</span>
+    <twig:ea:Badge variant="secondary">{{ 'label.null'|trans(domain: 'EasyAdminBundle') }}</twig:ea:Badge>
 {% else %}
-    <span class="badge badge-info">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="info">{{ field.formattedValue }}</twig:ea:Badge>
 {% endif %}
diff --git a/templates/EasyAdminBundle/Fields/domain.html.twig b/templates/EasyAdminBundle/Fields/domain.html.twig
@@ -4,7 +4,7 @@
 {# NOTE: the rel="noopener" attr is needed to avoid performance and security issues
   (see https://web.dev/external-anchors-use-rel-noopener/) #}
 {% if field.formattedValue == 'unknown' %}
-    <span class="badge badge-secondary">?</span>
+    <twig:ea:Badge variant="secondary">?</twig:ea:Badge>
 {% elseif ea().crud.currentAction == 'detail' %}
     <a target="_blank" rel="noopener" href="https://{{ field.value }}">{{ field.value }}</a>
 {% else %}

diff --git a/templates/EasyAdminBundle/Fields/eol.html.twig b/templates/EasyAdminBundle/Fields/eol.html.twig
@@ -11,11 +11,11 @@
 {% endif %}
 
 {% if field.formattedValue is empty %}
-    <span class="badge badge-secondary">?</span>
+    <twig:ea:Badge variant="secondary">?</twig:ea:Badge>
 {% elseif 'Expired' in field.formattedValue %}
-    <span class="badge badge-danger">{{ outputValue }}</span>
+    <twig:ea:Badge variant="danger">{{ outputValue }}</twig:ea:Badge>
 {% elseif date('01/' ~ slicedDate) < date('+180days') %}
-    <span class="badge badge-warning">{{ outputValue }}</span>
+    <twig:ea:Badge variant="warning">{{ outputValue }}</twig:ea:Badge>
 {% else %}
-    <span class="badge badge-success">{{ outputValue }}</span>
+    <twig:ea:Badge variant="success">{{ outputValue }}</twig:ea:Badge>
 {% endif %}
diff --git a/templates/EasyAdminBundle/Fields/hosting_provider.html.twig b/templates/EasyAdminBundle/Fields/hosting_provider.html.twig
@@ -2,13 +2,13 @@
 {# @var field \EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto #}
 {# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #}
 {% if field.formattedValue is empty %}
-    <span class="badge badge-warning">?</span>
+    <twig:ea:Badge variant="warning">?</twig:ea:Badge>
 {% elseif field.formattedValue == constant('App\\Types\\HostingProviderType::AZURE') %}
-    <span class="badge badge-light">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="light">{{ field.formattedValue }}</twig:ea:Badge>
 {% elseif field.formattedValue == constant('App\\Types\\HostingProviderType::IT_RELATION') %}
-    <span class="badge badge-secondary">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="secondary">{{ field.formattedValue }}</twig:ea:Badge>
 {% elseif field.formattedValue == constant('App\\Types\\HostingProviderType::DBC') %}
-    <span class="badge badge-dark">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="dark">{{ field.formattedValue }}</twig:ea:Badge>
 {% else %}
-    <span class="badge badge-secondary">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="secondary">{{ field.formattedValue }}</twig:ea:Badge>
 {% endif %}
diff --git a/templates/EasyAdminBundle/Fields/latest-status.html.twig b/templates/EasyAdminBundle/Fields/latest-status.html.twig
@@ -2,13 +2,13 @@
 {# @var field \EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto #}
 {# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #}
 {% if field.formattedValue == 'unknown' %}
-    <span class="badge badge-secondary">?</span>
+    <twig:ea:Badge variant="secondary">?</twig:ea:Badge>
 {% elseif field.formattedValue == 'up-to-date' %}
-    <span class="badge badge-light">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="light">{{ field.formattedValue }}</twig:ea:Badge>
 {% elseif field.formattedValue == 'semver-safe-update' %}
-    <span class="badge badge-success">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="success">{{ field.formattedValue }}</twig:ea:Badge>
 {% elseif field.formattedValue == 'update-possible' %}
-    <span class="badge badge-info">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="info">{{ field.formattedValue }}</twig:ea:Badge>
 {% else %}
-    <span class="badge badge-info">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="info">{{ field.formattedValue }}</twig:ea:Badge>
 {% endif %}
diff --git a/templates/EasyAdminBundle/Fields/server_type.html.twig b/templates/EasyAdminBundle/Fields/server_type.html.twig
@@ -2,13 +2,13 @@
 {# @var field \EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto #}
 {# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #}
 {% if field.value is empty %}
-    <span class="badge badge-secondary">?</span>
+    <twig:ea:Badge variant="secondary">?</twig:ea:Badge>
 {% elseif field.value == constant('App\\Types\\ServerTypeType::PROD') %}
-    <span class="badge badge-danger">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="danger">{{ field.formattedValue }}</twig:ea:Badge>
 {% elseif field.value == constant('App\\Types\\ServerTypeType::STG') %}
-    <span class="badge badge-warning">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="warning">{{ field.formattedValue }}</twig:ea:Badge>
 {% elseif field.value == constant('App\\Types\\ServerTypeType::DEVOPS') %}
-    <span class="badge badge-primary">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="primary">{{ field.formattedValue }}</twig:ea:Badge>
 {% else %}
-    <span class="badge badge-secondary">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="secondary">{{ field.formattedValue }}</twig:ea:Badge>
 {% endif %}
diff --git a/templates/EasyAdminBundle/Fields/site.html.twig b/templates/EasyAdminBundle/Fields/site.html.twig
@@ -2,9 +2,9 @@
 {# @var field \EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto #}
 {# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #}
 {% if field.formattedValue == constant('App\\Types\\SiteType::NGINX') %}
-    <span class="badge badge-secondary">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="secondary">{{ field.formattedValue }}</twig:ea:Badge>
 {% elseif field.formattedValue == constant('App\\Types\\SiteType::DOCKER') %}
-    <span class="badge badge-light">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="light">{{ field.formattedValue }}</twig:ea:Badge>
 {% else %}
-    <span class="badge badge-dark">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="dark">{{ field.formattedValue }}</twig:ea:Badge>
 {% endif %}
diff --git a/templates/EasyAdminBundle/Fields/ssh_link.html.twig b/templates/EasyAdminBundle/Fields/ssh_link.html.twig
@@ -5,9 +5,7 @@
     <div>{{ field.formattedValue }}</div>
     <div>
         <a href="ssh://deploy@{{ field.formattedValue }}">
-            <span class="badge badge-light ms-3">
-                <i class="fas fa-terminal"></i>
-            </span>
+            <twig:ea:Badge variant="light" icon="fas fa-terminal" class="ms-3" />
         </a>
     </div>
 </div>
diff --git a/templates/EasyAdminBundle/Fields/text_mono.html.twig b/templates/EasyAdminBundle/Fields/text_mono.html.twig
@@ -2,7 +2,7 @@
 {# @var field \EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto #}
 {# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #}
 {% if field.formattedValue is null %}
-    <span class="badge badge-secondary">{{ 'label.null'|trans(domain: 'EasyAdminBundle') }}</span>
+    <twig:ea:Badge variant="secondary">{{ 'label.null'|trans(domain: 'EasyAdminBundle') }}</twig:ea:Badge>
 {% else %}
     <code class="text-primary">{{ field.formattedValue }}</code>
 {% endif %}
diff --git a/templates/EasyAdminBundle/Fields/version.html.twig b/templates/EasyAdminBundle/Fields/version.html.twig
@@ -2,9 +2,9 @@
 {# @var field \EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto #}
 {# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #}
 {% if field.formattedValue == 'unknown' %}
-    <span class="badge badge-secondary">?</span>
+    <twig:ea:Badge variant="secondary">?</twig:ea:Badge>
 {% elseif field.formattedValue starts with '${' %}
-    <span class="badge badge-warning">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="warning">{{ field.formattedValue }}</twig:ea:Badge>
 {% else %}
-    <span class="badge badge-info">{{ field.formattedValue }}</span>
+    <twig:ea:Badge variant="info">{{ field.formattedValue }}</twig:ea:Badge>
 {% endif %}
diff --git a/templates/EasyAdminBundle/Fields/warning.html.twig b/templates/EasyAdminBundle/Fields/warning.html.twig
@@ -5,10 +5,10 @@
     <span class="text-danger" title="{{ field.value }}">{{ field.formattedValue|raw|nl2br }}</span>
 {% else %}
     {% if field.formattedValue is null %}
-        <span class="badge badge-secondary"></span>
+        <twig:ea:Badge variant="secondary"></twig:ea:Badge>
     {% else %}
         <span class="text-danger text-center">
-            <i class="fa fa-warning"></i>
+            <twig:ea:Icon name="fa fa-warning" />
         </span>
     {% endif %}
 {% endif %}