From 660ad28ee0b29e2efedd342520524f7a2649bfeb Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Mon, 29 Jun 2020 19:19:59 +0200
Subject: [PATCH] feat: set locale for feedbacks

---
 .../FeedbacksModal/FeedbacksModal.tsx            |  9 ++++++++-
 src/locales/fr.json                              |  9 +++++++++
 src/styles/components/_feedbacks.scss            | 16 ++++++++++++++++
 src/styles/index.scss                            |  1 +
 4 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 src/styles/components/_feedbacks.scss

diff --git a/src/components/ContentComponents/FeedbacksModal/FeedbacksModal.tsx b/src/components/ContentComponents/FeedbacksModal/FeedbacksModal.tsx
index 46bc1c2a6..f8122b4f3 100644
--- a/src/components/ContentComponents/FeedbacksModal/FeedbacksModal.tsx
+++ b/src/components/ContentComponents/FeedbacksModal/FeedbacksModal.tsx
@@ -1,6 +1,7 @@
 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>
   )
 }
diff --git a/src/locales/fr.json b/src/locales/fr.json
index de2006ddc..1e9791ba9 100644
--- a/src/locales/fr.json
+++ b/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"
   }
 }
diff --git a/src/styles/components/_feedbacks.scss b/src/styles/components/_feedbacks.scss
new file mode 100644
index 000000000..9c9feeaed
--- /dev/null
+++ b/src/styles/components/_feedbacks.scss
@@ -0,0 +1,16 @@
+@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
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 550656551..6e59464f9 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -24,6 +24,7 @@
 @import 'components/legalnotice';
 @import 'components/splash';
 @import 'components/auth';
+@import 'components/feedbacks';
 
 :root {
   --blue: #{$blue};
-- 
GitLab