Исправлен placeholder для поля поиска языка

Добавлен автофокус при открытии попапа
Добавлена адаптивность для переключателя языка

src/components/languageSwitcher/LanguageSwitcher.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
-import { FormattedMessage as Message } from 'react-intl';
+import { FormattedMessage as Message, intlShape } from 'react-intl';
 
 import { requireLocaleFlag } from 'functions';
 import LANGS from 'i18n/index.json';
@@ -13,6 +13,8 @@ import icons from 'components/ui/icons.scss';
 import styles from './languageSwitcher.scss';
 import messages from './languageSwitcher.intl.json';
 
+const improveTranslationUrl = 'http://ely.by/erickskrauch/posts/174943';
+
 class LanguageSwitcher extends Component {
     static displayName = 'LanguageSwitcher';
 
@@ -22,6 +24,10 @@ class LanguageSwitcher extends Component {
         changeLang: PropTypes.func,
     };
 
+    static contextTypes = {
+        intl: intlShape.isRequired,
+    };
+
     state = {
         items: [],
         filter: '',
@@ -56,15 +62,10 @@ class LanguageSwitcher extends Component {
                                     formStyles.lightTextField,
                                     formStyles.greenTextField
                                 )}
-                                placeholder={
+                                placeholder={this.context.intl.formatMessage(messages.startTyping)}
-                                    <Message {...messages.startTyping}>
-                                        {(placeholder) => (
-                                            {placeholder}
-                                        )}
-                                    </Message>
-                                }
                                 onChange={this.onFilterUpdate()}
                                 onKeyPress={this.onFilterKeyPress()}
+                                autoFocus
                             />
                             <span className={styles.searchIcon} />
                         </div>
@@ -89,7 +90,7 @@ class LanguageSwitcher extends Component {
                                 <div className={styles.improveTranslatesText}>
                                     <Message {...messages.improveTranslatesDescription} values={{
                                         articleLink: (
-                                            <a href="#">
+                                            <a href={improveTranslationUrl} target="_blank">
                                                 <Message {...messages.improveTranslatesArticleLink} />
                                             </a>
                                         )
@@ -184,7 +185,7 @@ class LanguageSwitcher extends Component {
 
             this.changeLang(locales[0]);
         };
-    };
+    }
 }
 
 import { connect } from 'react-redux';

src/components/languageSwitcher/languageSwitcher.scss

@@ -13,7 +13,11 @@
 
     display: flex;
     flex-direction: column;
-    max-height: 550px;
+    max-height: calc(100vh - 132px);
+
+    @media screen and (min-height: 630px) {
+        max-height: 500px;
+    }
 }
 
 .searchBox {
@@ -135,6 +139,12 @@ $languageListBorderStyle: 1px solid #eee;
     padding: 10px;
     display: flex;
     flex-shrink: 0;
+
+    @media screen and (max-height: 455px) {
+        & {
+            display: none;
+        }
+    }
 }
 
 .improveTranslatesIcon {

yarn.lock

@@ -2799,6 +2799,10 @@ find-up@^1.0.0:
     path-exists "^2.0.0"
     pinkie-promise "^2.0.0"
 
+flag-icon-css@^2.8.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/flag-icon-css/-/flag-icon-css-2.9.0.tgz#5793c15244e3c63ae36631478a758a3fc29c86be"
+
 flat-cache@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.3.0.tgz#d3030b32b38154f4e3b7e9c709f490f7ef97c481"