From 93b810d636eb0c994ed2ba914a8c15a6f7097674 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Guillois?= <contact@loicguillois.fr>
Date: Tue, 8 Oct 2024 15:55:42 +0200
Subject: [PATCH] feat: update wording and adjust CSS styles for better
 readability

---
 .../src/components/Campaign/CampaignRecipients.tsx    |  1 -
 frontend/src/components/Draft/DraftDownloader.tsx     |  2 +-
 frontend/src/components/Draft/DraftSendingDate.tsx    |  4 +++-
 frontend/src/components/Draft/draft.module.scss       | 11 +++++++++++
 frontend/src/views/Campaign/CampaignDraft.tsx         |  8 ++++----
 frontend/src/views/Campaign/CampaignSending.tsx       |  2 +-
 .../src/views/Campaign/test/CampaignView.test.tsx     |  2 +-
 7 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Campaign/CampaignRecipients.tsx b/frontend/src/components/Campaign/CampaignRecipients.tsx
index fb734519d..ab98e1e09 100644
--- a/frontend/src/components/Campaign/CampaignRecipients.tsx
+++ b/frontend/src/components/Campaign/CampaignRecipients.tsx
@@ -128,7 +128,6 @@ function CampaignRecipients(props: Props) {
     <Grid container>
       <Alert
         severity="info"
-        closable
         title="Vos propriétaires destinataires"
         description={
           'Vérifiez les adresses des propriétaires, notamment dans les cas où l\'adresse BAN diffère de l\'adresse issue des Fichiers Fonciers (cas signalés par la mention "Adresse améliorable"). Une fois la liste des destinataires vérifiée, cliquez sur "Valider et passer au téléchargement" pour télécharger les destinataires au format XLSX.'
diff --git a/frontend/src/components/Draft/DraftDownloader.tsx b/frontend/src/components/Draft/DraftDownloader.tsx
index 52bcbacac..997eef4ca 100644
--- a/frontend/src/components/Draft/DraftDownloader.tsx
+++ b/frontend/src/components/Draft/DraftDownloader.tsx
@@ -31,7 +31,7 @@ function DraftDownloader(props: Readonly<Props>) {
         download: true,
         href: link,
       }}
-      title="Télécharger les courriers et les destinataires"
+      title="Télécharger les destinataires et vos courriers"
       onClick={() => props.setDownloaded(true)}
     />
   );
diff --git a/frontend/src/components/Draft/DraftSendingDate.tsx b/frontend/src/components/Draft/DraftSendingDate.tsx
index 331cab73a..39026e373 100644
--- a/frontend/src/components/Draft/DraftSendingDate.tsx
+++ b/frontend/src/components/Draft/DraftSendingDate.tsx
@@ -5,6 +5,7 @@ import { Container } from '../_dsfr';
 import AppTextInput from '../_app/AppTextInput/AppTextInput';
 import { DATE_REGEXP } from '../../utils/dateUtils';
 import { Typography } from '@mui/material';
+import styles from './draft.module.scss';
 
 export const sentAtSchema = string()
   .required('Veuillez renseigner une date d’envoi')
@@ -32,8 +33,9 @@ function DraftSendingDate(props: Readonly<Props>) {
         type="date"
         value={value}
         onChange={(e) => props.onChange(e.target.value)}
+        className="fr-mb-2w"
       />
-      <p className="fr-info-text">Après avoir téléchargé vos documents, indiquez la date d’envoi de votre campagne. Le statut des logements &quot;Non suivi&quot; passera automatiquement au statut &quot;En attente de retour&quot;. Les autres statuts ne seront pas modifiés.</p>
+      <p className={`fr-info-text ${styles.info}`}>Après avoir téléchargé vos documents, indiquez la date d’envoi de votre campagne. Le statut des logements &quot;Non suivi&quot; passera automatiquement au statut &quot;En attente de retour&quot;. Les autres statuts ne seront pas modifiés.</p>
     </Container>
   );
 }
diff --git a/frontend/src/components/Draft/draft.module.scss b/frontend/src/components/Draft/draft.module.scss
index e489bb3b2..c392e8719 100644
--- a/frontend/src/components/Draft/draft.module.scss
+++ b/frontend/src/components/Draft/draft.module.scss
@@ -22,3 +22,14 @@
     margin-left: 12px;
   }
 }
+
+.info {
+  position: relative;
+  padding-left: 20px;
+}
+
+.info::before {
+  position: absolute;
+  top: 1px;
+  left: 0;
+}
diff --git a/frontend/src/views/Campaign/CampaignDraft.tsx b/frontend/src/views/Campaign/CampaignDraft.tsx
index 204a04289..299fc2257 100644
--- a/frontend/src/views/Campaign/CampaignDraft.tsx
+++ b/frontend/src/views/Campaign/CampaignDraft.tsx
@@ -170,9 +170,9 @@ function CampaignDraft(props: Readonly<Props>) {
           <Grid xs={11}>
             <Stepper
               currentStep={1}
-              nextTitle="Téléchargement de vos fichiers et du fichier de publipostage CSV."
+              nextTitle="Téléchargement du fichier de publipostage (XLSX) et/ou de vos courriers rédigés (PDF)."
               stepCount={2}
-              title="Édition de votre courrier et vérification des adresses propriétaires"
+              title="Vérification des adresses propriétaires et édition de votre courrier"
             />
           </Grid>
           <Grid xs={11}>
@@ -188,12 +188,12 @@ function CampaignDraft(props: Readonly<Props>) {
           <Grid mb={2} xs={12}>
             <CampaignCreatedFromGroup campaign={props.campaign} />
           </Grid>
-          <Grid xs={6}>
-            <CampaignTitle
+          <CampaignTitle
               as="h2"
               campaign={props.campaign}
               className="fr-mb-1w"
             />
+          <Grid xs={6}>
             <CampaignCounts
               display="row"
               housing={count?.housing}
diff --git a/frontend/src/views/Campaign/CampaignSending.tsx b/frontend/src/views/Campaign/CampaignSending.tsx
index 588a0fbe4..370b1c253 100644
--- a/frontend/src/views/Campaign/CampaignSending.tsx
+++ b/frontend/src/views/Campaign/CampaignSending.tsx
@@ -98,7 +98,7 @@ function CampaignSending(props: Readonly<Props>) {
             <Stepper
                 currentStep={2}
                 stepCount={2}
-                title="Édition de votre courrier et vérification des adresses propriétaires"
+                title="Téléchargement du fichier de publipostage (XLSX) et/ou de vos courriers rédigés (PDF)"
               />
               <p className={`fr-stepper__details ${styles.lastStep}`}>
                 <span className="fr-text--bold">
diff --git a/frontend/src/views/Campaign/test/CampaignView.test.tsx b/frontend/src/views/Campaign/test/CampaignView.test.tsx
index 31ba66044..06a0f5a0a 100644
--- a/frontend/src/views/Campaign/test/CampaignView.test.tsx
+++ b/frontend/src/views/Campaign/test/CampaignView.test.tsx
@@ -259,7 +259,7 @@ describe('Campaign view', () => {
     });
     sources.get(`${config.apiEndpoint}/api/sse`)?.emit(event.type, event);
     const title = await screen.findByRole('heading', {
-      name: /^Télécharger les courriers et les destinataires/
+      name: /^Télécharger les destinataires et vos courriers/
     });
     expect(title).toBeVisible();
   });