From de1eb58158a8f33765aa4f9402b59229fedc88a7 Mon Sep 17 00:00:00 2001
From: daniele-mng <daniele.mangiagli@greenbone.net>
Date: Mon, 6 Jan 2025 12:25:31 +0100
Subject: [PATCH] change: ui severity class

---
 src/web/components/label/severityclass.jsx    | 129 +++++++++---------
 .../__tests__/editconfigfamilydialog.jsx      |  11 +-
 2 files changed, 62 insertions(+), 78 deletions(-)

diff --git a/src/web/components/label/severityclass.jsx b/src/web/components/label/severityclass.jsx
index e408467ed9..ec381bd31f 100644
--- a/src/web/components/label/severityclass.jsx
+++ b/src/web/components/label/severityclass.jsx
@@ -3,89 +3,82 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import _ from 'gmp/locale';
-import React from 'react';
+import {useTranslation} from 'react-i18next';
 import styled from 'styled-components';
-
+import Theme from 'web/utils/theme';
 
 const Label = styled.div`
-  text-align: center;
+  box-sizing: border-box;
+  position: relative;
   font-weight: normal;
   font-style: normal;
   color: white;
   padding: 1px;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 70px;
   height: 1.5em;
   font-size: 0.8em;
+  text-align: center;
+  color: ${props => props.$textColor};
   background-color: ${props => props.$backgroundColor};
+  border-radius: 5px;
+  overflow: hidden;
   border-color: ${props => props.$borderColor};
 `;
 
-const HighLabel = props => {
-  return (
-    <Label
-      {...props}
-      $backgroundColor="#C83814"
-      $borderColor="#C83814"
-      data-testid="severity-class-High"
-    >
-      {_('High')}
-    </Label>
-  );
-};
-
-const MediumLabel = props => {
-  return (
-    <Label
-      {...props}
-      $backgroundColor="#F0A519"
-      $borderColor="#F0A519"
-      data-testid="severity-class-Medium"
-    >
-      {_('Medium')}
-    </Label>
-  );
-};
+const createLabel =
+  (backgroundColor, borderColor, textColor, testId, text) => props => {
+    const [_] = useTranslation();
+    return (
+      <Label
+        {...props}
+        $backgroundColor={backgroundColor}
+        $borderColor={borderColor}
+        $textColor={textColor}
+        data-testid={testId}
+      >
+        {_(text)}
+      </Label>
+    );
+  };
 
-const LowLabel = props => {
-  return (
-    <Label
-      {...props}
-      $backgroundColor="#4F91C7"
-      $borderColor="#4F91C7"
-      data-testid="severity-class-Low"
-    >
-      {_('Low')}
-    </Label>
-  );
-};
-
-const LogLabel = props => {
-  return (
-    <Label
-      {...props}
-      $backgroundColor="#191919"
-      $borderColor="#191919"
-      data-testid="severity-class-Log"
-    >
-      {_('Log')}
-    </Label>
-  );
-};
-
-const FalsePositiveLabel = props => {
-  return (
-    <Label
-      {...props}
-      $backgroundColor="#191919"
-      $borderColor="#191919"
-      data-testid="severity-class-False-Positive"
-    >
-      {_('False Pos.')}
-    </Label>
-  );
-};
+const HighLabel = createLabel(
+  Theme.errorRed,
+  Theme.errorRed,
+  Theme.white,
+  'severity-class-High',
+  'High',
+);
+const MediumLabel = createLabel(
+  Theme.severityWarnYellow,
+  Theme.severityWarnYellow,
+  Theme.black,
+  'severity-class-Medium',
+  'Medium',
+);
+const LowLabel = createLabel(
+  Theme.severityLowBlue,
+  Theme.severityLowBlue,
+  Theme.white,
+  'severity-class-Low',
+  'Low',
+);
+const LogLabel = createLabel(
+  Theme.mediumGray,
+  Theme.mediumGray,
+  Theme.white,
+  'severity-class-Log',
+  'Log',
+);
+const FalsePositiveLabel = createLabel(
+  Theme.mediumGray,
+  Theme.mediumGray,
+  Theme.white,
+  'severity-class-False-Positive',
+  'False Pos.',
+);
 
 export const SeverityClassLabels = {
   High: HighLabel,
diff --git a/src/web/pages/scanconfigs/__tests__/editconfigfamilydialog.jsx b/src/web/pages/scanconfigs/__tests__/editconfigfamilydialog.jsx
index f61b035b9b..8285120917 100644
--- a/src/web/pages/scanconfigs/__tests__/editconfigfamilydialog.jsx
+++ b/src/web/pages/scanconfigs/__tests__/editconfigfamilydialog.jsx
@@ -6,21 +6,12 @@
 import {describe, test, expect, testing} from '@gsa/testing';
 import Nvt from 'gmp/models/nvt';
 import {
-  clickElement,
   getDialog,
   getDialogSaveButton,
   getTableBody,
   getTableHeader,
 } from 'web/components/testing';
-import {
-  rendererWith,
-  fireEvent,
-  prettyDOM,
-  within,
-  wait,
-  userEvent,
-  screen,
-} from 'web/utils/testing';
+import {rendererWith, fireEvent, within, screen} from 'web/utils/testing';
 
 import EditConfigFamilyDialog from '../editconfigfamilydialog';