diff --git a/src/components/Header/components/LanguagePicker/Container.js b/src/components/Header/components/LanguagePicker/Container.js new file mode 100644 index 00000000..0b076d3e --- /dev/null +++ b/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: State): StateProps => ({ + language: state.wallet.language, +}); + +const mapDispatchToProps: MapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({ + setLanguage: bindActionCreators(WalletActions.setLanguage, dispatch), +}); + +export default withRouter( + connect(mapStateToProps, mapDispatchToProps)(LanguagePicker), +); diff --git a/src/components/Header/components/LanguagePicker/index.js b/src/components/Header/components/LanguagePicker/index.js new file mode 100644 index 00000000..fbdc52da --- /dev/null +++ b/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) => ( + + 🌎 + setLanguage(e.target.value)} + value={language} + > + {LANGUAGE.map(lang => ( + + ))} + + +); + +export default LanguagePicker; diff --git a/src/components/Header/index.js b/src/components/Header/index.js index ec5a767f..1bb4c0e7 100644 --- a/src/components/Header/index.js +++ b/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) => ( Blog Support + diff --git a/src/config/colors.js b/src/config/colors.js index 23140583..139efa59 100644 --- a/src/config/colors.js +++ b/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',