Add Translations to Settings Pages

frontend/src/Settings/Settings.js

@@ -2,12 +2,13 @@ import React from 'react';
 import Link from 'Components/Link/Link';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
+import translate from 'Utilities/String/translate';
 import SettingsToolbarConnector from './SettingsToolbarConnector';
 import styles from './Settings.css';
 
 function Settings() {
   return (
-    <PageContent title="Settings">
+    <PageContent title={translate('Settings')}>
       <SettingsToolbarConnector
         hasPendingChanges={false}
       />
@@ -17,143 +18,143 @@ function Settings() {
           className={styles.link}
           to="/settings/mediamanagement"
         >
-          Media Management
+          {translate('MediaManagement')}
         </Link>
 
         <div className={styles.summary}>
-          Naming, file management settings and root folders
+          {translate('MediaManagementSettingsSummary')}
         </div>
 
         <Link
           className={styles.link}
           to="/settings/profiles"
         >
-          Profiles
+          {translate('Profiles')}
         </Link>
 
         <div className={styles.summary}>
-          Quality, Language, Delay and Release profiles
+          {translate('ProfilesSettingsSummary')}
         </div>
 
         <Link
           className={styles.link}
           to="/settings/quality"
         >
-          Quality
+          {translate('Quality')}
         </Link>
 
         <div className={styles.summary}>
-          Quality sizes and naming
+          {translate('QualitySettingsSummary')}
         </div>
 
         <Link
           className={styles.link}
           to="/settings/customformats"
         >
-          Custom Formats
+          {translate('CustomFormats')}
         </Link>
 
         <div className={styles.summary}>
-          Custom Formats and Settings
+          {translate('CustomFormatsSettingsSummary')}
         </div>
 
         <Link
           className={styles.link}
           to="/settings/indexers"
         >
-          Indexers
+          {translate('Indexers')}
         </Link>
 
         <div className={styles.summary}>
-          Indexers and indexer options
+          {translate('IndexersSettingsSummary')}
         </div>
 
         <Link
           className={styles.link}
           to="/settings/downloadclients"
         >
-          Download Clients
+          {translate('DownloadClients')}
         </Link>
 
         <div className={styles.summary}>
-          Download clients, download handling and remote path mappings
+          {translate('DownloadClientsSettingsSummary')}
         </div>
 
         <Link
           className={styles.link}
           to="/settings/importlists"
         >
-          Import Lists
+          {translate('ImportLists')}
         </Link>
 
         <div className={styles.summary}>
-          Import from another Sonarr instance or Trakt lists and manage list exclusions
+          {translate('ImportListsSettingsSummary')}
         </div>
 
         <Link
           className={styles.link}
           to="/settings/connect"
         >
-          Connect
+          {translate('Connect')}
         </Link>
 
         <div className={styles.summary}>
-          Notifications, connections to media servers/players and custom scripts
+          {translate('ConnectSettingsSummary')}
         </div>
 
         <Link
           className={styles.link}
           to="/settings/metadata"
         >
-          Metadata
+          {translate('Metadata')}
         </Link>
 
         <div className={styles.summary}>
-          Create metadata files when episodes are imported or series are refreshed
+          {translate('MetadataSettingsSummary')}
         </div>
 
         <Link
           className={styles.link}
           to="/settings/metadatasource"
         >
-          Metadata Source
+          {translate('MetadataSource')}
         </Link>
 
         <div className={styles.summary}>
-          Information on where Sonarr gets Series and Episode information
+          {translate('MetadataSourceSettingsSummary')}
         </div>
 
         <Link
           className={styles.link}
           to="/settings/tags"
         >
-          Tags
+          {translate('Tags')}
         </Link>
 
         <div className={styles.summary}>
-          See all tags and how they are used. Unused tags can be removed
+          {translate('TagsSettingsSummary')}
         </div>
 
         <Link
           className={styles.link}
           to="/settings/general"
         >
-          General
+          {translate('General')}
         </Link>
 
         <div className={styles.summary}>
-          Port, SSL, username/password, proxy, analytics and updates
+          {translate('GeneralSettingsSummary')}
         </div>
 
         <Link
           className={styles.link}
           to="/settings/ui"
         >
-          UI
+          {translate('Ui')}
         </Link>
 
         <div className={styles.summary}>
-          Calendar, date and color impaired options
+          {translate('UiSettingsSummary')}
         </div>
       </PageContentBody>
     </PageContent>