review: fix account button and html semantic

MTES-MCT · Sep 18, 2024 · 6fb3357 · 6fb3357
1 parent 9dfaf04
commit 6fb3357
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 31 deletions.
diff --git a/frontend/src/components/Menu.tsx b/frontend/src/components/Menu.tsx
@@ -56,19 +56,21 @@ export function Menu({ isSuperUser }: MenuProps) {
         </li>
       )}
 
-      <ToolButtons>
-        {displayMeasurement && isSuperUser && <MeasurementMapButton />}
-        {displayInterestPoint && isSuperUser && (
-          <div>
-            <InterestPointMapButton />
-          </div>
-        )}
-        {displayAccountButton && (
-          <div>
-            <Account />
-          </div>
-        )}
-      </ToolButtons>
+      <ToolWrapper>
+        <ToolButtons>
+          {displayMeasurement && isSuperUser && <MeasurementMapButton />}
+          {displayInterestPoint && isSuperUser && (
+            <li>
+              <InterestPointMapButton />
+            </li>
+          )}
+          {displayAccountButton && (
+            <li>
+              <Account />
+            </li>
+          )}
+        </ToolButtons>
+      </ToolWrapper>
     </ButtonsWrapper>
   )
 }
@@ -87,9 +89,14 @@ const ButtonsWrapper = styled.menu<{
   list-style: none;
 `
 
-const ToolButtons = styled.div`
+const ToolWrapper = styled.li`
   margin-top: 24px;
+`
+
+const ToolButtons = styled.ul`
   display: flex;
   flex-direction: column;
   row-gap: 8px;
+  list-style: none;
+  padding: 0;
 `
diff --git a/frontend/src/features/Account/components/Account.tsx b/frontend/src/features/Account/components/Account.tsx
@@ -1,11 +1,11 @@
+import { StyledMapMenuDialogContainer } from '@components/style'
 import { MenuWithCloseButton } from '@features/commonStyles/map/MenuWithCloseButton'
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { Accent, Button, Icon, MapMenuDialog, Size } from '@mtes-mct/monitor-ui'
 import { getOIDCConfig } from 'auth/getOIDCConfig'
 import { globalActions } from 'domain/shared_slices/Global'
 import { useAuth } from 'react-oidc-context'
-import styled from 'styled-components'
 
 export function Account() {
   const dispatch = useAppDispatch()
@@ -29,7 +29,7 @@ export function Account() {
   return (
     <>
       {isAccountVisible && (
-        <StyledContainer>
+        <StyledMapMenuDialogContainer>
           <MapMenuDialog.Header>
             <MapMenuDialog.Title>Déconnexion</MapMenuDialog.Title>
           </MapMenuDialog.Header>
@@ -43,7 +43,7 @@ export function Account() {
               </Button>
             </MapMenuDialog.Footer>
           )}
-        </StyledContainer>
+        </StyledMapMenuDialogContainer>
       )}
 
       <MenuWithCloseButton.ButtonOnMap
@@ -57,7 +57,3 @@ export function Account() {
     </>
   )
 }
-
-const StyledContainer = styled(MapMenuDialog.Container)`
-  margin-right: unset;
-`
diff --git a/frontend/src/features/InterestPoint/components/InterestPointMapButton.tsx b/frontend/src/features/InterestPoint/components/InterestPointMapButton.tsx
@@ -12,7 +12,7 @@ import { reduceReportingFormOnMap } from 'domain/use_cases/reporting/reduceRepor
 import { useCallback, useEffect, useMemo } from 'react'
 
 import { MapToolType } from '../../../domain/entities/map/constants'
-import { globalActions, setDisplayedItems } from '../../../domain/shared_slices/Global'
+import { globalActions } from '../../../domain/shared_slices/Global'
 import { useAppDispatch } from '../../../hooks/useAppDispatch'
 import { useAppSelector } from '../../../hooks/useAppSelector'
 import { useEscapeKey } from '../../../hooks/useEscapeKey'
@@ -45,15 +45,7 @@ export function InterestPointMapButton() {
 
   const toggleInterestPointMenu = useCallback(() => {
     if (!isOpen) {
-      dispatch(
-        setDisplayedItems({
-          isControlUnitDialogVisible: false,
-          isControlUnitListDialogVisible: false,
-          isSearchMissionsVisible: false,
-          isSearchReportingsVisible: false,
-          isSearchSemaphoreVisible: false
-        })
-      )
+      dispatch(globalActions.hideSideButtons())
       dispatch(reduceReportingFormOnMap())
       dispatch(globalActions.setIsMapToolVisible(MapToolType.INTEREST_POINT))
       dispatch(closeAllOverlays())