Improve language select UI

src/components/GlobalHeader/index.js

@@ -36,7 +36,6 @@ export default class GlobalHeader extends PureComponent {
           type={collapsed ? 'menu-unfold' : 'menu-fold'}
           onClick={this.toggle}
         />
-
         <RightContent {...this.props} />
       </div>
     );

src/components/SelectLang/index.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { FormattedMessage, setLocale, getLocale } from 'umi/locale';
+import { formatMessage, FormattedMessage, setLocale, getLocale } from 'umi/locale';
 import { Menu, Icon, Dropdown } from 'antd';
 import classNames from 'classnames';
 import styles from './index.less';
@@ -30,9 +30,11 @@ export default class SelectLang extends PureComponent {
     );
     return (
       <Dropdown overlay={langMenu}>
-        <span className={classNames(styles.dropDown, className)}>
-          <FormattedMessage id="navBar.lang" /> <Icon type="down" />
-        </span>
+        <Icon
+          type="global"
+          className={classNames(styles.dropDown, className)}
+          title={formatMessage({ id: 'navBar.lang' })}
+        />
       </Dropdown>
     );
   }

src/components/SelectLang/index.less

@@ -11,4 +11,7 @@
 
 .dropDown {
   cursor: pointer;
+  font-size: 14px;
+  vertical-align: top;
+  line-height: 64px;
 }

src/locales/en-US.js

@@ -1,9 +1,9 @@
 export default {
   'navBar.lang': 'Languages',
-  'lang.simplified-chinese': '简体中文',
-  'lang.traditional-chinese': '繁体中文',
-  'lang.english': 'English',
-  'lang.portuguese': 'Portuguese',
+  'lang.simplified-chinese': '🇨🇳 简体中文',
+  'lang.traditional-chinese': '🇭🇰 繁体中文',
+  'lang.english': '🇬🇧 English',
+  'lang.portuguese': '🇵🇹 Portuguese',
   'layout.user.link.help': 'Help',
   'layout.user.link.privacy': 'Privacy',
   'layout.user.link.terms': 'Terms',

src/locales/pt-BR.js

@@ -1,9 +1,9 @@
 export default {
   'navBar.lang': 'Idiomas',
-  'lang.simplified-chinese': '简体中文',
-  'lang.traditional-chinese': '繁体中文',
-  'lang.english': 'English',
-  'lang.portuguese': 'Portuguese',
+  'lang.simplified-chinese': '🇨🇳 简体中文',
+  'lang.traditional-chinese': '🇭🇰 繁体中文',
+  'lang.english': '🇬🇧 English',
+  'lang.portuguese': '🇵🇹 Portuguese',
   'layout.user.link.help': 'ajuda',
   'layout.user.link.privacy': 'política de privacidade',
   'layout.user.link.terms': 'termos de serviços',

src/locales/zh-CN.js

@@ -1,9 +1,9 @@
 export default {
   'navBar.lang': '语言',
-  'lang.simplified-chinese': '简体中文',
-  'lang.traditional-chinese': '繁体中文',
-  'lang.english': 'English',
-  'lang.portuguese': 'Portuguese',
+  'lang.simplified-chinese': '🇨🇳 简体中文',
+  'lang.traditional-chinese': '🇭🇰 繁体中文',
+  'lang.english': '🇬🇧 English',
+  'lang.portuguese': '🇵🇹 Portuguese',
   'layout.user.link.help': '帮助',
   'layout.user.link.privacy': '隐私',
   'layout.user.link.terms': '条款',

src/locales/zh-TW.js

@@ -1,9 +1,9 @@
 export default {
   'navBar.lang': '語言',
-  'lang.simplified-chinese': '简体中文',
-  'lang.traditional-chinese': '繁体中文',
-  'lang.english': 'English',
-  'lang.portuguese': 'Portuguese',
+  'lang.simplified-chinese': '🇨🇳 简体中文',
+  'lang.traditional-chinese': '🇭🇰 繁体中文',
+  'lang.english': '🇬🇧 English',
+  'lang.portuguese': '🇵🇹 Portuguese',
   'layout.user.link.help': '幫助',
   'layout.user.link.privacy': '隱私',
   'layout.user.link.terms': '條款',