Hotfix – Corrige les boutons du menu de gauche (#3658)

## Linked issues

None

----

- [ ] Tests E2E (Cypress)

Author: ivangabriele

frontend/src/features/LayersSidebar/components/index.tsx

@@ -11,6 +11,7 @@ import { AdministrativeZones } from '../../AdministrativeZone/components/Adminis
 import { BaseMaps } from '../../BaseMap/components/BaseMaps'
 import { MapComponent } from '../../commonStyles/MapComponent'
 import { CustomZones } from '../../CustomZone/components/CustomZones'
+import { MapButton } from '../../MainWindow/components/MapButtons/MapButton'
 import { RegulationSearch } from '../../Regulation/components/RegulationSearch'
 import { RegulatoryZoneMetadata } from '../../Regulation/components/RegulatoryZoneMetadata'
 import { RegulatoryZones } from '../../Regulation/components/RegulatoryZones'
@@ -35,20 +36,19 @@ export function LayersSidebar() {
     <NamespaceContext.Consumer>
       {namespace => (
         <>
-          <SidebarLayersIcon
-            $hasHealthcheckTextWarning={!!healthcheckTextWarning.length}
-            $isActive={leftMapBoxOpened === MapBox.REGULATIONS || regulatoryZoneMetadataPanelIsOpen}
-            $isHidden={!!previewFilteredVesselsMode}
-            accent={Accent.PRIMARY}
-            aria-label="Arbre des couches"
-            Icon={Icon.MapLayers}
-            onClick={() =>
-              dispatch(setLeftMapBoxOpened(leftMapBoxOpened === MapBox.REGULATIONS ? undefined : MapBox.REGULATIONS))
-            }
-            size={Size.LARGE}
-            title="Arbre des couches"
-          />
-
+          <SidebarLayersButton isHidden={!!previewFilteredVesselsMode}>
+            <SidebarLayersIcon
+              $isActive={leftMapBoxOpened === MapBox.REGULATIONS || regulatoryZoneMetadataPanelIsOpen}
+              accent={Accent.PRIMARY}
+              aria-label="Arbre des couches"
+              Icon={Icon.MapLayers}
+              onClick={() =>
+                dispatch(setLeftMapBoxOpened(leftMapBoxOpened === MapBox.REGULATIONS ? undefined : MapBox.REGULATIONS))
+              }
+              size={Size.LARGE}
+              title="Arbre des couches"
+            />
+          </SidebarLayersButton>
           <Sidebar
             $isOpen={leftMapBoxOpened === MapBox.REGULATIONS}
             $isVisible={leftMapBoxOpened === MapBox.REGULATIONS || regulatoryZoneMetadataPanelIsOpen}
@@ -117,19 +117,16 @@ const Layers = styled.div<{
   max-height: calc(100vh - ${p => (p.$hasHealthcheckTextWarning ? '210px' : '160px')});
 `
 
-const SidebarLayersIcon = styled(IconButton)<{
-  $hasHealthcheckTextWarning: boolean
-  $isActive: boolean
-  $isHidden: boolean
-}>`
-  ${p => (p.$isActive ? `background: ${p.theme.color.blueGray};` : '')}
-  ${p => (p.$isActive ? `border-color: ${p.theme.color.blueGray};` : '')}
-  border-radius: 2px;
-  height: 40px;
-  left: 10px;
-  margin-top: ${p => (p.$hasHealthcheckTextWarning ? 50 : 0)}px;
+const SidebarLayersButton = styled(MapButton)`
   position: absolute;
   top: 10px;
-  visibility: ${p => (p.$isHidden ? 'hidden' : 'visible')};
+  left: 10px;
+`
+
+const SidebarLayersIcon = styled(IconButton)<{ $isActive: boolean }>`
+  border-radius: 2px;
   width: 40px;
+  height: 40px;
+  ${p => (p.$isActive ? `background: ${p.theme.color.blueGray};` : '')}
+  ${p => (p.$isActive ? `border-color: ${p.theme.color.blueGray};` : '')}
 `

frontend/src/features/PriorNotification/components/PriorNotificationListButton.tsx

@@ -1,5 +1,6 @@
 import { RTK_FORCE_REFETCH_QUERY_OPTIONS, RTK_THIRTY_SECONDS_POLLING_QUERY_OPTIONS } from '@api/constants'
 import { ALL_SEAFRONT_GROUP } from '@constants/seafront'
+import { MapButton } from '@features/MainWindow/components/MapButtons/MapButton'
 import { useGetPriorNotificationsToVerifyQuery } from '@features/PriorNotification/priorNotificationApi'
 import { sideWindowActions } from '@features/SideWindow/slice'
 import { openSideWindowPath } from '@features/SideWindow/useCases/openSideWindowPath'
@@ -43,40 +44,31 @@ export function PriorNotificationListButton() {
   }
 
   return (
-    <PriorNotificationListIcon
-      $isActive={isActive}
-      $isHidden={!!previewFilteredVesselsMode}
-      $isSuperUser={isSuperUser}
-      accent={Accent.PRIMARY}
-      aria-label="Afficher la liste des préavis"
-      badgeNumber={data?.perSeafrontGroupCount && data?.perSeafrontGroupCount[ALL_SEAFRONT_GROUP]}
-      Icon={Icon.Fishery}
-      onClick={toggleSideWindow}
-      size={Size.LARGE}
-      title="Afficher la liste des préavis"
-    />
+    <Wrapper $isSuperUser={isSuperUser} isHidden={!!previewFilteredVesselsMode}>
+      <PriorNotificationListIcon
+        $isActive={isActive}
+        accent={Accent.PRIMARY}
+        aria-label="Afficher la liste des préavis"
+        badgeNumber={data?.perSeafrontGroupCount && data?.perSeafrontGroupCount[ALL_SEAFRONT_GROUP]}
+        Icon={Icon.Fishery}
+        onClick={toggleSideWindow}
+        size={Size.LARGE}
+        title="Afficher la liste des préavis"
+      />
+    </Wrapper>
   )
 }
 
-const PriorNotificationListIcon = styled(IconButton)<{
-  $hasHealthcheckTextWarning?: boolean | undefined
-  $isActive: boolean
-  $isHidden?: boolean | undefined
-  $isSuperUser: boolean
-}>`
-  ${p => (p.$isActive ? `background: ${p.theme.color.blueGray};` : '')}
-  ${p => (p.$isActive ? `border-color: ${p.theme.color.blueGray};` : '')}
-  border-radius: 2px;
-  height: 40px;
-  left: 10px;
-  margin-top: ${p => (p.$hasHealthcheckTextWarning ? 50 : 0)}px;
+const Wrapper = styled(MapButton)<{ $isSuperUser: boolean }>`
   position: absolute;
-  top: ${p => (p.$isSuperUser ? 282 : 170)}px;
-  visibility: ${p => (p.$isHidden ? 'hidden' : 'visible')};
-  width: 40px;
+  top: ${p => (p.$isSuperUser ? 232 : 120)}px;
+  left: 10px;
+`
 
-  > button {
-    height: 40px;
-    width: 40px;
-  }
+const PriorNotificationListIcon = styled(IconButton)<{ $isActive: boolean }>`
+  border-radius: 2px;
+  width: 40px;
+  height: 40px;
+  ${p => (p.$isActive ? `background: ${p.theme.color.blueGray};` : '')}
+  ${p => (p.$isActive ? `border-color: ${p.theme.color.blueGray};` : '')}
 `