Refine 'Administrative monitors' interface (#9735)

* Squashed commit of the following:

* Rename section

* Push

* Update _plugin-manager.scss

* Update _checkbox.scss

* Reset files

* Update _badges.scss

* Update _badges.scss

* Update _theme.scss

* Remove label

* Fix lint

---------

Co-authored-by: Tim Jacomb <timjacomb1@gmail.com>

core/src/main/resources/jenkins/management/AdministrativeMonitorsConfiguration/config.groovy

@@ -29,22 +29,21 @@ import hudson.model.AdministrativeMonitor
 f = namespace(lib.FormTagLib)
 st = namespace("jelly:stapler")
 
-f.section(title: _("Administrative monitors configuration")) {
+f.section(title: _("Administrative monitors"), description: _("blurb")) {
     f.advanced(title: _("Administrative monitors")) {
-        f.entry(title: _("Enabled administrative monitors")) {
-            p(class: "jenkins-form-description", _("blurb"))
+        f.entry() {
             for (AdministrativeMonitor am : new ArrayList<>(AdministrativeMonitor.all())
                     .sort({ o1, o2 -> o1.getDisplayName() <=> o2.getDisplayName() })) {
-                div(class: "jenkins-checkbox-help-wrapper") {
-                    f.checkbox(name: "administrativeMonitor",
-                            title: am.displayName,
-                            checked: am.enabled,
-                            json: am.id)
-                    if (am.isSecurity()) {
-                        span(style: 'margin-left: 0.5rem', class: 'am-badge', _("Security"))
+                div(style: "margin-bottom: 0.625rem") {
+                    div(class: "jenkins-checkbox-help-wrapper") {
+                        f.checkbox(name: "administrativeMonitor",
+                                title: am.displayName,
+                                checked: am.enabled,
+                                json: am.id)
+                        if (am.isSecurity()) {
+                            span(style: 'margin-left: 0.5rem', class: 'jenkins-badge', _("Security"))
+                        }
                     }
-                }
-                div(class: "tr") {
                     div(class: "jenkins-checkbox__description") {
                         st.include(it: am, page: "description", optional: true)
                     }

core/src/main/resources/jenkins/management/AdministrativeMonitorsConfiguration/config_it.properties

@@ -22,10 +22,8 @@
 # THE SOFTWARE.
 
 Administrative\ monitors=Monitor amministrativi
-Administrative\ monitors\ configuration=Configurazione monitor amministrativi
 blurb=I monitor amministrativi sono avvisi visualizzati agli amministratori \
   di Jenkins riguardanti lo stato dell''istanza di Jenkins. In generale è \
   caldamente consigliato mantenere tutti i monitor amministrativi abilitati, \
   ma se non si è interessati a ricevere specifici avvisi, li si deselezioni \
   qui per nasconderli permanentemente.
-Enabled\ administrative\ monitors=Monitor amministrativi abilitati

core/src/main/resources/jenkins/management/AdministrativeMonitorsConfiguration/config_ru.properties

@@ -21,8 +21,6 @@
 # THE SOFTWARE.
 
 Administrative\ monitors=Мониторы администрирования
-Administrative\ monitors\ configuration=Настройка мониторов администрирования
 blurb=Мониторы администрирования - это предупреждения о состоянии экземпляра Jenkins, которые показываются \
   администраторам Jenkins. Обычно настоятельно рекомендуется оставить все мониторы администрирования включёнными, но \
   если некоторые предупреждения вас не интересуют, отключите их здесь, чтобы навсегда скрыть их.
-Enabled\ administrative\ monitors=Включённые мониторы администрирования

core/src/main/resources/jenkins/management/AdministrativeMonitorsConfiguration/config_sv_SE.properties

@@ -4,5 +4,3 @@ blurb=Administrativa övervakningar är varningar som visas för Jenkins-adminis
   inte är intresserad av specifika varningar kan du avmarkera dem här för att \
   dölja dem permanent.
 Administrative\ monitors=Administrativa övervakningar
-Administrative\ monitors\ configuration=Konfiguration av administrativa övervakningar
-Enabled\ administrative\ monitors=Aktiverade administrativa övervakningar

core/src/main/resources/jenkins/management/AdministrativeMonitorsConfiguration/config_tr.properties

@@ -1,4 +1,2 @@
-Administrative\ monitors\ configuration=İdari monitör ayarları
 Administrative\ monitors=İdari monitörler
-Enabled\ administrative\ monitors=Aktif idari monitörler
 blurb=İdari monitörler, Jenkins yöneticilerine Jenkins örneğinin durumu hakkında gösterilen uyarılardır. Genel olarak tüm yönetim monitörlerini etkin tutmanız şiddetle tavsiye edilir, ancak belirli uyarılarla ilgilenmiyorsanız, kalıcı olarak gizlemek için buradaki işaretlerini kaldırın.

war/src/main/scss/abstracts/_theme.scss

@@ -331,12 +331,6 @@ $semantics: (
 
   // Plugin manager
   --plugin-manager-bg-color-already-upgraded: var(--light-grey);
-  --plugin-manager-category-link-bg-color: var(--very-light-grey);
-  --plugin-manager-category-link-bg-color--hover: #f2f2f2;
-  --plugin-manager-category-link-border-color: var(--medium-grey);
-  --plugin-manager-category-link-border-color--hover: var(--black);
-  --plugin-manager-category-text-color: var(--text-color);
-  --plugin-manager-category-link-color--hover: var(--text-color);
 
   // Auto complete
   --auto-complete-bg-color--prehighlight: #b3d4ff;

war/src/main/scss/components/_badges.scss

@@ -1,39 +1,5 @@
-.am-badge,
-.plugin-manager__category-label:link,
-.plugin-manager__category-label:visited {
-  display: inline-block;
-  border: 1px solid var(--plugin-manager-category-link-border-color);
-  background-color: var(--plugin-manager-category-link-bg-color);
-  color: var(--plugin-manager-category-text-color);
-  border-radius: 4px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  padding: 0 0.5rem;
-  margin: 0 0.25rem 0 0;
-  text-decoration: none;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  transition: all 0.15s ease-in-out;
-}
-
-.plugin-manager__category-label:link,
-.plugin-manager__category-label:visited {
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: var(--plugin-manager-category-link-bg-color--hover);
-    border-color: var(--plugin-manager-category-link-border-color--hover);
-    color: var(--plugin-manager-category-link-color--hover);
-  }
-}
-
-.am-badge {
-  display: inline;
-}
-
 .jenkins-badge {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 100px;
@@ -42,9 +8,17 @@
   min-height: 20px;
   min-width: 20px;
   padding: 0 0.4rem;
-  background: color-mix(in sRGB, var(--color) 85%, transparent);
-  box-shadow: inset 0 -1px 2px var(--color);
-  color: var(--white) !important;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(2.5px);
+  background: color-mix(
+    in sRGB,
+    var(--text-color-secondary) 12.5%,
+    transparent
+  );
+
+  &[class*="color"] {
+    background: color-mix(in sRGB, var(--color) 85%, transparent);
+    color: var(--white) !important;
+    box-shadow: inset 0 -1px 2px var(--color, var(--text-color-secondary));
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(2.5px);
+  }
 }

war/src/main/scss/form/_checkbox.scss

@@ -187,9 +187,7 @@
 }
 
 .jenkins-checkbox__description {
-  margin-top: 0.3rem;
   margin-left: 34px;
-  margin-bottom: 1rem;
   color: var(--text-color-secondary);
   line-height: 1.66;
 }