Switch to html formatting in translated strings

6 files changed, 22 insertions, 24 deletions

diff --git a/gui/src/renderer/components/CustomDnsSettings.tsx b/gui/src/renderer/components/CustomDnsSettings.tsx
index 97a3f10818..bda3fbb864 100644
--- a/gui/src/renderer/components/CustomDnsSettings.tsx
+++ b/gui/src/renderer/components/CustomDnsSettings.tsx
@@ -288,8 +288,7 @@ export default function CustomDnsSettings() {
             ? messages.pgettext('vpn-settings-view', 'Enable to add at least one DNS server.')
             : // This line makes sure that the next one isn't prefixed by the color.
               // TRANSLATORS: This is displayed when either or both of the block ads/trackers settings are
-              // TRANSLATORS: turned on which makes the custom DNS setting disabled. The text enclosed in "**"
-              // TRANSLATORS: will appear bold.
+              // TRANSLATORS: turned on which makes the custom DNS setting disabled.
               // TRANSLATORS: Available placeholders:
               // TRANSLATORS: %(preferencesPageName)s - The page title showed on top in the preferences page.
               messages.pgettext(
diff --git a/gui/src/renderer/components/Login.tsx b/gui/src/renderer/components/Login.tsx
index 6c69074a0c..b1d2a1392b 100644
--- a/gui/src/renderer/components/Login.tsx
+++ b/gui/src/renderer/components/Login.tsx
@@ -6,7 +6,7 @@ import { AccountToken } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { formatAccountToken } from '../lib/account';
-import { formatMarkdown } from '../markdown-formatter';
+import { formatHtml } from '../lib/html-formatter';
 import { LoginState } from '../redux/account/reducers';
 import { useSelector } from '../redux/store';
 import Accordion from './Accordion';
@@ -442,7 +442,7 @@ function BlockMessage() {
   }, [blockWhenDisconnected, tunnelState, setBlockWhenDisconnected, disconnectTunnel]);
 
   const lockdownModeSettingName = messages.pgettext('vpn-settings-view', 'Lockdown mode');
-  const message = formatMarkdown(
+  const message = formatHtml(
     blockWhenDisconnected
       ? sprintf(
           // TRANSLATORS: This is a warning message shown when the app is blocking the users
@@ -451,7 +451,7 @@ function BlockMessage() {
           // TRANSLATORS: %(lockdownModeSettingName)s - The translation of "Lockdown mode"
           messages.pgettext(
             'login-view',
-            '**%(lockdownModeSettingName)s** is enabled. Disable it to unblock your connection.',
+            '<b>%(lockdownModeSettingName)s</b> is enabled. Disable it to unblock your connection.',
           ),
           { lockdownModeSettingName },
         )
diff --git a/gui/src/renderer/components/OpenVpnSettings.tsx b/gui/src/renderer/components/OpenVpnSettings.tsx
index 7c842f6c06..fed83149f4 100644
--- a/gui/src/renderer/components/OpenVpnSettings.tsx
+++ b/gui/src/renderer/components/OpenVpnSettings.tsx
@@ -10,8 +10,8 @@ import RelaySettingsBuilder from '../../shared/relay-settings-builder';
 import { removeNonNumericCharacters } from '../../shared/string-helpers';
 import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
+import { formatHtml } from '../lib/html-formatter';
 import { useBoolean } from '../lib/utilityHooks';
-import { formatMarkdown } from '../markdown-formatter';
 import { useSelector } from '../redux/store';
 import * as AppButton from './AppButton';
 import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
@@ -159,12 +159,12 @@ function TransportProtocolSelector() {
           <Cell.CellFooter>
             <AriaDescription>
               <Cell.CellFooterText>
-                {formatMarkdown(
+                {formatHtml(
                   // TRANSLATORS: This is used to instruct users how to make UDP mode
                   // TRANSLATORS: available.
                   messages.pgettext(
                     'openvpn-settings-view',
-                    'To activate UDP, change **Bridge mode** to **Automatic** or **Off**.',
+                    'To activate UDP, change <b>Bridge mode</b> to <b>Automatic</b> or <b>Off</b>.',
                   ),
                 )}
               </Cell.CellFooterText>
@@ -371,7 +371,7 @@ function bridgeModeFooterText(
   transportProtocol: RelayProtocol | null,
 ) {
   if (tunnelProtocol !== 'openvpn') {
-    return formatMarkdown(
+    return formatHtml(
       sprintf(
         // TRANSLATORS: This is used to instruct users how to make the bridge mode setting
         // TRANSLATORS: available.
@@ -380,7 +380,7 @@ function bridgeModeFooterText(
         // TRANSLATORS: %(openvpn)s - will be replaced with OpenVPN
         messages.pgettext(
           'openvpn-settings-view',
-          'To activate Bridge mode, go back and change **%(tunnelProtocol)s** to **%(openvpn)s**.',
+          'To activate Bridge mode, go back and change <b>%(tunnelProtocol)s</b> to <b>%(openvpn)s</b>.',
         ),
         {
           tunnelProtocol: messages.pgettext('vpn-settings-view', 'Tunnel protocol'),
@@ -389,7 +389,7 @@ function bridgeModeFooterText(
       ),
     );
   } else if (transportProtocol === 'udp') {
-    return formatMarkdown(
+    return formatHtml(
       sprintf(
         // TRANSLATORS: This is used to instruct users how to make the bridge mode setting
         // TRANSLATORS: available.
@@ -399,7 +399,7 @@ function bridgeModeFooterText(
         // TRANSLATORS: %(openvpn)s - will be replaced with OpenVPN
         messages.pgettext(
           'openvpn-settings-view',
-          'To activate Bridge mode, change **%(transportProtocol)s** to **%(automatic)s** or **%(tcp)s**.',
+          'To activate Bridge mode, change <b>%(transportProtocol)s</b> to <b>%(automatic)s</b> or <b>%(tcp)s</b>.',
         ),
         {
           transportProtocol: messages.pgettext('openvpn-settings-view', 'Transport protocol'),
diff --git a/gui/src/renderer/components/SplitTunnelingSettings.tsx b/gui/src/renderer/components/SplitTunnelingSettings.tsx
index c0fc4e07bf..4cad24f445 100644
--- a/gui/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/gui/src/renderer/components/SplitTunnelingSettings.tsx
@@ -11,8 +11,8 @@ import {
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
+import { formatHtml } from '../lib/html-formatter';
 import { useAsyncEffect } from '../lib/utilityHooks';
-import { formatMarkdown } from '../markdown-formatter';
 import { IReduxState } from '../redux/store';
 import Accordion from './Accordion';
 import * as AppButton from './AppButton';
@@ -454,9 +454,9 @@ export function WindowsSplitTunnelingSettings(props: IPlatformSplitTunnelingSett
       {splitTunnelingEnabled && searchTerm !== '' && !showSplitSection && !showNonSplitSection && (
         <StyledNoResult>
           <StyledNoResultText>
-            {formatMarkdown(
+            {formatHtml(
               sprintf(
-                messages.pgettext('split-tunneling-view', 'No result for **%(searchTerm)s**.'),
+                messages.pgettext('split-tunneling-view', 'No result for <b>%(searchTerm)s</b>.'),
                 { searchTerm },
               ),
             )}
diff --git a/gui/src/renderer/components/TooManyDevices.tsx b/gui/src/renderer/components/TooManyDevices.tsx
index 1d824d2d50..b23fe3f2df 100644
--- a/gui/src/renderer/components/TooManyDevices.tsx
+++ b/gui/src/renderer/components/TooManyDevices.tsx
@@ -9,9 +9,9 @@ import log from '../../shared/logging';
 import { capitalizeEveryWord } from '../../shared/string-helpers';
 import { useAppContext } from '../context';
 import { transitions, useHistory } from '../lib/history';
+import { formatHtml } from '../lib/html-formatter';
 import { RoutePath } from '../lib/routes';
 import { useBoolean } from '../lib/utilityHooks';
-import { formatMarkdown } from '../markdown-formatter';
 import { useSelector } from '../redux/store';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
@@ -253,15 +253,15 @@ function Device(props: IDeviceProps) {
         ]}
         close={hideConfirmation}>
         <ModalMessage>
-          {formatMarkdown(
+          {formatHtml(
             sprintf(
               // TRANSLATORS: Text displayed above button which logs out another device.
-              // TRANSLATORS: The text enclosed in "**" will appear bold.
+              // TRANSLATORS: The text enclosed in "<b></b>" will appear bold.
               // TRANSLATORS: Available placeholders:
               // TRANSLATORS: %(deviceName)s - The name of the device to log out.
               messages.pgettext(
                 'device-management',
-                'Are you sure you want to log **%(deviceName)s** out?',
+                'Are you sure you want to log <b>%(deviceName)s</b> out?',
               ),
               { deviceName: capitalizedDeviceName },
             ),
diff --git a/gui/src/renderer/components/VpnSettings.tsx b/gui/src/renderer/components/VpnSettings.tsx
index f42c07e4d2..ad5d3439b1 100644
--- a/gui/src/renderer/components/VpnSettings.tsx
+++ b/gui/src/renderer/components/VpnSettings.tsx
@@ -9,9 +9,9 @@ import log from '../../shared/logging';
 import RelaySettingsBuilder from '../../shared/relay-settings-builder';
 import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
+import { formatHtml } from '../lib/html-formatter';
 import { RoutePath } from '../lib/routes';
 import { useBoolean } from '../lib/utilityHooks';
-import { formatMarkdown } from '../markdown-formatter';
 import { RelaySettingsRedux } from '../redux/settings/reducers';
 import { useSelector } from '../redux/store';
 import * as AppButton from './AppButton';
@@ -407,20 +407,19 @@ function CustomDnsEnabledFooter() {
   const customDnsFeatureName = messages.pgettext('vpn-settings-view', 'Use custom DNS server');
 
   // TRANSLATORS: This is displayed when the custom DNS setting is turned on which makes the block
-  // TRANSLATORS: ads/trackers settings disabled. The text enclosed in "**" will appear bold.
-  // TRANSLATORS: Advanced settings refer to the name of the page with the title "Advanced".
+  // TRANSLATORS: ads/trackers settings disabled. The text enclosed in "<b></b>" will appear bold.
   // TRANSLATORS: Available placeholders:
   // TRANSLATORS: %(customDnsFeatureName)s - The name displayed next to the custom DNS toggle.
   const blockingDisabledText = messages.pgettext(
     'vpn-settings-view',
-    'Disable **%(customDnsFeatureName)s** (under Advanced settings) to activate these settings.',
+    'Disable <b>%(customDnsFeatureName)s</b> below to activate these settings.',
   );
 
   return (
     <Cell.CellFooter>
       <AriaDescription>
         <Cell.CellFooterText>
-          {formatMarkdown(sprintf(blockingDisabledText, { customDnsFeatureName }))}
+          {formatHtml(sprintf(blockingDisabledText, { customDnsFeatureName }))}
         </Cell.CellFooterText>
       </AriaDescription>
     </Cell.CellFooter>