feat: set locale for feedbacks

src/components/ContentComponents/FeedbacksModal/FeedbacksModal.tsx

 import React from 'react'
 import { translate } from 'cozy-ui/react/I18n'
 import Modal from 'components/CommonKit/Modal/Modal'
+import StyledButton from 'components/CommonKit/Button/StyledButton'
 
 interface FeedbacksModalProps {
   opened: boolean
@@ -15,7 +16,13 @@ const FeedbacksModal: React.FC<FeedbacksModalProps> = ({
 }: FeedbacksModalProps) => {
   return (
     <Modal open={opened} handleCloseClick={handleCloseClick}>
-      <div>TEST</div>
+      <div className="fb-header text-18-bold">{t('feedbacks.title')}</div>
+      <div className="fb-content">
+        <div>{t('feedbacks.type')}</div>
+        <div>{t('feedbacks.description')}</div>
+        <div>{t('feedbacks.email')}</div>
+        <StyledButton>{t('feedbacks.send')}</StyledButton>
+      </div>
     </Modal>
   )
 }

src/locales/fr.json

@@ -256,5 +256,14 @@
         "activateLink": "https://mon-compte-client.enedis.fr/"
       }
     }
+  },
+  "feedbacks": {
+    "title": "Partagez-nous vos retours",
+    "type": "Motif du retour :",
+    "description": "Description :",
+    "description_placeholder": "Vos remarques",
+    "email": "Si vous souhaitez un suivi de vos retours, inscrivez votre email :",
+    "email_placeholder": "Email (optionnel)",
+    "send": "Envoyer"
   }
 }

src/styles/components/_feedbacks.scss

+@import '../base/color';
+@import '../base/breakpoint';
+
+.fb-header {
+  color: $gold-shadow;
+  padding: 2rem 1.5rem 0rem 1.5rem;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.fb-content {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
\ No newline at end of file

src/styles/index.scss

@@ -24,6 +24,7 @@
 @import 'components/legalnotice';
 @import 'components/splash';
 @import 'components/auth';
+@import 'components/feedbacks';
 
 :root {
   --blue: #{$blue};