diff --git a/frontend/src/features/PriorNotification/components/PriorNotificationForm/Card.tsx b/frontend/src/features/PriorNotification/components/PriorNotificationForm/Card.tsx index f0a293ef38..1dab6e09fd 100644 --- a/frontend/src/features/PriorNotification/components/PriorNotificationForm/Card.tsx +++ b/frontend/src/features/PriorNotification/components/PriorNotificationForm/Card.tsx @@ -3,7 +3,7 @@ import { PriorNotification } from '@features/PriorNotification/PriorNotification import { updateEditedPriorNotificationComputedValues } from '@features/PriorNotification/useCases/updateEditedPriorNotificationComputedValues' import { useMainAppDispatch } from '@hooks/useMainAppDispatch' import { useMainAppSelector } from '@hooks/useMainAppSelector' -import { Accent, Button, FormikEffect, Icon, usePrevious } from '@mtes-mct/monitor-ui' +import { Accent, Banner, Button, FormikEffect, Icon, Level, usePrevious } from '@mtes-mct/monitor-ui' import { getDefinedObject } from '@utils/getDefinedObject' import { useFormikContext } from 'formik' import { isEqual } from 'lodash' @@ -81,6 +81,12 @@ export function Card({ isValidatingOnChange, onClose, onSubmit, onVerifyAndSend, + {editedPriorNotificationDetail?.state === PriorNotification.State.PENDING_SEND && ( + + Le préavis est en cours de diffusion. + + )} +
@@ -138,9 +144,31 @@ const Wrapper = styled.div` display: flex; flex-direction: column; height: 100%; + position: relative; width: 560px; ` +const StyledBanner = styled(Banner)` + box-shadow: inset 0 3px 6px ${p => p.theme.color.lightGray}; + padding: 0; + + > div > p { + font-size: 16px; + font-weight: 500; + padding-top: 3px; + } + + > .banner-button { + position: relative; + + > button { + position: absolute; + right: 32px; + top: -7.5px; + } + } +` + const Body = styled.div` display: flex; flex-direction: column;