diff --git a/src/components/Header/components/LanguagePicker/index.js b/src/components/Header/components/LanguagePicker/index.js index f8dd1620..797e0518 100644 --- a/src/components/Header/components/LanguagePicker/index.js +++ b/src/components/Header/components/LanguagePicker/index.js @@ -3,7 +3,8 @@ import * as React from 'react'; import styled from 'styled-components'; import colors from 'config/colors'; -import { LANGUAGE } from 'config/variables'; +import ReactSelect from 'react-select'; +import { LANGUAGE, SCREEN_SIZE } from 'config/variables'; import type { Props } from './Container'; @@ -11,6 +12,11 @@ const SelectWrapper = styled.div` display: flex; color: ${colors.WHITE}; align-items: center; + width: 140px; + + @media screen and (max-width: ${SCREEN_SIZE.XS}) { + width: 100px; + } `; const SelectIcon = styled.span` @@ -18,34 +24,80 @@ const SelectIcon = styled.span` padding-left: 6px; `; -const StyledSelect = styled.select` - height: 100%; - padding-left: 30px; - border: 0; - background: transparent; - cursor: pointer; - appearance: none; - border-radius: 0; - overflow: visible; - color: ${colors.WHITE}; -`; +const styles = { + singleValue: base => ({ + ...base, + color: colors.WHITE, + paddingLeft: '25px', // flag + }), + control: base => ({ + ...base, + height: '40px', + border: 'none', + background: 'transparent', + boxShadow: 'none', + cursor: 'pointer', + }), + indicatorSeparator: () => ({ + display: 'none', + }), + container: base => ({ + ...base, + width: '100%', + }), + dropdownIndicator: () => ({ + display: 'none', + }), + menu: base => ({ + ...base, + color: colors.WHITE, + marginTop: '6px', + boxShadow: 'none', + }), + menuList: base => ({ + ...base, + padding: 0, + boxShadow: 'none', + background: colors.WHITE, + borderLeft: `1px solid ${colors.DIVIDER}`, + borderRight: `1px solid ${colors.DIVIDER}`, + borderBottom: `1px solid ${colors.DIVIDER}`, + }), + option: (base, { isFocused }) => ({ + ...base, + color: colors.TEXT_SECONDARY, + background: isFocused ? colors.LANDING : colors.WHITE, + borderRadius: 0, + '&:hover': { + cursor: 'pointer', + background: colors.LANDING, + }, + }), +}; + +const buildOption = (langCode) => { + const lang = LANGUAGE.find(l => l.code === langCode); + return { value: lang.code, label: lang.name }; +}; const LanguagePicker = ({ language, fetchLocale }: Props) => ( - - + + - fetchLocale(e.target.value)} - value={language} - > - {LANGUAGE.map(lang => ( - - ))} - + fetchLocale(option.value)} + value={buildOption(language)} + options={ + LANGUAGE.map(lang => buildOption(lang.code)) + } + /> ); diff --git a/src/components/Select/index.js b/src/components/Select/index.js index a3691964..4a06f51c 100644 --- a/src/components/Select/index.js +++ b/src/components/Select/index.js @@ -61,6 +61,7 @@ const styles = isSearchable => ({ }), }); + const propTypes = { isAsync: PropTypes.bool, isSearchable: PropTypes.bool,