diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 7c544779de..7e24839fa0 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "@dnd-kit/core": "6.0.8", "@dnd-kit/modifiers": "6.0.1", - "@mtes-mct/monitor-ui": "9.4.0", + "@mtes-mct/monitor-ui": "10.0.0", "@reduxjs/toolkit": "1.9.6", "@sentry/browser": "7.55.2", "@sentry/react": "7.52.1", @@ -3698,9 +3698,9 @@ "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA==" }, "node_modules/@mtes-mct/monitor-ui": { - "version": "9.4.0", - "resolved": "https://registry.npmjs.org/@mtes-mct/monitor-ui/-/monitor-ui-9.4.0.tgz", - "integrity": "sha512-iBlfBf62DNiz8OtMgqzJfWmyG8zOvGNvw43OLPqIv2UNMIMSt1ndYJsrrSEUkpAZjt8kK3F/rm0ccvHxK5zerA==", + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/@mtes-mct/monitor-ui/-/monitor-ui-10.0.0.tgz", + "integrity": "sha512-fyms/glpQWOAmORC41cJ2eDo6XmLnvFV28k1Gi4UB4iP6yVsy1XXY50tNvFIp/1v3daJ9EHw1D6t4f9vGNA5gg==", "dependencies": { "@babel/runtime": "7.22.15", "@tanstack/react-table": "8.9.7", @@ -11991,9 +11991,9 @@ "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" }, "node_modules/fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", "hasInstallScript": true, "optional": true, "os": [ diff --git a/frontend/package.json b/frontend/package.json index 24dff2288e..a5a0336c1b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -31,7 +31,7 @@ "dependencies": { "@dnd-kit/core": "6.0.8", "@dnd-kit/modifiers": "6.0.1", - "@mtes-mct/monitor-ui": "9.4.0", + "@mtes-mct/monitor-ui": "10.0.0", "@reduxjs/toolkit": "1.9.6", "@sentry/browser": "7.55.2", "@sentry/react": "7.52.1", diff --git a/frontend/src/features/Backoffice/menu/Menu.tsx b/frontend/src/features/Backoffice/menu/Menu.tsx index 91cb5c7668..d1921db7b9 100644 --- a/frontend/src/features/Backoffice/menu/Menu.tsx +++ b/frontend/src/features/Backoffice/menu/Menu.tsx @@ -1,10 +1,10 @@ // TODO Remove temporary `as any` and `@ts-ignore` (fresh migration to TS). +import { THEME } from '@mtes-mct/monitor-ui' import { Link, useMatch } from 'react-router-dom' import styled from 'styled-components' import { COLORS } from '../../../constants/constants' -import { theme } from '../../../ui/theme' import { ReactComponent as LayersSVG } from '../../icons/Couches.svg' import { ReactComponent as FleetSVG } from '../../icons/Label_segment_de_flotte_white.svg' import { ReactComponent as ControlObjectivesSVG } from '../../icons/objectifs_controle.svg' @@ -19,7 +19,7 @@ export function Menu() { Backoffice { - const { - isLastVoyage, - isFirstVoyage, - tripNumber, - fishingActivities - } = useSelector(state => state.fishingActivities) +function LogbookMessages({ messageTypeFilter, navigation, showFishingActivitiesSummary }) { + const { fishingActivities, isFirstVoyage, isLastVoyage, tripNumber } = useSelector(state => state.fishingActivities) /** @type {LogbookMessage[]} logbookMessages */ const [logbookMessages, setLogbookMessages] = useState([]) @@ -89,27 +85,25 @@ const LogbookMessages = ({ showFishingActivitiesSummary, messageTypeFilter, navi setSelectedOptions(messageTypes) }, [messageTypeFilter]) - function inverseSort () { + function inverseSort() { const inversedSort = !ascendingSort const sortedFishingActivities = [...logbookMessages].sort((a, b) => { if (inversedSort) { return new Date(a.reportDateTime) - new Date(b.reportDateTime) - } else { - return new Date(b.reportDateTime) - new Date(a.reportDateTime) } + + return new Date(b.reportDateTime) - new Date(a.reportDateTime) }) setAscendingSort(inversedSort) setLogbookMessages(sortedFishingActivities) } - function downloadMessages () { + function downloadMessages() { const objectsToExports = logbookMessages .filter(logbookMessages => filterBySelectedType(logbookMessages)) - .map(position => { - return formatAsCSVColumns(position, downloadMessagesOptions) - }) + .map(position => formatAsCSVColumns(position, downloadMessagesOptions)) const date = new Date() csvExporter.options.filename = `export_ers_${tripNumber}_${getDate(date.toISOString())}` @@ -117,118 +111,105 @@ const LogbookMessages = ({ showFishingActivitiesSummary, messageTypeFilter, navi } const selectStyles = { + clearIndicator: base => ({ ...base, padding: 1, width: 18 }), container: (provided, state) => ({ ...provided, - padding: 0, height: 'fit-content', - zIndex: 4, - width: '-moz-available' + padding: 0, + width: '-moz-available', + zIndex: 4 }), - control: base => ({ ...base, minHeight: 26, fontSize: 13, borderRadius: 'unset', borderColor: COLORS.lightGray }), - option: base => ({ ...base, fontSize: 13 }), - menu: base => ({ ...base, margin: 0, padding: 0, maxHeight: 360 }), - menuList: base => ({ ...base, maxHeight: 360 }), - input: base => ({ padding: 0, margin: 0 }), - clearIndicator: base => ({ ...base, padding: 1, width: 18 }), + control: base => ({ ...base, borderColor: COLORS.lightGray, borderRadius: 'unset', fontSize: 13, minHeight: 26 }), dropdownIndicator: base => ({ ...base, padding: 1, width: 18 }), - valueContainer: base => ({ ...base, minWidth: 130, fontSize: 13, padding: '0px 2px' }), - multiValue: base => ({ ...base, fontSize: 13, borderRadius: 12, background: COLORS.gainsboro }), + input: base => ({ margin: 0, padding: 0 }), + menu: base => ({ ...base, margin: 0, maxHeight: 360, padding: 0 }), + menuList: base => ({ ...base, maxHeight: 360 }), + menuPortal: base => ({ ...base, zIndex: 9999 }), + multiValue: base => ({ ...base, background: COLORS.gainsboro, borderRadius: 12, fontSize: 13 }), multiValueLabel: base => ({ ...base, - paddingTop: 2, - paddingBottom: 1, background: COLORS.gainsboro, + borderRadius: 12, color: COLORS.slateGray, - borderRadius: 12 + paddingBottom: 1, + paddingTop: 2 }), multiValueRemove: base => ({ ...base, + '&:hover': { + backgroundColor: THEME.color.blueYonder25, + color: THEME.color.blueYonder + }, background: COLORS.gainsboro, - color: theme.color.slateGray, borderRadius: 12, - '&:hover': { - backgroundColor: theme.color.blueYonder[25], - color: theme.color.blueYonder[100] - } + color: THEME.color.slateGray }), + option: base => ({ ...base, fontSize: 13 }), placeholder: base => ({ ...base, fontSize: 13 }), singleValue: base => ({ ...base, fontSize: 13 }), - menuPortal: base => ({ ...base, zIndex: 9999 }) + valueContainer: base => ({ ...base, fontSize: 13, minWidth: 130, padding: '0px 2px' }) } - function filterBySelectedType (logbookMessage) { + function filterBySelectedType(logbookMessage) { if (selectedOptions?.length) { return selectedOptions.some(messageType => logbookMessage.messageType === messageType.value) - } else { - return true } + + return true } - return - showFishingActivitiesSummary()}/> showFishingActivitiesSummary()}>Revenir - au résumé - - - - - - - - - - - {logbookMessages?.length - ? logbookMessages - .filter(logbookMessage => filterBySelectedType(logbookMessage)) - .map((message, index) => { - return + + {tripNumber ? `Marée n°${tripNumber}` : '-'} + + - }) - : Aucun message reçu} - + + + + + + + + {logbookMessages?.length ? ( + logbookMessages + .filter(logbookMessage => filterBySelectedType(logbookMessage)) + .map((message, index) => ) + ) : ( + Aucun message reçu + )} + + ) } const CustomDatesShowedInfoWithMargin = styled.div` @@ -236,7 +217,7 @@ const CustomDatesShowedInfoWithMargin = styled.div` ` const PreviousTrip = styled(ArrowTripSVG)` - cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'}; + cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')}; vertical-align: sub; width: 14px; margin-right: 10px; @@ -246,7 +227,7 @@ const PreviousTrip = styled(ArrowTripSVG)` ` const NextTrip = styled(ArrowTripSVG)` - cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'}; + cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')}; vertical-align: sub; width: 14px; margin-left: 10px; @@ -255,7 +236,7 @@ const NextTrip = styled(ArrowTripSVG)` ` const LastTrip = styled(ArrowLastTripSVG)` - cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'}; + cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')}; vertical-align: sub; width: 14px; margin-left: 5px; @@ -285,7 +266,7 @@ const InverseDate = styled(SortSVG)` padding: 6px; margin-left: auto; cursor: pointer; - ${props => props.ascendingSort ? 'transform: rotate(180deg);' : null} + ${props => (props.ascendingSort ? 'transform: rotate(180deg);' : null)} ` const DownloadMessages = styled(DownloadMessagesSVG)` @@ -310,7 +291,7 @@ const Filters = styled.div` const Arrow = styled(ArrowSVG)` vertical-align: sub; transform: rotate(180deg); - margin-right: 5px + margin-right: 5px; ` const NoMessage = styled.div` diff --git a/frontend/src/features/MapButtons/AlertsMapButton.tsx b/frontend/src/features/MapButtons/AlertsMapButton.tsx index 4b34d23314..438ccde8e0 100644 --- a/frontend/src/features/MapButtons/AlertsMapButton.tsx +++ b/frontend/src/features/MapButtons/AlertsMapButton.tsx @@ -47,7 +47,7 @@ const AlertsButton = styled(MapButtonStyle)<{ }>` position: absolute; display: inline-block; - background: ${p => (p.$isActive ? p.theme.color.blueGray[100] : p.theme.color.charcoal)}; + background: ${p => (p.$isActive ? p.theme.color.blueGray : p.theme.color.charcoal)}; padding: 2px 2px 2px 2px; top: 162px; left: 10px; @@ -57,7 +57,7 @@ const AlertsButton = styled(MapButtonStyle)<{ :hover, :focus { - background: ${p => (p.$isActive ? p.theme.color.blueGray[100] : p.theme.color.charcoal)}; + background: ${p => (p.$isActive ? p.theme.color.blueGray : p.theme.color.charcoal)}; } ` diff --git a/frontend/src/features/MapButtons/BeaconMalfunctionsMapButton.tsx b/frontend/src/features/MapButtons/BeaconMalfunctionsMapButton.tsx index c052c37799..ab56c2b13f 100644 --- a/frontend/src/features/MapButtons/BeaconMalfunctionsMapButton.tsx +++ b/frontend/src/features/MapButtons/BeaconMalfunctionsMapButton.tsx @@ -47,7 +47,7 @@ const BeaconMalfunctionsButton = styled(MapButtonStyle)<{ }>` position: absolute; display: inline-block; - background: ${p => (p.$isActive ? p.theme.color.blueGray[100] : p.theme.color.charcoal)}; + background: ${p => (p.$isActive ? p.theme.color.blueGray : p.theme.color.charcoal)}; padding: 2px 2px 2px 2px; top: 204px; left: 10px; @@ -57,7 +57,7 @@ const BeaconMalfunctionsButton = styled(MapButtonStyle)<{ :hover, :focus { - background: ${p => (p.$isActive ? p.theme.color.blueGray[100] : p.theme.color.charcoal)}; + background: ${p => (p.$isActive ? p.theme.color.blueGray : p.theme.color.charcoal)}; } ` diff --git a/frontend/src/features/MapButtons/FavoriteVessels/index.tsx b/frontend/src/features/MapButtons/FavoriteVessels/index.tsx index eb61d1a548..2a21164d01 100644 --- a/frontend/src/features/MapButtons/FavoriteVessels/index.tsx +++ b/frontend/src/features/MapButtons/FavoriteVessels/index.tsx @@ -180,12 +180,12 @@ const FavoriteVesselsIcon = styled(MapButtonStyle)<{ width: 40px; border-radius: 2px; left: 10px; - background: ${p => (p.isOpen ? p.theme.color.blueGray[100] : p.theme.color.charcoal)}; + background: ${p => (p.isOpen ? p.theme.color.blueGray : p.theme.color.charcoal)}; transition: all 0.3s; :hover, :focus { - background: ${p => (p.isOpen ? p.theme.color.blueGray[100] : p.theme.color.charcoal)}; + background: ${p => (p.isOpen ? p.theme.color.blueGray : p.theme.color.charcoal)}; } ` diff --git a/frontend/src/features/MapButtons/LayersSidebar/AdministrativeZones/AdministrativeZone.tsx b/frontend/src/features/MapButtons/LayersSidebar/AdministrativeZones/AdministrativeZone.tsx index 352a17e7e5..de03074228 100644 --- a/frontend/src/features/MapButtons/LayersSidebar/AdministrativeZones/AdministrativeZone.tsx +++ b/frontend/src/features/MapButtons/LayersSidebar/AdministrativeZones/AdministrativeZone.tsx @@ -1,6 +1,6 @@ +import { THEME } from '@mtes-mct/monitor-ui' import styled from 'styled-components' -import { theme } from '../../../../ui/theme' import { HideIcon } from '../../../commonStyles/icons/HideIcon.style' import { ShowIcon } from '../../../commonStyles/icons/ShowIcon.style' @@ -54,6 +54,6 @@ const Row = styled.span<{ width: stretch; :hover { - background: ${theme.color.blueGray['25']}; + background: ${THEME.color.blueGray25}; } ` diff --git a/frontend/src/features/MapButtons/LayersSidebar/AdministrativeZones/AdministrativeZonesGroup.tsx b/frontend/src/features/MapButtons/LayersSidebar/AdministrativeZones/AdministrativeZonesGroup.tsx index 34dd8fc480..6afdee5f40 100644 --- a/frontend/src/features/MapButtons/LayersSidebar/AdministrativeZones/AdministrativeZonesGroup.tsx +++ b/frontend/src/features/MapButtons/LayersSidebar/AdministrativeZones/AdministrativeZonesGroup.tsx @@ -1,10 +1,10 @@ +import { THEME } from '@mtes-mct/monitor-ui' import { useState } from 'react' import styled from 'styled-components' import { AdministrativeZone } from './AdministrativeZone' import { COLORS } from '../../../../constants/constants' import { useMainAppSelector } from '../../../../hooks/useMainAppSelector' -import { theme } from '../../../../ui/theme' import { ChevronIcon } from '../../../commonStyles/icons/ChevronIcon.style' import type { CodeAndName, ShowableLayer } from '../../../../domain/entities/layers/types' @@ -80,7 +80,7 @@ const Zone = styled.span<{ ${p => (!p.isOpen ? null : `border-bottom: 1px solid ${COLORS.lightGray};`)} :hover { - background: ${theme.color.blueGray['25']}; + background: ${THEME.color.blueGray25}; } ` diff --git a/frontend/src/features/MapButtons/LayersSidebar/BaseMaps/BaseMap.tsx b/frontend/src/features/MapButtons/LayersSidebar/BaseMaps/BaseMap.tsx index 291143422b..4d54cd2e2c 100644 --- a/frontend/src/features/MapButtons/LayersSidebar/BaseMaps/BaseMap.tsx +++ b/frontend/src/features/MapButtons/LayersSidebar/BaseMaps/BaseMap.tsx @@ -32,6 +32,6 @@ const Row = styled.li` user-select: none; :hover { - background: ${p => p.theme.color.blueGray['25']}; + background: ${p => p.theme.color.blueGray25}; } ` diff --git a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/RegulatoryTopic.tsx b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/RegulatoryTopic.tsx index d53c851de0..b4e8c01e2d 100644 --- a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/RegulatoryTopic.tsx +++ b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/RegulatoryTopic.tsx @@ -251,7 +251,7 @@ const Zone = styled.span<{ ${p => (!p.$isOpen && p.$isLastItem ? null : `border-bottom: 1px solid ${p.theme.color.lightGray};`)} :hover { - background: ${p => p.theme.color.blueGray['25']}; + background: ${p => p.theme.color.blueGray25}; } ` diff --git a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/RegulatoryZone.tsx b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/RegulatoryZone.tsx index 631c26ec91..1603ab8f5b 100644 --- a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/RegulatoryZone.tsx +++ b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/RegulatoryZone.tsx @@ -18,7 +18,6 @@ import { showRegulatoryZoneMetadata } from '../../../../domain/use_cases/layer/r import zoomInLayer from '../../../../domain/use_cases/layer/zoomInLayer' import { useMainAppDispatch } from '../../../../hooks/useMainAppDispatch' import { useMainAppSelector } from '../../../../hooks/useMainAppSelector' -import { theme } from '../../../../ui/theme' import { CloseIcon } from '../../../commonStyles/icons/CloseIcon.style' import { EditIcon } from '../../../commonStyles/icons/EditIcon.style' import { HideIcon } from '../../../commonStyles/icons/HideIcon.style' @@ -248,7 +247,7 @@ const Zone = styled.span<{ ${p => (p.isLast ? `border-bottom: 1px solid ${p.theme.color.lightGray}; height: 27px;` : 'height: 28px;')} :hover { - background: ${theme.color.blueGray['25']}; + background: ${p => p.theme.color.blueGray25}; } ` diff --git a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/metadata/regulatoryReferences/RegulatoryReferencesDisplayed.tsx b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/metadata/regulatoryReferences/RegulatoryReferencesDisplayed.tsx index 4ed149eeec..b634bce35c 100644 --- a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/metadata/regulatoryReferences/RegulatoryReferencesDisplayed.tsx +++ b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/metadata/regulatoryReferences/RegulatoryReferencesDisplayed.tsx @@ -47,7 +47,7 @@ export const Link = styled.a` :visited, :hover, :active { - color: ${p => p.theme.color.blueGray[100]}; + color: ${p => p.theme.color.blueGray}; font-size: 13px; cursor: pointer; font-weight: 500; diff --git a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchInput.tsx b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchInput.tsx index fefd4aa021..dc30cd2d71 100644 --- a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchInput.tsx +++ b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchInput.tsx @@ -269,7 +269,7 @@ const AdvancedSearch = styled(IconButton)< advancedSearchIsOpen?: boolean } >` - background: ${p => (p.advancedSearchIsOpen ? p.theme.color.blueYonder['100'] : p.theme.color.charcoal)}; + background: ${p => (p.advancedSearchIsOpen ? p.theme.color.blueYonder : p.theme.color.charcoal)}; border: unset; display: inline-block; height: 40px; @@ -283,6 +283,6 @@ const AdvancedSearch = styled(IconButton)< :hover, :focus, :active { - background: ${p => (p.advancedSearchIsOpen ? p.theme.color.blueYonder['100'] : p.theme.color.charcoal)}; + background: ${p => (p.advancedSearchIsOpen ? p.theme.color.blueYonder : p.theme.color.charcoal)}; } ` diff --git a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultTopic.tsx b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultTopic.tsx index d302c6869c..c94f8f865b 100644 --- a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultTopic.tsx +++ b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultTopic.tsx @@ -188,7 +188,7 @@ const LayerTopic = styled.div` border-bottom: 1px solid ${p => p.theme.color.lightGray}; :hover { - background: ${p => p.theme.color.blueGray['25']}; + background: ${p => p.theme.color.blueGray25}; } .rs-checkbox-checker { diff --git a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultZone.tsx b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultZone.tsx index 64ff6f87ef..4bdc6f92fb 100644 --- a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultZone.tsx +++ b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultZone.tsx @@ -7,7 +7,6 @@ import { closeRegulatoryZoneMetadata } from '../../../../../domain/use_cases/lay import { showRegulatoryZoneMetadata } from '../../../../../domain/use_cases/layer/regulation/showRegulatoryZoneMetadata' import { useMainAppDispatch } from '../../../../../hooks/useMainAppDispatch' import { useMainAppSelector } from '../../../../../hooks/useMainAppSelector' -import { theme } from '../../../../../ui/theme' import { PaperDarkIcon, PaperIcon } from '../../../../commonStyles/icons/REGPaperIcon.style' import { getRegulatoryLayerStyle } from '../../../../map/layers/styles/regulatoryLayer.style' import { showOrHideMetadataIcon } from '../RegulatoryZone' @@ -159,7 +158,7 @@ const Zone = styled.span<{ } :hover { - background: ${theme.color.blueGray['25']}; + background: ${p => p.theme.color.blueGray25}; } ` diff --git a/frontend/src/features/MapButtons/LayersSidebar/index.tsx b/frontend/src/features/MapButtons/LayersSidebar/index.tsx index a1c79c4960..84487b5c95 100644 --- a/frontend/src/features/MapButtons/LayersSidebar/index.tsx +++ b/frontend/src/features/MapButtons/LayersSidebar/index.tsx @@ -128,7 +128,7 @@ const Button = styled(MapButtonStyle)<{ position: absolute; display: inline-block; color: ${COLORS.blue}; - background: ${p => (p.isVisible ? p.theme.color.blueGray[100] : p.theme.color.charcoal)}; + background: ${p => (p.isVisible ? p.theme.color.blueGray : p.theme.color.charcoal)}; padding: 2px 2px 2px 2px; top: 10px; left: 10px; @@ -138,7 +138,7 @@ const Button = styled(MapButtonStyle)<{ :hover, :focus { - background: ${p => (p.isVisible ? p.theme.color.blueGray[100] : p.theme.color.charcoal)}; + background: ${p => (p.isVisible ? p.theme.color.blueGray : p.theme.color.charcoal)}; } ` diff --git a/frontend/src/features/MapButtons/Measurements/index.tsx b/frontend/src/features/MapButtons/Measurements/index.tsx index 16330ebb96..fda865be4d 100644 --- a/frontend/src/features/MapButtons/Measurements/index.tsx +++ b/frontend/src/features/MapButtons/Measurements/index.tsx @@ -99,7 +99,7 @@ export function MeasurementMapButton() { } const MeasurementItem = styled.div` - background: ${p => p.theme.color.blueGray[100]}; + background: ${p => p.theme.color.blueGray}; border-radius: 2px; cursor: pointer; display: inline-block; diff --git a/frontend/src/features/MapButtons/shared/MapToolButton.tsx b/frontend/src/features/MapButtons/shared/MapToolButton.tsx index 33fef8143b..7647adc024 100644 --- a/frontend/src/features/MapButtons/shared/MapToolButton.tsx +++ b/frontend/src/features/MapButtons/shared/MapToolButton.tsx @@ -71,11 +71,11 @@ const StyledMapToolButton = styled(MapButtonStyle)<{ return `right: ${p.$isRightMenuShrinked ? 0 : 10}px;` }} - background: ${p => (p.$isActive ? p.theme.color.blueGray[100] : p.theme.color.charcoal)}; + background: ${p => (p.$isActive ? p.theme.color.blueGray : p.theme.color.charcoal)}; transition: all 0.3s; :hover, :focus { - background: ${p => (p.$isActive ? p.theme.color.blueGray[100] : p.theme.color.charcoal)}; + background: ${p => (p.$isActive ? p.theme.color.blueGray : p.theme.color.charcoal)}; } ` diff --git a/frontend/src/features/SideWindow/Menu/index.tsx b/frontend/src/features/SideWindow/Menu/index.tsx index 2a551e2746..fa11065860 100644 --- a/frontend/src/features/SideWindow/Menu/index.tsx +++ b/frontend/src/features/SideWindow/Menu/index.tsx @@ -65,7 +65,7 @@ const MenuButton = styled(IconButton)<{ selected?: boolean }>` animation: none; - background: ${p => (p.selected ? p.theme.color.blueGray[100] : 'none')}; + background: ${p => (p.selected ? p.theme.color.blueGray : 'none')}; border: 0; border-bottom: solid 1px ${p => p.theme.color.slateGray}; color: ${p => (p.selected ? p.theme.color.white : p.theme.color.gainsboro)}; @@ -73,7 +73,7 @@ const MenuButton = styled(IconButton)<{ :hover, :focus { - background: ${p => (p.selected ? p.theme.color.blueGray[100] : 'rgba(255, 255, 255, 0.125)')}; + background: ${p => (p.selected ? p.theme.color.blueGray : 'rgba(255, 255, 255, 0.125)')}; border: 0; border-bottom: solid 1px ${p => p.theme.color.slateGray}; color: ${p => p.theme.color.white}; diff --git a/frontend/src/features/SideWindow/MissionForm/ActionList/Item.tsx b/frontend/src/features/SideWindow/MissionForm/ActionList/Item.tsx index 3ab1d90fff..16626d2a54 100644 --- a/frontend/src/features/SideWindow/MissionForm/ActionList/Item.tsx +++ b/frontend/src/features/SideWindow/MissionForm/ActionList/Item.tsx @@ -191,10 +191,10 @@ const InnerWrapper = styled.div<{ background-color: ${p => ({ [MissionAction.MissionActionType.AIR_SURVEILLANCE]: p.theme.color.gainsboro, - [MissionAction.MissionActionType.OBSERVATION]: p.theme.color.blueYonder[25] + [MissionAction.MissionActionType.OBSERVATION]: p.theme.color.blueYonder25 })[p.$type] || p.theme.color.white}; - border: solid 1px ${p => (p.$isSelected ? p.theme.color.blueGray['100'] : p.theme.color.lightGray)}; - outline: ${p => (p.$isSelected ? `${p.theme.color.blueGray['100']} solid 2px` : 'none')}; + border: solid 1px ${p => (p.$isSelected ? p.theme.color.blueGray : p.theme.color.lightGray)}; + outline: ${p => (p.$isSelected ? `${p.theme.color.blueGray} solid 2px` : 'none')}; cursor: pointer; display: flex; flex-direction: column; @@ -204,7 +204,7 @@ const InnerWrapper = styled.div<{ ${p => p.$isOpen && css` - border-left: solid 5px ${p.theme.color.blueGray['100']}; + border-left: solid 5px ${p.theme.color.blueGray}; padding-left: 12px; `} ` diff --git a/frontend/src/features/SideWindow/MissionForm/shared/TitleSourceTag.tsx b/frontend/src/features/SideWindow/MissionForm/shared/TitleSourceTag.tsx index 31266d92da..b40353b20d 100644 --- a/frontend/src/features/SideWindow/MissionForm/shared/TitleSourceTag.tsx +++ b/frontend/src/features/SideWindow/MissionForm/shared/TitleSourceTag.tsx @@ -27,7 +27,7 @@ export function TitleSourceTag({ missionId, missionSource }: TitleSourceTagProps export const MissionSourceTag = styled(Tag)<{ isFromCacem: boolean }>` - background: ${p => (p.isFromCacem ? p.theme.color.mediumSeaGreen : p.theme.color.blueGray[100])}; + background: ${p => (p.isFromCacem ? p.theme.color.mediumSeaGreen : p.theme.color.blueGray)}; color: ${p => p.theme.color.white}; margin-left: 24px; vertical-align: middle; diff --git a/frontend/src/features/SideWindow/MissionList/index.tsx b/frontend/src/features/SideWindow/MissionList/index.tsx index eb2ca068aa..75ba777d28 100644 --- a/frontend/src/features/SideWindow/MissionList/index.tsx +++ b/frontend/src/features/SideWindow/MissionList/index.tsx @@ -217,8 +217,7 @@ const OngoingControlsVerticalBar = styled.span<{ width: 100%; padding-left: 8px; padding-top: 6px; - border-left: ${p => - p.$hasSomeOngoingControls ? `solid 4px ${p.theme.color.blueGray[100]}` : 'solid 4px transparent'}; + border-left: ${p => (p.$hasSomeOngoingControls ? `solid 4px ${p.theme.color.blueGray}` : 'solid 4px transparent')}; ` const Header = styled.div` diff --git a/frontend/src/features/VesselList/index.tsx b/frontend/src/features/VesselList/index.tsx index f760c5ee9f..58adc9aab2 100644 --- a/frontend/src/features/VesselList/index.tsx +++ b/frontend/src/features/VesselList/index.tsx @@ -1,3 +1,4 @@ +import { THEME } from '@mtes-mct/monitor-ui' import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { batch } from 'react-redux' import { Modal } from 'rsuite' @@ -26,7 +27,6 @@ import { unselectVessel } from '../../domain/use_cases/vessel/unselectVessel' import { useListenForDrawedGeometry } from '../../hooks/useListenForDrawing' import { useMainAppDispatch } from '../../hooks/useMainAppDispatch' import { useMainAppSelector } from '../../hooks/useMainAppSelector' -import { theme } from '../../ui/theme' import { getExtentFromGeoJSON } from '../../utils' import { isNumeric } from '../../utils/isNumeric' import StyledModalHeader from '../commonComponents/StyledModalHeader' @@ -362,7 +362,7 @@ export function VesselList({ namespace }) { title="Liste des navires avec VMS" > diff --git a/frontend/src/features/VesselSidebar/Tabs.tsx b/frontend/src/features/VesselSidebar/Tabs.tsx index 872a7c671c..d6cff7573d 100644 --- a/frontend/src/features/VesselSidebar/Tabs.tsx +++ b/frontend/src/features/VesselSidebar/Tabs.tsx @@ -122,14 +122,14 @@ const Tab = styled.button<{ font: normal normal 300 10px/14px Marianne; letter-spacing: 0.45px; ${props => (!props.isLast ? `border-right: 1px solid ${COLORS.lightGray};` : null)} - background: ${props => (props.isActive ? props.theme.color.blueGray[100] : props.theme.color.charcoal)}; + background: ${props => (props.isActive ? props.theme.color.blueGray : props.theme.color.charcoal)}; color: ${props => (props.isActive ? props.theme.color.white : props.theme.color.lightGray)}; :hover, :focus, :active { color: ${p => p.theme.color.white}; - background: ${p => p.theme.color.blueGray[100]}; + background: ${p => p.theme.color.blueGray}; ${props => (!props.isLast ? `border-right: 1px solid ${COLORS.lightGray};` : null)} } ` diff --git a/frontend/src/features/VesselSidebar/VesselSidebarHeader/index.tsx b/frontend/src/features/VesselSidebar/VesselSidebarHeader/index.tsx index cefb453f0e..520f1076c1 100644 --- a/frontend/src/features/VesselSidebar/VesselSidebarHeader/index.tsx +++ b/frontend/src/features/VesselSidebar/VesselSidebarHeader/index.tsx @@ -124,12 +124,12 @@ const SearchButton = styled(MapButtonStyle)<{ width: ${p => (p.isShrinked ? 5 : 40)}px; border-radius: ${p => (p.isShrinked ? 1 : 2)}px; right: ${p => (p.isShrinked ? 0 : 10)}px; - background: ${p => (p.isOpen ? p.theme.color.blueGray[100] : p.theme.color.charcoal)}; + background: ${p => (p.isOpen ? p.theme.color.blueGray : p.theme.color.charcoal)}; transition: all 0.3s; :hover, :focus { - background: ${p => (p.isOpen ? p.theme.color.blueGray[100] : p.theme.color.charcoal)}; + background: ${p => (p.isOpen ? p.theme.color.blueGray : p.theme.color.charcoal)}; } ` diff --git a/frontend/src/features/VesselSidebar/actions/TrackRequest/index.tsx b/frontend/src/features/VesselSidebar/actions/TrackRequest/index.tsx index 4f23adc2d0..3cf0726574 100644 --- a/frontend/src/features/VesselSidebar/actions/TrackRequest/index.tsx +++ b/frontend/src/features/VesselSidebar/actions/TrackRequest/index.tsx @@ -83,7 +83,7 @@ export function TrackRequest({ isSidebarOpen }: TrackRequestProps) { return ( <> ` - background: ${p => (p.isFromCacem ? p.theme.color.mediumSeaGreen : p.theme.color.blueGray[100])}; + background: ${p => (p.isFromCacem ? p.theme.color.mediumSeaGreen : p.theme.color.blueGray)}; color: ${p => p.theme.color.white}; margin-bottom: 8px; margin-top: 4px; diff --git a/frontend/src/ui/theme.ts b/frontend/src/ui/theme.ts index aebf09decf..7d29e9c6d8 100644 --- a/frontend/src/ui/theme.ts +++ b/frontend/src/ui/theme.ts @@ -19,15 +19,6 @@ export const theme = { cultured: '#F7F7FA', white: '#FFFFFF', - // Accentuation Colors - blueYonder: { - 25: '#D4DDE7', - 100: '#567A9E' - }, - blueGray: { - 100: '#5697D2', - 25: '#D4E5F4' - }, babyBlueEyes: '#99C9FF', // Notification Colors