fix: emilie's UX UI review

Author: maximeperraultdev

frontend/src/components/style.ts

@@ -70,10 +70,10 @@ export const TransparentButton = styled.button.attrs(() => ({
   padding: 0;
 `
 
-export const StyledTransparentButton = styled(TransparentButton)`
+export const StyledTransparentButton = styled(TransparentButton)<{ $width?: string }>`
   display: flex;
   align-items: center;
-  width: 70%;
+  width: ${p => p.$width || '80%'};
 `
 
 export const InlineTransparentButton = styled(TransparentButton)`

frontend/src/features/Dashboard/components/DashboardForm/VigilanceAreas/Layer.tsx

@@ -68,7 +68,7 @@ export function Layer({ isPinned = false, isSelected = false, vigilanceArea }: V
       $withBorderBottom
       onClick={toggleZoneMetadata}
     >
-      <StyledTransparentButton>
+      <StyledTransparentButton $width="70%">
         <LayerLegend
           isDisabled={vigilanceArea?.isArchived}
           layerType={MonitorEnvLayers.VIGILANCE_AREA}
@@ -132,6 +132,7 @@ const StyledLayer = styled(LayerSelector.Layer)<{ $isSelected: boolean; $metadat
 const TagAndButtons = styled.div`
   display: flex;
   gap: 10px;
+  flex-grow: 0;
 `
 const StyledTag = styled(Tag)`
   align-self: center;

frontend/src/features/Dashboard/components/DashboardsNavBar.tsx

@@ -78,6 +78,7 @@ export function DashboardsNavBar() {
         <TabWrapper key={item.nextPath} className={`rs-navbar-item ${item.isActive ? 'rs-navbar-item-active' : ''}`}>
           {item.icon}
           <Tab
+            $width="70%"
             data-cy={`dashboard-${index}`}
             onClick={() => selectDashboard(item.nextPath)}
             onKeyDown={e => {

frontend/src/features/LocalizedArea/components/LocalizedAreasItem.tsx

@@ -1,5 +1,5 @@
 import { getExtentOfLocalizedAreasGroupByGroupName } from '@api/localizedAreasAPI'
-import { InlineTransparentButton } from '@components/style'
+import { StyledTransparentButton } from '@components/style'
 import { closeMetadataPanel, openLocalizedAreasMetadataPanel } from '@features/layersSelector/metadataPanel/slice'
 import { LayerLegend } from '@features/layersSelector/utils/LayerLegend.style'
 import { Accent, Icon, IconButton, Size, THEME } from '@mtes-mct/monitor-ui'
@@ -59,7 +59,7 @@ export function LocalizedAreasItem({
 
   return (
     <Wrapper>
-      <InlineTransparentButton data-cy="localized-areas-layer-toggle" onClick={toggleLayer}>
+      <StyledTransparentButton data-cy="localized-areas-layer-toggle" onClick={toggleLayer}>
         <NameContainer>
           <LayerLegend
             layerType={MonitorEnvLayers.LOCALIZED_AREAS}
@@ -68,7 +68,7 @@ export function LocalizedAreasItem({
           />
           <LayerName title={firstLocalizedArea.groupName}>{firstLocalizedArea.groupName}</LayerName>
         </NameContainer>
-      </InlineTransparentButton>
+      </StyledTransparentButton>
       <ButtonsContainer>
         {hasAmpIdsOrControlUnitIds && (
           <IconButton

frontend/src/features/Mission/components/MissionForm/ActionForm/ControlForm/InfractionForm/InfractionForm.tsx

@@ -4,9 +4,9 @@ import { Accent, Button, FormikMultiRadio, FormikNumberInput, FormikTextarea, Ic
 import {
   administrativeResponseOptions,
   formalNoticeLabels,
+  type Infraction,
   infractionSeizureLabels,
-  infractionTypeLabels,
-  type Infraction
+  infractionTypeLabels
 } from 'domain/entities/missions'
 import { TargetTypeEnum } from 'domain/entities/targetType'
 import { useField } from 'formik'
@@ -118,7 +118,7 @@ export function InfractionForm({
           min={1}
           name={`${infractionPath}.nbTarget`}
         />
-        <StyledTooltip Icon={Icon.AttentionFilled} isSideWindow>
+        <StyledTooltip Icon={Icon.AttentionFilled} isSideWindow orientation="TOP_LEFT">
           Ne déclarez plusieurs cibles dans une infraction que dans le cas où les unités n&apos;ont pas transmis de
           données permettant de les identifier (nom, immatriculation…)
         </StyledTooltip>
@@ -157,8 +157,6 @@ const NbTargetWrapper = styled.div`
 const StyledTooltip = styled(Tooltip)`
   display: flex;
   width: 50%;
-  position: relative;
-  margin-bottom: 6px;
 `
 const NbTargetInput = styled(FormikNumberInput)`
   width: 48.5%;

frontend/src/features/Mission/components/MissionForm/ActionsTimeLine/ActionCard/style.ts

@@ -100,7 +100,9 @@ export const TitleAndButtonsContainer = styled.div`
   padding-right: 52px;
 `
 export const Title = styled.span`
+  display: block;
   font: normal normal normal 14px/20px Marianne;
+  max-width: 80%;
 `
 
 export const ControlSummary = styled.div`

frontend/src/features/layersSelector/myVigilanceAreas/MyVigilanceAreaLayerZone.tsx

@@ -1,5 +1,5 @@
 import { useGetVigilanceAreasQuery } from '@api/vigilanceAreasAPI'
-import { InlineTransparentButton } from '@components/style'
+import { StyledTransparentButton } from '@components/style'
 import { vigilanceAreaActions } from '@features/VigilanceArea/slice'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { Accent, Icon, IconButton, OPENLAYERS_PROJECTION, Size, THEME, WSG84_PROJECTION } from '@mtes-mct/monitor-ui'
@@ -74,7 +74,7 @@ export function MyVigilanceAreaLayerZone({
 
   return (
     <LayerSelector.Layer $metadataIsShown={metadataIsShown} $withBorderBottom>
-      <InlineTransparentButton onClick={zoomToLayerExtent}>
+      <StyledTransparentButton onClick={zoomToLayerExtent}>
         <LayerLegend
           isDisabled={layer?.isArchived}
           layerType={MonitorEnvLayers.VIGILANCE_AREA}
@@ -84,7 +84,7 @@ export function MyVigilanceAreaLayerZone({
         <LayerSelector.Name data-cy={`vigilance-area-zone-${layer?.name}`} title={layer?.name}>
           {layer?.name}
         </LayerSelector.Name>
-      </InlineTransparentButton>
+      </StyledTransparentButton>
       <LayerSelector.IconGroup>
         <StyledSummaryButton
           $withMargin={pinnedVigilanceArea}

frontend/src/features/layersSelector/search/LayerFilters.tsx

@@ -1,6 +1,7 @@
 import { useGetAMPsQuery } from '@api/ampsAPI'
 import { RegulatoryTagsFilter } from '@components/RegulatoryTagsFilter'
 import { RegulatoryThemesFilter } from '@components/RegulatoryThemesFilter'
+import { TransparentButton } from '@components/style'
 import { Tooltip } from '@components/Tooltip'
 import { PeriodFilter } from '@features/VigilanceArea/components/PeriodFilter'
 import {
@@ -291,11 +292,9 @@ const TagWrapper = styled.div`
   gap: 4px;
   margin-top: 8px;
 `
-const ResetFilters = styled.div`
+const ResetFilters = styled(TransparentButton)`
   color: ${p => p.theme.color.slateGray};
-  cursor: pointer;
   display: flex;
-  padding: 0;
   text-decoration: underline;
 `
 

frontend/src/features/layersSelector/search/ResultsList/index.tsx

@@ -39,7 +39,6 @@ export function ResultList({ searchedText }: ResultListProps) {
   const isRegulatorySearchResultsVisible = useAppSelector(state => state.layerSearch.isRegulatorySearchResultsVisible)
   const regulatoryLayersSearchResult = useAppSelector(state => state.layerSearch.regulatoryLayersSearchResult)
   const areRegulatoryResultsOpen = useAppSelector(state => state.layerSidebar.areRegulatoryResultsOpen)
-
   const isVigilanceAreaSearchResultsVisible = useAppSelector(
     state => state.layerSearch.isVigilanceAreaSearchResultsVisible
   )
@@ -132,28 +131,22 @@ export function ResultList({ searchedText }: ResultListProps) {
     dispatch(layerSidebarActions.toggleVigilanceAreaResults())
   }
 
-  const toggleAMPVisibility = (isChecked: boolean | undefined) => {
-    if (!isChecked) {
-      dispatch(layerSidebarActions.toggleAmpResults(false))
-    }
+  const toggleRegulatoryVisibility = (isChecked: boolean | undefined) => {
     dispatch(closeMetadataPanel())
-    dispatch(setIsAmpSearchResultsVisible(!!isChecked))
+    dispatch(setIsRegulatorySearchResultsVisible(!!isChecked))
+    dispatch(layerSidebarActions.toggleRegulatoryResults(!!isChecked))
   }
 
-  const toggleRegulatoryVisibility = (isChecked: boolean | undefined) => {
-    if (!isChecked) {
-      dispatch(layerSidebarActions.toggleRegulatoryResults(false))
-    }
+  const toggleAMPVisibility = (isChecked: boolean | undefined) => {
     dispatch(closeMetadataPanel())
-    dispatch(setIsRegulatorySearchResultsVisible(!!isChecked))
+    dispatch(setIsAmpSearchResultsVisible(!!isChecked))
+    dispatch(layerSidebarActions.toggleAmpResults(!!isChecked))
   }
 
   const toggleVigilanceAreaVisibility = (isChecked: boolean | undefined) => {
-    if (!isChecked) {
-      dispatch(layerSidebarActions.toggleVigilanceAreaResults(false))
-    }
     dispatch(closeMetadataPanel())
     dispatch(setIsVigilanceAreaSearchResultsVisible(!!isChecked))
+    dispatch(layerSidebarActions.toggleVigilanceAreaResults(!!isChecked))
   }
 
   const hasTransitionReg = useMountTransition(areRegulatoryResultsOpen, 500)

frontend/src/features/layersSelector/utils/MyLayerGroup.tsx

@@ -69,7 +69,7 @@ export function MyLayerGroup({
   return (
     <li>
       <LayerSelector.GroupWrapper $isOpen={zonesAreOpen} $isPadded onClick={toggleZonesAreOpen}>
-        <StyledTransparentButton onClick={handleClickOnGroupName}>
+        <StyledTransparentButton $width="70%" onClick={handleClickOnGroupName}>
           <LayerSelector.GroupName data-cy={`${name}-layer-topic`} title={groupName}>
             {groupName}
           </LayerSelector.GroupName>