change: ui severity class

greenbone · Jan 3, 2025 · 040da3c · 040da3c
1 parent 785b449
commit 040da3c
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 78 deletions.
diff --git a/src/web/components/label/__tests__/severityclass.jsx b/src/web/components/label/__tests__/severityclass.jsx
@@ -5,6 +5,7 @@
 
 import {describe, test, expect} from '@gsa/testing';
 import {render} from 'web/utils/testing';
+import Theme from 'web/utils/theme';
 
 import SeverityClassLabel from '../severityclass';
 
@@ -18,40 +19,48 @@ describe('SeverityClassLabel tests', () => {
   test('should render HighLabel', () => {
     const {element} = render(<SeverityClassLabel.High />);
 
-    expect(element).toHaveStyleRule('background-color', '#C83814');
-    expect(element).toHaveStyleRule('border-color', '#C83814');
+    expect(element).toHaveStyleRule('background-color', Theme.errorRed);
+    expect(element).toHaveStyleRule('border-color', Theme.errorRed);
+    expect(element).toHaveStyleRule('color', Theme.white);
     expect(element).toHaveTextContent('High');
   });
 
   test('should render MediumLabel', () => {
     const {element} = render(<SeverityClassLabel.Medium />);
 
-    expect(element).toHaveStyleRule('background-color', '#F0A519');
-    expect(element).toHaveStyleRule('border-color', '#F0A519');
+    expect(element).toHaveStyleRule(
+      'background-color',
+      Theme.severityWarnYellow,
+    );
+    expect(element).toHaveStyleRule('border-color', Theme.severityWarnYellow);
+    expect(element).toHaveStyleRule('color', Theme.black);
     expect(element).toHaveTextContent('Medium');
   });
 
   test('should render LowLabel', () => {
     const {element} = render(<SeverityClassLabel.Low />);
 
-    expect(element).toHaveStyleRule('background-color', '#4F91C7');
-    expect(element).toHaveStyleRule('border-color', '#4F91C7');
+    expect(element).toHaveStyleRule('background-color', Theme.severityLowBlue);
+    expect(element).toHaveStyleRule('border-color', Theme.severityLowBlue);
+    expect(element).toHaveStyleRule('color', Theme.white);
     expect(element).toHaveTextContent('Low');
   });
 
   test('should render LogLabel', () => {
     const {element} = render(<SeverityClassLabel.Log />);
 
-    expect(element).toHaveStyleRule('background-color', '#191919');
-    expect(element).toHaveStyleRule('border-color', '#191919');
+    expect(element).toHaveStyleRule('background-color', Theme.mediumGray);
+    expect(element).toHaveStyleRule('border-color', Theme.mediumGray);
+    expect(element).toHaveStyleRule('color', Theme.white);
     expect(element).toHaveTextContent('Log');
   });
 
   test('should render FalsePositiveLabel', () => {
     const {element} = render(<SeverityClassLabel.FalsePositive />);
 
-    expect(element).toHaveStyleRule('background-color', '#191919');
-    expect(element).toHaveStyleRule('border-color', '#191919');
+    expect(element).toHaveStyleRule('background-color', Theme.mediumGray);
+    expect(element).toHaveStyleRule('border-color', Theme.mediumGray);
+    expect(element).toHaveStyleRule('color', Theme.white);
     expect(element).toHaveTextContent('False Pos.');
   });
 });
diff --git 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,