diff --git a/src/components/ContentComponents/FeedbacksModal/FeedbacksModal.tsx b/src/components/ContentComponents/FeedbacksModal/FeedbacksModal.tsx index 46bc1c2a66ff4651cc8a9247860f11bd64f2dc46..f8122b4f37fea717c1f0c506fb6e8aea037e6610 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 de2006ddc82fcd6d9549940413b37aa6439672c5..1e9791ba9d9e5339b7c7288d405dcc891315e017 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 0000000000000000000000000000000000000000..9c9feeaedb107895ad1fa2efe3b19af598a1074b --- /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 550656551ae776974982a55fea7c4b7d1061bfcf..6e59464f970e41799703d069a4d03f5f727727b8 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};