mirror of https://github.com/trezor/trezor-wallet
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
1.7 KiB
72 lines
1.7 KiB
import React from 'react';
|
|
import Select from 'react-select';
|
|
import colors from 'config/colors';
|
|
|
|
const styles = {
|
|
singleValue: base => ({
|
|
...base,
|
|
color: colors.TEXT_SECONDARY,
|
|
}),
|
|
container: base => ({
|
|
...base,
|
|
width: '180px',
|
|
}),
|
|
control: (base, { isDisabled }) => ({
|
|
...base,
|
|
borderRadius: '2px',
|
|
borderColor: colors.DIVIDER,
|
|
boxShadow: 'none',
|
|
background: isDisabled ? colors.LANDING : colors.WHITE,
|
|
'&:hover': {
|
|
cursor: 'pointer',
|
|
borderColor: colors.DIVIDER,
|
|
},
|
|
}),
|
|
indicatorSeparator: () => ({
|
|
display: 'none',
|
|
}),
|
|
dropdownIndicator: base => ({
|
|
...base,
|
|
color: colors.TEXT_SECONDARY,
|
|
path: '',
|
|
'&:hover': {
|
|
color: colors.TEXT_SECONDARY,
|
|
},
|
|
}),
|
|
menu: base => ({
|
|
...base,
|
|
margin: 0,
|
|
boxShadow: 'none',
|
|
}),
|
|
menuList: base => ({
|
|
...base,
|
|
padding: 0,
|
|
boxShadow: 'none',
|
|
background: colors.WHITE,
|
|
}),
|
|
option: (base, { isSelected }) => ({
|
|
...base,
|
|
color: colors.TEXT_SECONDARY,
|
|
background: isSelected ? colors.LANDING : colors.WHITE,
|
|
borderRadius: 0,
|
|
borderLeft: `1px solid ${colors.DIVIDER}`,
|
|
borderRight: `1px solid ${colors.DIVIDER}`,
|
|
'&:last-child': {
|
|
borderBottom: `1px solid ${colors.DIVIDER}`,
|
|
},
|
|
'&:hover': {
|
|
cursor: 'pointer',
|
|
background: colors.LANDING,
|
|
},
|
|
}),
|
|
};
|
|
|
|
const SelectWrapper = props => (
|
|
<Select
|
|
styles={styles}
|
|
{...props}
|
|
/>
|
|
);
|
|
|
|
export default SelectWrapper;
|