Styling and translations

client/coral-framework/services/i18n.js

@@ -136,6 +136,7 @@ export function t(key, ...replacements) {
     replacements.forEach((str, i) => {
       translation = translation.replace(new RegExp(`\\{${i}\\}`, 'g'), str);
     });
+
     return translation;
   } else {
     console.warn(`${lang}.${key} and en.${key} language key not set`);

plugins/talk-plugin-health-report/client/components/TermsAndConditionsField.css

@@ -0,0 +1,13 @@
+.link {
+  color: #2c69b6;
+  cursor: pointer;
+  margin: 0 3px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.fieldContainer {
+  padding: 5px 0;
+}

plugins/talk-plugin-health-report/client/components/TermsAndConditionsField.js

@@ -1,13 +1,29 @@
 import React from 'react';
 import { Checkbox } from 'plugin-api/beta/client/components/ui';
 import { t } from 'plugin-api/beta/client/services';
+import styles from './TermsAndConditionsField.css';
+import cn from 'classnames';
 
 const TermsLink = () => (
-  <a href={t('talk-plugin-health-report.termslink')}>
+  <a
+    className={styles.link}
+    href={t('talk-plugin-health-report.terms-link')}
+    target="_blank"
+  >
     {t('talk-plugin-health-report.terms')}
   </a>
 );
 
+const PrivacyLink = () => (
+  <a
+    className={styles.link}
+    href={t('talk-plugin-health-report.privacy-policy-link')}
+    target="_blank"
+  >
+    {t('talk-plugin-health-report.privacy-policy')}
+  </a>
+);
+
 class TermsAndConditionsField extends React.Component {
   state = { checked: false };
   id = 'terms-and-conditions';
@@ -28,14 +44,24 @@ class TermsAndConditionsField extends React.Component {
 
   render() {
     return (
-      <div>
+      <div
+        className={cn(
+          styles.fieldContainer,
+          'talk-plugin-health-report-field-container'
+        )}
+      >
         <Checkbox
           checked={this.state.checked}
+          className="talk-plugin-health-report-checkbox"
           onChange={this.onChange}
           id={this.id}
         />
-        <label id={this.id}>
-          {t('talk-plugin-health-report.copy', <a>hola</a>, TermsLink)}
+        <label id={this.id} className="talk-plugin-health-report-label">
+          {t('talk-plugin-health-report.copy')}
+          <TermsLink />
+          {t('talk-plugin-health-report.and')}
+          <PrivacyLink />
+          {t('talk-plugin-health-report.from')}
         </label>
       </div>
     );

plugins/talk-plugin-health-report/client/translations.yml

@@ -1,21 +1,36 @@
 en:
   talk-plugin-health-report:
-    copy: I agree to the Mozilla {0} and {1}.
+    copy: I agree to the Mozilla
+    and: and
     terms: Terms of Service
-    termslink: https://www.mozilla.org/en-US/about/legal/terms/mozilla/
-    privacy: https://www.mozilla.org/en-US/privacy/websites/
+    privacy-policy: Privacy Policy
+    from: .
+    terms-link: https://www.mozilla.org/en-US/about/legal/terms/mozilla/
+    privacy-policy-link: https://www.mozilla.org/en-US/privacy/websites/
 es:
   talk-plugin-health-report:
-    copy: Estoy de acuerdo con los {0} de Mozilla y {1}.
-    terms: https://www.mozilla.org/en-US/about/legal/terms/mozilla/
-    privacy: https://www.mozilla.org/en-US/privacy/websites/
+    copy: Estoy de acuerdo con
+    and: y
+    terms: los Terminos y Condiciones
+    privacy-policy: la Política de Privacidad
+    from: de Mozilla.
+    terms-link: https://www.mozilla.org/es-ES/about/legal/terms/mozilla/
+    privacy-policy-link: https://www.mozilla.org/es-ES/privacy/websites/
 fr:
   talk-plugin-health-report:
-    copy: J'accepte les conditions d'utilisation et la politique de confidentialité de Mozilla.
-    terms: https://www.mozilla.org/en-US/about/legal/terms/mozilla/
-    privacy: https://www.mozilla.org/en-US/privacy/websites/
+    copy: J'accepte 
+    and: et
+    terms: les conditions d'utilisation 
+    privacy-policy: la politique de confidentialité
+    from: de Mozilla.
+    terms-link: https://www.mozilla.org/fr/about/legal/terms/mozilla/
+    privacy-policy-link: https://www.mozilla.org/fr/privacy/websites/
 de:
   talk-plugin-health-report:
-    copy: J'accepte les conditions d'utilisation et la politique de confidentialité de Mozilla.
-    terms: https://www.mozilla.org/en-US/about/legal/terms/mozilla/
-    privacy: https://www.mozilla.org/en-US/privacy/websites/
+    copy: Ich stimme
+    and: und
+    terms: den Allgemeinen Geschäftsbedingungen 
+    privacy-policy: der Datenschutzrichtlinie
+    from: von Mozilla zu.
+    terms-link: https://www.mozilla.org/de/about/legal/terms/mozilla/
+    privacy-policy-link: https://www.mozilla.org/de/privacy/websites/