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