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 (
-
- );
-};
-
-const MediumLabel = props => {
- return (
-
- );
-};
+const createLabel =
+ (backgroundColor, borderColor, textColor, testId, text) => props => {
+ const [_] = useTranslation();
+ return (
+
+ );
+ };
-const LowLabel = props => {
- return (
-
- );
-};
-
-const LogLabel = props => {
- return (
-
- );
-};
-
-const FalsePositiveLabel = props => {
- return (
-
- );
-};
+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';