Sorting indicators and align UI with OpenSight

src/web/components/icon/ArrowDown.jsx

@@ -0,0 +1,19 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {ArrowDown as Icon} from 'lucide-react';
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
+
+import withSvgIcon from './withSvgIcon';
+
+const ArrowDown = withSvgIcon()(props => (
+  <IconWithStrokeWidth
+    IconComponent={Icon}
+    {...props}
+    data-testid="arrowDown-icon"
+  />
+));
+
+export default ArrowDown;

src/web/components/icon/ArrowUp.jsx

@@ -0,0 +1,19 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {ArrowUp as Icon} from 'lucide-react';
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
+
+import withSvgIcon from './withSvgIcon';
+
+const ArrowUp = withSvgIcon()(props => (
+  <IconWithStrokeWidth
+    IconComponent={Icon}
+    {...props}
+    data-testid="arrowUp-icon"
+  />
+));
+
+export default ArrowUp;

src/web/components/icon/ArrowUpDown.jsx

@@ -0,0 +1,19 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {ArrowUpDown as Icon} from 'lucide-react';
+import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
+
+import withSvgIcon from './withSvgIcon';
+
+const ArrowUpDown = withSvgIcon()(props => (
+  <IconWithStrokeWidth
+    IconComponent={Icon}
+    {...props}
+    data-testid="arrowUpDown-icon"
+  />
+));
+
+export default ArrowUpDown;

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.');
   });
 });

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,

src/web/components/sortby/sortby.jsx

@@ -7,39 +7,33 @@ import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'web/utils/proptypes';
 
-const Anchor = styled.a`
+const SortButton = styled.button`
   cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
 `;
 
-class SortBy extends React.Component {
-  static ASC = 'asc';
-  static DESC = 'desc';
-
-  constructor(...args) {
-    super(...args);
-
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick() {
-    const {by, onClick} = this.props;
-
+const SortBy = ({by, children, className, onClick}) => {
+  const handleClick = () => {
     if (onClick) {
       onClick(by);
     }
-  }
+  };
+
+  return (
+    <SortButton className={className} onClick={handleClick}>
+      {children}
+    </SortButton>
+  );
+};
 
-  render() {
-    const {children, className} = this.props;
-    return (
-      <Anchor className={className} onClick={this.handleClick}>
-        {children}
-      </Anchor>
-    );
-  }
-}
+SortBy.ASC = 'asc';
+SortBy.DESC = 'desc';
 
 SortBy.propTypes = {
+  children: PropTypes.node,
   by: PropTypes.string,
   className: PropTypes.string,
   onClick: PropTypes.func,