diff options
Diffstat (limited to 'web/src/containers/timezone/SelectTz.jsx')
-rw-r--r-- | web/src/containers/timezone/SelectTz.jsx | 22 |
1 files changed, 18 insertions, 4 deletions
diff --git a/web/src/containers/timezone/SelectTz.jsx b/web/src/containers/timezone/SelectTz.jsx index aaa585336..576645f6c 100644 --- a/web/src/containers/timezone/SelectTz.jsx +++ b/web/src/containers/timezone/SelectTz.jsx @@ -12,9 +12,9 @@ import PropTypes from 'prop-types' import React from 'react' -import Select from 'react-select' +import Select, { components } from 'react-select' import moment from 'moment-timezone' -import { OutlinedClockIcon } from '@patternfly/react-icons' +import { OutlinedClockIcon, ChevronDownIcon } from '@patternfly/react-icons' import { connect } from 'react-redux' import { setTimezoneAction } from '../../actions/timezone' @@ -58,7 +58,7 @@ class SelectTz extends React.Component { } render() { - const textColor = '#d1d1d1' + const textColor = '#fff' const containerStyles= { border: 'solid #2b2b2b', borderWidth: '0 0 0 1px', @@ -83,7 +83,11 @@ class SelectTz extends React.Component { }), dropdownIndicator:(provided) => ({ ...provided, - padding: '3px' + color: '#fff', + padding: '3px', + ':hover': { + color: '#fff' + } }), indicatorSeparator: () => {}, menu: (provided) => ({ @@ -93,12 +97,22 @@ class SelectTz extends React.Component { top: '22px', }) } + + const DropdownIndicator = (props) => { + return ( + <components.DropdownIndicator {...props}> + <ChevronDownIcon /> + </components.DropdownIndicator> + ) + } + return ( <div style={containerStyles}> <OutlinedClockIcon/> <Select className="zuul-select-tz" styles={customStyles} + components={{ DropdownIndicator }} value={this.state.currentValue} onChange={this.handleChange} options={this.state.availableTz} |