New: Translation support for UI Sidebar, Search Input, Base Menus

frontend/src/Activity/Blacklist/Blacklist.js

@@ -12,6 +12,7 @@ import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import BlacklistRowConnector from './BlacklistRowConnector';
+import translate from 'Utilities/String/translate';
 
 class Blacklist extends Component {
 
@@ -36,7 +37,7 @@ class Blacklist extends Component {
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
-              label="Clear"
+              label={translate('Clear')}
               iconName={icons.CLEAR}
               isSpinning={isClearingBlacklistExecuting}
               onPress={onClearBlacklistPress}
@@ -49,7 +50,7 @@ class Blacklist extends Component {
               columns={columns}
             >
               <PageToolbarButton
-                label="Options"
+                label={translate('Options')}
                 iconName={icons.TABLE}
               />
             </TableOptionsModalWrapper>

frontend/src/Activity/History/History.js

@@ -13,6 +13,7 @@ import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import FilterMenu from 'Components/Menu/FilterMenu';
 import HistoryRowConnector from './HistoryRowConnector';
+import translate from 'Utilities/String/translate';
 
 class History extends Component {
 
@@ -46,7 +47,7 @@ class History extends Component {
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
-              label="Refresh"
+              label={translate('Refresh')}
               iconName={icons.REFRESH}
               isSpinning={isFetching}
               onPress={onFirstPagePress}
@@ -59,7 +60,7 @@ class History extends Component {
               columns={columns}
             >
               <PageToolbarButton
-                label="Options"
+                label={translate('Options')}
                 iconName={icons.TABLE}
               />
             </TableOptionsModalWrapper>

frontend/src/Activity/Queue/Queue.js

@@ -22,6 +22,7 @@ import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptions
 import RemoveQueueItemsModal from './RemoveQueueItemsModal';
 import QueueOptionsConnector from './QueueOptionsConnector';
 import QueueRowConnector from './QueueRowConnector';
+import translate from 'Utilities/String/translate';
 
 class Queue extends Component {
 
@@ -152,7 +153,7 @@ class Queue extends Component {
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
-              label="Refresh"
+              label={translate('Refresh')}
               iconName={icons.REFRESH}
               isSpinning={isRefreshing}
               onPress={onRefreshPress}
@@ -186,7 +187,7 @@ class Queue extends Component {
               optionsComponent={QueueOptionsConnector}
             >
               <PageToolbarButton
-                label="Options"
+                label={translate('Options')}
                 iconName={icons.TABLE}
               />
             </TableOptionsModalWrapper>

frontend/src/AddMovie/AddNewMovie/AddNewMovie.js

@@ -10,6 +10,7 @@ import TextInput from 'Components/Form/TextInput';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import AddNewMovieSearchResultConnector from './AddNewMovieSearchResultConnector';
+import translate from 'Utilities/String/translate';
 import styles from './AddNewMovie.css';
 
 class AddNewMovie extends Component {
@@ -166,9 +167,9 @@ class AddNewMovie extends Component {
               null :
               <div className={styles.message}>
                 <div className={styles.helpText}>
-                  It's easy to add a new movie, just start typing the name the movie you want to add.
+                  {translate('AddNewMessage')}
                 </div>
-                <div>You can also search using TMDB ID of a movie. eg. tmdb:71663</div>
+                <div>{translate('AddNewTmdbIdMessage')}</div>
               </div>
           }
 

frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.js

@@ -11,6 +11,7 @@ import PageContentBody from 'Components/Page/PageContentBody';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import ImportMovieRootFolderRowConnector from './ImportMovieRootFolderRowConnector';
+import translate from 'Utilities/String/translate';
 import styles from './ImportMovieSelectFolder.css';
 
 const rootFolderColumns = [
@@ -92,11 +93,11 @@ class ImportMovieSelectFolder extends Component {
             !error && isPopulated &&
               <div>
                 <div className={styles.header}>
-                  Import movies you already have
+                  {translate('ImportHeader')}
                 </div>
 
                 <div className={styles.tips}>
-                  Some tips to ensure the import goes smoothly:
+                  {translate('ImportTipsMessage')}
                   <ul>
                     <li className={styles.tip}>
                       Make sure that your files include the quality in their filenames. eg. <span className={styles.code}>movie.2008.bluray.mkv</span>
@@ -141,7 +142,7 @@ class ImportMovieSelectFolder extends Component {
                           className={styles.importButtonIcon}
                           name={icons.DRIVE}
                         />
-                        Choose another folder
+                        {translate('ChooseAnotherFolder')}
                       </Button>
                     </div> :
 

frontend/src/Calendar/CalendarPage.js

@@ -16,6 +16,7 @@ import CalendarLinkModal from './iCal/CalendarLinkModal';
 import CalendarOptionsModal from './Options/CalendarOptionsModal';
 import LegendConnector from './Legend/LegendConnector';
 import CalendarConnector from './CalendarConnector';
+import translate from 'Utilities/String/translate';
 import styles from './CalendarPage.css';
 
 const MINIMUM_DAY_WIDTH = 120;
@@ -109,7 +110,7 @@ class CalendarPage extends Component {
             <PageToolbarSeparator />
 
             <PageToolbarButton
-              label="RSS Sync"
+              label={translate('RSSSync')}
               iconName={icons.RSS}
               isSpinning={isRssSyncExecuting}
               onPress={onRssSyncPress}
@@ -126,7 +127,7 @@ class CalendarPage extends Component {
 
           <PageToolbarSection alignContent={align.RIGHT}>
             <PageToolbarButton
-              label="Options"
+              label={translate('Options')}
               iconName={icons.POSTER}
               onPress={this.onOptionsPress}
             />

frontend/src/Calendar/Header/CalendarHeader.js

@@ -11,6 +11,7 @@ import MenuContent from 'Components/Menu/MenuContent';
 import ViewMenuItem from 'Components/Menu/ViewMenuItem';
 import * as calendarViews from 'Calendar/calendarViews';
 import CalendarHeaderViewButton from './CalendarHeaderViewButton';
+import translate from 'Utilities/String/translate';
 import styles from './CalendarHeader.css';
 
 function getTitle(time, start, end, view, longDateFormat) {
@@ -192,7 +193,7 @@ class CalendarHeader extends Component {
                       selectedView={view}
                       onPress={this.onViewChange}
                     >
-                      Day
+                      {translate('Day')}
                     </ViewMenuItem>
 
                     <ViewMenuItem
@@ -200,7 +201,7 @@ class CalendarHeader extends Component {
                       selectedView={view}
                       onPress={this.onViewChange}
                     >
-                      Agenda
+                      {translate('Agenda')}
                     </ViewMenuItem>
                   </MenuContent>
                 </Menu> :

frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js

@@ -6,6 +6,7 @@ import ModalHeader from 'Components/Modal/ModalHeader';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import CustomFilter from './CustomFilter';
+import translate from 'Utilities/String/translate';
 import styles from './CustomFiltersModalContent.css';
 
 function CustomFiltersModalContent(props) {
@@ -24,7 +25,7 @@ function CustomFiltersModalContent(props) {
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>
-        Custom Filters
+        {translate('CustomFilters')}
       </ModalHeader>
 
       <ModalBody>

frontend/src/Components/Form/FormInputGroup.js

@@ -21,6 +21,7 @@ import TagSelectInputConnector from './TagSelectInputConnector';
 import TextTagInputConnector from './TextTagInputConnector';
 import TextInput from './TextInput';
 import FormInputHelpText from './FormInputHelpText';
+import translate from 'Utilities/String/translate';
 import styles from './FormInputGroup.css';
 
 function getComponent(type) {
@@ -195,7 +196,7 @@ function FormInputGroup(props) {
           <Link
             to={helpLink}
           >
-            More Info
+            {translate('MoreInfo')}
           </Link>
       }
 

frontend/src/Components/Menu/FilterMenu.js

@@ -4,6 +4,7 @@ import { icons } from 'Helpers/Props';
 import FilterMenuContent from './FilterMenuContent';
 import Menu from './Menu';
 import ToolbarMenuButton from './ToolbarMenuButton';
+import translate from 'Utilities/String/translate';
 import styles from './FilterMenu.css';
 
 class FilterMenu extends Component {
@@ -57,7 +58,7 @@ class FilterMenu extends Component {
         >
           <ButtonComponent
             iconName={icons.FILTER}
-            text="Filter"
+            text={translate('Filter')}
             isDisabled={isDisabled}
             indicator={selectedFilterKey !== 'all'}
           />

frontend/src/Components/Menu/FilterMenuContent.js

@@ -4,6 +4,7 @@ import MenuContent from './MenuContent';
 import FilterMenuItem from './FilterMenuItem';
 import MenuItem from './MenuItem';
 import MenuItemSeparator from './MenuItemSeparator';
+import translate from 'Utilities/String/translate';
 
 class FilterMenuContent extends Component {
 
@@ -61,7 +62,7 @@ class FilterMenuContent extends Component {
         {
           showCustomFilters &&
             <MenuItem onPress={onCustomFiltersPress}>
-              Custom Filters
+              {translate('CustomFilters')}
             </MenuItem>
         }
       </MenuContent>

frontend/src/Components/Menu/SortMenu.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { icons } from 'Helpers/Props';
 import Menu from 'Components/Menu/Menu';
 import ToolbarMenuButton from 'Components/Menu/ToolbarMenuButton';
+import translate from 'Utilities/String/translate';
 
 function SortMenu(props) {
   const {
@@ -19,7 +20,7 @@ function SortMenu(props) {
     >
       <ToolbarMenuButton
         iconName={icons.SORT}
-        text="Sort"
+        text={translate('Sort')}
         isDisabled={isDisabled}
       />
       {children}

frontend/src/Components/Menu/ViewMenu.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { icons } from 'Helpers/Props';
 import Menu from 'Components/Menu/Menu';
 import ToolbarMenuButton from 'Components/Menu/ToolbarMenuButton';
+import translate from 'Utilities/String/translate';
 
 function ViewMenu(props) {
   const {
@@ -17,7 +18,7 @@ function ViewMenu(props) {
     >
       <ToolbarMenuButton
         iconName={icons.VIEW}
-        text="View"
+        text={translate('View')}
         isDisabled={isDisabled}
       />
       {children}

frontend/src/Components/Page/Header/MovieSearchInput.js

@@ -7,6 +7,7 @@ import Icon from 'Components/Icon';
 import keyboardShortcuts, { shortcuts } from 'Components/keyboardShortcuts';
 import MovieSearchResult from './MovieSearchResult';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import translate from 'Utilities/String/translate';
 import FuseWorker from './fuse.worker';
 import styles from './MovieSearchInput.css';
 
@@ -227,7 +228,7 @@ class MovieSearchInput extends Component {
       className: styles.input,
       name: 'movieSearch',
       value,
-      placeholder: 'Search',
+      placeholder: translate('Search'),
       autoComplete: 'off',
       spellCheck: false,
       onChange: this.onChange,

frontend/src/Components/Page/Header/PageHeader.css

@@ -43,9 +43,28 @@
   flex-grow: 1;
 }
 
+.translate {
+  composes: link from '~Components/Link/Link.css';
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 35px;
+  color: #fff;
+  text-align: center;
+  line-height: 60px;
+
+  &:hover {
+    color: $toobarButtonHoverColor;
+  }
+}
+
 .donate {
   composes: link from '~Components/Link/Link.css';
 
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 30px;
   color: $themeRed;
   text-align: center;
@@ -64,8 +83,11 @@
   .sidebarToggleContainer {
     display: flex;
   }
+}
 
-  .donate {
+@media only screen and (max-width: $breakpointExtraSmall) {
+  .donate,
+  .translate {
     display: none;
   }
 }

frontend/src/Components/Page/Header/PageHeader.js

@@ -77,6 +77,13 @@ class PageHeader extends Component {
             to="https://radarr.video/donate.html"
             size={14}
           />
+          <IconButton
+            className={styles.translate}
+            title="Suggest translation change"
+            name={icons.TRANSLATE}
+            to="https://translate.servarr.com/projects/radarr/radarr/"
+            size={24}
+          />
           <PageHeaderActionsMenuConnector
             onKeyboardShortcutsPress={this.onOpenKeyboardShortcutsModal}
           />

frontend/src/Components/Page/Sidebar/PageSidebar.js

@@ -8,6 +8,7 @@ import locationShape from 'Helpers/Props/Shapes/locationShape';
 import dimensions from 'Styles/Variables/dimensions';
 import OverlayScroller from 'Components/Scroller/OverlayScroller';
 import Scroller from 'Components/Scroller/Scroller';
+import translate from 'Utilities/String/translate';
 import QueueStatusConnector from 'Activity/Queue/Status/QueueStatusConnector';
 import HealthStatusConnector from 'System/Status/Health/HealthStatusConnector';
 import MessagesConnector from './Messages/MessagesConnector';
@@ -20,20 +21,20 @@ const SIDEBAR_WIDTH = parseInt(dimensions.sidebarWidth);
 const links = [
   {
     iconName: icons.MOVIE_CONTINUING,
-    title: 'Movies',
+    title: translate('Movies'),
     to: '/',
     alias: '/movies',
     children: [
       {
-        title: 'Add New',
+        title: translate('AddNew'),
         to: '/add/new'
       },
       {
-        title: 'Import',
+        title: translate('Import'),
         to: '/add/import'
       },
       {
-        title: 'Discover',
+        title: translate('Discover'),
         to: '/add/discover'
       }
     ]
@@ -41,26 +42,26 @@ const links = [
 
   {
     iconName: icons.CALENDAR,
-    title: 'Calendar',
+    title: translate('Calendar'),
     to: '/calendar'
   },
 
   {
     iconName: icons.ACTIVITY,
-    title: 'Activity',
+    title: translate('Activity'),
     to: '/activity/queue',
     children: [
       {
-        title: 'Queue',
+        title: translate('Queue'),
         to: '/activity/queue',
         statusComponent: QueueStatusConnector
       },
       {
-        title: 'History',
+        title: translate('History'),
         to: '/activity/history'
       },
       {
-        title: 'Blacklist',
+        title: translate('Blacklist'),
         to: '/activity/blacklist'
       }
     ]
@@ -68,55 +69,55 @@ const links = [
 
   {
     iconName: icons.SETTINGS,
-    title: 'Settings',
+    title: translate('Settings'),
     to: '/settings',
     children: [
       {
-        title: 'Media Management',
+        title: translate('MediaManagement'),
         to: '/settings/mediamanagement'
       },
       {
-        title: 'Profiles',
+        title: translate('Profiles'),
         to: '/settings/profiles'
       },
       {
-        title: 'Quality',
+        title: translate('Quality'),
         to: '/settings/quality'
       },
       {
-        title: 'Custom Formats',
+        title: translate('CustomFormats'),
         to: '/settings/customformats'
       },
       {
-        title: 'Indexers',
+        title: translate('Indexers'),
         to: '/settings/indexers'
       },
       {
-        title: 'Download Clients',
+        title: translate('DownloadClients'),
         to: '/settings/downloadclients'
       },
       {
-        title: 'Lists',
+        title: translate('Lists'),
         to: '/settings/netimports'
       },
       {
-        title: 'Connect',
+        title: translate('Connect'),
         to: '/settings/connect'
       },
       {
-        title: 'Metadata',
+        title: translate('Metadata'),
         to: '/settings/metadata'
       },
       {
-        title: 'Tags',
+        title: translate('Tags'),
         to: '/settings/tags'
       },
       {
-        title: 'General',
+        title: translate('General'),
         to: '/settings/general'
       },
       {
-        title: 'UI',
+        title: translate('UI'),
         to: '/settings/ui'
       }
     ]
@@ -124,32 +125,32 @@ const links = [
 
   {
     iconName: icons.SYSTEM,
-    title: 'System',
+    title: translate('System'),
     to: '/system/status',
     children: [
       {
-        title: 'Status',
+        title: translate('Status'),
         to: '/system/status',
         statusComponent: HealthStatusConnector
       },
       {
-        title: 'Tasks',
+        title: translate('Tasks'),
         to: '/system/tasks'
       },
       {
-        title: 'Backup',
+        title: translate('Backup'),
         to: '/system/backup'
       },
       {
-        title: 'Updates',
+        title: translate('Updates'),
         to: '/system/updates'
       },
       {
-        title: 'Events',
+        title: translate('Events'),
         to: '/system/events'
       },
       {
-        title: 'Log Files',
+        title: translate('LogFiles'),
         to: '/system/logs/files'
       }
     ]

frontend/src/DiscoverMovie/DiscoverMovie.js

@@ -25,6 +25,7 @@ import AddListMovieSortMenu from './Menus/AddListMovieSortMenu';
 import AddListMovieViewMenu from './Menus/AddListMovieViewMenu';
 import NoDiscoverMovie from './NoDiscoverMovie';
 import DiscoverMovieFooterConnector from './DiscoverMovieFooterConnector';
+import translate from 'Utilities/String/translate';
 import styles from 'Movie/Index/MovieIndex.css';
 
 function getViewComponent(view) {
@@ -290,7 +291,7 @@ class DiscoverMovie extends Component {
                   columns={columns}
                 >
                   <PageToolbarButton
-                    label="Options"
+                    label={translate('Options')}
                     iconName={icons.TABLE}
                   />
                 </TableOptionsModalWrapper> :
@@ -300,7 +301,7 @@ class DiscoverMovie extends Component {
             {
               view === 'posters' ?
                 <PageToolbarButton
-                  label="Options"
+                  label={translate('Options')}
                   iconName={icons.POSTER}
                   isDisabled={hasNoMovie}
                   onPress={this.onPosterOptionsPress}
@@ -311,7 +312,7 @@ class DiscoverMovie extends Component {
             {
               view === 'overview' ?
                 <PageToolbarButton
-                  label="Options"
+                  label={translate('Options')}
                   iconName={icons.OVERVIEW}
                   isDisabled={hasNoMovie}
                   onPress={this.onOverviewOptionsPress}

frontend/src/DiscoverMovie/DiscoverMovieFooter.js

@@ -10,6 +10,7 @@ import SpinnerButton from 'Components/Link/SpinnerButton';
 import PageContentFooter from 'Components/Page/PageContentFooter';
 import ExcludeMovieModal from './Exclusion/ExcludeMovieModal';
 import DiscoverMovieFooterLabel from './DiscoverMovieFooterLabel';
+import translate from 'Utilities/String/translate';
 import styles from './DiscoverMovieFooter.css';
 
 class DiscoverMovieFooter extends Component {
@@ -208,7 +209,7 @@ class DiscoverMovieFooter extends Component {
                   isDisabled={!selectedCount || isAdding}
                   onPress={this.onAddMoviesPress}
                 >
-                  Add Movies
+                  {translate('AddMovies')}
                 </SpinnerButton>
               </div>
 
@@ -219,7 +220,7 @@ class DiscoverMovieFooter extends Component {
                 isDisabled={!selectedCount || isExcluding}
                 onPress={this.props.onExcludeMoviesPress}
               >
-                Add Exclusion
+                {translate('AddExclusion')}
               </SpinnerButton>
             </div>
           </div>

frontend/src/Helpers/Props/icons.js

@@ -66,6 +66,7 @@ import {
   faHistory as fasHistory,
   faHome as fasHome,
   faInfoCircle as fasInfoCircle,
+  faLanguage as fasLanguage,
   faLaptop as fasLaptop,
   faLevelUpAlt as fasLevelUpAlt,
   faMedkit as fasMedkit,
@@ -207,6 +208,7 @@ export const TABLE = fasTable;
 export const TAGS = fasTags;
 export const TBA = fasQuestionCircle;
 export const TEST = fasVial;
+export const TRANSLATE = fasLanguage;
 export const UNGROUP = farObjectUngroup;
 export const UNKNOWN = fasQuestion;
 export const UNMONITORED = farBookmark;

frontend/src/Movie/Delete/DeleteMovieModalContent.js

@@ -11,6 +11,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalFooter from 'Components/Modal/ModalFooter';
+import translate from 'Utilities/String/translate';
 import styles from './DeleteMovieModalContent.css';
 
 class DeleteMovieModalContent extends Component {
@@ -140,7 +141,7 @@ class DeleteMovieModalContent extends Component {
             kind={kinds.DANGER}
             onPress={this.onDeleteMovieConfirmed}
           >
-            Delete
+            {translate('Delete')}
           </Button>
         </ModalFooter>
       </ModalContent>

frontend/src/Movie/Details/MovieDetails.js

@@ -42,6 +42,7 @@ import InteractiveSearchTable from 'InteractiveSearch/InteractiveSearchTable';
 import InteractiveSearchFilterMenuConnector from 'InteractiveSearch/InteractiveSearchFilterMenuConnector';
 import MovieTagsConnector from './MovieTagsConnector';
 import MovieReleaseDatesConnector from './MovieReleaseDatesConnector';
+import translate from 'Utilities/String/translate';
 import styles from './MovieDetails.css';
 
 const defaultFontSize = parseInt(fonts.defaultFontSize);
@@ -326,7 +327,7 @@ class MovieDetails extends Component {
             />
 
             <PageToolbarButton
-              label="Delete"
+              label={translate('Delete')}
               iconName={icons.DELETE}
               onPress={this.onDeleteMoviePress}
             />
@@ -604,42 +605,42 @@ class MovieDetails extends Component {
                   className={styles.tab}
                   selectedClassName={styles.selectedTab}
                 >
-                  History
+                  {translate('History')}
                 </Tab>
 
                 <Tab
                   className={styles.tab}
                   selectedClassName={styles.selectedTab}
                 >
-                  Search
+                  {translate('Search')}
                 </Tab>
 
                 <Tab
                   className={styles.tab}
                   selectedClassName={styles.selectedTab}
                 >
-                  Files
+                  {translate('Files')}
                 </Tab>
 
                 <Tab
                   className={styles.tab}
                   selectedClassName={styles.selectedTab}
                 >
-                  Titles
+                  {translate('Titles')}
                 </Tab>
 
                 <Tab
                   className={styles.tab}
                   selectedClassName={styles.selectedTab}
                 >
-                  Cast
+                  {translate('Cast')}
                 </Tab>
 
                 <Tab
                   className={styles.tab}
                   selectedClassName={styles.selectedTab}
                 >
-                  Crew
+                  {translate('Crew')}
                 </Tab>
 
                 {

frontend/src/Movie/Edit/EditMovieModalContent.js

@@ -12,6 +12,7 @@ import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import MoveMovieModal from 'Movie/MoveMovie/MoveMovieModal';
+import translate from 'Utilities/String/translate';
 import styles from './EditMovieModalContent.css';
 
 class EditMovieModalContent extends Component {
@@ -149,7 +150,7 @@ class EditMovieModalContent extends Component {
             kind={kinds.DANGER}
             onPress={onDeleteMoviePress}
           >
-            Delete
+            {translate('Delete')}
           </Button>
 
           <Button

frontend/src/Movie/Editor/Delete/DeleteMovieModalContent.js

@@ -9,6 +9,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalFooter from 'Components/Modal/ModalFooter';
+import translate from 'Utilities/String/translate';
 import styles from './DeleteMovieModalContent.css';
 
 class DeleteMovieModalContent extends Component {
@@ -127,7 +128,7 @@ class DeleteMovieModalContent extends Component {
             kind={kinds.DANGER}
             onPress={this.onDeleteMovieConfirmed}
           >
-            Delete
+            {translate('Delete')}
           </Button>
         </ModalFooter>
       </ModalContent>

frontend/src/Movie/Editor/MovieEditorFooter.js

@@ -11,6 +11,7 @@ import MoveMovieModal from 'Movie/MoveMovie/MoveMovieModal';
 import TagsModal from './Tags/TagsModal';
 import DeleteMovieModal from './Delete/DeleteMovieModal';
 import MovieEditorFooterLabel from './MovieEditorFooterLabel';
+import translate from 'Utilities/String/translate';
 import styles from './MovieEditorFooter.css';
 
 const NO_CHANGE = 'noChange';
@@ -257,7 +258,7 @@ class MovieEditorFooter extends Component {
                 isDisabled={!selectedCount || isDeleting}
                 onPress={this.onDeleteSelectedPress}
               >
-                Delete
+                {translate('Delete')}
               </SpinnerButton>
             </div>
           </div>

frontend/src/Movie/History/MovieHistoryTableContent.js

@@ -6,6 +6,7 @@ import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import MovieHistoryRowConnector from './MovieHistoryRowConnector';
+import translate from 'Utilities/String/translate';
 import styles from './MovieHistoryTableContent.css';
 
 const columns = [
@@ -30,13 +31,13 @@ const columns = [
   },
   {
     name: 'customFormats',
-    label: 'Custom Formats',
+    label: translate('CustomFormats'),
     isSortable: false,
     isVisible: true
   },
   {
     name: 'date',
-    label: 'Date',
+    label: translate('Date'),
     isVisible: true
   },
   {

frontend/src/Movie/Index/MovieIndex.js

@@ -31,6 +31,7 @@ import MovieIndexFooterConnector from './MovieIndexFooterConnector';
 import MovieEditorFooter from 'Movie/Editor/MovieEditorFooter.js';
 import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
 import OrganizeMovieModal from 'Movie/Editor/Organize/OrganizeMovieModal';
+import translate from 'Utilities/String/translate';
 import styles from './MovieIndex.css';
 
 function getViewComponent(view) {
@@ -351,15 +352,15 @@ class MovieIndex extends Component {
     const isLoaded = !!(!error && isPopulated && items.length && scroller);
     const hasNoMovie = !totalItems;
 
-    const searchIndexLabel = selectedFilterKey === 'all' ? 'Search All' : 'Search Filtered';
+    const searchIndexLabel = selectedFilterKey === 'all' ? translate('SearchAll') : 'Search Filtered';
-    const searchEditorLabel = selectedMovieIds.length > 0 ? 'Search Selected' : 'Search All';
+    const searchEditorLabel = selectedMovieIds.length > 0 ? 'Search Selected' : translate('SearchAll');
 
     return (
       <PageContent>
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
-              label={isMovieEditorActive && selectedMovieIds.length > 0 ? 'Update Selected' : 'Update All'}
+              label={isMovieEditorActive && selectedMovieIds.length > 0 ? 'Update Selected' : translate('UpdateAll')}
               iconName={icons.REFRESH}
               spinningName={icons.REFRESH}
               isSpinning={isRefreshingMovie}
@@ -368,7 +369,7 @@ class MovieIndex extends Component {
             />
 
             <PageToolbarButton
-              label="RSS Sync"
+              label={translate('RssSync')}
               iconName={icons.RSS}
               isSpinning={isRssSyncExecuting}
               isDisabled={hasNoMovie}
@@ -385,7 +386,7 @@ class MovieIndex extends Component {
             />
 
             <PageToolbarButton
-              label="Manual Import"
+              label={translate('ManualImport')}
               iconName={icons.INTERACTIVE}
               isDisabled={hasNoMovie}
               onPress={this.onInteractiveImportPress}
@@ -396,13 +397,13 @@ class MovieIndex extends Component {
             {
               isMovieEditorActive ?
                 <PageToolbarButton
-                  label="Movie Index"
+                  label={translate('MovieIndex')}
                   iconName={icons.MOVIE_CONTINUING}
                   isDisabled={hasNoMovie}
                   onPress={this.onMovieEditorTogglePress}
                 /> :
                 <PageToolbarButton
-                  label="Movie Editor"
+                  label={translate('MovieEditor')}
                   iconName={icons.EDIT}
                   isDisabled={hasNoMovie}
                   onPress={this.onMovieEditorTogglePress}
@@ -412,7 +413,7 @@ class MovieIndex extends Component {
             {
               isMovieEditorActive ?
                 <PageToolbarButton
-                  label={allSelected ? 'Unselect All' : 'Select All'}
+                  label={allSelected ? translate('UnselectAll') : translate('SelectAll')}
                   iconName={icons.CHECK_SQUARE}
                   isDisabled={hasNoMovie}
                   onPress={this.onSelectAllPress}
@@ -434,7 +435,7 @@ class MovieIndex extends Component {
                   optionsComponent={MovieIndexTableOptionsConnector}
                 >
                   <PageToolbarButton
-                    label="Options"
+                    label={translate('Options')}
                     iconName={icons.TABLE}
                   />
                 </TableOptionsModalWrapper> :
@@ -444,7 +445,7 @@ class MovieIndex extends Component {
             {
               view === 'posters' ?
                 <PageToolbarButton
-                  label="Options"
+                  label={translate('Options')}
                   iconName={icons.POSTER}
                   isDisabled={hasNoMovie}
                   onPress={this.onPosterOptionsPress}
@@ -455,7 +456,7 @@ class MovieIndex extends Component {
             {
               view === 'overview' ?
                 <PageToolbarButton
-                  label="Options"
+                  label={translate('Options')}
                   iconName={icons.OVERVIEW}
                   isDisabled={hasNoMovie}
                   onPress={this.onOverviewOptionsPress}

frontend/src/MovieFile/Editor/MovieFileEditorRow.js

@@ -15,8 +15,9 @@ import SelectLanguageModal from 'MovieFile/Language/SelectLanguageModal';
 import * as mediaInfoTypes from 'MovieFile/mediaInfoTypes';
 import MediaInfoConnector from 'MovieFile/MediaInfoConnector';
 import MovieFileRowCellPlaceholder from './MovieFileRowCellPlaceholder';
-import styles from './MovieFileEditorRow.css';
 import FileDetailsModal from '../FileDetailsModal';
+import translate from 'Utilities/String/translate';
+import styles from './MovieFileEditorRow.css';
 
 class MovieFileEditorRow extends Component {
 
@@ -203,7 +204,7 @@ class MovieFileEditorRow extends Component {
           kind={kinds.DANGER}
           title="Delete Selected Movie Files"
           message={'Are you sure you want to delete the selected movie files?'}
-          confirmLabel="Delete"
+          confirmLabel={translate('Delete')}
           onConfirm={this.onConfirmDelete}
           onCancel={this.onConfirmDeleteModalClose}
         />

frontend/src/Settings/AdvancedSettingsButton.js

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { icons } from 'Helpers/Props';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
+import translate from 'Utilities/String/translate';
 import styles from './AdvancedSettingsButton.css';
 
 function AdvancedSettingsButton(props) {
@@ -44,7 +45,7 @@ function AdvancedSettingsButton(props) {
 
       <div className={styles.labelContainer}>
         <div className={styles.label}>
-          {advancedSettings ? 'Hide Advanced' : 'Show Advanced'}
+          {advancedSettings ? translate('HideAdvanced') : translate('ShowAdvanced')}
         </div>
       </div>
     </Link>

frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.js

@@ -6,6 +6,7 @@ import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import EditCustomFormatModalConnector from './EditCustomFormatModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './CustomFormat.css';
 
 class CustomFormat extends Component {
@@ -132,7 +133,7 @@ class CustomFormat extends Component {
               </div>
             </div>
           }
-          confirmLabel="Delete"
+          confirmLabel={translate('Delete')}
           isSpinning={isDeleting}
           onConfirm={this.onConfirmDeleteCustomFormat}
           onCancel={this.onDeleteCustomFormatModalClose}

frontend/src/Settings/CustomFormats/CustomFormats/CustomFormats.js

@@ -7,6 +7,7 @@ import Icon from 'Components/Icon';
 import PageSectionContent from 'Components/Page/PageSectionContent';
 import CustomFormat from './CustomFormat';
 import EditCustomFormatModalConnector from './EditCustomFormatModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './CustomFormats.css';
 
 class CustomFormats extends Component {
@@ -58,7 +59,7 @@ class CustomFormats extends Component {
     } = this.props;
 
     return (
-      <FieldSet legend="Custom Formats">
+      <FieldSet legend={translate('CustomFormats')}>
         <PageSectionContent
           errorMessage="Unable to load Custom Formats"
           {...otherProps}c={true}

frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.js

@@ -18,6 +18,7 @@ import FormInputGroup from 'Components/Form/FormInputGroup';
 import Specification from './Specifications/Specification';
 import AddSpecificationModal from './Specifications/AddSpecificationModal';
 import EditSpecificationModalConnector from './Specifications/EditSpecificationModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './EditCustomFormatModalContent.css';
 
 class EditCustomFormatModalContent extends Component {
@@ -185,7 +186,7 @@ class EditCustomFormatModalContent extends Component {
                 kind={kinds.DANGER}
                 onPress={onDeleteCustomFormatPress}
               >
-                Delete
+                {translate('Delete')}
               </Button>
           }
 

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/EditSpecificationModalContent.js

@@ -14,6 +14,7 @@ import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import ProviderFieldFormGroup from 'Components/Form/ProviderFieldFormGroup';
+import translate from 'Utilities/String/translate';
 import styles from './EditSpecificationModalContent.css';
 
 function EditSpecificationModalContent(props) {
@@ -120,7 +121,7 @@ function EditSpecificationModalContent(props) {
               kind={kinds.DANGER}
               onPress={onDeleteSpecificationPress}
             >
-              Delete
+              {translate('Delete')}
             </Button>
         }
 

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/Specification.js

@@ -6,6 +6,7 @@ import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import EditSpecificationModalConnector from './EditSpecificationModal';
+import translate from 'Utilities/String/translate';
 import styles from './Specification.css';
 
 class Specification extends Component {
@@ -121,7 +122,7 @@ class Specification extends Component {
               </div>
             </div>
           }
-          confirmLabel="Delete"
+          confirmLabel={translate('Delete')}
           onConfirm={this.onConfirmDeleteSpecification}
           onCancel={this.onDeleteSpecificationModalClose}
         />

frontend/src/Settings/DownloadClients/DownloadClients/DownloadClient.js

@@ -5,6 +5,7 @@ import Card from 'Components/Card';
 import Label from 'Components/Label';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import EditDownloadClientModalConnector from './EditDownloadClientModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './DownloadClient.css';
 
 class DownloadClient extends Component {
@@ -105,7 +106,7 @@ class DownloadClient extends Component {
           kind={kinds.DANGER}
           title="Delete Download Client"
           message={`Are you sure you want to delete the download client '${name}'?`}
-          confirmLabel="Delete"
+          confirmLabel={translate('Delete')}
           onConfirm={this.onConfirmDeleteDownloadClient}
           onCancel={this.onDeleteDownloadClientModalClose}
         />

frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.js

@@ -8,6 +8,7 @@ import PageSectionContent from 'Components/Page/PageSectionContent';
 import DownloadClient from './DownloadClient';
 import AddDownloadClientModal from './AddDownloadClientModal';
 import EditDownloadClientModalConnector from './EditDownloadClientModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './DownloadClients.css';
 
 class DownloadClients extends Component {
@@ -58,7 +59,7 @@ class DownloadClients extends Component {
     } = this.state;
 
     return (
-      <FieldSet legend="Download Clients">
+      <FieldSet legend={translate('DownloadClients')}>
         <PageSectionContent
           errorMessage="Unable to load download clients"
           {...otherProps}

frontend/src/Settings/DownloadClients/DownloadClients/EditDownloadClientModalContent.js

@@ -14,6 +14,7 @@ import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import ProviderFieldFormGroup from 'Components/Form/ProviderFieldFormGroup';
+import translate from 'Utilities/String/translate';
 import styles from './EditDownloadClientModalContent.css';
 
 class EditDownloadClientModalContent extends Component {
@@ -144,7 +145,7 @@ class EditDownloadClientModalContent extends Component {
                 kind={kinds.DANGER}
                 onPress={onDeleteDownloadClientPress}
               >
-                Delete
+                {translate('Delete')}
               </Button>
           }
 

frontend/src/Settings/DownloadClients/Options/DownloadClientOptions.js

@@ -7,6 +7,7 @@ import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
+import translate from 'Utilities/String/translate';
 
 function DownloadClientOptions(props) {
   const {
@@ -33,7 +34,7 @@ function DownloadClientOptions(props) {
       {
         hasSettings && !isFetching && !error &&
           <div>
-            <FieldSet legend="Completed Download Handling">
+            <FieldSet legend={translate('CompletedDownloadHandling')}>
               <Form>
                 <FormGroup size={sizes.MEDIUM}>
                   <FormLabel>Enable</FormLabel>
@@ -85,7 +86,7 @@ function DownloadClientOptions(props) {
             </FieldSet>
 
             <FieldSet
-              legend="Failed Download Handling"
+              legend={translate('FailedDownloadHandling')}
             >
               <Form>
                 <FormGroup size={sizes.MEDIUM}>

frontend/src/Settings/DownloadClients/RemotePathMappings/EditRemotePathMappingModalContent.js

@@ -13,6 +13,7 @@ import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
+import translate from 'Utilities/String/translate';
 import styles from './EditRemotePathMappingModalContent.css';
 
 function EditRemotePathMappingModalContent(props) {
@@ -105,7 +106,7 @@ function EditRemotePathMappingModalContent(props) {
               kind={kinds.DANGER}
               onPress={onDeleteRemotePathMappingPress}
             >
-              Delete
+              {translate('Delete')}
             </Button>
         }
 

frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMapping.js

@@ -6,6 +6,7 @@ import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import EditRemotePathMappingModalConnector from './EditRemotePathMappingModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './RemotePathMapping.css';
 
 class RemotePathMapping extends Component {
@@ -89,7 +90,7 @@ class RemotePathMapping extends Component {
           kind={kinds.DANGER}
           title="Delete Delay Profile"
           message="Are you sure you want to delete this remote path mapping?"
-          confirmLabel="Delete"
+          confirmLabel={translate('Delete')}
           onConfirm={this.onConfirmDeleteRemotePathMapping}
           onCancel={this.onDeleteRemotePathMappingModalClose}
         />

frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMappings.js

@@ -7,6 +7,7 @@ import Link from 'Components/Link/Link';
 import PageSectionContent from 'Components/Page/PageSectionContent';
 import RemotePathMapping from './RemotePathMapping';
 import EditRemotePathMappingModalConnector from './EditRemotePathMappingModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './RemotePathMappings.css';
 
 class RemotePathMappings extends Component {
@@ -44,7 +45,7 @@ class RemotePathMappings extends Component {
     } = this.props;
 
     return (
-      <FieldSet legend="Remote Path Mappings">
+      <FieldSet legend={translate('RemotePathMappings')}>
         <PageSectionContent
           errorMessage="Unable to load Remote Path Mappings"
           {...otherProps}

frontend/src/Settings/General/AnalyticSettings.js

@@ -5,6 +5,7 @@ import FieldSet from 'Components/FieldSet';
 import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
+import translate from 'Utilities/String/translate';
 
 function AnalyticSettings(props) {
   const {
@@ -17,7 +18,7 @@ function AnalyticSettings(props) {
   } = settings;
 
   return (
-    <FieldSet legend="Analytics">
+    <FieldSet legend={translate('Analytics')}>
       <FormGroup size={sizes.MEDIUM}>
         <FormLabel>Send Anonymous Usage Data</FormLabel>
 

frontend/src/Settings/General/HostSettings.js

@@ -5,6 +5,7 @@ import FieldSet from 'Components/FieldSet';
 import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
+import translate from 'Utilities/String/translate';
 
 function HostSettings(props) {
   const {
@@ -27,7 +28,7 @@ function HostSettings(props) {
   } = settings;
 
   return (
-    <FieldSet legend="Host">
+    <FieldSet legend={translate('Host')}>
       <FormGroup
         advancedSettings={advancedSettings}
         isAdvanced={true}

frontend/src/Settings/General/LoggingSettings.js

@@ -5,6 +5,7 @@ import FieldSet from 'Components/FieldSet';
 import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
+import translate from 'Utilities/String/translate';
 
 const logLevelOptions = [
   { key: 'info', value: 'Info' },
@@ -23,7 +24,7 @@ function LoggingSettings(props) {
   } = settings;
 
   return (
-    <FieldSet legend="Logging">
+    <FieldSet legend={translate('Logging')}>
       <FormGroup>
         <FormLabel>Log Level</FormLabel>
 

frontend/src/Settings/General/ProxySettings.js

@@ -5,6 +5,7 @@ import FieldSet from 'Components/FieldSet';
 import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
+import translate from 'Utilities/String/translate';
 
 function ProxySettings(props) {
   const {
@@ -30,7 +31,7 @@ function ProxySettings(props) {
   ];
 
   return (
-    <FieldSet legend="Proxy">
+    <FieldSet legend={translate('Proxy')}>
       <FormGroup size={sizes.MEDIUM}>
         <FormLabel>Use Proxy</FormLabel>
 

frontend/src/Settings/General/SecuritySettings.js

@@ -9,6 +9,7 @@ import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormInputButton from 'Components/Form/FormInputButton';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
+import translate from 'Utilities/String/translate';
 
 const authenticationMethodOptions = [
   { key: 'none', value: 'None' },
@@ -76,7 +77,7 @@ class SecuritySettings extends Component {
     const authenticationEnabled = authenticationMethod && authenticationMethod.value !== 'none';
 
     return (
-      <FieldSet legend="Security">
+      <FieldSet legend={translate('Security')}>
         <FormGroup>
           <FormLabel>Authentication</FormLabel>
 

frontend/src/Settings/General/UpdateSettings.js

@@ -6,6 +6,7 @@ import FieldSet from 'Components/FieldSet';
 import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
+import translate from 'Utilities/String/translate';
 
 function UpdateSettings(props) {
   const {
@@ -43,7 +44,7 @@ function UpdateSettings(props) {
   updateOptions.push({ key: 'script', value: 'Script' });
 
   return (
-    <FieldSet legend="Updates">
+    <FieldSet legend={translate('Updates')}>
       <FormGroup
         advancedSettings={advancedSettings}
         isAdvanced={true}

frontend/src/Settings/Indexers/Indexers/EditIndexerModalContent.js

@@ -13,6 +13,7 @@ import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import ProviderFieldFormGroup from 'Components/Form/ProviderFieldFormGroup';
+import translate from 'Utilities/String/translate';
 import styles from './EditIndexerModalContent.css';
 
 function EditIndexerModalContent(props) {
@@ -143,7 +144,7 @@ function EditIndexerModalContent(props) {
               kind={kinds.DANGER}
               onPress={onDeleteIndexerPress}
             >
-              Delete
+              {translate('Delete')}
             </Button>
         }
 

frontend/src/Settings/Indexers/Indexers/Indexer.js

@@ -6,6 +6,7 @@ import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import EditIndexerModalConnector from './EditIndexerModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './Indexer.css';
 
 class Indexer extends Component {
@@ -136,7 +137,7 @@ class Indexer extends Component {
           kind={kinds.DANGER}
           title="Delete Indexer"
           message={`Are you sure you want to delete the indexer '${name}'?`}
-          confirmLabel="Delete"
+          confirmLabel={translate('Delete')}
           onConfirm={this.onConfirmDeleteIndexer}
           onCancel={this.onDeleteIndexerModalClose}
         />

frontend/src/Settings/Indexers/Indexers/Indexers.js

@@ -8,6 +8,7 @@ import PageSectionContent from 'Components/Page/PageSectionContent';
 import Indexer from './Indexer';
 import AddIndexerModal from './AddIndexerModal';
 import EditIndexerModalConnector from './EditIndexerModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './Indexers.css';
 
 class Indexers extends Component {
@@ -64,7 +65,7 @@ class Indexers extends Component {
     } = this.state;
 
     return (
-      <FieldSet legend="Indexers">
+      <FieldSet legend={translate('Indexers')}>
         <PageSectionContent
           errorMessage="Unable to load Indexers"
           {...otherProps}

frontend/src/Settings/Indexers/Options/IndexerOptions.js

@@ -7,6 +7,7 @@ import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
+import translate from 'Utilities/String/translate';
 
 function IndexerOptions(props) {
   const {
@@ -19,7 +20,7 @@ function IndexerOptions(props) {
   } = props;
 
   return (
-    <FieldSet legend="Options">
+    <FieldSet legend={translate('Options')}>
       {
         isFetching &&
           <LoadingIndicator />

frontend/src/Settings/Indexers/Restrictions/EditRestrictionModalContent.js

@@ -11,6 +11,7 @@ import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
+import translate from 'Utilities/String/translate';
 import styles from './EditRestrictionModalContent.css';
 
 function EditRestrictionModalContent(props) {
@@ -91,7 +92,7 @@ function EditRestrictionModalContent(props) {
               kind={kinds.DANGER}
               onPress={onDeleteRestrictionPress}
             >
-              Delete
+              {translate('Delete')}
             </Button>
         }
 

frontend/src/Settings/Indexers/Restrictions/Restriction.js

@@ -7,6 +7,7 @@ import Label from 'Components/Label';
 import TagList from 'Components/TagList';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import EditRestrictionModalConnector from './EditRestrictionModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './Restriction.css';
 
 class Restriction extends Component {
@@ -122,7 +123,7 @@ class Restriction extends Component {
           kind={kinds.DANGER}
           title="Delete Restriction"
           message={'Are you sure you want to delete this restriction?'}
-          confirmLabel="Delete"
+          confirmLabel={translate('Delete')}
           onConfirm={this.onConfirmDeleteRestriction}
           onCancel={this.onDeleteRestrictionModalClose}
         />

frontend/src/Settings/Indexers/Restrictions/Restrictions.js

@@ -7,6 +7,7 @@ import Icon from 'Components/Icon';
 import PageSectionContent from 'Components/Page/PageSectionContent';
 import Restriction from './Restriction';
 import EditRestrictionModalConnector from './EditRestrictionModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './Restrictions.css';
 
 class Restrictions extends Component {
@@ -45,7 +46,7 @@ class Restrictions extends Component {
     } = this.props;
 
     return (
-      <FieldSet legend="Restrictions">
+      <FieldSet legend={translate('Restrictions')}>
         <PageSectionContent
           errorMessage="Unable to load Restrictions"
           {...otherProps}

frontend/src/Settings/MediaManagement/MediaManagement.js

@@ -13,6 +13,7 @@ import FormInputGroup from 'Components/Form/FormInputGroup';
 import RootFoldersConnector from 'RootFolder/RootFoldersConnector';
 import NamingConnector from './Naming/NamingConnector';
 import AddRootFolderConnector from './RootFolder/AddRootFolderConnector';
+import translate from 'Utilities/String/translate';
 
 const rescanAfterRefreshOptions = [
   { key: 'always', value: 'Always' },
@@ -208,7 +209,7 @@ class MediaManagement extends Component {
                 }
 
                 <FieldSet
-                  legend="File Management"
+                  legend={translate('FileManagement')}
                 >
                   <FormGroup size={sizes.MEDIUM}>
                     <FormLabel>Ignore Deleted Movies</FormLabel>
@@ -364,7 +365,7 @@ class MediaManagement extends Component {
               </Form>
           }
 
-          <FieldSet legend="Root Folders">
+          <FieldSet legend={translate('RootFolders')}>
             <RootFoldersConnector />
             <AddRootFolderConnector />
           </FieldSet>

frontend/src/Settings/MediaManagement/Naming/Naming.js

@@ -9,6 +9,7 @@ import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import NamingModal from './NamingModal';
+import translate from 'Utilities/String/translate';
 import styles from './Naming.css';
 
 const colonReplacementOptions = [
@@ -101,7 +102,7 @@ class Naming extends Component {
     }
 
     return (
-      <FieldSet legend="Movie Naming">
+      <FieldSet legend={translate('MovieNaming')}>
         {
           isFetching &&
             <LoadingIndicator />

frontend/src/Settings/MediaManagement/Naming/NamingModal.js

@@ -11,6 +11,7 @@ import ModalHeader from 'Components/Modal/ModalHeader';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import NamingOption from './NamingOption';
+import translate from 'Utilities/String/translate';
 import styles from './NamingModal.css';
 
 class NamingModal extends Component {
@@ -354,7 +355,7 @@ class NamingModal extends Component {
                     </div>
                   </FieldSet>
 
-                  <FieldSet legend="Custom Formats">
+                  <FieldSet legend={translate('CustomFormats')}>
                     <div className={styles.groups}>
                       {
                         customFormatTokens.map(({ token, example }) => {

frontend/src/Settings/Metadata/Metadata/Metadatas.js

@@ -3,6 +3,7 @@ import React from 'react';
 import FieldSet from 'Components/FieldSet';
 import PageSectionContent from 'Components/Page/PageSectionContent';
 import Metadata from './Metadata';
+import translate from 'Utilities/String/translate';
 import styles from './Metadatas.css';
 
 function Metadatas(props) {
@@ -12,7 +13,7 @@ function Metadatas(props) {
   } = props;
 
   return (
-    <FieldSet legend="Metadata">
+    <FieldSet legend={translate('Metadata')}>
       <PageSectionContent
         errorMessage="Unable to load Metadata"
         {...otherProps}

frontend/src/Settings/Metadata/Options/MetadataOptions.js

@@ -7,6 +7,7 @@ import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
+import translate from 'Utilities/String/translate';
 
 export const certificationCountryOptions = [
   { key: 'us', value: 'United States' },
@@ -23,7 +24,7 @@ function MetadataOptions(props) {
   } = props;
 
   return (
-    <FieldSet legend="Options">
+    <FieldSet legend={translate('Options')}>
       {
         isFetching &&
           <LoadingIndicator />

frontend/src/Settings/NetImport/NetImport/EditNetImportModalContent.js

@@ -13,6 +13,7 @@ import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import ProviderFieldFormGroup from 'Components/Form/ProviderFieldFormGroup';
+import translate from 'Utilities/String/translate';
 import styles from './EditNetImportModalContent.css';
 
 function EditNetImportModalContent(props) {
@@ -186,7 +187,7 @@ function EditNetImportModalContent(props) {
               kind={kinds.DANGER}
               onPress={onDeleteNetImportPress}
             >
-              Delete
+              {translate('Delete')}
             </Button>
         }
 

frontend/src/Settings/NetImport/NetImport/NetImport.js

@@ -5,6 +5,7 @@ import Card from 'Components/Card';
 import Label from 'Components/Label';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import EditNetImportModalConnector from './EditNetImportModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './NetImport.css';
 
 class NetImport extends Component {
@@ -107,7 +108,7 @@ class NetImport extends Component {
           kind={kinds.DANGER}
           title="Delete List"
           message={`Are you sure you want to delete the list '${name}'?`}
-          confirmLabel="Delete"
+          confirmLabel={translate('Delete')}
           onConfirm={this.onConfirmDeleteNetImport}
           onCancel={this.onDeleteNetImportModalClose}
         />

frontend/src/Settings/NetImport/NetImport/NetImports.js

@@ -8,6 +8,7 @@ import PageSectionContent from 'Components/Page/PageSectionContent';
 import NetImport from './NetImport';
 import AddNetImportModal from './AddNetImportModal';
 import EditNetImportModalConnector from './EditNetImportModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './NetImports.css';
 
 class NetImports extends Component {
@@ -58,7 +59,7 @@ class NetImports extends Component {
     } = this.state;
 
     return (
-      <FieldSet legend="Lists">
+      <FieldSet legend={translate('Lists')}>
         <PageSectionContent
           errorMessage="Unable to load Lists"
           {...otherProps}

frontend/src/Settings/NetImport/NetImportExclusions/EditNetImportExclusionModalContent.js

@@ -12,6 +12,7 @@ import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
+import translate from 'Utilities/String/translate';
 import styles from './EditNetImportExclusionModalContent.css';
 
 function EditNetImportExclusionModalContent(props) {
@@ -105,7 +106,7 @@ function EditNetImportExclusionModalContent(props) {
               kind={kinds.DANGER}
               onPress={onDeleteNetImportExclusionPress}
             >
-              Delete
+              {translate('Delete')}
             </Button>
         }
 

frontend/src/Settings/NetImport/NetImportExclusions/NetImportExclusion.js

@@ -6,6 +6,7 @@ import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import EditNetImportExclusionModalConnector from './EditNetImportExclusionModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './NetImportExclusion.css';
 
 class NetImportExclusion extends Component {
@@ -89,7 +90,7 @@ class NetImportExclusion extends Component {
           kind={kinds.DANGER}
           title="Delete Import List Exclusion"
           message="Are you sure you want to delete this import list exclusion?"
-          confirmLabel="Delete"
+          confirmLabel={translate('Delete')}
           onConfirm={this.onConfirmDeleteNetImportExclusion}
           onCancel={this.onDeleteNetImportExclusionModalClose}
         />

frontend/src/Settings/NetImport/NetImportExclusions/NetImportExclusions.js

@@ -7,6 +7,7 @@ import Link from 'Components/Link/Link';
 import PageSectionContent from 'Components/Page/PageSectionContent';
 import NetImportExclusion from './NetImportExclusion';
 import EditNetImportExclusionModalConnector from './EditNetImportExclusionModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './NetImportExclusions.css';
 
 class NetImportExclusions extends Component {
@@ -44,7 +45,7 @@ class NetImportExclusions extends Component {
     } = this.props;
 
     return (
-      <FieldSet legend="List Exclusions">
+      <FieldSet legend={translate('ListExclusions')}>
         <PageSectionContent
           errorMessage="Unable to load List Exclusions"
           {...otherProps}

frontend/src/Settings/NetImport/Options/NetImportOptions.js

@@ -7,6 +7,7 @@ import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
+import translate from 'Utilities/String/translate';
 
 function NetImportOptions(props) {
   const {
@@ -26,7 +27,7 @@ function NetImportOptions(props) {
   ];
 
   return (
-    <FieldSet legend="Options">
+    <FieldSet legend={translate('Options')}>
       {
         isFetching &&
           <LoadingIndicator />

frontend/src/Settings/Notifications/Notifications/EditNotificationModalContent.js

@@ -14,6 +14,7 @@ import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import ProviderFieldFormGroup from 'Components/Form/ProviderFieldFormGroup';
+import translate from 'Utilities/String/translate';
 import styles from './EditNotificationModalContent.css';
 
 function EditNotificationModalContent(props) {
@@ -218,7 +219,7 @@ function EditNotificationModalContent(props) {
               kind={kinds.DANGER}
               onPress={onDeleteNotificationPress}
             >
-              Delete
+              {translate('Delete')}
             </Button>
         }
 

frontend/src/Settings/Notifications/Notifications/Notification.js

@@ -5,6 +5,7 @@ import Card from 'Components/Card';
 import Label from 'Components/Label';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import EditNotificationModalConnector from './EditNotificationModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './Notification.css';
 
 class Notification extends Component {
@@ -133,7 +134,7 @@ class Notification extends Component {
           kind={kinds.DANGER}
           title="Delete Notification"
           message={`Are you sure you want to delete the notification '${name}'?`}
-          confirmLabel="Delete"
+          confirmLabel={translate('Delete')}
           onConfirm={this.onConfirmDeleteNotification}
           onCancel={this.onDeleteNotificationModalClose}
         />

frontend/src/Settings/Notifications/Notifications/Notifications.js

@@ -8,6 +8,7 @@ import PageSectionContent from 'Components/Page/PageSectionContent';
 import Notification from './Notification';
 import AddNotificationModal from './AddNotificationModal';
 import EditNotificationModalConnector from './EditNotificationModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './Notifications.css';
 
 class Notifications extends Component {
@@ -58,7 +59,7 @@ class Notifications extends Component {
     } = this.state;
 
     return (
-      <FieldSet legend="Connections">
+      <FieldSet legend={translate('Connections')}>
         <PageSectionContent
           errorMessage="Unable to load Notifications"
           {...otherProps}

frontend/src/Settings/Profiles/Delay/DelayProfile.js

@@ -8,6 +8,7 @@ import Link from 'Components/Link/Link';
 import TagList from 'Components/TagList';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import EditDelayProfileModalConnector from './EditDelayProfileModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './DelayProfile.css';
 
 function getDelay(enabled, delay) {
@@ -141,7 +142,7 @@ class DelayProfile extends Component {
           kind={kinds.DANGER}
           title="Delete Delay Profile"
           message="Are you sure you want to delete this delay profile?"
-          confirmLabel="Delete"
+          confirmLabel={translate('Delete')}
           onConfirm={this.onConfirmDeleteDelayProfile}
           onCancel={this.onDeleteDelayProfileModalClose}
         />

frontend/src/Settings/Profiles/Delay/DelayProfiles.js

@@ -10,6 +10,7 @@ import DelayProfileDragSource from './DelayProfileDragSource';
 import DelayProfileDragPreview from './DelayProfileDragPreview';
 import DelayProfile from './DelayProfile';
 import EditDelayProfileModalConnector from './EditDelayProfileModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './DelayProfiles.css';
 
 class DelayProfiles extends Component {
@@ -66,7 +67,7 @@ class DelayProfiles extends Component {
 
     return (
       <Measure onMeasure={this.onMeasure}>
-        <FieldSet legend="Delay Profiles">
+        <FieldSet legend={translate('DelayProfiles')}>
           <PageSectionContent
             errorMessage="Unable to load Delay Profiles"
             {...otherProps}

frontend/src/Settings/Profiles/Delay/EditDelayProfileModalContent.js

@@ -14,6 +14,7 @@ import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
+import translate from 'Utilities/String/translate';
 import styles from './EditDelayProfileModalContent.css';
 
 function EditDelayProfileModalContent(props) {
@@ -136,7 +137,7 @@ function EditDelayProfileModalContent(props) {
               kind={kinds.DANGER}
               onPress={onDeleteDelayProfilePress}
             >
-              Delete
+              {translate('Delete')}
             </Button>
         }
 

frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContent.js

@@ -16,6 +16,7 @@ import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import QualityProfileItems from './QualityProfileItems';
 import QualityProfileFormatItems from './QualityProfileFormatItems';
+import translate from 'Utilities/String/translate';
 import styles from './EditQualityProfileModalContent.css';
 
 const MODAL_BODY_PADDING = parseInt(dimensions.modalBodyPadding);
@@ -297,7 +298,7 @@ class EditQualityProfileModalContent extends Component {
                     isDisabled={isInUse}
                     onPress={onDeleteQualityProfilePress}
                   >
-                    Delete
+                    {translate('Delete')}
                   </Button>
                 </div> :
                 null

frontend/src/Settings/Profiles/Quality/QualityProfile.js

@@ -7,6 +7,7 @@ import IconButton from 'Components/Link/IconButton';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import Tooltip from 'Components/Tooltip/Tooltip';
 import EditQualityProfileModalConnector from './EditQualityProfileModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './QualityProfile.css';
 
 class QualityProfile extends Component {
@@ -162,7 +163,7 @@ class QualityProfile extends Component {
           kind={kinds.DANGER}
           title="Delete Quality Profile"
           message={`Are you sure you want to delete the quality profile '${name}'?`}
-          confirmLabel="Delete"
+          confirmLabel={translate('Delete')}
           isSpinning={isDeleting}
           onConfirm={this.onConfirmDeleteQualityProfile}
           onCancel={this.onDeleteQualityProfileModalClose}

frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.js

@@ -7,6 +7,7 @@ import FormLabel from 'Components/Form/FormLabel';
 import FormInputHelpText from 'Components/Form/FormInputHelpText';
 import Link from 'Components/Link/Link';
 import QualityProfileFormatItem from './QualityProfileFormatItem';
+import translate from 'Utilities/String/translate';
 import styles from './QualityProfileFormatItems.css';
 
 function calcOrder(profileFormatItems) {
@@ -76,7 +77,7 @@ class QualityProfileFormatItems extends Component {
     return (
       <FormGroup size={sizes.EXTRA_SMALL}>
         <FormLabel size={sizes.SMALL}>
-          Custom Formats
+          {translate('CustomFormats')}
         </FormLabel>
 
         <div>

frontend/src/Settings/Profiles/Quality/QualityProfiles.js

@@ -7,6 +7,7 @@ import Icon from 'Components/Icon';
 import PageSectionContent from 'Components/Page/PageSectionContent';
 import QualityProfile from './QualityProfile';
 import EditQualityProfileModalConnector from './EditQualityProfileModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from './QualityProfiles.css';
 
 class QualityProfiles extends Component {
@@ -51,7 +52,7 @@ class QualityProfiles extends Component {
     } = this.props;
 
     return (
-      <FieldSet legend="Quality Profiles">
+      <FieldSet legend={translate('QualityProfiles')}>
         <PageSectionContent
           errorMessage="Unable to load Quality Profiles"
           {...otherProps}c={true}

frontend/src/Settings/Quality/Definition/QualityDefinitions.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import FieldSet from 'Components/FieldSet';
 import PageSectionContent from 'Components/Page/PageSectionContent';
 import QualityDefinitionConnector from './QualityDefinitionConnector';
+import translate from 'Utilities/String/translate';
 import styles from './QualityDefinitions.css';
 
 class QualityDefinitions extends Component {
@@ -18,7 +19,7 @@ class QualityDefinitions extends Component {
     } = this.props;
 
     return (
-      <FieldSet legend="Quality Definitions">
+      <FieldSet legend={translate('QualityDefinitions')}>
         <PageSectionContent
           errorMessage="Unable to load Quality Definitions"
           {...otherProps}

frontend/src/Settings/Settings.js

@@ -3,6 +3,7 @@ import Link from 'Components/Link/Link';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import SettingsToolbarConnector from './SettingsToolbarConnector';
+import translate from 'Utilities/String/translate';
 import styles from './Settings.css';
 
 function Settings() {
@@ -50,7 +51,7 @@ function Settings() {
           className={styles.link}
           to="/settings/customformats"
         >
-          Custom Formats
+          {translate('CustomFormats')}
         </Link>
 
         <div className={styles.summary}>
@@ -94,7 +95,7 @@ function Settings() {
           className={styles.link}
           to="/settings/connect"
         >
-          Connect
+          {translate('Connect')}
         </Link>
 
         <div className={styles.summary}>

frontend/src/Settings/Tags/Details/TagDetailsModalContent.js

@@ -10,6 +10,7 @@ import ModalHeader from 'Components/Modal/ModalHeader';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import TagDetailsDelayProfile from './TagDetailsDelayProfile';
+import translate from 'Utilities/String/translate';
 import styles from './TagDetailsModalContent.css';
 
 function TagDetailsModalContent(props) {
@@ -83,7 +84,7 @@ function TagDetailsModalContent(props) {
 
         {
           !!notifications.length &&
-            <FieldSet legend="Connections">
+            <FieldSet legend={translate('Connections')}>
               {
                 notifications.map((item) => {
                   return (
@@ -144,7 +145,7 @@ function TagDetailsModalContent(props) {
 
         {
           !!netImports.length &&
-            <FieldSet legend="Lists">
+            <FieldSet legend={translate('Lists')}>
               {
                 netImports.map((item) => {
                   return (
@@ -167,7 +168,7 @@ function TagDetailsModalContent(props) {
             isDisabled={isTagUsed}
             onPress={onDeleteTagPress}
           >
-            Delete
+            {translate('Delete')}
           </Button>
         }
 

frontend/src/Settings/Tags/Tag.js

@@ -4,6 +4,7 @@ import { kinds } from 'Helpers/Props';
 import Card from 'Components/Card';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import TagDetailsModal from './Details/TagDetailsModal';
+import translate from 'Utilities/String/translate';
 import styles from './Tag.css';
 
 class Tag extends Component {
@@ -147,7 +148,7 @@ class Tag extends Component {
           kind={kinds.DANGER}
           title="Delete Tag"
           message={`Are you sure you want to delete the tag '${label}'?`}
-          confirmLabel="Delete"
+          confirmLabel={translate('Delete')}
           onConfirm={this.onConfirmDeleteTag}
           onCancel={this.onDeleteTagModalClose}
         />

frontend/src/Settings/UI/UISettings.js

@@ -10,6 +10,7 @@ import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
+import translate from 'Utilities/String/translate';
 
 export const firstDayOfWeekOptions = [
   { key: 0, value: 'Sunday' },
@@ -83,7 +84,7 @@ class UISettings extends Component {
                 id="uiSettings"
                 {...otherProps}
               >
-                <FieldSet legend="Calendar">
+                <FieldSet legend={translate('Calendar')}>
                   <FormGroup>
                     <FormLabel>First Day of Week</FormLabel>
 
@@ -111,7 +112,7 @@ class UISettings extends Component {
                 </FieldSet>
 
                 <FieldSet
-                  legend="Dates"
+                  legend={translate('Dates')}
                 >
                   <FormGroup>
                     <FormLabel>Short Date Format</FormLabel>
@@ -162,7 +163,7 @@ class UISettings extends Component {
                 </FieldSet>
 
                 <FieldSet
-                  legend="Style"
+                  legend={translate('Style')}
                 >
                   <FormGroup>
                     <FormLabel>Enable Color-Impaired Mode</FormLabel>
@@ -177,15 +178,16 @@ class UISettings extends Component {
                 </FieldSet>
 
                 <FieldSet
-                  legend="Language"
+                  legend={translate('Language')}
                 >
                   <FormGroup>
-                    <FormLabel>Movie Info Language</FormLabel>
+                    <FormLabel>UI Language</FormLabel>
                     <FormInputGroup
                       type={inputTypes.SELECT}
                       name="movieInfoLanguage"
                       values={languages}
-                      helpText="Language that Radarr will use to display Movie Title in UI"
+                      helpText="Language that Radarr will use for UI"
+                      helpTextWarning="Browser Reload Required"
                       onChange={onInputChange}
                       {...settings.movieInfoLanguage}
                     />

frontend/src/Store/Actions/blacklistActions.js

@@ -7,6 +7,7 @@ import createSetTableOptionReducer from './Creators/Reducers/createSetTableOptio
 import createHandleActions from './Creators/createHandleActions';
 import createRemoveItemHandler from './Creators/createRemoveItemHandler';
 import createServerSideCollectionHandlers from './Creators/createServerSideCollectionHandlers';
+import translate from 'Utilities/String/translate';
 
 //
 // Variables
@@ -58,7 +59,7 @@ export const defaultState = {
     },
     {
       name: 'date',
-      label: 'Date',
+      label: translate('Date'),
       isSortable: true,
       isVisible: true
     },

frontend/src/Store/Actions/calendarActions.js

@@ -11,6 +11,7 @@ import createClearReducer from './Creators/Reducers/createClearReducer';
 import createHandleActions from './Creators/createHandleActions';
 import { set, update } from './baseActions';
 import { executeCommandHelper } from './commandActions';
+import translate from 'Utilities/String/translate';
 
 //
 // Variables
@@ -49,7 +50,7 @@ export const defaultState = {
   filters: [
     {
       key: 'all',
-      label: 'All',
+      label: translate('All'),
       filters: [
         {
           key: 'monitored',

frontend/src/Store/Actions/discoverMovieActions.js

@@ -16,6 +16,7 @@ import createSetTableOptionReducer from './Creators/Reducers/createSetTableOptio
 import createSetClientSideCollectionSortReducer from './Creators/Reducers/createSetClientSideCollectionSortReducer';
 import createSetClientSideCollectionFilterReducer from './Creators/Reducers/createSetClientSideCollectionFilterReducer';
 import createClearReducer from './Creators/Reducers/createClearReducer';
+import translate from 'Utilities/String/translate';
 
 //
 // Variables
@@ -162,7 +163,7 @@ export const defaultState = {
   filters: [
     {
       key: 'all',
-      label: 'All',
+      label: translate('All'),
       filters: []
     },
     {

frontend/src/Store/Actions/historyActions.js

@@ -8,6 +8,7 @@ import createSetTableOptionReducer from './Creators/Reducers/createSetTableOptio
 import createHandleActions from './Creators/createHandleActions';
 import createServerSideCollectionHandlers from './Creators/createServerSideCollectionHandlers';
 import { updateItem } from './baseActions';
+import translate from 'Utilities/String/translate';
 
 //
 // Variables
@@ -59,7 +60,7 @@ export const defaultState = {
     },
     {
       name: 'date',
-      label: 'Date',
+      label: translate('Date'),
       isSortable: true,
       isVisible: true
     },
@@ -91,7 +92,7 @@ export const defaultState = {
   filters: [
     {
       key: 'all',
-      label: 'All',
+      label: translate('All'),
       filters: []
     },
     {

frontend/src/Store/Actions/movieActions.js

@@ -12,6 +12,7 @@ import createSaveProviderHandler from './Creators/createSaveProviderHandler';
 import createRemoveItemHandler from './Creators/createRemoveItemHandler';
 import createHandleActions from './Creators/createHandleActions';
 import { updateItem } from './baseActions';
+import translate from 'Utilities/String/translate';
 
 //
 // Variables
@@ -21,7 +22,7 @@ export const section = 'movies';
 export const filters = [
   {
     key: 'all',
-    label: 'All',
+    label: translate('All'),
     filters: []
   },
   {

frontend/src/Store/Actions/releaseActions.js

@@ -6,6 +6,7 @@ import createSetClientSideCollectionSortReducer from './Creators/Reducers/create
 import createSetClientSideCollectionFilterReducer from './Creators/Reducers/createSetClientSideCollectionFilterReducer';
 import createFetchHandler from './Creators/createFetchHandler';
 import createHandleActions from './Creators/createHandleActions';
+import translate from 'Utilities/String/translate';
 
 //
 // Variables
@@ -61,7 +62,7 @@ export const defaultState = {
   filters: [
     {
       key: 'all',
-      label: 'All',
+      label: translate('All'),
       filters: []
     }
   ],

frontend/src/Store/Actions/systemActions.js

@@ -11,6 +11,7 @@ import createRemoveItemHandler from './Creators/createRemoveItemHandler';
 import createHandleActions from './Creators/createHandleActions';
 import createServerSideCollectionHandlers from './Creators/createServerSideCollectionHandlers';
 import { set } from './baseActions';
+import translate from 'Utilities/String/translate';
 
 //
 // Variables
@@ -119,7 +120,7 @@ export const defaultState = {
     filters: [
       {
         key: 'all',
-        label: 'All',
+        label: translate('All'),
         filters: []
       },
       {

frontend/src/System/Backup/Backups.js

@@ -11,6 +11,7 @@ import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import BackupRow from './BackupRow';
 import RestoreBackupModalConnector from './RestoreBackupModalConnector';
+import translate from 'Utilities/String/translate';
 
 const columns = [
   {
@@ -79,14 +80,14 @@ class Backups extends Component {
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
-              label="Backup Now"
+              label={translate('BackupNow')}
               iconName={icons.BACKUP}
               isSpinning={backupExecuting}
               onPress={onBackupPress}
             />
 
             <PageToolbarButton
-              label="Restore Backup"
+              label={translate('RestoreBackup')}
               iconName={icons.RESTORE}
               onPress={this.onRestorePress}
             />

frontend/src/System/Events/LogsTable.js

@@ -13,6 +13,7 @@ import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import FilterMenu from 'Components/Menu/FilterMenu';
 import LogsTableRow from './LogsTableRow';
+import translate from 'Utilities/String/translate';
 
 function LogsTable(props) {
   const {
@@ -36,7 +37,7 @@ function LogsTable(props) {
       <PageToolbar>
         <PageToolbarSection>
           <PageToolbarButton
-            label="Refresh"
+            label={translate('Refresh')}
             iconName={icons.REFRESH}
             spinningName={icons.REFRESH}
             isSpinning={isFetching}
@@ -44,7 +45,7 @@ function LogsTable(props) {
           />
 
           <PageToolbarButton
-            label="Clear"
+            label={translate('Clear')}
             iconName={icons.CLEAR}
             isSpinning={clearLogExecuting}
             onPress={onClearLogsPress}
@@ -58,7 +59,7 @@ function LogsTable(props) {
             canModifyColumns={false}
           >
             <PageToolbarButton
-              label="Options"
+              label={translate('Options')}
               iconName={icons.TABLE}
             />
           </TableOptionsModalWrapper>

frontend/src/System/Logs/Files/LogFiles.js

@@ -14,6 +14,7 @@ import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import TableBody from 'Components/Table/TableBody';
 import LogsNavMenu from '../LogsNavMenu';
 import LogFilesTableRow from './LogFilesTableRow';
+import translate from 'Utilities/String/translate';
 
 const columns = [
   {
@@ -58,7 +59,7 @@ class LogFiles extends Component {
             <PageToolbarSeparator />
 
             <PageToolbarButton
-              label="Refresh"
+              label={translate('Refresh')}
               iconName={icons.REFRESH}
               spinningName={icons.REFRESH}
               isSpinning={isFetching}
@@ -66,7 +67,7 @@ class LogFiles extends Component {
             />
 
             <PageToolbarButton
-              label="Clear"
+              label={translate('Clear')}
               iconName={icons.CLEAR}
               isSpinning={deleteFilesExecuting}
               onPress={onDeleteFilesPress}

frontend/src/System/Status/About/About.js

@@ -6,6 +6,7 @@ import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
 import StartTime from './StartTime';
+import translate from 'Utilities/String/translate';
 import styles from './About.css';
 
 class About extends Component {
@@ -32,7 +33,7 @@ class About extends Component {
     } = this.props;
 
     return (
-      <FieldSet legend="About">
+      <FieldSet legend={translate('About')}>
         <DescriptionList className={styles.descriptionList}>
           <DescriptionListItem
             title="Version"

frontend/src/System/Status/DiskSpace/DiskSpace.js

@@ -9,6 +9,7 @@ import TableBody from 'Components/Table/TableBody';
 import TableRow from 'Components/Table/TableRow';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import ProgressBar from 'Components/ProgressBar';
+import translate from 'Utilities/String/translate';
 import styles from './DiskSpace.css';
 
 const columns = [
@@ -45,7 +46,7 @@ class DiskSpace extends Component {
     } = this.props;
 
     return (
-      <FieldSet legend="Disk Space">
+      <FieldSet legend={translate('DiskSpace')}>
         {
           isFetching &&
             <LoadingIndicator />

frontend/src/System/Status/Health/Health.js

@@ -11,6 +11,7 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableRow from 'Components/Table/TableRow';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import translate from 'Utilities/String/translate';
 import styles from './Health.css';
 
 function getInternalLink(source) {
@@ -119,7 +120,7 @@ class Health extends Component {
       <FieldSet
         legend={
           <div className={styles.legend}>
-            Health
+            {translate('Health')}
 
             {
               isFetching && isPopulated &&

frontend/src/System/Status/MoreInfo/MoreInfo.js

@@ -4,6 +4,7 @@ import FieldSet from 'Components/FieldSet';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItemTitle from 'Components/DescriptionList/DescriptionListItemTitle';
 import DescriptionListItemDescription from 'Components/DescriptionList/DescriptionListItemDescription';
+import translate from 'Utilities/String/translate';
 
 class MoreInfo extends Component {
 
@@ -12,7 +13,7 @@ class MoreInfo extends Component {
 
   render() {
     return (
-      <FieldSet legend="More Info">
+      <FieldSet legend={translate('MoreInfo')}>
         <DescriptionList>
           <DescriptionListItemTitle>Home page</DescriptionListItemTitle>
           <DescriptionListItemDescription>

frontend/src/System/Tasks/Queued/QueuedTasks.js

@@ -5,6 +5,7 @@ import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import QueuedTaskRowConnector from './QueuedTaskRowConnector';
+import translate from 'Utilities/String/translate';
 
 const columns = [
   {
@@ -51,7 +52,7 @@ function QueuedTasks(props) {
   } = props;
 
   return (
-    <FieldSet legend="Queue">
+    <FieldSet legend={translate('Queue')}>
       {
         isFetching && !isPopulated &&
           <LoadingIndicator />

frontend/src/System/Tasks/Scheduled/ScheduledTasks.js

@@ -5,6 +5,7 @@ import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import ScheduledTaskRowConnector from './ScheduledTaskRowConnector';
+import translate from 'Utilities/String/translate';
 
 const columns = [
   {
@@ -46,7 +47,7 @@ function ScheduledTasks(props) {
   } = props;
 
   return (
-    <FieldSet legend="Scheduled">
+    <FieldSet legend={translate('Scheduled')}>
       {
         isFetching && !isPopulated &&
           <LoadingIndicator />