chore: fix terms view screen

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">

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

src/components/Terms/termsView.scss

 @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;
-}

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"