diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala index 3e3c1ceeb64..69294bf1339 100644 --- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala +++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala @@ -483,9 +483,7 @@ object DisplayNode extends Loggable { } val nodeStateIcon = ( - + )
diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-node.scss b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-node.scss index 889eaa038c4..226d5063134 100644 --- a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-node.scss +++ b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-node.scss @@ -38,9 +38,6 @@ // Modules @use 'rudder-variables' as *; -// Variables -$node-state-size: 14px; - // Override Rudder template .rudder-template { .header-title{ @@ -66,6 +63,12 @@ $node-state-size: 14px; font-size: 24px !important; } +#nodeHeaderInfo { + display: flex; + gap: 8px; + align-items: center; +} + .page-title-description{ padding: 0 15px; margin-bottom: 8px; @@ -103,33 +106,50 @@ $node-state-size: 14px; } .node-state{ - display: inline-block; - width: $node-state-size; - height: $node-state-size; - border-radius: 50%; + display: inline-flex; + padding: 6px 8px; + border-radius: 4px; background-color: #4eb934; + color: #fff; + font-size: 0.8rem; + align-items: baseline; - &.ignored:after{ + &:after{ + content : "ENABLED"; + } + &.ignored{ background-color: #a4aebf; + &:after{ + content : "IGNORED"; + } } - &.empty-policies:after{ + &.empty-policies{ background-color: #7591c599; + &:after{ + content : "EMPTY POLICIES"; + } } - &.initializing:after{ - color: #08a3ef; + &.initializing{ + background-color: #08a3ef; + &:after{ + content : "INITIALIZING"; + } + &:before{ content: "\f1ce"; - font: normal normal normal 14px/1 inherit; - font-family: "Font Awesome 5 Free"; - font-weight: 900; - background-color: transparent; - font-weight: bold; - font-size: 1.1em; - animation: fa-spin 2s infinite linear; - height: 14px; - width: auto; + font-family: "Font Awesome 5 Free"; + font-weight: 900; + background-color: transparent; + font-weight: bold; + font-size: 1.1em; + animation: fa-spin 2s infinite linear; + margin-right: 4px; + } } &.preparing-eol:after{ background-color: #EF9600; + &:after{ + content : "PREPARING EOL"; + } } } .machine-os-info {