1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-13 20:08:56 +00:00

Style Select

This commit is contained in:
Vasek Mlejnsky 2018-08-28 16:18:45 +02:00
parent 34e859bd77
commit 597a771882
2 changed files with 9 additions and 9 deletions

View File

@ -4,15 +4,11 @@ import Select from 'react-select';
import AsyncSelect from 'react-select/lib/Async';
import colors from 'config/colors';
const styles = {
const styles = isSearchable => ({
singleValue: base => ({
...base,
color: colors.TEXT_SECONDARY,
}),
container: base => ({
...base,
width: '180px',
}),
control: (base, { isDisabled }) => ({
...base,
borderRadius: '2px',
@ -20,7 +16,7 @@ const styles = {
boxShadow: 'none',
background: isDisabled ? colors.LANDING : colors.WHITE,
'&:hover': {
cursor: 'pointer',
cursor: isSearchable ? 'text' : 'pointer',
borderColor: colors.DIVIDER,
},
}),
@ -29,6 +25,7 @@ const styles = {
}),
dropdownIndicator: base => ({
...base,
display: isSearchable ? 'none' : 'block',
color: colors.TEXT_SECONDARY,
path: '',
'&:hover': {
@ -61,21 +58,23 @@ const styles = {
background: colors.LANDING,
},
}),
};
});
const SelectWrapper = props => (
<div>
{props.isAsync && <AsyncSelect styles={styles} {...props} /> }
{!props.isAsync && <Select styles={styles} {...props} />}
{props.isAsync && <AsyncSelect styles={styles(props.isSearchable)} {...props} /> }
{!props.isAsync && <Select styles={styles(props.isSearchable)} {...props} />}
</div>
);
SelectWrapper.propTypes = {
isAsync: PropTypes.bool,
isSearchable: PropTypes.bool,
};
SelectWrapper.defaultProps = {
isAsync: false,
isSearchable: false,
};
export default SelectWrapper;

View File

@ -64,6 +64,7 @@ const LearnMoreText = styled.span`
const SelectWrapper = styled(Select)`
margin-right: 10px;
width: 180px;
`;
const DownloadBridgeWrapper = styled.div`