feat: update wording and adjust CSS styles for better readability

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.'

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)}
     />
   );

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>
   );
 }

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;
+}

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}

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">

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();
   });