From f8fbedd72776cc375dcc7f4bac52dc39438db063 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 26 Mar 2018 12:06:38 -0300
Subject: [PATCH] Styling and translations

---
 client/coral-framework/services/i18n.js       |  1 +
 .../components/TermsAndConditionsField.css    | 13 +++++++
 .../components/TermsAndConditionsField.js     | 34 ++++++++++++++--
 .../client/translations.yml                   | 39 +++++++++++++------
 4 files changed, 71 insertions(+), 16 deletions(-)
 create mode 100644 plugins/talk-plugin-health-report/client/components/TermsAndConditionsField.css

diff --git a/client/coral-framework/services/i18n.js b/client/coral-framework/services/i18n.js
index 1468f92eb..9c65c9c4e 100644
--- a/client/coral-framework/services/i18n.js
+++ b/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`);
diff --git a/plugins/talk-plugin-health-report/client/components/TermsAndConditionsField.css b/plugins/talk-plugin-health-report/client/components/TermsAndConditionsField.css
new file mode 100644
index 000000000..e05170b46
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/plugins/talk-plugin-health-report/client/components/TermsAndConditionsField.js b/plugins/talk-plugin-health-report/client/components/TermsAndConditionsField.js
index 79d079d7f..3fc2f6304 100644
--- a/plugins/talk-plugin-health-report/client/components/TermsAndConditionsField.js
+++ b/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>
     );
diff --git a/plugins/talk-plugin-health-report/client/translations.yml b/plugins/talk-plugin-health-report/client/translations.yml
index cfff60419..66bf7379c 100644
--- a/plugins/talk-plugin-health-report/client/translations.yml
+++ b/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/
\ No newline at end of file
+    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/
\ No newline at end of file