From 2d025d8b0850cf2204de861feee30ef59067d69e Mon Sep 17 00:00:00 2001
From: Tom French <tom@tomfren.ch>
Date: Wed, 24 Aug 2022 17:22:48 +0100
Subject: [PATCH] fix: get bold tags to display correctly

---
 .../src/components/accounts/Account.js        | 20 ++++++++++++-------
 .../desktop-client/src/locales/en-GB.json     |  2 +-
 .../desktop-client/src/locales/es-ES.json     |  2 +-
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/desktop-client/src/components/accounts/Account.js b/packages/desktop-client/src/components/accounts/Account.js
index 62f4b2b..5d51058 100644
--- a/packages/desktop-client/src/components/accounts/Account.js
+++ b/packages/desktop-client/src/components/accounts/Account.js
@@ -90,7 +90,7 @@ import {
 } from 'loot-core/src/client/data-hooks/schedules';
 import { getPayeesById } from 'loot-core/src/client/reducers/queries';
 import { useActiveLocation } from '../ActiveLocation';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 function EmptyMessage({ onAdd }) {
   const { t } = useTranslation();
@@ -114,7 +114,7 @@ function EmptyMessage({ onAdd }) {
         }}
       >
         <Text style={{ textAlign: 'center', lineHeight: '1.4em' }}>
-          {t('account.needAccountMessage')}
+          <Trans>{'account.needAccountMessage'}</Trans>
         </Text>
 
         <Button primary style={{ marginTop: 20 }} onClick={onAdd}>
@@ -175,11 +175,17 @@ function ReconcilingMessage({ balanceQuery, targetBalance, onDone }) {
         ) : (
           <View style={{ color: colors.n3 }}>
             <Text style={{ fontStyle: 'italic', textAlign: 'center' }}>
-              {t('account.clearedBalance', {
-                'cleared':(<strong>{format(cleared, 'financial')}</strong>),
-                'diff': (<strong>{(targetDiff > 0 ? '+' : '') + format(targetDiff, 'financial')}</strong>),
-                'balance':(<Text style={{ fontWeight: 700 }}>{format(targetBalance, 'financial')}</Text>)
-              })}
+              <Trans
+                values={{
+                  cleared: format(cleared, 'financial'),
+                  diff:
+                    (targetDiff > 0 ? '+' : '') +
+                    format(targetDiff, 'financial'),
+                  balance: format(targetBalance, 'financial')
+                }}
+              >
+                {'account.clearedBalance'}
+              </Trans>
             </Text>
           </View>
         )}
diff --git a/packages/desktop-client/src/locales/en-GB.json b/packages/desktop-client/src/locales/en-GB.json
index 2119aa8..d757660 100644
--- a/packages/desktop-client/src/locales/en-GB.json
+++ b/packages/desktop-client/src/locales/en-GB.json
@@ -3,7 +3,7 @@
         "addAccount": "Add account",
         "addAccountInFutureFromSidebar": "In the future, you can add accounts from the sidebar.",
         "allReconciled": "All reconciled!",
-        "clearedBalance": "Your cleared balance {cleared} needs {diff} to match your bank's balance of {balance}",
+        "clearedBalance": "Your cleared balance <strong>{{cleared}}</strong> needs <strong>{{diff}}</strong> to match your bank's balance of <strong>{{balance}}</strong>",
         "doneReconciling": "Done Reconciling",
         "needAccountMessage": "For Actual to be useful, you need to <strong>add an account</strong>. You can link an account to automatically download transactions, or manage it locally yourself."
     },
diff --git a/packages/desktop-client/src/locales/es-ES.json b/packages/desktop-client/src/locales/es-ES.json
index 2e73c94..3482c9f 100644
--- a/packages/desktop-client/src/locales/es-ES.json
+++ b/packages/desktop-client/src/locales/es-ES.json
@@ -3,7 +3,7 @@
         "addAccount": "Agregar cuenta",
         "addAccountInFutureFromSidebar": "En el futuro puedes agregar cuentas desde la barra lateral.",
         "allReconciled": "¡Todo conciliado!",
-        "clearedBalance": "Su saldo compensado {cleared} necesita {diff} para coincidir con el saldo del banco de {balance}",
+        "clearedBalance": "Su saldo compensado <strong>{{cleared}}</strong> necesita <strong>{{diff}}</strong> para coincidir con el saldo del banco de <strong>{{balance}}</strong>",
         "doneReconciling": "Conciliación finalizada",
         "needAccountMessage": "Para que Actual sea útil, debe <strong>agregar una cuenta</strong>. Puedes vincular la cuenta para descargar transacciones automáticamente o administrala localmente."
     },