[Icones] Utilisation des icônes de Monitor-ui (#1185)

## Related Pull Requests & Issues - Resolve #1184 - Resolve #956 ---- - [ ] Tests E2E (Cypress)
MTES-MCT · Feb 5, 2024 · 68db9dc · 68db9dc
2 parents 203922c + dfffb31
commit 68db9dc
Show file tree

Hide file tree

Showing 116 changed files with 184 additions and 1,495 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -28,7 +28,7 @@
     "test:unit:watch": "npm run test:unit -- --watch"
   },
   "dependencies": {
-    "@mtes-mct/monitor-ui": "11.4.0",
+    "@mtes-mct/monitor-ui": "11.6.0",
     "@reduxjs/toolkit": "1.9.7",
     "@rsuite/responsive-nav": "5.0.1",
     "@sentry/browser": "7.73.0",

diff --git a/frontend/src/components/AlertUnsupportedBrowser.tsx b/frontend/src/components/AlertUnsupportedBrowser.tsx
@@ -1,12 +1,11 @@
+import { Icon } from '@mtes-mct/monitor-ui'
 import styled from 'styled-components'
 
-import { ReactComponent as AlertSVG } from '../uiMonitor/icons/Alert.svg'
-
 export function AlertUnsupportedBrowser() {
   return (
     <Wrapper>
       <Alert>
-        <AlertSVG />
+        <Icon.Alert />
         <br />
         <Text>
           <Title>

diff --git a/frontend/src/features/healthcheck/Healthcheck.tsx b/frontend/src/features/healthcheck/Healthcheck.tsx
@@ -1,7 +1,7 @@
+import { Icon } from '@mtes-mct/monitor-ui'
 import styled from 'styled-components'
 
 import { useAppSelector } from '../../hooks/useAppSelector'
-import { ReactComponent as WarningSVG } from '../../uiMonitor/icons/Alert.svg'
 
 export function Healthcheck() {
   const { healthcheckTextWarning } = useAppSelector(state => state.global)
@@ -10,32 +10,21 @@ export function Healthcheck() {
     <>
       {healthcheckTextWarning ? (
         <HealthcheckWarnings>
-          <Warning>
-            <WarningIcon />
-            {healthcheckTextWarning}
-          </Warning>
+          <Icon.Alert />
+          {healthcheckTextWarning}
         </HealthcheckWarnings>
       ) : null}
     </>
   )
 }
 
-const WarningIcon = styled(WarningSVG)`
-  width: 20px;
-  vertical-align: sub;
-  margin-right: 8px;
-  height: 18px;
-`
-
-const Warning = styled.div`
-  font: normal normal bold 16px/22px Marianne;
-`
-
 const HealthcheckWarnings = styled.div`
-  background: #f6d012 0% 0% no-repeat padding-box;
-  width: 100%;
-  height: 22px;
-  text-align: center;
-  padding: 13px;
+  align-items: center;
+  background-color: ${p => p.theme.color.goldenPoppy};
   border-bottom: 2px solid #e3be05;
+  display: flex;
+  font: normal normal bold 16px/22px Marianne;
+  gap: 8px;
+  justify-content: center;
+  padding: 13px;
 `
diff --git a/frontend/src/features/layersSelector/administrative/AdministrativeLayer.tsx b/frontend/src/features/layersSelector/administrative/AdministrativeLayer.tsx
@@ -1,9 +1,9 @@
+import { Icon, THEME } from '@mtes-mct/monitor-ui'
 import styled from 'styled-components'
 
 import { hideAdministrativeLayer, showAdministrativeLayer } from '../../../domain/shared_slices/Administrative'
 import { useAppDispatch } from '../../../hooks/useAppDispatch'
 import { useAppSelector } from '../../../hooks/useAppSelector'
-import { ReactComponent as DisplaySVG } from '../../../uiMonitor/icons/Display.svg'
 
 export function AdministrativeLayer({ isGrouped, layer }) {
   const dispatch = useAppDispatch()
@@ -22,7 +22,7 @@ export function AdministrativeLayer({ isGrouped, layer }) {
   return (
     <Row $isGrouped={isGrouped} data-cy="administrative-layer-toggle" onClick={toggleLayer}>
       <LayerName title={layer.name}>{layer.name}</LayerName>
-      {isLayerVisible ? <DisplaySVG /> : <HideIcon />}
+      <Icon.Display color={isLayerVisible ? THEME.color.charcoal : THEME.color.lightGray} />
     </Row>
   )
 }
@@ -57,7 +57,3 @@ const Row = styled.span<{ $isGrouped: boolean }>`
     margin-top: 4px;
   }
 `
-
-const HideIcon = styled(DisplaySVG)`
-  color: ${p => p.theme.color.lightGray};
-`
diff --git a/frontend/src/features/layersSelector/regulatory/metadata/index.tsx b/frontend/src/features/layersSelector/regulatory/metadata/index.tsx
@@ -10,7 +10,6 @@ import { getTitle } from '../../../../domain/entities/regulatory'
 import { closeRegulatoryMetadataPanel } from '../../../../domain/shared_slices/RegulatoryMetadata'
 import { useAppDispatch } from '../../../../hooks/useAppDispatch'
 import { useAppSelector } from '../../../../hooks/useAppSelector'
-import { ReactComponent as AlertSVG } from '../../../../uiMonitor/icons/Attention_controles.svg'
 import { RegulatoryLayerLegend } from '../../utils/LayerLegend.style'
 
 const FOUR_HOURS = 4 * 60 * 60 * 1000
@@ -47,7 +46,7 @@ export function RegulatoryLayerZoneMetadata() {
             />
           </Header>
           <Warning>
-            <WarningIcon />
+            <Icon.Warning size={30} />
             Travail en cours, bien vérifier dans Légicem la validité de la référence et des infos réglementaires
           </Warning>
           <Content>
@@ -113,21 +112,16 @@ const Content = styled.div`
 `
 
 const Warning = styled.div`
-  font-size: 13px;
-  color: ${p => p.theme.color.gunMetal};
+  align-items: center;
   background: ${p => p.theme.color.goldenPoppy};
+  color: ${p => p.theme.color.gunMetal};
   display: flex;
-  text-align: left;
   font: normal normal bold 13px/18px Marianne;
+  gap: 16px;
   padding: 10px;
+  text-align: left;
 `
 
-const WarningIcon = styled(AlertSVG)`
-  width: 30px;
-  flex: 57px;
-  height: 30px;
-  margin: 4px 10px 0px 0;
-`
 const CenteredFingerprintSpinner = styled(FingerprintSpinner)`
   position: initial !important;
   display: block;

diff --git a/frontend/src/features/map/draw/DrawModal.tsx b/frontend/src/features/map/draw/DrawModal.tsx
@@ -1,10 +1,9 @@
-import { type Coordinates, CoordinatesInput } from '@mtes-mct/monitor-ui'
+import { type Coordinates, CoordinatesInput, IconButton, Icon } from '@mtes-mct/monitor-ui'
 import Feature from 'ol/Feature'
 import GeoJSON from 'ol/format/GeoJSON'
 import Point from 'ol/geom/Point'
 import { transform } from 'ol/proj'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
-import { IconButton } from 'rsuite'
 import styled from 'styled-components'
 
 import {
@@ -26,10 +25,6 @@ import {
 import { useAppDispatch } from '../../../hooks/useAppDispatch'
 import { useAppSelector } from '../../../hooks/useAppSelector'
 import { usePrevious } from '../../../hooks/usePrevious'
-import { ReactComponent as CircleSVG } from '../../../uiMonitor/icons/Info.svg'
-import { ReactComponent as PolygonSVG } from '../../../uiMonitor/icons/Polygone.svg'
-import { ReactComponent as RectangleSVG } from '../../../uiMonitor/icons/Rectangle.svg'
-import { ReactComponent as SelectorSVG } from '../../../uiMonitor/icons/Selector.svg'
 import { getMissionPageRoute } from '../../../utils/routes'
 import { MapInteraction } from '../../commonComponents/Modals/MapInteraction'
 import { SideWindowStatus } from '../../SideWindow/slice'
@@ -172,31 +167,19 @@ export function DrawModal() {
         (listener === InteractionListener.MISSION_ZONE || listener === InteractionListener.REPORTING_ZONE) && (
           <IconGroup>
             <IconButton
-              active={interactionType === InteractionType.POLYGON}
-              appearance="primary"
-              icon={<PolygonIcon className="rs-icon" />}
+              className={interactionType === InteractionType.POLYGON ? '_active' : undefined}
+              Icon={Icon.SelectPolygon}
               onClick={handleSelectInteraction(InteractionType.POLYGON)}
-              size="md"
             />
             <IconButton
-              active={interactionType === InteractionType.SQUARE}
-              appearance="primary"
-              icon={<RectangleIcon className="rs-icon" />}
+              className={interactionType === InteractionType.SQUARE ? '_active' : undefined}
+              Icon={Icon.SelectRectangle}
               onClick={handleSelectInteraction(InteractionType.SQUARE)}
-              size="md"
             />
             <IconButton
-              active={interactionType === InteractionType.CIRCLE}
-              appearance="primary"
-              icon={<CircleIcon className="rs-icon" />}
+              className={interactionType === InteractionType.CIRCLE ? '_active' : undefined}
+              Icon={Icon.SelectCircle}
               onClick={handleSelectInteraction(InteractionType.CIRCLE)}
-              size="md"
-            />
-            <IconButton
-              active={interactionType === InteractionType.SELECTION}
-              appearance="primary"
-              icon={<SelectorIcon className="rs-icon" />}
-              size="md"
             />
           </IconGroup>
         )
@@ -224,32 +207,14 @@ export function DrawModal() {
 }
 
 const CoordinatesInputWrapper = styled.div`
-  width: 280px;
-  margin-right: auto !important;
-  margin-left: auto;
   margin-bottom: 8px;
+  margin-left: auto;
+  margin-right: auto !important;
+  width: 280px;
 `
 
 const IconGroup = styled.div`
-  display: inline-block;
-  & > :not(:last-child) {
-    margin-right: 16px;
-  }
-`
-
-const PolygonIcon = styled(PolygonSVG)`
-  width: 16px;
-  height: 16px;
-`
-const CircleIcon = styled(CircleSVG)`
-  width: 16px;
-  height: 16px;
-`
-const RectangleIcon = styled(RectangleSVG)`
-  width: 16px;
-  height: 16px;
-`
-const SelectorIcon = styled(SelectorSVG)`
-  width: 16px;
-  height: 16px;
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
 `
diff --git a/frontend/src/features/map/overlays/InterestPointOverlay.tsx b/frontend/src/features/map/overlays/InterestPointOverlay.tsx
@@ -1,3 +1,4 @@
+import { Accent, Icon, IconButton, Size, type Coordinates } from '@mtes-mct/monitor-ui'
 import { noop } from 'lodash/fp'
 import LineString from 'ol/geom/LineString'
 import Overlay from 'ol/Overlay'
@@ -9,12 +10,8 @@ import { OPENLAYERS_PROJECTION } from '../../../domain/entities/map/constants'
 import { useAppSelector } from '../../../hooks/useAppSelector'
 import { useMoveOverlayWhenDragging } from '../../../hooks/useMoveOverlayWhenDragging'
 import { usePrevious } from '../../../hooks/usePrevious'
-import { ReactComponent as DeleteSVG } from '../../../uiMonitor/icons/Delete.svg'
-import { ReactComponent as EditSVG } from '../../../uiMonitor/icons/Edit.svg'
 import { getCoordinates } from '../../../utils/coordinates'
 
-import type { Coordinates } from '@mtes-mct/monitor-ui'
-
 const X = 0
 const Y = 1
 export const initialOffsetValue = [-90, 10]
@@ -154,8 +151,20 @@ export function InterestPointOverlay({
               <Name data-cy="interest-point-name" title={name ?? 'Aucun Libellé'}>
                 {name ?? 'Aucun Libellé'}
               </Name>
-              <Edit data-cy="interest-point-edit" onClick={() => modifyInterestPoint(uuid)} />
-              <Delete data-cy="interest-point-delete" onClick={() => deleteInterestPoint(uuid)} />
+              <IconButton
+                accent={Accent.TERTIARY}
+                data-cy="interest-point-edit"
+                Icon={Icon.Edit}
+                onClick={() => modifyInterestPoint(uuid)}
+                size={Size.SMALL}
+              />
+              <IconButton
+                accent={Accent.TERTIARY}
+                data-cy="interest-point-delete"
+                Icon={Icon.Delete}
+                onClick={() => deleteInterestPoint(uuid)}
+                size={Size.SMALL}
+              />
             </Header>
             <Body data-cy="interest-point-observations">{observations ?? 'Aucune observation'}</Body>
             <Footer data-cy="interest-point-coordinates">
@@ -195,26 +204,6 @@ const Header = styled.div`
   border-top-right-radius: 2px;
 `
 
-const Delete = styled(DeleteSVG)`
-  height: 30px;
-  width: 22px;
-  border-left: 1px solid ${p => p.theme.color.lightGray};
-  padding-left: 6px;
-  margin-left: auto;
-  margin-right: 8px;
-  cursor: pointer;
-`
-
-const Edit = styled(EditSVG)`
-  height: 30px;
-  width: 22px;
-  border-left: 1px solid ${p => p.theme.color.lightGray};
-  padding-left: 6px;
-  margin-left: auto;
-  margin-right: 6px;
-  cursor: pointer;
-`
-
 const WrapperToBeKeptForDOMManagement = styled.div`
   z-index: 300;
 `