update components

src/components/MailSuject/mailSubject.tsx

 import React, { ChangeEvent } from 'react'
-import { ContentItems } from '../Editing/Editing'
+import { ContentItems } from '../Newsletter/Newsletter'
 import './mailSubject.scss'
 
 interface MailSubjectProps {

src/components/Modal/Modal.tsx

@@ -6,7 +6,7 @@ interface ModalProps {
   classname?: string
 }
 
-const Modal: React.FC<ModalProps> = ({ children, classname }: ModalProps) => {
+const Modal: React.FC<ModalProps> = ({ children, classname }) => {
   return createPortal(
     <div className="modal-bg">
       <div className="modal-container">

src/components/MonthlyInfo/MonthlyInfo.tsx

 import React from 'react'
-import { ContentItems } from '../Editing/Editing'
-import { convertStringToEditorState } from '../../utils/editorStateManagment'
-import CustomEditor from '../Editing/CustomEditor'
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
-import './monthlyInfo.scss'
+import { convertStringToEditorState } from '../../utils/editorStateManagment'
 import ImagePicker from '../ImagePicker/ImagePicker'
+import CustomEditor from '../Newsletter/CustomEditor'
+import { ContentItems } from '../Newsletter/Newsletter'
+import './monthlyInfo.scss'
 interface MonthlyInfoProps {
   onSave: () => Promise<void>
   onCancel: () => void

src/components/MonthlyNews/MonthlyNews.tsx

 import React, { ChangeEvent } from 'react'
-import { ContentItems } from '../Editing/Editing'
-import { convertStringToEditorState } from '../../utils/editorStateManagment'
-import CustomEditor from '../Editing/CustomEditor'
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
+import { convertStringToEditorState } from '../../utils/editorStateManagment'
+import CustomEditor from '../Newsletter/CustomEditor'
+import { ContentItems } from '../Newsletter/Newsletter'
 import './monthlyNews.scss'
 
 interface MonthlyNewsProps {

src/components/DateSelector/DateSelector.tsx → src/components/Newsletter/DateSelector/DateSelector.tsx

 import React, { useState } from 'react'
+import leftChevron from '../../../assets/icons/left-chevron.svg'
+import rightChevron from '../../../assets/icons/right-chevron.svg'
+import Modal from '../../Modal/Modal'
 import './dateSelector.scss'
-import leftChevron from '../../assets/icons/left-chevron.svg'
-import rightChevron from '../../assets/icons/right-chevron.svg'
-import Modal from '../Modal/Modal'
 
 interface DateSelectorProps {
   date: Date

src/components/DateSelector/dateSelector.scss → src/components/Newsletter/DateSelector/dateSelector.scss

-@import '../../styles/config/colors';
-@import '../../styles/config/typography';
-@import '../../styles/config/breakpoints';
+@import 'src/styles/config/colors';
+@import 'src/styles/config/typography';
+@import 'src/styles/config/breakpoints';
+
 .date-selector {
   display: flex;
   align-items: center;

src/components/Editing/Editing.tsx → src/components/Newsletter/Newsletter.tsx

@@ -5,21 +5,21 @@ import React, {
   useMemo,
   useState,
 } from 'react'
-import DateSelector from '../DateSelector/DateSelector'
-import { NewsletterService } from '../../services/newsletter.service'
+import { getAxiosXSRFHeader } from '../../axios.config'
 import { UserContext, UserContextProps } from '../../hooks/userContext'
-import { IMonthlyNews } from '../../models/monthlyNews.model'
+import { IMailSubject } from '../../models/mailSubject.model'
 import { IMonthlyInfo } from '../../models/monthlyInfo.model'
+import { IMonthlyNews } from '../../models/monthlyNews.model'
 import { IPoll } from '../../models/poll.model'
-import { IMailSubject } from '../../models/mailSubject.model'
+import { NewsletterService } from '../../services/newsletter.service'
+import Loader from '../Loader/Loader'
 import MailSubject from '../MailSuject/mailSubject'
-import Poll from '../Poll/Poll'
+import Modal from '../Modal/Modal'
 import MonthlyInfo from '../MonthlyInfo/MonthlyInfo'
 import MonthlyNews from '../MonthlyNews/MonthlyNews'
-import Loader from '../Loader/Loader'
-import Modal from '../Modal/Modal'
-import './editing.scss'
-import { getAxiosXSRFHeader } from '../../axios.config'
+import Poll from '../Poll/Poll'
+import DateSelector from './DateSelector/DateSelector'
+import './newsletter.scss'
 
 export type ContentItems =
   | 'monthlyInfo'
@@ -28,8 +28,8 @@ export type ContentItems =
   | 'subject'
   | ''
 
-const Editing: React.FC = () => {
-  // Fonctional rule :
+const Newsletter: React.FC = () => {
+  // Functional rule :
   // Display next month after the 3rd of the current month
   const getCurrentNewsletterDate = (): Date => {
     const newsletterDate = new Date()
@@ -354,4 +354,4 @@ const Editing: React.FC = () => {
   )
 }
 
-export default Editing
+export default Newsletter

src/components/Poll/Poll.tsx

 import React, { ChangeEvent } from 'react'
-import { ContentItems } from '../Editing/Editing'
-import CustomEditor from '../Editing/CustomEditor'
-import { convertStringToEditorState } from '../../utils/editorStateManagment'
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
+import { convertStringToEditorState } from '../../utils/editorStateManagment'
+import CustomEditor from '../Newsletter/CustomEditor'
+import { ContentItems } from '../Newsletter/Newsletter'
 import './poll.scss'
 
 interface PollProps {

src/components/Settings/Settings.tsx → src/components/Popups/Popups.tsx

@@ -6,15 +6,15 @@ import { CheckboxType } from '../../enum/checkboxType.enum'
 import { UserContext, UserContextProps } from '../../hooks/userContext'
 import { ICustomPopup, PopupDuration } from '../../models/cutomPopup.model'
 import {
+  Option,
   durationEnum,
   durationType,
-  Option,
 } from '../../models/durationOptios.model'
 import { IPartnersInfo } from '../../models/partnersInfo.model'
 import { CustomPopupService } from '../../services/customPopup.service'
 import { PartnersInfoService } from '../../services/partnersInfo.service'
 import Loader from '../Loader/Loader'
-import './settings.scss'
+import './popups.scss'
 
 const OPTIONS: Array<Option> = [
   {
@@ -31,7 +31,7 @@ const OPTIONS: Array<Option> = [
   },
 ]
 
-const Settings: React.FC = () => {
+const Popups: React.FC = () => {
   const [refreshData, setRefreshData] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [partnersInfo, setPartnersInfo] = useState<IPartnersInfo>({
@@ -231,7 +231,7 @@ const Settings: React.FC = () => {
         <p className="title pagetitle">Paramètres de l&apos;appli</p>
       </div>
 
-      <div className="content settings">
+      <div className="content popups">
         {isLoading && <Loader />}
         {!isLoading && (
           <>
@@ -403,4 +403,4 @@ const Settings: React.FC = () => {
   )
 }
 
-export default Settings
+export default Popups

src/components/Settings/settings.scss → src/components/Popups/popups.scss

 @import '../../styles/config/colors';
 
-.settings {
+.popupsÒ {
   .disabled {
     opacity: 0.5;
   }

src/components/Routes/Router.tsx

@@ -2,10 +2,10 @@ import React, { useContext } from 'react'
 import { Redirect, Route, Switch } from 'react-router-dom'
 import { UserContext } from '../../hooks/userContext'
 import Consents from '../Consents/Consents'
-import Editing from '../Editing/Editing'
 import Login from '../Login/Login'
+import Newsletter from '../Newsletter/Newsletter'
+import Popups from '../Popups/Popups'
 import Prices from '../Prices/Prices'
-import Settings from '../Settings/Settings'
 
 const links: { [key: string]: { label: string; path: string } } = {
   newsletter: {
@@ -38,9 +38,9 @@ const Router: React.FC = () => {
     <Switch>
       {user ? (
         <>
-          <Route exact path={links.newsletter.path} component={Editing} />
+          <Route exact path={links.newsletter.path} component={Newsletter} />
           <Route exact path={links.prices.path} component={Prices} />
-          <Route exact path={links.popups.path} component={Settings} />
+          <Route exact path={links.popups.path} component={Popups} />
           <Route exact path={links.consents.path} component={Consents} />
           <Redirect path="*" to={links.newsletter.path} />
         </>