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

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}
           />