add language picker to the header

src/components/Header/components/LanguagePicker/Container.js

@@ -0,0 +1,36 @@
+/* @flow */
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+
+import * as WalletActions from 'actions/WalletActions';
+import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
+import type { State, Dispatch } from 'flowtype';
+
+import LanguagePicker from './index';
+
+type StateProps = {
+    language: string,
+}
+
+type DispatchProps = {
+    setLanguage: typeof WalletActions.setLanguage,
+};
+
+type OwnProps = {
+
+}
+
+export type Props = StateProps & DispatchProps;
+
+const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State): StateProps => ({
+    language: state.wallet.language,
+});
+
+const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => ({
+    setLanguage: bindActionCreators(WalletActions.setLanguage, dispatch),
+});
+
+export default withRouter(
+    connect(mapStateToProps, mapDispatchToProps)(LanguagePicker),
+);

src/components/Header/components/LanguagePicker/index.js

@@ -0,0 +1,45 @@
+/* eslint-disable jsx-a11y/accessible-emoji */
+/* @flow */
+import * as React from 'react';
+import styled from 'styled-components';
+import colors from 'config/colors';
+import { LANGUAGE } from 'config/variables';
+
+import type { Props } from './Container';
+
+const SelectWrapper = styled.div`
+    display: flex;
+    color: ${colors.WHITE};
+    align-items: center;
+`;
+
+const SelectIcon = styled.span`
+    padding: 0px 6px;
+`;
+
+const StyledSelect = styled.select`
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    appearance: none;
+    border-radius: 0;
+    overflow: visible;
+    color: ${colors.WHITE};
+`;
+
+
+const LanguagePicker = ({ language, setLanguage }: Props) => (
+    <SelectWrapper>
+        <SelectIcon role="img" aria-label="Select language">🌎</SelectIcon>
+        <StyledSelect
+            onChange={e => setLanguage(e.target.value)}
+            value={language}
+        >
+            {LANGUAGE.map(lang => (
+                <option key={lang.code} label={lang.name} value={lang.code}>{lang.name}</option>
+            ))}
+        </StyledSelect>
+    </SelectWrapper>
+);
+
+export default LanguagePicker;

src/components/Header/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/accessible-emoji */
 /* @flow */
 import React from 'react';
 import styled from 'styled-components';
@@ -5,6 +6,7 @@ import { NavLink } from 'react-router-dom';
 import colors from 'config/colors';
 import { SCREEN_SIZE } from 'config/variables';
 import type { toggleSidebar as toggleSidebarType } from 'actions/WalletActions';
+import LanguagePicker from './components/LanguagePicker/Container';
 
 const Wrapper = styled.header`
     width: 100%;
@@ -70,7 +72,11 @@ const Logo = styled.div`
 `;
 
 const MenuLinks = styled.div`
+    display: flex;
+    align-content: center;
+    justify-content: flex-end;
     flex: 0;
+    height: 100%;
 
     @media screen and (max-width: ${SCREEN_SIZE.SM}) {
         flex: 0 1 33%;
@@ -78,6 +84,12 @@ const MenuLinks = styled.div`
 `;
 
 const Projects = styled.div`
+    display: flex;
+    align-items: center;
+    height: 100%;
+    border-right: 1px solid ${colors.HEADER_DIVIDER};
+    padding-right: 24px;
+    margin-right: 24px;
 
     @media screen and (max-width: ${SCREEN_SIZE.SM}) {
         display: none;
@@ -137,6 +149,7 @@ const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => (
                     <A href="https://blog.trezor.io/" target="_blank" rel="noreferrer noopener">Blog</A>
                     <A href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener">Support</A>
                 </Projects>
+                <LanguagePicker />
             </MenuLinks>
         </LayoutWrapper>
     </Wrapper>

src/config/colors.js

@@ -6,6 +6,7 @@ export default {
     WALLET_VIEW_TITLE: '#505050',
 
     HEADER: '#1A1A1A',
+    HEADER_DIVIDER: '#424242',
     BODY: '#E3E3E3',
     MAIN: '#FBFBFB',
     LANDING: '#F9F9F9',