Fix opensight Icons (#4160)

* fix: lucide svg width and height

* change panel close icon

package.json

@@ -57,7 +57,7 @@
     "i18next": "^23.12.2",
     "i18next-http-backend": "^2.5.2",
     "ical.js": "^2.0.0",
-    "lucide-react": "^0.395.0",
+    "lucide-react": "^0.439.0",
     "memoize-one": "^6.0.0",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.45",

src/web/components/icon/XIcon.jsx

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

src/web/components/icon/__tests__/XIcon.jsx

@@ -0,0 +1,14 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {describe} from '@gsa/testing';
+
+import {testIcon} from 'web/components/icon/testing';
+
+import XIcon from '../XIcon';
+
+describe('XIcon component tests', () => {
+  testIcon(XIcon);
+});

src/web/components/icon/svgicon.jsx

@@ -29,7 +29,7 @@ const Styled = styled.span`
 
   @media print {
     & {
-      ${props => (isDefined(props.onClick) ? {display: 'none'} : undefined)};
+      ${props => (isDefined(props.onClick) ? 'display: none;' : undefined)};
     }
   }
 
@@ -38,8 +38,8 @@ const Styled = styled.span`
       props.$isLoading
         ? 'url(/img/loading.gif) center center no-repeat'
         : undefined};
-    height: ${props => props.height};
-    width: ${props => props.width};
+    height: ${props => props.$height};
+    width: ${props => props.$width};
   }
 
   & svg path {
@@ -52,10 +52,6 @@ const Styled = styled.span`
     fill: ${props =>
       props.$active || props.$isLoading ? 'unset' : Theme.inputBorderGray};
   }
-  & * {
-    height: inherit;
-    width: inherit;
-  }
 `;
 
 export const useIsMountedRef = () => {

src/web/components/panel/infopanel.jsx

@@ -3,14 +3,13 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-
 import React from 'react';
 
 import styled from 'styled-components';
 
 import {isDefined} from 'gmp/utils/identity';
 
-import DeleteIcon from 'web/components/icon/deleteicon';
+import XIcon from 'web/components/icon/XIcon';
 
 import {styledExcludeProps} from 'web/utils/styledConfig';
 import PropTypes from 'web/utils/proptypes';
@@ -73,7 +72,7 @@ const InfoPanel = ({
           {heading}
           {isDefined(onCloseClick) && (
             <Button data-testid="panel-close-button" onClick={onCloseClick}>
-              <DeleteIcon />
+              <XIcon />
             </Button>
           )}
         </Heading>
@@ -85,6 +84,7 @@ const InfoPanel = ({
 };
 
 InfoPanel.propTypes = {
+  children: PropTypes.element,
   footer: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
   heading: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
   isWarning: PropTypes.bool,