replace titles

src/components/Newsletter/MailSubject/mailSubject.scss

-.mailSubject {
-  .title {
-    margin: 1rem 0;
-  }
-}

src/components/Newsletter/MailSubject/mailSubject.tsx

@@ -2,7 +2,6 @@ import { Button, TextField } from '@mui/material'
 import React, { ChangeEvent } from 'react'
 import { EditorType } from '../CustomEditor'
 import { ContentItems } from '../Newsletter'
-import './mailSubject.scss'
 
 interface MailSubjectProps {
   onSave: () => Promise<void>
@@ -24,8 +23,7 @@ const MailSubject: React.FC<MailSubjectProps> = ({
   return (
     <div className="mailSubject">
       <h2>Objet de la newsletter (Optionnel)</h2>
-      {/* rename to subtitle */}
-      <p className="title">Objet</p>
+      <h3>Objet</h3>
       <TextField
         type="text"
         placeholder="Par défaut : [Ecolyo] Votre bilan..."

src/components/Newsletter/MonthlyInfo/MonthlyInfo.tsx

@@ -5,7 +5,6 @@ import { convertStringToEditorState } from '../../../utils/editorStateManagement
 import CustomEditor, { EditorType } from '../CustomEditor'
 import ImagePicker from '../ImagePicker/ImagePicker'
 import { ContentItems } from '../Newsletter'
-import './monthlyInfo.scss'
 
 interface MonthlyInfoProps {
   handleChange: (value: string, type: EditorType) => void
@@ -27,9 +26,9 @@ const MonthlyInfo: React.FC<MonthlyInfoProps> = ({
     <div className="monthlyInfo">
       <h2>Informations du mois (Optionnel)</h2>
       <div>
-        <p className="title">Image</p>
+        <h3>Image</h3>
         <ImagePicker imageURL={imageURL} handleChange={handleChange} />
-        <p className="title">Info</p>
+        <h3>Info</h3>
         <CustomEditor
           baseState={convertStringToEditorState(info)}
           handleChange={handleChange}

src/components/Newsletter/MonthlyInfo/monthlyInfo.scss

-.monthlyInfo {
-  margin: 2rem 0;
-  .title {
-    margin: 1rem 0;
-  }
-  h2 {
-    margin-bottom: 1rem;
-  }
-}

src/components/Newsletter/MonthlyNews/MonthlyNews.tsx

@@ -4,7 +4,6 @@ import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
 import { convertStringToEditorState } from '../../../utils/editorStateManagement'
 import CustomEditor, { EditorType } from '../CustomEditor'
 import { ContentItems } from '../Newsletter'
-import './monthlyNews.scss'
 
 interface MonthlyNewsProps {
   onSave: () => Promise<void>
@@ -28,7 +27,7 @@ const MonthlyNews: React.FC<MonthlyNewsProps> = ({
   return (
     <div className="monthlyNews">
       <h2>Nouveautés du mois (Optionnel)</h2>
-      <p className="title">Titre</p>
+      <h3>Titre</h3>
       <TextField
         type="text"
         placeholder="Par défaut : Les nouveautés du service"
@@ -36,7 +35,7 @@ const MonthlyNews: React.FC<MonthlyNewsProps> = ({
         onChange={handleChangeTitle}
       />
       <div>
-        <p className="title">Contenu</p>
+        <h3>Contenu</h3>
         <div>
           <CustomEditor
             baseState={convertStringToEditorState(content)}

src/components/Newsletter/MonthlyNews/monthlyNews.scss

-.monthlyNews {
-  margin: 2rem 0;
-  .title {
-    margin: 1rem 0;
-  }
-}

src/components/Newsletter/Poll/Poll.tsx

@@ -4,7 +4,6 @@ import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
 import { convertStringToEditorState } from '../../../utils/editorStateManagement'
 import CustomEditor, { EditorType } from '../CustomEditor'
 import { ContentItems } from '../Newsletter'
-import './poll.scss'
 
 interface PollProps {
   question: string
@@ -30,10 +29,10 @@ const Poll: React.FC<PollProps> = ({
   return (
     <div className="poll">
       <h2>Ajouter un sondage (Optionnel)</h2>
-      <p className="title">Lien</p>
+      <h3>Lien</h3>
       <TextField type="text" value={link} onChange={handleChangeLink} />
       <div>
-        <p className="title">Question</p>
+        <h3>Question</h3>
         <div>
           <CustomEditor
             baseState={convertStringToEditorState(question)}

src/components/Newsletter/Poll/poll.scss

-.poll {
-  margin: 2rem 0;
-  .title {
-    margin: 1rem 0;
-  }
-}

src/components/Newsletter/newsletter.scss

@@ -17,8 +17,9 @@
 .content {
   padding: 1rem;
 }
-.subtitle {
+h3 {
   margin: 1rem 0;
+  color: $gold;
 }
 hr {
   margin: 2rem 0rem;

src/components/Popups/Popups.tsx

@@ -244,7 +244,7 @@ const Popups: React.FC = () => {
         {!isLoading && (
           <>
             <div className="partnersInfo">
-              <h2 className="title">Affichage des pop-up de panne</h2>
+              <h3>Affichage des pop-up de panne</h3>
               <div>
                 <p>Services concernés</p>
                 <FormGroup style={{ flexDirection: 'row' }}>
@@ -301,7 +301,7 @@ const Popups: React.FC = () => {
             </div>
 
             <div className="customPopup">
-              <h2 className="title">Affichage de pop-up personnalisée</h2>
+              <h3>Affichage de pop-up personnalisée</h3>
               <div className="customPopup">
                 <FormGroup style={{ flexDirection: 'row' }}>
                   <FormControlLabel

src/components/Popups/popups.scss

@@ -9,7 +9,7 @@
   }
 
   .partnersInfo {
-    margin: 2rem 0;
+    margin-bottom: 2rem;
     h1 {
       margin-bottom: 1rem;
     }