diff --git a/src/components/Terms/TermsView.tsx b/src/components/Terms/TermsView.tsx index cd192f210271c84cb4166cbc39bfd3caf157b934..228d645f71560631a994b72ce159de5d241b565b 100644 --- a/src/components/Terms/TermsView.tsx +++ b/src/components/Terms/TermsView.tsx @@ -86,14 +86,24 @@ const TermsView = () => { onChange={handleGCUValidate} checked={GCUValidation} /> - <span - onClick={() => toggleCGUModal()} - dangerouslySetInnerHTML={{ __html: t('dataShare.validCGU') }} - /> - <span - onClick={() => toggleLegalNoticeModal()} - dangerouslySetInnerHTML={{ __html: t('dataShare.validLegal') }} - /> + <div> + <span + onClick={e => { + e.preventDefault() + toggleCGUModal() + }} + dangerouslySetInnerHTML={{ __html: t('dataShare.validCGU') }} + /> + <span + onClick={e => { + e.preventDefault() + toggleLegalNoticeModal() + }} + dangerouslySetInnerHTML={{ + __html: t('dataShare.validLegal'), + }} + /> + </div> </label> </div> <div className="terms-footer"> diff --git a/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap b/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap index 375a00d43a5a2cc271c4ad24c4ccb82ea0f24d62..3ea6482684fea0d932e35e3b127f8b71ea167c47 100644 --- a/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap +++ b/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap @@ -137,22 +137,24 @@ exports[`TermsView component should be rendered correctly 1`] = ` onChange={[Function]} type="checkbox" /> - <span - dangerouslySetInnerHTML={ - Object { - "__html": "dataShare.validCGU", + <div> + <span + dangerouslySetInnerHTML={ + Object { + "__html": "dataShare.validCGU", + } } - } - onClick={[Function]} - /> - <span - dangerouslySetInnerHTML={ - Object { - "__html": "dataShare.validLegal", + onClick={[Function]} + /> + <span + dangerouslySetInnerHTML={ + Object { + "__html": "dataShare.validLegal", + } } - } - onClick={[Function]} - /> + onClick={[Function]} + /> + </div> </label> </div> <div diff --git a/src/components/Terms/termsView.scss b/src/components/Terms/termsView.scss index e7ccf1b1656d98024398c8d07b2d8ac48e969a5e..6e058dad69caa5f63058d3be2c3b384864bde654 100644 --- a/src/components/Terms/termsView.scss +++ b/src/components/Terms/termsView.scss @@ -1,6 +1,8 @@ @import 'src/styles/base/color'; @import 'src/styles/base/mixins'; +@include checkBox(); + .terms-wrapper { padding: 0rem 1.5rem 0 1.5rem; box-sizing: border-box; @@ -21,12 +23,15 @@ .terms-content { max-width: 45rem; margin: auto; + .action { + cursor: pointer; + color: $gold-shadow; + } } .dataShare-content-wrapper, .dataShare-content-root { width: inherit; } -@include checkBox(); .terms-footer { max-width: 45rem; @@ -43,12 +48,3 @@ } } } -button.action { - appearance: none; - cursor: pointer; - display: contents; - background: transparent; - border: none; - padding: 0; - color: $gold-shadow; -} diff --git a/src/locales/fr.json b/src/locales/fr.json index aaae141fbc33216017fb6abfc22173011e6e027d..5d60f9633c0a33a9ba8f85c8a4afb050680c36a2 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -645,7 +645,7 @@ "link1": "<a href=\"https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/\">https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/</a>", "validDataConsent": "Je consens au traitement de mes données tel que décrit ci-dessus.", "validCGU": "Je valide les <span class=\"action\">Conditions Générales d’Utilisation</span> ", - "validLegal": " du service et ai pris connaissance des <span class=\"action\"> Mentions Légales </span> de celui-ci.", + "validLegal": " du service et ai pris connaissance des <span class=\"action\">Mentions Légales</span> de celui-ci.", "button_accept": "C'est parti !", "accessibility": { "button_accept": "Accepter les conditions générales d'utilisation"