Risk level indicator styling (#1810)

Co-authored-by: Patrick <[email protected]>
Co-authored-by: Jeroen Dekkers <[email protected]>

rocky/assets/css/components/form-inline-column.scss → rocky/assets/css/components/form-inline.scss

@@ -1,3 +1,7 @@
 form.inline.column {
   flex-direction: column;
 }
+
+form.inline.layout-wide {
+  width: 100%;
+}

rocky/assets/css/components/risk-level-indicator.scss

@@ -0,0 +1,61 @@
+/* Risk level indicator */
+
+table .critical,
+table .high,
+table .medium,
+table .low,
+table .informational,
+table .recommendation,
+table .pending,
+table .unknown {
+  --risk-level-critical: #f84638;
+  --risk-level-high: #ff9a4d;
+  --risk-level-medium: #fbe366;
+  --risk-level-low: #a6e5b7;
+  --risk-level-informational: #c6e6fa;
+  --risk-level-pending: #a4a4a4;
+  --risk-level-unkown: #a4a4a4;
+
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0;
+
+  &::before {
+    content: "";
+    display: block;
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 50%;
+    margin: 0;
+  }
+}
+
+table .critical::before {
+  background-color: var(--risk-level-critical);
+}
+
+table .high::before {
+  background-color: var(--risk-level-high);
+}
+
+table .medium::before {
+  background-color: var(--risk-level-medium);
+}
+
+table .low::before {
+  background-color: var(--risk-level-low);
+}
+
+table .informational::before,
+table .recommendation::before {
+  background-color: var(--risk-level-informational);
+}
+
+table .pending::before {
+  background-color: var(--risk-level-pending);
+}
+
+table .unknown::before {
+  background-color: var(--risk-level-unkown);
+}

rocky/assets/css/main.scss

@@ -36,7 +36,7 @@
 @import "components/fmea";
 @import "components/footer-logo";
 @import "components/footer";
-@import "components/form-inline-column";
+@import "components/form-inline";
 @import "components/form";
 @import "components/header-navigation";
 @import "components/hover-block";
@@ -51,6 +51,7 @@
 @import "components/plugins";
 @import "components/pre";
 @import "components/qr-code";
+@import "components/risk-level-indicator";
 @import "components/scan-level-indicator";
 @import "components/select";
 @import "components/stepper";

rocky/assets/css/manon-components.scss

@@ -1,11 +1,7 @@
 /* Color sets */
-@use "@minvws/manon/colors/critical-informational";
 @use "@minvws/manon/tag-colors-soft";
 @use "@minvws/manon/spot-large";
 
-/* Labels */
-@use "@minvws/manon/critical-informational-labels";
-
 /* States */
 @use "@minvws/manon/disabled";
 

rocky/assets/css/themes/soft/manon/manon-variables.scss

@@ -1,6 +1,5 @@
 /* theme: KAT Soft based on manon components */
 :root {
-  --critical-informational-labels-min-width: 8rem;
   --de-emphasized-text-color: #000000;
   --h1-font-size: var(--heading-xl-font-size);
   --h2-font-size: var(--heading-large-font-size);

rocky/assets/css/themes/soft/soft.scss

@@ -59,7 +59,6 @@
 @import "manon/emphasized";
 @import "manon/expando-rows";
 @import "manon/collapsing-element";
-@import "manon/critical-informational-labels";
 @import "manon/filter";
 @import "manon/header-navigation";
 @import "manon/header-navigation-content-wrapper";

rocky/rocky/templates/findings/finding_list.html

@@ -25,7 +25,7 @@ <h1>{% translate "Findings @ " %}{{ valid_time|date }}</h1>
                 {% translate "Object list" as filter_title %}
                 {% if object_list|length > 1 and perms.tools.can_mute_findings %}
                     <form method="post"
-                          class="inline"
+                          class="inline layout-wide"
                           action="{% url 'finding_mute_bulk' organization.code %}">
                         {% csrf_token %}
                     {% endif %}