diff --git a/src/web/components/icon/IconWithStrokeWidth.jsx b/src/web/components/icon/IconWithStrokeWidth.jsx new file mode 100644 index 0000000000..8e1ac1a04e --- /dev/null +++ b/src/web/components/icon/IconWithStrokeWidth.jsx @@ -0,0 +1,17 @@ +/* SPDX-FileCopyrightText: 2024 Greenbone AG + * + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import PropTypes from 'prop-types'; + +const IconWithStrokeWidth = ({IconComponent, strokeWidth = 1.5, ...props}) => { + return ; +}; + +IconWithStrokeWidth.propTypes = { + IconComponent: PropTypes.elementType.isRequired, + strokeWidth: PropTypes.number, +}; + +export default IconWithStrokeWidth; diff --git a/src/web/components/icon/alerticon.jsx b/src/web/components/icon/alerticon.jsx index 4cff4dd8b4..9bb5e42104 100644 --- a/src/web/components/icon/alerticon.jsx +++ b/src/web/components/icon/alerticon.jsx @@ -5,9 +5,12 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/alert.svg'; +import {Megaphone as Icon} from 'lucide-react'; +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; -const AlertIcon = withSvgIcon()(Icon); +const AlertIcon = withSvgIcon()(props => ( + +)); export default AlertIcon; diff --git a/src/web/components/icon/alterableicon.jsx b/src/web/components/icon/alterableicon.jsx index 71b0a12698..b01c0f74a6 100644 --- a/src/web/components/icon/alterableicon.jsx +++ b/src/web/components/icon/alterableicon.jsx @@ -5,9 +5,12 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/alterable.svg'; +import {FilePenLine as Icon} from 'lucide-react'; +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; -const AlterableIcon = withSvgIcon()(Icon); +const AlterableIcon = withSvgIcon()(props => ( + +)); export default AlterableIcon; diff --git a/src/web/components/icon/auditicon.jsx b/src/web/components/icon/auditicon.jsx index fecd82bed0..037a813d85 100644 --- a/src/web/components/icon/auditicon.jsx +++ b/src/web/components/icon/auditicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/audit.svg'; +import {ClipboardCheck as Icon} from 'lucide-react'; -const AuditIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const AuditIcon = withSvgIcon()(props => ( + +)); export default AuditIcon; diff --git a/src/web/components/icon/calendaricon.jsx b/src/web/components/icon/calendaricon.jsx index 7abe9b1730..f3a9e0dea3 100644 --- a/src/web/components/icon/calendaricon.jsx +++ b/src/web/components/icon/calendaricon.jsx @@ -5,9 +5,12 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/calendar.svg'; +import {Calendar as Icon} from 'lucide-react'; +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; -const CalendarIcon = withSvgIcon()(Icon); +const CalendarIcon = withSvgIcon()(props => ( + +)); export default CalendarIcon; diff --git a/src/web/components/icon/credentialicon.jsx b/src/web/components/icon/credentialicon.jsx index 307838b75c..e994b2f5f5 100644 --- a/src/web/components/icon/credentialicon.jsx +++ b/src/web/components/icon/credentialicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/credential.svg'; +import {KeyRound as Icon} from 'lucide-react'; -const CredentialIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const CredentialIcon = withSvgIcon()(props => ( + +)); export default CredentialIcon; diff --git a/src/web/components/icon/dashboardicon.jsx b/src/web/components/icon/dashboardicon.jsx index f5ff16a803..4fc71f9946 100644 --- a/src/web/components/icon/dashboardicon.jsx +++ b/src/web/components/icon/dashboardicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/dashboard.svg'; +import {BarChart3 as Icon} from 'lucide-react'; -const DashboardIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const DashboardIcon = withSvgIcon()(props => ( + +)); export default DashboardIcon; diff --git a/src/web/components/icon/deleteicon.jsx b/src/web/components/icon/deleteicon.jsx index 3075a22362..5ede4abb64 100644 --- a/src/web/components/icon/deleteicon.jsx +++ b/src/web/components/icon/deleteicon.jsx @@ -15,9 +15,13 @@ import SelectionType from 'web/utils/selectiontype'; import withSvgIcon from './withSvgIcon'; -import Icon from './svg/delete.svg'; +import {CircleX as Icon} from 'lucide-react'; -const DeleteSvgIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const DeleteSvgIcon = withSvgIcon()(props => ( + +)); const DeleteIcon = ({selectionType, title, ...props}) => { if (!isDefined(title)) { diff --git a/src/web/components/icon/detailsicon.jsx b/src/web/components/icon/detailsicon.jsx index 415cba00b2..ba1f8dc352 100644 --- a/src/web/components/icon/detailsicon.jsx +++ b/src/web/components/icon/detailsicon.jsx @@ -7,11 +7,12 @@ import React from 'react'; import SvgIcon from './svgicon'; -import Icon from './svg/details.svg'; +import {ZoomIn as Icon} from 'lucide-react'; +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; const DetailsIcon = props => ( - + ); diff --git a/src/web/components/icon/disableicon.jsx b/src/web/components/icon/disableicon.jsx index 5537d6efa8..646a483b70 100644 --- a/src/web/components/icon/disableicon.jsx +++ b/src/web/components/icon/disableicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/disable.svg'; +import {PowerOff as Icon} from 'lucide-react'; -const DisableIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const DisableIcon = withSvgIcon()(props => ( + +)); export default DisableIcon; diff --git a/src/web/components/icon/downloadicon.jsx b/src/web/components/icon/downloadicon.jsx index c4ebb65c90..a5854c9ac4 100644 --- a/src/web/components/icon/downloadicon.jsx +++ b/src/web/components/icon/downloadicon.jsx @@ -3,12 +3,15 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ - import withSvgIcon from './withSvgIcon'; -import Icon from './svg/download.svg'; +import {Download as Icon} from 'lucide-react'; + +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; -const DownloadIcon = withSvgIcon()(Icon); +const DownloadIcon = withSvgIcon()(props => ( + +)); export default DownloadIcon; diff --git a/src/web/components/icon/editicon.jsx b/src/web/components/icon/editicon.jsx index a8b99d3381..9c87772f6b 100644 --- a/src/web/components/icon/editicon.jsx +++ b/src/web/components/icon/editicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/edit.svg'; +import {Pencil as Icon} from 'lucide-react'; -const EditIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const EditIcon = withSvgIcon()(props => ( + +)); export default EditIcon; diff --git a/src/web/components/icon/enableicon.jsx b/src/web/components/icon/enableicon.jsx index caca9ef298..1007d88018 100644 --- a/src/web/components/icon/enableicon.jsx +++ b/src/web/components/icon/enableicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/enable.svg'; +import {Power as Icon} from 'lucide-react'; -const EnableIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const EnableIcon = withSvgIcon()(props => ( + +)); export default EnableIcon; diff --git a/src/web/components/icon/exporticon.jsx b/src/web/components/icon/exporticon.jsx index 00ac016660..ae7a4e892a 100644 --- a/src/web/components/icon/exporticon.jsx +++ b/src/web/components/icon/exporticon.jsx @@ -3,7 +3,6 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ - import React from 'react'; import _ from 'gmp/locale'; @@ -14,9 +13,13 @@ import SelectionType from 'web/utils/selectiontype'; import withSvgIcon from './withSvgIcon'; -import Icon from './svg/export.svg'; +import {FileOutput as Icon} from 'lucide-react'; + +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; -const ExportSvgIcon = withSvgIcon()(Icon); +const ExportSvgIcon = withSvgIcon()(props => ( + +)); const ExportIcon = ({selectionType, title, ...other}) => { let download_title = title; diff --git a/src/web/components/icon/feedicon.jsx b/src/web/components/icon/feedicon.jsx index 30cfcfa137..6004fd914d 100644 --- a/src/web/components/icon/feedicon.jsx +++ b/src/web/components/icon/feedicon.jsx @@ -5,9 +5,12 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/feed.svg'; +import {Rss as Icon} from 'lucide-react'; +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; -const FeedIcon = withSvgIcon()(Icon); +const FeedIcon = withSvgIcon()(props => ( + +)); export default FeedIcon; diff --git a/src/web/components/icon/filtericon.jsx b/src/web/components/icon/filtericon.jsx index 3c7726f548..551163e39e 100644 --- a/src/web/components/icon/filtericon.jsx +++ b/src/web/components/icon/filtericon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/filter.svg'; +import {Filter as Icon} from 'lucide-react'; -const FilterIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const FilterIcon = withSvgIcon()(props => ( + +)); export default FilterIcon; diff --git a/src/web/components/icon/firsticon.jsx b/src/web/components/icon/firsticon.jsx index b77a6e1aef..407763a95b 100644 --- a/src/web/components/icon/firsticon.jsx +++ b/src/web/components/icon/firsticon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/first.svg'; +import {ChevronFirst as Icon} from 'lucide-react'; -const FirstIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const FirstIcon = withSvgIcon()(props => ( + +)); export default FirstIcon; diff --git a/src/web/components/icon/foldicon.jsx b/src/web/components/icon/foldicon.jsx index f6459c568b..1895790b96 100644 --- a/src/web/components/icon/foldicon.jsx +++ b/src/web/components/icon/foldicon.jsx @@ -5,9 +5,12 @@ import withSvgIcon from './withSvgIcon'; -import FoldSvg from './svg/fold.svg'; +import {Folder as Icon} from 'lucide-react'; +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; -const FoldIcon = withSvgIcon()(FoldSvg); +const FoldIcon = withSvgIcon()(props => ( + +)); export default FoldIcon; diff --git a/src/web/components/icon/groupicon.jsx b/src/web/components/icon/groupicon.jsx index 4c932ac3bc..2175dad69e 100644 --- a/src/web/components/icon/groupicon.jsx +++ b/src/web/components/icon/groupicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/group.svg'; +import {Users as Icon} from 'lucide-react'; -const GroupIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const GroupIcon = withSvgIcon()(props => ( + +)); export default GroupIcon; diff --git a/src/web/components/icon/helpicon.jsx b/src/web/components/icon/helpicon.jsx index 175c48b13a..35bb0f68a0 100644 --- a/src/web/components/icon/helpicon.jsx +++ b/src/web/components/icon/helpicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/help.svg'; +import {HelpCircle as Icon} from 'lucide-react'; -const HelpIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const HelpIcon = withSvgIcon()(props => ( + +)); export default HelpIcon; diff --git a/src/web/components/icon/importicon.jsx b/src/web/components/icon/importicon.jsx index 5f35a6d6ae..58b330948b 100644 --- a/src/web/components/icon/importicon.jsx +++ b/src/web/components/icon/importicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/import.svg'; +import {FileInput as Icon} from 'lucide-react'; -const ImportIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const ImportIcon = withSvgIcon()(props => ( + +)); export default ImportIcon; diff --git a/src/web/components/icon/infoicon.jsx b/src/web/components/icon/infoicon.jsx index 6e4a310deb..c2c028604c 100644 --- a/src/web/components/icon/infoicon.jsx +++ b/src/web/components/icon/infoicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/info.svg'; +import {Info as Icon} from 'lucide-react'; -const InfoIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const InfoIcon = withSvgIcon()(props => ( + +)); export default InfoIcon; diff --git a/src/web/components/icon/keyicon.jsx b/src/web/components/icon/keyicon.jsx index 2d5c71ffac..3d9c64f965 100644 --- a/src/web/components/icon/keyicon.jsx +++ b/src/web/components/icon/keyicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/key.svg'; +import {Key as Icon} from 'lucide-react'; -const KeyIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const KeyIcon = withSvgIcon()(props => ( + +)); export default KeyIcon; diff --git a/src/web/components/icon/lasticon.jsx b/src/web/components/icon/lasticon.jsx index 3375e48e66..25f330ecbb 100644 --- a/src/web/components/icon/lasticon.jsx +++ b/src/web/components/icon/lasticon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/last.svg'; +import {ChevronLast as Icon} from 'lucide-react'; -const LastIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const LastIcon = withSvgIcon()(props => ( + +)); export default LastIcon; diff --git a/src/web/components/icon/licenseicon.jsx b/src/web/components/icon/licenseicon.jsx index f2f244a992..a875ab1063 100644 --- a/src/web/components/icon/licenseicon.jsx +++ b/src/web/components/icon/licenseicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/license.svg'; +import {FileBadge as Icon} from 'lucide-react'; -const LicenseIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const LicenseIcon = withSvgIcon()(props => ( + +)); export default LicenseIcon; diff --git a/src/web/components/icon/listsvgicon.jsx b/src/web/components/icon/listsvgicon.jsx index 18a93ddff4..6e39122797 100644 --- a/src/web/components/icon/listsvgicon.jsx +++ b/src/web/components/icon/listsvgicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/list.svg'; +import {List as Icon} from 'lucide-react'; -const ListSvgIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const ListSvgIcon = withSvgIcon()(props => ( + +)); export default ListSvgIcon; diff --git a/src/web/components/icon/logouticon.jsx b/src/web/components/icon/logouticon.jsx index 3de765e2b6..119b77dfca 100644 --- a/src/web/components/icon/logouticon.jsx +++ b/src/web/components/icon/logouticon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/logout.svg'; +import {LogOut as Icon} from 'lucide-react'; -const LogoutIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const LogoutIcon = withSvgIcon()(props => ( + +)); export default LogoutIcon; diff --git a/src/web/components/icon/mysettingsicon.jsx b/src/web/components/icon/mysettingsicon.jsx index 411bd2c056..7fab841e36 100644 --- a/src/web/components/icon/mysettingsicon.jsx +++ b/src/web/components/icon/mysettingsicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/my_setting.svg'; +import {Settings as Icon} from 'lucide-react'; -const MySettingsIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const MySettingsIcon = withSvgIcon()(props => ( + +)); export default MySettingsIcon; diff --git a/src/web/components/icon/nexticon.jsx b/src/web/components/icon/nexticon.jsx index 68da9455af..d4eb334c81 100644 --- a/src/web/components/icon/nexticon.jsx +++ b/src/web/components/icon/nexticon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/next.svg'; +import {ChevronRight as Icon} from 'lucide-react'; -const NextIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const NextIcon = withSvgIcon()(props => ( + +)); export default NextIcon; diff --git a/src/web/components/icon/performanceicon.jsx b/src/web/components/icon/performanceicon.jsx index bfd4e23655..20911c9169 100644 --- a/src/web/components/icon/performanceicon.jsx +++ b/src/web/components/icon/performanceicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/performance.svg'; +import {Gauge as Icon} from 'lucide-react'; -const PerformanceIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const PerformanceIcon = withSvgIcon()(props => ( + +)); export default PerformanceIcon; diff --git a/src/web/components/icon/permissionicon.jsx b/src/web/components/icon/permissionicon.jsx index cd14d4e23d..fb9b30be24 100644 --- a/src/web/components/icon/permissionicon.jsx +++ b/src/web/components/icon/permissionicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/permission.svg'; +import {UserCheck as Icon} from 'lucide-react'; -const PermissionIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const PermissionIcon = withSvgIcon()(props => ( + +)); export default PermissionIcon; diff --git a/src/web/components/icon/policyicon.jsx b/src/web/components/icon/policyicon.jsx index d11f3b8e08..a922daea7c 100644 --- a/src/web/components/icon/policyicon.jsx +++ b/src/web/components/icon/policyicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/policy.svg'; +import {FileCog as Icon} from 'lucide-react'; -const PolicyIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const PolicyIcon = withSvgIcon()(props => ( + +)); export default PolicyIcon; diff --git a/src/web/components/icon/previousicon.jsx b/src/web/components/icon/previousicon.jsx index ba9f42f233..43ebdcab82 100644 --- a/src/web/components/icon/previousicon.jsx +++ b/src/web/components/icon/previousicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/previous.svg'; +import {ChevronLeft as Icon} from 'lucide-react'; -const PreviousIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const PreviousIcon = withSvgIcon()(props => ( + +)); export default PreviousIcon; diff --git a/src/web/components/icon/refreshicon.jsx b/src/web/components/icon/refreshicon.jsx index 8bf433ebc1..707f3a65b1 100644 --- a/src/web/components/icon/refreshicon.jsx +++ b/src/web/components/icon/refreshicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/refresh.svg'; +import {RefreshCcw as Icon} from 'lucide-react'; -const RefreshIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const RefreshIcon = withSvgIcon()(props => ( + +)); export default RefreshIcon; diff --git a/src/web/components/icon/reseticon.jsx b/src/web/components/icon/reseticon.jsx index 8f69c2da4d..55b14a2b1f 100644 --- a/src/web/components/icon/reseticon.jsx +++ b/src/web/components/icon/reseticon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/reset.svg'; +import {RotateCcw as Icon} from 'lucide-react'; -const ResetIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const ResetIcon = withSvgIcon()(props => ( + +)); export default ResetIcon; diff --git a/src/web/components/icon/resumeicon.jsx b/src/web/components/icon/resumeicon.jsx index abafe653a4..238f09f72e 100644 --- a/src/web/components/icon/resumeicon.jsx +++ b/src/web/components/icon/resumeicon.jsx @@ -5,9 +5,12 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/resume.svg'; +import {StepForward as Icon} from 'lucide-react'; +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; -const ResumeIcon = withSvgIcon()(Icon); +const ResumeIcon = withSvgIcon()(props => ( + +)); export default ResumeIcon; diff --git a/src/web/components/icon/scheduleicon.jsx b/src/web/components/icon/scheduleicon.jsx index 5cfb98a09e..2562efec42 100644 --- a/src/web/components/icon/scheduleicon.jsx +++ b/src/web/components/icon/scheduleicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/schedule.svg'; +import {Clock3 as Icon} from 'lucide-react'; -const ScheduleIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const ScheduleIcon = withSvgIcon()(props => ( + +)); export default ScheduleIcon; diff --git a/src/web/components/icon/solutiontypesvgicon.jsx b/src/web/components/icon/solutiontypesvgicon.jsx index b2401b4fa1..15661096e7 100644 --- a/src/web/components/icon/solutiontypesvgicon.jsx +++ b/src/web/components/icon/solutiontypesvgicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/solution_type.svg'; +import {Puzzle as Icon} from 'lucide-react'; -const SolutionTypeSvgIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const SolutionTypeSvgIcon = withSvgIcon()(props => ( + +)); export default SolutionTypeSvgIcon; diff --git a/src/web/components/icon/starticon.jsx b/src/web/components/icon/starticon.jsx index 11c559d0ce..8b2efe52f6 100644 --- a/src/web/components/icon/starticon.jsx +++ b/src/web/components/icon/starticon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/start.svg'; +import {Play as Icon} from 'lucide-react'; -const StartIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const StartIcon = withSvgIcon()(props => ( + +)); export default StartIcon; diff --git a/src/web/components/icon/stopicon.jsx b/src/web/components/icon/stopicon.jsx index b7a625fb4e..a217f6b98c 100644 --- a/src/web/components/icon/stopicon.jsx +++ b/src/web/components/icon/stopicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/stop.svg'; +import {Square as Icon} from 'lucide-react'; -const StopIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const StopIcon = withSvgIcon()(props => ( + +)); export default StopIcon; diff --git a/src/web/components/icon/svg/alert.svg b/src/web/components/icon/svg/alert.svg deleted file mode 100644 index 5d8140e526..0000000000 --- a/src/web/components/icon/svg/alert.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/web/components/icon/svg/alterable.svg b/src/web/components/icon/svg/alterable.svg deleted file mode 100644 index eea9a354e3..0000000000 --- a/src/web/components/icon/svg/alterable.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/web/components/icon/svg/audit.svg b/src/web/components/icon/svg/audit.svg deleted file mode 100644 index c659a83057..0000000000 --- a/src/web/components/icon/svg/audit.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/web/components/icon/svg/credential.svg b/src/web/components/icon/svg/credential.svg deleted file mode 100644 index 586cd4fae1..0000000000 --- a/src/web/components/icon/svg/credential.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/dashboard.svg b/src/web/components/icon/svg/dashboard.svg deleted file mode 100644 index b5165db31b..0000000000 --- a/src/web/components/icon/svg/dashboard.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/delete.svg b/src/web/components/icon/svg/delete.svg deleted file mode 100644 index 04fcde2705..0000000000 --- a/src/web/components/icon/svg/delete.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/details.svg b/src/web/components/icon/svg/details.svg deleted file mode 100644 index 6bef741b4a..0000000000 --- a/src/web/components/icon/svg/details.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/disable.svg b/src/web/components/icon/svg/disable.svg deleted file mode 100644 index 85aa3eb721..0000000000 --- a/src/web/components/icon/svg/disable.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/download.svg b/src/web/components/icon/svg/download.svg deleted file mode 100644 index f393db003b..0000000000 --- a/src/web/components/icon/svg/download.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/web/components/icon/svg/edit.svg b/src/web/components/icon/svg/edit.svg deleted file mode 100644 index 77a94c981a..0000000000 --- a/src/web/components/icon/svg/edit.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/web/components/icon/svg/enable.svg b/src/web/components/icon/svg/enable.svg deleted file mode 100644 index 3b8ba8cb4b..0000000000 --- a/src/web/components/icon/svg/enable.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/feed.svg b/src/web/components/icon/svg/feed.svg deleted file mode 100644 index 5b9e5c8eab..0000000000 --- a/src/web/components/icon/svg/feed.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/filter.svg b/src/web/components/icon/svg/filter.svg deleted file mode 100644 index d30c76e254..0000000000 --- a/src/web/components/icon/svg/filter.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/first.svg b/src/web/components/icon/svg/first.svg deleted file mode 100644 index e41753b3dc..0000000000 --- a/src/web/components/icon/svg/first.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/fold.svg b/src/web/components/icon/svg/fold.svg deleted file mode 100644 index d01047fced..0000000000 --- a/src/web/components/icon/svg/fold.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/group.svg b/src/web/components/icon/svg/group.svg deleted file mode 100644 index 349096ed0e..0000000000 --- a/src/web/components/icon/svg/group.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/src/web/components/icon/svg/help.svg b/src/web/components/icon/svg/help.svg deleted file mode 100644 index 2f40525106..0000000000 --- a/src/web/components/icon/svg/help.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/import.svg b/src/web/components/icon/svg/import.svg deleted file mode 100644 index d76f88ae1d..0000000000 --- a/src/web/components/icon/svg/import.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/web/components/icon/svg/info.svg b/src/web/components/icon/svg/info.svg deleted file mode 100644 index 1a0f384a69..0000000000 --- a/src/web/components/icon/svg/info.svg +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - - diff --git a/src/web/components/icon/svg/key.svg b/src/web/components/icon/svg/key.svg deleted file mode 100644 index df3ad6d439..0000000000 --- a/src/web/components/icon/svg/key.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/last.svg b/src/web/components/icon/svg/last.svg deleted file mode 100644 index 114172a54c..0000000000 --- a/src/web/components/icon/svg/last.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/license.svg b/src/web/components/icon/svg/license.svg deleted file mode 100644 index 36db58de6d..0000000000 --- a/src/web/components/icon/svg/license.svg +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - - - - - - diff --git a/src/web/components/icon/svg/list.svg b/src/web/components/icon/svg/list.svg deleted file mode 100644 index 62a914a449..0000000000 --- a/src/web/components/icon/svg/list.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/web/components/icon/svg/logout.svg b/src/web/components/icon/svg/logout.svg deleted file mode 100644 index 41be0a9963..0000000000 --- a/src/web/components/icon/svg/logout.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - diff --git a/src/web/components/icon/svg/my_setting.svg b/src/web/components/icon/svg/my_setting.svg deleted file mode 100644 index 8edd16298c..0000000000 --- a/src/web/components/icon/svg/my_setting.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/new.svg b/src/web/components/icon/svg/new.svg index d14ad32650..befe49a2be 100644 --- a/src/web/components/icon/svg/new.svg +++ b/src/web/components/icon/svg/new.svg @@ -1,6 +1,7 @@ - - + + + diff --git a/src/web/components/icon/svg/new_note.svg b/src/web/components/icon/svg/new_note.svg index b71fea9912..7da70a592d 100644 --- a/src/web/components/icon/svg/new_note.svg +++ b/src/web/components/icon/svg/new_note.svg @@ -1,8 +1,7 @@ - - - - + + + diff --git a/src/web/components/icon/svg/new_override.svg b/src/web/components/icon/svg/new_override.svg index 4a744075f2..947f3b8eb3 100644 --- a/src/web/components/icon/svg/new_override.svg +++ b/src/web/components/icon/svg/new_override.svg @@ -1,8 +1,7 @@ - - - - + + + diff --git a/src/web/components/icon/svg/new_ticket.svg b/src/web/components/icon/svg/new_ticket.svg index 9ba8fbdd91..b6fb9ee552 100644 --- a/src/web/components/icon/svg/new_ticket.svg +++ b/src/web/components/icon/svg/new_ticket.svg @@ -1,4 +1,9 @@ - + + + + + + diff --git a/src/web/components/icon/svg/next.svg b/src/web/components/icon/svg/next.svg deleted file mode 100644 index c6302b1e10..0000000000 --- a/src/web/components/icon/svg/next.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/performance.svg b/src/web/components/icon/svg/performance.svg deleted file mode 100644 index d33153daf7..0000000000 --- a/src/web/components/icon/svg/performance.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/permission.svg b/src/web/components/icon/svg/permission.svg deleted file mode 100644 index 56d41256ae..0000000000 --- a/src/web/components/icon/svg/permission.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/src/web/components/icon/svg/policy.svg b/src/web/components/icon/svg/policy.svg deleted file mode 100644 index e128383109..0000000000 --- a/src/web/components/icon/svg/policy.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/web/components/icon/svg/previous.svg b/src/web/components/icon/svg/previous.svg deleted file mode 100644 index f5b9823f60..0000000000 --- a/src/web/components/icon/svg/previous.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/refresh.svg b/src/web/components/icon/svg/refresh.svg deleted file mode 100644 index 738557ee72..0000000000 --- a/src/web/components/icon/svg/refresh.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/reset.svg b/src/web/components/icon/svg/reset.svg deleted file mode 100644 index a72827c861..0000000000 --- a/src/web/components/icon/svg/reset.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/resume.svg b/src/web/components/icon/svg/resume.svg deleted file mode 100644 index 3872d46065..0000000000 --- a/src/web/components/icon/svg/resume.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/schedule.svg b/src/web/components/icon/svg/schedule.svg deleted file mode 100644 index e7a45c4e50..0000000000 --- a/src/web/components/icon/svg/schedule.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/solution_type.svg b/src/web/components/icon/svg/solution_type.svg deleted file mode 100644 index d3b995fe1b..0000000000 --- a/src/web/components/icon/svg/solution_type.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/start.svg b/src/web/components/icon/svg/start.svg deleted file mode 100644 index a8a06378b6..0000000000 --- a/src/web/components/icon/svg/start.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/stop.svg b/src/web/components/icon/svg/stop.svg deleted file mode 100644 index d8b1db1a87..0000000000 --- a/src/web/components/icon/svg/stop.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/tag.svg b/src/web/components/icon/svg/tag.svg deleted file mode 100644 index b834e1821b..0000000000 --- a/src/web/components/icon/svg/tag.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/web/components/icon/svg/tags.svg b/src/web/components/icon/svg/tags.svg deleted file mode 100644 index 3171187d7e..0000000000 --- a/src/web/components/icon/svg/tags.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/web/components/icon/svg/tlscertificate.svg b/src/web/components/icon/svg/tlscertificate.svg index 366b850a8c..85081b0bec 100644 --- a/src/web/components/icon/svg/tlscertificate.svg +++ b/src/web/components/icon/svg/tlscertificate.svg @@ -8,6 +8,7 @@ diff --git a/src/web/components/icon/svg/trashcan.svg b/src/web/components/icon/svg/trashcan.svg deleted file mode 100644 index cb4d5cb5dd..0000000000 --- a/src/web/components/icon/svg/trashcan.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/unfold.svg b/src/web/components/icon/svg/unfold.svg deleted file mode 100644 index ea2910f678..0000000000 --- a/src/web/components/icon/svg/unfold.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/upload.svg b/src/web/components/icon/svg/upload.svg deleted file mode 100644 index 2f685d1ffd..0000000000 --- a/src/web/components/icon/svg/upload.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svg/user.svg b/src/web/components/icon/svg/user.svg deleted file mode 100644 index a58eb5c66f..0000000000 --- a/src/web/components/icon/svg/user.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/src/web/components/icon/svg/verify.svg b/src/web/components/icon/svg/verify.svg deleted file mode 100644 index c4118252a0..0000000000 --- a/src/web/components/icon/svg/verify.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/web/components/icon/svg/verify_no.svg b/src/web/components/icon/svg/verify_no.svg deleted file mode 100644 index c529b7f4da..0000000000 --- a/src/web/components/icon/svg/verify_no.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - diff --git a/src/web/components/icon/svg/view_other.svg b/src/web/components/icon/svg/view_other.svg deleted file mode 100644 index 2fa61cd9ae..0000000000 --- a/src/web/components/icon/svg/view_other.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/web/components/icon/svgicon.jsx b/src/web/components/icon/svgicon.jsx index 2dd193ad8b..d494c41272 100644 --- a/src/web/components/icon/svgicon.jsx +++ b/src/web/components/icon/svgicon.jsx @@ -25,7 +25,8 @@ const Styled = styled.span` cursor: ${props => (props.onClick ? 'pointer' : undefined)}; width: ${props => props.$width}; height: ${props => props.$height}; - line-height: ${props => props.$lineHeight}; + color: ${props => (props.$active ? props.color : Theme.inputBorderGray)}; + @media print { & { ${props => (isDefined(props.onClick) ? {display: 'none'} : undefined)}; @@ -43,8 +44,13 @@ const Styled = styled.span` & svg path { display: ${props => (props.$isLoading ? 'none' : undefined)}; + } + // This CSS rule sets the fill color of the SVG path elements with the class 'gui_icon_class'. + // Local icons need the class 'gui_icon_class' to be styled correctly, while Lucide icons + // do not need this class, as they are styled by the Lucide library with the property 'color'. + & svg path.gui_icon_class { fill: ${props => - props.$active || props.$isLoading ? undefined : Theme.inputBorderGray}; + props.$active || props.$isLoading ? 'unset' : Theme.inputBorderGray}; } & * { height: inherit; @@ -71,13 +77,13 @@ export const useIsMountedRef = () => { // use useIsMountedRef() to track mounted status across renders export const useStateWithMountCheck = (...args) => { const isMountedRef = useIsMountedRef(); - const [state, nativeSetState] = useState(...args); + const [nativeState, setNativeState] = useState(...args); const setState = (...arg) => { if (isMountedRef.current) { - nativeSetState(...arg); + setNativeState(...arg); } }; - return [state, setState]; + return [nativeState, setState]; }; const SvgIcon = ({ @@ -90,6 +96,7 @@ const SvgIcon = ({ value, onClick, size, + color = Theme.black, ...other }) => { const [loading, setLoading] = useStateWithMountCheck(false); @@ -129,7 +136,7 @@ const SvgIcon = ({ $isLoading={loading} $height={height} $width={width} - $lineHeight={height} + color={color} onClick={ isDefined(onClick) && !disabled && !loading ? handleClick : undefined } @@ -140,6 +147,8 @@ const SvgIcon = ({ }; SvgIcon.propTypes = { + children: PropTypes.func.isRequired, + color: PropTypes.string.isRequired, active: PropTypes.bool, disabled: PropTypes.bool, loadingTitle: PropTypes.string, diff --git a/src/web/components/icon/tagicon.jsx b/src/web/components/icon/tagicon.jsx index 3c34f3df63..bdc135be88 100644 --- a/src/web/components/icon/tagicon.jsx +++ b/src/web/components/icon/tagicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/tag.svg'; +import {Tag as Icon} from 'lucide-react'; -const TagIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const TagIcon = withSvgIcon()(props => ( + +)); export default TagIcon; diff --git a/src/web/components/icon/tagssvgicon.jsx b/src/web/components/icon/tagssvgicon.jsx index 873c378055..694ff750c4 100644 --- a/src/web/components/icon/tagssvgicon.jsx +++ b/src/web/components/icon/tagssvgicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/tags.svg'; +import {Tags as Icon} from 'lucide-react'; -const TagsSvgIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const TagsSvgIcon = withSvgIcon()(props => ( + +)); export default TagsSvgIcon; diff --git a/src/web/components/icon/testing.jsx b/src/web/components/icon/testing.jsx index a0b9b125f6..9c7a12d9d0 100644 --- a/src/web/components/icon/testing.jsx +++ b/src/web/components/icon/testing.jsx @@ -3,7 +3,6 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ - import {test, expect, testing} from '@gsa/testing'; import {render, fireEvent, act} from 'web/utils/testing'; @@ -31,16 +30,18 @@ export const testIcon = Icon => { const {element} = render(); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: 'svg path', + modifier: 'svg path.gui_icon_class', }); + expect(element).toHaveStyleRule('color', Theme.inputBorderGray); }); test('should change appearance when inactive', () => { const {element} = render(); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: '& svg path', + modifier: 'svg path.gui_icon_class', }); + expect(element).toHaveStyleRule('color', Theme.inputBorderGray); }); test('should not call clickhandler when disabled', () => { diff --git a/src/web/components/icon/trashcanicon.jsx b/src/web/components/icon/trashcanicon.jsx index c7c69added..d00892eb03 100644 --- a/src/web/components/icon/trashcanicon.jsx +++ b/src/web/components/icon/trashcanicon.jsx @@ -5,9 +5,12 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/trashcan.svg'; +import {Trash2 as Icon} from 'lucide-react'; +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; -const TrashcanIcon = withSvgIcon()(Icon); +const TrashcanIcon = withSvgIcon()(props => ( + +)); export default TrashcanIcon; diff --git a/src/web/components/icon/unfoldicon.jsx b/src/web/components/icon/unfoldicon.jsx index e4dd5f3974..1eaa35ab3d 100644 --- a/src/web/components/icon/unfoldicon.jsx +++ b/src/web/components/icon/unfoldicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/unfold.svg'; +import {FolderOpen as Icon} from 'lucide-react'; -const UnfoldIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const UnfoldIcon = withSvgIcon()(props => ( + +)); export default UnfoldIcon; diff --git a/src/web/components/icon/uploadicon.jsx b/src/web/components/icon/uploadicon.jsx index 6ac84681fe..2ea84e69cd 100644 --- a/src/web/components/icon/uploadicon.jsx +++ b/src/web/components/icon/uploadicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/upload.svg'; +import {Upload as Icon} from 'lucide-react'; -const UploadIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const UploadIcon = withSvgIcon()(props => ( + +)); export default UploadIcon; diff --git a/src/web/components/icon/usericon.jsx b/src/web/components/icon/usericon.jsx index 004f8c8d52..c486b001f0 100644 --- a/src/web/components/icon/usericon.jsx +++ b/src/web/components/icon/usericon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/user.svg'; +import {User as Icon} from 'lucide-react'; -const UserIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const UserIcon = withSvgIcon()(props => ( + +)); export default UserIcon; diff --git a/src/web/components/icon/verifyicon.jsx b/src/web/components/icon/verifyicon.jsx index fb8b7b8a49..f39c91239a 100644 --- a/src/web/components/icon/verifyicon.jsx +++ b/src/web/components/icon/verifyicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/verify.svg'; +import {ShieldCheck as Icon} from 'lucide-react'; -const VerifyIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const VerifyIcon = withSvgIcon()(props => ( + +)); export default VerifyIcon; diff --git a/src/web/components/icon/verifynoicon.jsx b/src/web/components/icon/verifynoicon.jsx index 148a36b027..245177736b 100644 --- a/src/web/components/icon/verifynoicon.jsx +++ b/src/web/components/icon/verifynoicon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/verify_no.svg'; +import {ShieldX as Icon} from 'lucide-react'; -const VerifyNoIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const VerifyNoIcon = withSvgIcon()(props => ( + +)); export default VerifyNoIcon; diff --git a/src/web/components/icon/viewothericon.jsx b/src/web/components/icon/viewothericon.jsx index c913f53722..82bf62b026 100644 --- a/src/web/components/icon/viewothericon.jsx +++ b/src/web/components/icon/viewothericon.jsx @@ -5,9 +5,13 @@ import withSvgIcon from './withSvgIcon'; -import Icon from './svg/view_other.svg'; +import {Glasses as Icon} from 'lucide-react'; -const ViewOtherIcon = withSvgIcon()(Icon); +import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth'; + +const ViewOtherIcon = withSvgIcon()(props => ( + +)); export default ViewOtherIcon; diff --git a/src/web/components/menu/menu.jsx b/src/web/components/menu/menu.jsx index dd805eecfb..64b9d5d755 100644 --- a/src/web/components/menu/menu.jsx +++ b/src/web/components/menu/menu.jsx @@ -10,60 +10,42 @@ import {AppNavigation} from '@greenbone/opensight-ui-components'; import useTranslation from 'web/hooks/useTranslation'; import useCapabilities from 'web/hooks/useCapabilities'; import useGmp from 'web/hooks/useGmp'; +import {useRouteMatch} from 'react-router-dom'; -import TaskIcon from 'web/components/icon/taskicon'; import Link from 'web/components/link/link'; -import ReportIcon from 'web/components/icon/reporticon'; -import ResultIcon from 'web/components/icon/resulticon'; -import VulnerabilityIcon from 'web/components/icon/vulnerabilityicon'; -import NoteIcon from 'web/components/icon/noteicon'; -import OverrideIcon from 'web/components/icon/overrideicon'; -import HostIcon from 'web/components/icon/hosticon'; -import OperatingSystemIcon from 'web/components/icon/ossvgicon'; -import TlsCertificateIcon from 'web/components/icon/tlscertificateicon'; -import TicketIcon from 'web/components/icon/ticketicon'; -import PolicyIcon from 'web/components/icon/policyicon'; -import AuditIcon from 'web/components/icon/auditicon'; -import NvtIcon from 'web/components/icon/nvticon'; -import CveIcon from 'web/components/icon/cveicon'; -import CpeIcon from 'web/components/icon/cpelogoicon'; -import CertBundAdvIcon from 'web/components/icon/certbundadvicon'; -import DfnCertAdvIcon from 'web/components/icon/dfncertadvicon'; -import TargetIcon from 'web/components/icon/targeticon'; -import PortListIcon from 'web/components/icon/portlisticon'; -import CvssIcon from 'web/components/icon/cvssicon'; -import CredentialIcon from 'web/components/icon/credentialicon'; -import ScanConfigIcon from 'web/components/icon/scanconfigicon'; -import AlertIcon from 'web/components/icon/alerticon'; -import ScheduleIcon from 'web/components/icon/scheduleicon'; -import ReportFormatIcon from 'web/components/icon/reportformaticon'; -import ScannerIcon from 'web/components/icon/scannericon'; -import FilterIcon from 'web/components/icon/filtericon'; -import TagsSvgIcon from 'web/components/icon/tagssvgicon'; -import UserIcon from 'web/components/icon/usericon'; -import GroupIcon from 'web/components/icon/groupicon'; -import RoleIcon from 'web/components/icon/roleicon'; -import PermissionIcon from 'web/components/icon/permissionicon'; -import PerformanceIcon from 'web/components/icon/performanceicon'; -import TrashcanIcon from 'web/components/icon/trashcanicon'; -import FeedIcon from 'web/components/icon/feedicon'; -import LdapIcon from 'web/components/icon/ldapicon'; -import RadiusIcon from 'web/components/icon/radiusicon'; +import { + BarChart3, + Server, + ShieldCheck, + View, + Wrench, + SlidersHorizontal, + FileCheck, + CircleHelp, +} from 'lucide-react'; const Menu = () => { const [_] = useTranslation(); const capabilities = useCapabilities(); const gmp = useGmp(); - const mayOpScans = [ + function checkCapabilities(capabilitiesList) { + return capabilitiesList.reduce( + (sum, cur) => sum || capabilities.mayAccess(cur), + false, + ); + } + + const mayOpScans = checkCapabilities([ 'tasks', 'reports', 'results', 'vulns', 'overrides', 'notes', - ].reduce((sum, cur) => sum || capabilities.mayAccess(cur), false); - const mayOpConfiguration = [ + ]); + + const mayOpConfiguration = checkCapabilities([ 'targets', 'port_lists', 'credentials', @@ -75,278 +57,320 @@ const Menu = () => { 'scanners', 'filters', 'tags', - ].reduce((sum, cur) => sum || capabilities.mayAccess(cur), false); - const mayOpResilience = ['tickets', 'policies', 'audits'].reduce( - (sum, cur) => sum || capabilities.mayAccess(cur), - false, - ); - const mayOpAssets = ['assets', 'tls_certificates'].reduce( - (sum, cur) => sum || capabilities.mayAccess(cur), - false, - ); + ]); - const menuPoints = [ - [ + const mayOpResilience = checkCapabilities(['tickets', 'policies', 'audits']); + + const mayOpAssets = checkCapabilities(['assets', 'tls_certificates']); + + const useIsActive = path => Boolean(useRouteMatch(path)); + + const isUserActive = useIsActive('/users'); + const isGroupsActive = useIsActive('/groups'); + const isRolesActive = useIsActive('/roles'); + const isPermissionsActive = useIsActive('/permissions'); + const isPerformanceActive = useIsActive('/performance'); + const isTrashcanActive = useIsActive('/trashcan'); + const isFeedStatusActive = useIsActive('/feedstatus'); + const isLdapActive = useIsActive('/ldap'); + const isRadiusActive = useIsActive('/radius'); + + const isCvssCalculatorActive = useIsActive('/cvsscalculator'); + const isAboutActive = useIsActive('/about'); + + const subNavConfigs = { + scans: [ { - icon: () => {}, - label: _('Dashboards'), - to: '/', + label: 'Tasks', + to: '/tasks', + activeCondition: useIsActive('/tasks'), + }, + { + label: 'Reports', + to: '/reports', + activeCondition: useIsActive('/reports'), + }, + { + label: 'Results', + to: '/results', + activeCondition: useIsActive('/results'), + }, + { + label: 'Vulnerabilities', + to: '/vulnerabilities', + activeCondition: useIsActive('/vulnerabilities'), + }, + { + label: 'Notes', + to: '/notes', + activeCondition: useIsActive('/notes'), + }, + { + label: 'Overrides', + to: '/overrides', + activeCondition: useIsActive('/overrides'), }, ], - [ - mayOpScans && { - icon: () => {}, - label: _('Scans'), - key: 'scans', - subNav: [ - capabilities.mayAccess('tasks') && { - icon: TaskIcon, - label: _('Tasks'), - to: '/tasks', - }, - capabilities.mayAccess('reports') && { - icon: ReportIcon, - label: _('Reports'), - to: '/reports', - }, - capabilities.mayAccess('results') && { - icon: ResultIcon, - label: _('Results'), - to: '/results', - }, - capabilities.mayAccess('vulns') && { - icon: VulnerabilityIcon, - label: _('Vulnerabilities'), - to: '/vulnerabilities', - }, - capabilities.mayAccess('notes') && { - icon: NoteIcon, - label: _('Notes'), - to: '/notes', - }, - capabilities.mayAccess('overrides') && { - icon: OverrideIcon, - label: _('Overrides'), - to: '/overrides', - }, - ].filter(Boolean), + assets: [ + { + label: 'Hosts', + to: '/hosts', + activeCondition: useIsActive('/hosts'), }, - mayOpAssets && { - icon: () => {}, - label: _('Assets'), - key: 'assets', - subNav: [ - capabilities.mayAccess('assets') && { - icon: HostIcon, - label: _('Hosts'), - to: '/hosts', - }, - capabilities.mayAccess('assets') && { - icon: OperatingSystemIcon, - label: _('Operating Systems'), - to: '/operatingsystems', - }, - capabilities.mayAccess('tls_certificates') && { - icon: TlsCertificateIcon, - label: _('TLS Certificates'), - to: '/tlscertificates', - }, - ].filter(Boolean), + { + label: 'Operating Systems', + to: '/operatingsystems', + activeCondition: useIsActive('/operatingsystems'), }, - mayOpResilience && { - icon: () => {}, - label: _('Resilience'), - key: 'resilience', - subNav: [ - capabilities.mayAccess('tickets') && { - icon: TicketIcon, - label: _('Remediation Tickets'), - to: '/tickets', - }, - capabilities.mayAccess('policies') && { - icon: PolicyIcon, - label: _('Compliance Policies'), - to: '/policies', - }, - capabilities.mayAccess('audits') && { - icon: AuditIcon, - label: _('Compliance Audits'), - to: '/audits', - }, - ].filter(Boolean), + { + label: 'TLS Certificates', + to: '/tlscertificates', + activeCondition: useIsActive('/tlscertificates'), }, - capabilities.mayAccess('info') && { - icon: () => {}, - label: _('SecInfo'), - key: 'secinfo', - subNav: [ - { - icon: NvtIcon, - label: _('NVTs'), - to: '/nvts', - }, - { - icon: CveIcon, - label: _('CVEs'), - to: '/cves', - }, - { - icon: CpeIcon, - label: _('CPEs'), - to: '/cpes', - }, - { - icon: CertBundAdvIcon, - label: _('CERT-Bund Advisories'), - to: '/certbunds', - }, - { - icon: DfnCertAdvIcon, - label: _('DFN-CERT Advisories'), - to: '/dfncerts', - }, - ], + ], + resilience: [ + { + label: 'Remediation Tickets', + to: '/tickets', + activeCondition: useIsActive('/tickets'), }, - mayOpConfiguration && { - icon: () => {}, - label: _('Configuration'), - key: 'configuration', - subNav: [ - capabilities.mayAccess('targets') && { - icon: TargetIcon, - label: _('Targets'), - to: '/targets', - }, - capabilities.mayAccess('port_lists') && { - icon: PortListIcon, - label: _('Port Lists'), - to: '/portlists', - }, - capabilities.mayAccess('credentials') && { - icon: CredentialIcon, - label: _('Credentials'), - to: '/credentials', - }, - capabilities.mayAccess('configs') && { - icon: ScanConfigIcon, - label: _('Scan Configs'), - to: '/scanconfigs', - }, - capabilities.mayAccess('alerts') && { - icon: AlertIcon, - label: _('Alerts'), - to: '/alerts', - }, - capabilities.mayAccess('schedules') && { - icon: ScheduleIcon, - label: _('Schedules'), - to: '/schedules', - }, - capabilities.mayAccess('report_configs') && { - icon: ReportFormatIcon, - label: _('Report Configs'), - to: '/reportconfigs', - }, - capabilities.mayAccess('report_formats') && { - icon: ReportFormatIcon, - label: _('Report Formats'), - to: '/reportformats', - }, - capabilities.mayAccess('scanners') && { - icon: ScannerIcon, - label: _('Scanners'), - to: '/scanners', - }, - capabilities.mayAccess('filters') && { - icon: FilterIcon, - label: _('Filters'), - to: '/filters', - }, - capabilities.mayAccess('tags') && { - icon: TagsSvgIcon, - label: _('Tags'), - to: '/tags', - }, - ].filter(Boolean), + { + label: 'Compliance Policies', + to: '/policies', + activeCondition: useIsActive('/policies'), + }, + { + label: 'Compliance Audits', + to: '/audits', + activeCondition: useIsActive('/audits'), + }, + ], + secInfo: [ + { + label: 'NVTs', + to: '/nvts', + activeCondition: useIsActive('/nvts'), + }, + { + label: 'CVEs', + to: '/cves', + activeCondition: useIsActive('/cves'), + }, + { + label: 'CPEs', + to: '/cpes', + activeCondition: useIsActive('/cpes'), + }, + { + label: 'CERT-Bund Advisories', + to: '/certbunds', + activeCondition: useIsActive('/certbunds'), + }, + { + label: 'DFN-CERT Advisories', + to: '/dfncerts', + activeCondition: useIsActive('/dfncerts'), + }, + ], + configuration: [ + { + label: 'Targets', + to: '/targets', + activeCondition: useIsActive('/targets'), + }, + { + label: 'Port Lists', + to: '/portlists', + activeCondition: useIsActive('/portlists'), }, { - icon: () => {}, + label: 'Credentials', + to: '/credentials', + activeCondition: useIsActive('/credentials'), + }, + { + label: 'Scan Configs', + to: '/scanconfigs', + activeCondition: useIsActive('/scanconfigs'), + }, + { + label: 'Alerts', + to: '/alerts', + activeCondition: useIsActive('/alerts'), + }, + { + label: 'Schedules', + to: '/schedules', + activeCondition: useIsActive('/schedules'), + }, + { + label: 'Report Configs', + to: '/reportconfigs', + activeCondition: useIsActive('/reportconfigs'), + }, + { + label: 'Report Formats', + to: '/reportformats', + activeCondition: useIsActive('/reportformats'), + }, + { + label: 'Scanners', + to: '/scanners', + activeCondition: useIsActive('/scanners'), + }, + { + label: 'Filters', + to: '/filters', + activeCondition: useIsActive('/filters'), + }, + { + label: 'Tags', + to: '/tags', + activeCondition: useIsActive('/tags'), + }, + ], + }; + + const createMenuItemWithSubNav = (label, key, icon, config) => ({ + label: _(label), + key: key, + icon: icon, + subNav: config + .map(({label, to, activeCondition}) => ({ + label: _(label), + to: to, + active: activeCondition, + })) + .filter(Boolean), + }); + + const menuPoints = [ + [ + { + label: _('Dashboards'), + to: '/', + active: useRouteMatch({ + path: '/', + exact: true, + }), + icon: BarChart3, + }, + ], + [ + mayOpScans && + createMenuItemWithSubNav( + 'Scans', + 'scans', + ShieldCheck, + subNavConfigs.scans, + ), + mayOpAssets && + createMenuItemWithSubNav( + 'Assets', + 'assets', + Server, + subNavConfigs.assets, + ), + mayOpResilience && + createMenuItemWithSubNav( + 'Resilience', + 'resilience', + FileCheck, + subNavConfigs.resilience, + ), + capabilities.mayAccess('info') && + createMenuItemWithSubNav( + 'Security Information', + 'secInfo', + View, + subNavConfigs.secInfo, + ), + mayOpConfiguration && + createMenuItemWithSubNav( + 'Configuration', + 'configuration', + Wrench, + subNavConfigs.configuration, + ), + { label: _('Administration'), key: 'administration', + icon: SlidersHorizontal, subNav: [ capabilities.mayAccess('users') && { - icon: UserIcon, label: _('Users'), to: '/users', + active: isUserActive, }, capabilities.mayAccess('groups') && { - icon: GroupIcon, label: _('Groups'), to: '/groups', + active: isGroupsActive, }, capabilities.mayAccess('roles') && { - icon: RoleIcon, label: _('Roles'), to: '/roles', + active: isRolesActive, }, capabilities.mayAccess('permissions') && { - icon: PermissionIcon, label: _('Permissions'), to: '/permissions', + active: isPermissionsActive, }, capabilities.mayAccess('system_reports') && { - icon: PerformanceIcon, label: _('Performance'), to: '/performance', + active: isPerformanceActive, }, { - icon: TrashcanIcon, label: _('Trashcan'), to: '/trashcan', + active: isTrashcanActive, }, capabilities.mayAccess('feeds') && { - icon: FeedIcon, label: _('Feed Status'), to: '/feedstatus', + active: isFeedStatusActive, }, capabilities.mayOp('describe_auth') && capabilities.mayOp('modify_auth') && { - icon: LdapIcon, label: _('LDAP'), to: '/ldap', + active: isLdapActive, }, capabilities.mayOp('describe_auth') && capabilities.mayOp('modify_auth') && { - icon: RadiusIcon, label: _('RADIUS'), to: '/radius', + active: isRadiusActive, }, ].filter(Boolean), }, { - icon: () => {}, label: _('Help'), key: 'help', + icon: CircleHelp, subNav: [ { label: _('User Manual'), to: 'https://docs.greenbone.net/GSM-Manual/gos-22.04/en/', + isExternal: true, }, { - icon: CvssIcon, label: _('CVSS Calculator'), to: '/cvsscalculator', + active: isCvssCalculatorActive, }, { label: _('About'), to: '/about', + active: isAboutActive, }, ], }, ].filter(Boolean), [ gmp.settings.enableAssetManagement && { - icon: () => {}, label: _('Asset'), to: '/asset-management', isExternal: true, diff --git a/src/web/components/sessionTimer/SessionTimer.jsx b/src/web/components/sessionTimer/SessionTimer.jsx index c61a607a35..7e70c851fe 100644 --- a/src/web/components/sessionTimer/SessionTimer.jsx +++ b/src/web/components/sessionTimer/SessionTimer.jsx @@ -7,10 +7,11 @@ import {useEffect, useState} from 'react'; import useUserSessionTimeout from 'web/hooks/useUserSessionTimeout'; import date from 'gmp/models/date'; -import {RefreshCcw} from 'lucide-react'; +import RefreshIcon from 'web/components/icon/refreshicon'; import Divider from 'web/components/layout/divider'; import {ActionIcon} from '@mantine/core'; import useTranslation from 'web/hooks/useTranslation'; +import Theme from 'web/utils/theme'; const SessionTimer = () => { const [sessionTimeout, renewSession] = useUserSessionTimeout(); @@ -50,7 +51,7 @@ const SessionTimer = () => { color="neutral.0" title={_('Renew session timeout')} > - + ); diff --git a/src/web/entity/icon/__tests__/cloneicon.jsx b/src/web/entity/icon/__tests__/cloneicon.jsx index ffd024d69a..3508561a2d 100644 --- a/src/web/entity/icon/__tests__/cloneicon.jsx +++ b/src/web/entity/icon/__tests__/cloneicon.jsx @@ -35,8 +35,10 @@ describe('Entity CloneIcon component tests', () => { expect(clickHandler).toHaveBeenCalled(); expect(element).not.toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); + + expect(element).not.toHaveStyleRule('color', Theme.inputBorderGray); }); test('should deactivate if wrong command level permissions are given', () => { @@ -57,8 +59,9 @@ describe('Entity CloneIcon component tests', () => { fireEvent.click(element); expect(clickHandler).not.toHaveBeenCalled(); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); + expect(element).toHaveStyleRule('color', Theme.inputBorderGray); }); test('should deactivate if wrong resource level permissions are given', () => { @@ -80,7 +83,7 @@ describe('Entity CloneIcon component tests', () => { expect(clickHandler).not.toHaveBeenCalled(); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); }); }); diff --git a/src/web/entity/icon/__tests__/createicon.jsx b/src/web/entity/icon/__tests__/createicon.jsx index fa4c130318..374db21b86 100644 --- a/src/web/entity/icon/__tests__/createicon.jsx +++ b/src/web/entity/icon/__tests__/createicon.jsx @@ -33,8 +33,9 @@ describe('Entity CreateIcon component tests', () => { expect(clickHandler).toHaveBeenCalled(); expect(element).not.toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); + expect(element).not.toHaveStyleRule('color', Theme.inputBorderGray); }); test('should not be rendered if wrong command level permissions are given', () => { diff --git a/src/web/entity/icon/__tests__/deleteicon.jsx b/src/web/entity/icon/__tests__/deleteicon.jsx index d3b86f359e..c016382b53 100644 --- a/src/web/entity/icon/__tests__/deleteicon.jsx +++ b/src/web/entity/icon/__tests__/deleteicon.jsx @@ -36,8 +36,9 @@ describe('Entity DeleteIcon component tests', () => { expect(clickHandler).toHaveBeenCalled(); expect(element).not.toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); + expect(element).not.toHaveStyleRule('color', Theme.inputBorderGray); }); test('should deactivate if wrong command level permissions are given', () => { @@ -59,8 +60,9 @@ describe('Entity DeleteIcon component tests', () => { fireEvent.click(element); expect(clickHandler).not.toHaveBeenCalled(); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); + expect(element).toHaveStyleRule('color', Theme.inputBorderGray); }); test('should deactivate if wrong resource level permissions are given', () => { @@ -83,8 +85,9 @@ describe('Entity DeleteIcon component tests', () => { expect(clickHandler).not.toHaveBeenCalled(); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); + expect(element).toHaveStyleRule('color', Theme.inputBorderGray); }); }); diff --git a/src/web/entity/icon/__tests__/editicon.jsx b/src/web/entity/icon/__tests__/editicon.jsx index 0a27496e70..0387d228b3 100644 --- a/src/web/entity/icon/__tests__/editicon.jsx +++ b/src/web/entity/icon/__tests__/editicon.jsx @@ -35,8 +35,9 @@ describe('Entity EditIcon component tests', () => { expect(clickHandler).toHaveBeenCalled(); expect(element).not.toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); + expect(element).not.toHaveStyleRule('color', Theme.inputBorderGray); }); test('should deactivate if wrong command level permissions are given', () => { @@ -57,8 +58,9 @@ describe('Entity EditIcon component tests', () => { fireEvent.click(element); expect(clickHandler).not.toHaveBeenCalled(); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); + expect(element).toHaveStyleRule('color', Theme.inputBorderGray); }); test('should deactivate if wrong resource level permissions are given', () => { @@ -80,8 +82,9 @@ describe('Entity EditIcon component tests', () => { expect(clickHandler).not.toHaveBeenCalled(); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); + expect(element).toHaveStyleRule('color', Theme.inputBorderGray); }); test('should deactivate if set to disabled', () => { @@ -103,7 +106,8 @@ describe('Entity EditIcon component tests', () => { expect(clickHandler).not.toHaveBeenCalled(); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); + expect(element).toHaveStyleRule('color', Theme.inputBorderGray); }); }); diff --git a/src/web/entity/icon/__tests__/trashicon.jsx b/src/web/entity/icon/__tests__/trashicon.jsx index ef136b5539..69df944735 100644 --- a/src/web/entity/icon/__tests__/trashicon.jsx +++ b/src/web/entity/icon/__tests__/trashicon.jsx @@ -36,8 +36,9 @@ describe('Entity TrashIcon component tests', () => { expect(clickHandler).toHaveBeenCalled(); expect(element).not.toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); + expect(element).not.toHaveStyleRule('color', Theme.inputBorderGray); }); test('should deactivate if wrong command level permissions are given', () => { @@ -59,8 +60,9 @@ describe('Entity TrashIcon component tests', () => { fireEvent.click(element); expect(clickHandler).not.toHaveBeenCalled(); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); + expect(element).toHaveStyleRule('color', Theme.inputBorderGray); }); test('should deactivate if wrong resource level permissions are given', () => { @@ -83,7 +85,8 @@ describe('Entity TrashIcon component tests', () => { expect(clickHandler).not.toHaveBeenCalled(); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); + expect(element).toHaveStyleRule('color', Theme.inputBorderGray); }); }); diff --git a/src/web/entity/icon/__tests__/verifyicon.jsx b/src/web/entity/icon/__tests__/verifyicon.jsx index b17248daad..e6c28f43f2 100644 --- a/src/web/entity/icon/__tests__/verifyicon.jsx +++ b/src/web/entity/icon/__tests__/verifyicon.jsx @@ -30,8 +30,10 @@ describe('Entity VerifyIcon component tests', () => { ); expect(element).not.toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); + expect(element).not.toHaveStyleRule('color', Theme.inputBorderGray); + expect(entity.userCapabilities.mayOp('verify_report_format')).toEqual(true); fireEvent.click(element); @@ -57,8 +59,10 @@ describe('Entity VerifyIcon component tests', () => { ); expect(element).not.toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); + expect(element).not.toHaveStyleRule('color', Theme.inputBorderGray); + expect(entity.userCapabilities.mayOp('verify_report_format')).toEqual(true); fireEvent.click(element); @@ -84,8 +88,9 @@ describe('Entity VerifyIcon component tests', () => { fireEvent.click(element); expect(clickHandler).not.toHaveBeenCalled(); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); + expect(element).toHaveStyleRule('color', Theme.inputBorderGray); }); test('should deactivate if wrong resource level permissions are given', () => { @@ -109,7 +114,8 @@ describe('Entity VerifyIcon component tests', () => { expect(clickHandler).not.toHaveBeenCalled(); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); + expect(element).toHaveStyleRule('color', Theme.inputBorderGray); }); }); diff --git a/src/web/pages/audits/__tests__/actions.jsx b/src/web/pages/audits/__tests__/actions.jsx index 97cfa1ede5..d3d4a8a37e 100644 --- a/src/web/pages/audits/__tests__/actions.jsx +++ b/src/web/pages/audits/__tests__/actions.jsx @@ -561,7 +561,7 @@ describe('Audit Actions tests', () => { expect(handleReportDownload).not.toHaveBeenCalled(); expect(icons[6]).toHaveAttribute('title', 'Report download not available'); expect(icons[6]).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); }); diff --git a/src/web/pages/tasks/icons/__tests__/TaskIconsWithSync.jsx b/src/web/pages/tasks/icons/__tests__/TaskIconsWithSync.jsx index f93f897cd5..d6866c6d37 100644 --- a/src/web/pages/tasks/icons/__tests__/TaskIconsWithSync.jsx +++ b/src/web/pages/tasks/icons/__tests__/TaskIconsWithSync.jsx @@ -69,13 +69,9 @@ describe('TaskIconWithSync component tests', () => { expect(element).toHaveAttribute('title', expectedTitle); if (expectedFill) { - expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, - }); + expect(element).toHaveStyleRule('color', Theme.inputBorderGray); } else { - expect(element).not.toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, - }); + expect(element).toHaveStyleRule('color', Theme.black); } }, ); diff --git a/src/web/pages/tasks/icons/__tests__/resumeicon.jsx b/src/web/pages/tasks/icons/__tests__/resumeicon.jsx index ca68849f21..3669656026 100644 --- a/src/web/pages/tasks/icons/__tests__/resumeicon.jsx +++ b/src/web/pages/tasks/icons/__tests__/resumeicon.jsx @@ -38,7 +38,7 @@ describe('Task ResumeIcon component tests', () => { expect(clickHandler).toHaveBeenCalled(); expect(element).toHaveAttribute('title', 'Resume'); expect(element).not.toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); }); @@ -66,7 +66,7 @@ describe('Task ResumeIcon component tests', () => { 'Permission to resume task denied', ); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); }); @@ -91,7 +91,7 @@ describe('Task ResumeIcon component tests', () => { expect(clickHandler).not.toHaveBeenCalled(); expect(element).toHaveAttribute('title', 'Task is not stopped'); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); }); @@ -120,8 +120,9 @@ describe('Task ResumeIcon component tests', () => { 'Permission to resume audit denied', ); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); + expect(element).toHaveStyleRule('color', Theme.inputBorderGray); }); test('should render in inactive state if task is scheduled', () => { @@ -149,8 +150,9 @@ describe('Task ResumeIcon component tests', () => { expect(clickHandler).not.toHaveBeenCalled(); expect(element).toHaveAttribute('title', 'Task is scheduled'); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); + expect(element).toHaveStyleRule('color', Theme.inputBorderGray); }); test('should render in inactive state if task is a container', () => { @@ -174,8 +176,9 @@ describe('Task ResumeIcon component tests', () => { expect(clickHandler).not.toHaveBeenCalled(); expect(element).toHaveAttribute('title', 'Task is a container'); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); + expect(element).toHaveStyleRule('color', Theme.inputBorderGray); }); test('should not be rendered if task is queued', () => { diff --git a/src/web/pages/tasks/icons/__tests__/starticon.jsx b/src/web/pages/tasks/icons/__tests__/starticon.jsx index 8ffcd99fcf..4a12bca149 100644 --- a/src/web/pages/tasks/icons/__tests__/starticon.jsx +++ b/src/web/pages/tasks/icons/__tests__/starticon.jsx @@ -39,7 +39,7 @@ describe('Task StartIcon component tests', () => { expect(clickHandler).toHaveBeenCalled(); expect(element).toHaveAttribute('title', 'Start'); expect(element).not.toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); }); @@ -64,7 +64,7 @@ describe('Task StartIcon component tests', () => { expect(clickHandler).not.toHaveBeenCalled(); expect(element).toHaveAttribute('title', 'Permission to start task denied'); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); }); @@ -93,7 +93,7 @@ describe('Task StartIcon component tests', () => { 'Permission to start audit denied', ); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); }); @@ -137,7 +137,7 @@ END:VCALENDAR 'Task cannot be started manually because the assigned schedule has a duration limit', ); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); }); @@ -162,7 +162,7 @@ END:VCALENDAR expect(clickHandler).not.toHaveBeenCalled(); expect(element).toHaveAttribute('title', 'Task is already active'); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); }); @@ -187,7 +187,7 @@ END:VCALENDAR expect(clickHandler).not.toHaveBeenCalled(); expect(element).toHaveAttribute('title', 'Task is already active'); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); }); diff --git a/src/web/pages/tasks/icons/__tests__/stopicon.jsx b/src/web/pages/tasks/icons/__tests__/stopicon.jsx index 35922cbf5f..40d9e83e59 100644 --- a/src/web/pages/tasks/icons/__tests__/stopicon.jsx +++ b/src/web/pages/tasks/icons/__tests__/stopicon.jsx @@ -38,7 +38,7 @@ describe('Task StopIcon component tests', () => { expect(clickHandler).toHaveBeenCalled(); expect(element).toHaveAttribute('title', 'Stop'); expect(element).not.toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); }); @@ -63,7 +63,7 @@ describe('Task StopIcon component tests', () => { expect(clickHandler).toHaveBeenCalled(); expect(element).toHaveAttribute('title', 'Stop'); expect(element).not.toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); }); @@ -87,7 +87,7 @@ describe('Task StopIcon component tests', () => { expect(clickHandler).not.toHaveBeenCalled(); expect(element).toHaveAttribute('title', 'Permission to stop task denied'); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); }); @@ -113,7 +113,7 @@ describe('Task StopIcon component tests', () => { expect(clickHandler).not.toHaveBeenCalled(); expect(element).toHaveAttribute('title', 'Permission to stop audit denied'); expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, { - modifier: `svg path`, + modifier: 'svg path.gui_icon_class', }); });