diff --git a/frontend/src/features/LayersSidebar/components/index.tsx b/frontend/src/features/LayersSidebar/components/index.tsx index f1ccd3a979..323a1c326f 100644 --- 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() { {namespace => ( <> - - dispatch(setLeftMapBoxOpened(leftMapBoxOpened === MapBox.REGULATIONS ? undefined : MapBox.REGULATIONS)) - } - size={Size.LARGE} - title="Arbre des couches" - /> - + + + dispatch(setLeftMapBoxOpened(leftMapBoxOpened === MapBox.REGULATIONS ? undefined : MapBox.REGULATIONS)) + } + size={Size.LARGE} + title="Arbre des couches" + /> + (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};` : '')} ` diff --git a/frontend/src/features/PriorNotification/components/PriorNotificationListButton.tsx b/frontend/src/features/PriorNotification/components/PriorNotificationListButton.tsx index 13ee3ffd1b..f2b72c7eb4 100644 --- a/frontend/src/features/PriorNotification/components/PriorNotificationListButton.tsx +++ b/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 ( - + + + ) } -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};` : '')} `