Update appearance of controls in header (#8791)

* Init * Tidy up * Update resources.css * Update resources.css * Tidy up * Update resources.css
jenkinsci · Jan 3, 2024 · d75833e · d75833e
1 parent f06a954
commit d75833e
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 86 deletions.
diff --git a/core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/loginLink.jelly b/core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/loginLink.jelly
@@ -26,7 +26,6 @@ THE SOFTWARE.
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler">
   <st:include page="/hudson/security/SecurityRealm/loginLink.jelly" />
   <j:if test="${it.allowsSignup()}">
-    |
-    <a href="${rootURL}/signup"><b>${%sign up}</b></a>
+    <a href="${rootURL}/signup">${%sign up}</a>
   </j:if>
 </j:jelly>
diff --git a/core/src/main/resources/hudson/security/SecurityRealm/loginLink.jelly b/core/src/main/resources/hudson/security/SecurityRealm/loginLink.jelly
@@ -25,5 +25,5 @@ THE SOFTWARE.
 
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler">
-  <a href="${rootURL}/${app.securityRealm.loginUrl}?from=${app.securityRealm.from}"><b>${%login}</b></a>
+  <a href="${rootURL}/${app.securityRealm.loginUrl}?from=${app.securityRealm.from}">${%login}</a>
 </j:jelly>
diff --git a/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/resources.css b/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/resources.css
@@ -1,5 +1,5 @@
 .am-container {
-  height: 100%;
+  display: contents;
 }
 
 .am-button {
@@ -14,89 +14,62 @@
   border-radius: 50%;
   width: 0.65rem;
   height: 0.65rem;
-  background-color: #ff9800;
+  background-color: var(--warning-color);
 }
 .security-am .am-monitor__indicator-mobile {
-  background-color: #dc3545;
+  background-color: var(--error-color);
 }
 
 .am-button .am-monitor__count {
-  display: inline-block;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  height: 20px;
-  min-width: 20px;
+  height: 18px;
+  min-width: 18px;
 
   color: #fff;
-  background-color: #ff9800;
-  font-weight: bold;
+  background-color: var(--warning-color);
+  font-weight: 500;
+  font-size: var(--font-size-xs);
 
-  border-radius: 4px;
+  border-radius: 16px;
 }
 .am-button.security-am .am-monitor__count {
   color: #fff;
-  background-color: #dc3545;
+  background-color: var(--error-color);
 }
 .am-container div.am-list {
   position: absolute;
   top: 48px;
   right: 2%;
   height: auto;
-  z-index: 0;
-  padding: 2em;
+  padding: var(--section-padding);
   text-align: left;
   display: block;
-  background-color: #fff;
   background-color: var(--background);
-  border-radius: 5px;
-
-  /* Darken the box shadow to make the popup visible over the search box  */
-  box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.3);
-
-  transition: all 0.15s cubic-bezier(0.84, 0.03, 0.21, 0.96);
+  box-shadow: var(--dropdown-box-shadow);
+  transition: var(--standard-transition);
+  border-radius: 15px;
   opacity: 0;
-  transform: scale(0);
+  transform: translateY(-10px) scale(0.975);
+  z-index: 1000;
 }
 .am-container.visible div.am-list {
   opacity: 1;
   transform: scale(1);
-  z-index: 1000;
-}
-.am-container.visible .am-button {
-  background-color: #404040;
-  background-color: var(--header-link-bg-classic-active);
-  text-decoration: none;
-}
-.am-container .am-button:after {
-  content: "";
-  display: inline-block;
-  position: absolute;
-  bottom: 0;
-  left: 32%;
-  width: 0;
-  height: 0;
-  border-left: 7px solid transparent;
-  border-right: 7px solid transparent;
-  border-bottom: 7px solid #fff;
-  opacity: 0;
-  transition-property: all;
-  transition-delay: 0s;
-  z-index: 1001;
-}
-.am-container.visible .am-button:after {
-  opacity: 1;
-  transition-property: all;
-  transition-delay: 0.15s;
 }
 .am-container .am-message {
   display: block;
   line-height: 1.4em;
   margin-bottom: 1.4em;
 }
+.am-container.visible .am-button:after {
+  background: var(--button-background--hover);
+}
 
 .am-message-list {
   padding: 0;
+  margin: 0;
 }
 
 .am-container .am-message .alert form {
@@ -123,45 +96,37 @@
 /* Restore hyperlink style overriden by the page header */
 .am-container .am-list a:link {
   display: inline-block;
-  color: #204a87;
   color: var(--link-color);
   text-decoration: underline;
   margin-right: 0;
   padding: 0;
-  font-weight: 600;
   font-weight: var(--link-font-weight);
 }
 .am-container .am-list a:visited {
-  color: #5c3566;
   color: var(--link-color);
 }
 .am-container .am-list a:hover,
 .am-container .am-list a:focus,
 .am-container .am-list a:active {
-  color: #5c3566;
   color: var(--link-color);
   background-color: transparent;
   text-decoration: underline;
   text-decoration: var(--link-text-decoration--hover);
 }
 
 .am-container .am-list .alert-success a {
-  color: #155724;
   color: var(--alert-success-text-color);
 }
 
 .am-container .am-list .alert-info a {
-  color: #31708f;
   color: var(--alert-info-text-color);
 }
 
 .am-container .am-list .alert-warning a {
-  color: #8a6d3b;
   color: var(--alert-warning-text-color);
 }
 
 .am-container .am-list .alert-danger a {
-  color: #a94442;
   color: var(--alert-danger-text-color);
 }
 

diff --git a/war/src/main/scss/components/_page-header.scss b/war/src/main/scss/components/_page-header.scss
@@ -1,3 +1,5 @@
+@use "../abstracts/mixins";
+
 .page-header {
   display: flex;
   align-items: center;
@@ -36,46 +38,30 @@ a.page-header__brand-link {
 }
 
 .page-header__am-wrapper {
-  height: 100%;
-  padding: 0.5rem 0;
+  display: contents;
 }
 
 .page-header__hyperlinks {
   display: flex;
   align-items: center;
 }
 
-.page-header__hyperlinks a {
+.page-header__hyperlinks > a,
+.am-container > a {
+  @include mixins.item;
+
   --text-color: var(--header-link-color);
 
   display: inline-flex;
   align-items: center;
-
-  // need to override an existing rule
-  /* stylelint-disable declaration-block-no-shorthand-property-overrides */
-  padding-right: 0.5rem;
+  color: var(--text-color);
+  text-decoration: none;
   padding: 0.5rem;
   margin-right: 0 !important;
-  font-weight: bold;
-
-  &:link,
-  &:visited {
-    color: var(--header-link-color);
-    border-radius: var(--header-item-border-radius);
-    text-decoration: none;
-  }
 
-  &:hover,
-  &:focus,
-  &.mouseIsOverMenuSelector {
-    color: var(--header-link-color-active);
-    background-color: var(--header-link-bg-classic-hover);
-    text-decoration: underline;
-    text-decoration-color: var(--header-link-color-active);
-  }
-
-  &:active {
-    background-color: var(--header-link-bg-classic-active);
+  &::before,
+  &::after {
+    inset: 0 !important;
   }
 
   .jenkins-menu-dropdown-chevron {
@@ -91,8 +77,6 @@ a.page-header__brand-link {
 }
 
 .page-header__hyperlinks a span {
-  font-weight: bold;
-
   &:not(:first-child) {
     margin-left: 0.25rem;
   }