Revert "Fix button in button React/DOM error in LayersSidebar"

This reverts commit 11f74cc.
MTES-MCT · Sep 17, 2024 · 1a58a3a · 1a58a3a
1 parent 9e9cb2a
commit 1a58a3a
Showing 1 changed file with 23 additions and 26 deletions.
diff --git a/frontend/src/features/LayersSidebar/components/index.tsx b/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};` : '')}
 `