Translate Updated and Connection Lost Modals in frontend

(cherry picked from commit 074aa6f4457bf83173e6ba7209c452a6e0659a35)

Closes #8994

frontend/src/App/AppUpdatedModalContent.css

@@ -1,6 +1,7 @@
 .version {
   margin: 0 3px;
   font-weight: bold;
+  font-family: var(--defaultFontFamily);
 }
 
 .maintenance {

frontend/src/App/AppUpdatedModalContent.js

@@ -9,6 +9,7 @@ import ModalHeader from 'Components/Modal/ModalHeader';
 import { kinds } from 'Helpers/Props';
 import UpdateChanges from 'System/Updates/UpdateChanges';
 import translate from 'Utilities/String/translate';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
 import styles from './AppUpdatedModalContent.css';
 
 function mergeUpdates(items, version, prevVersion) {
@@ -64,20 +65,20 @@ function AppUpdatedModalContent(props) {
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>
-        {translate('RadarrUpdated')}
+        {translate('AppUpdated', { appName: 'Radarr' })}
       </ModalHeader>
 
       <ModalBody>
-        <div dangerouslySetInnerHTML={{ __html: translate('VersionUpdateText', [`<span className=${styles.version}>${version}</span>`]) }} />
+        <div>
+          <InlineMarkdown data={translate('AppUpdatedVersion', { appName: 'Radarr', version })} blockClassName={styles.version} />
+        </div>
 
         {
           isPopulated && !error && !!update &&
             <div>
               {
                 !update.changes &&
-                  <div className={styles.maintenance}>
-                    {translate('MaintenanceRelease')}
-                  </div>
+                  <div className={styles.maintenance}>{translate('MaintenanceRelease')}</div>
               }
 
               {

frontend/src/App/ConnectionLostModal.js

@@ -28,11 +28,11 @@ function ConnectionLostModal(props) {
 
         <ModalBody>
           <div>
-            {translate('ConnectionLostMessage')}
+            {translate('ConnectionLostToBackend', { appName: 'Radarr' })}
           </div>
 
           <div className={styles.automatic}>
-            {translate('ConnectionLostAutomaticMessage')}
+            {translate('ConnectionLostReconnect', { appName: 'Radarr' })}
           </div>
         </ModalBody>
         <ModalFooter>

frontend/src/Components/Markdown/InlineMarkdown.js

@@ -10,7 +10,8 @@ class InlineMarkdown extends Component {
   render() {
     const {
       className,
-      data
+      data,
+      blockClassName
     } = this.props;
 
     // For now only replace links or code blocks (not both)
@@ -47,7 +48,7 @@ class InlineMarkdown extends Component {
           markdownBlocks.push(data.substr(endIndex, match.index - endIndex));
         }
 
-        markdownBlocks.push(<code key={`code-${match.index}`}>{match[0].substring(1, match[0].length - 1)}</code>);
+        markdownBlocks.push(<code key={`code-${match.index}`} className={blockClassName ?? null}>{match[0].substring(1, match[0].length - 1)}</code>);
         endIndex = match.index + match[0].length;
       }
 
@@ -66,7 +67,8 @@ class InlineMarkdown extends Component {
 
 InlineMarkdown.propTypes = {
   className: PropTypes.string,
-  data: PropTypes.string
+  data: PropTypes.string,
+  blockClassName: PropTypes.string
 };
 
 export default InlineMarkdown;