diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/index.js b/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/index.js index 91cf9ca4c278b..42da4d3ba267a 100644 --- a/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/index.js +++ b/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/index.js @@ -9,15 +9,8 @@ import PropTypes from 'prop-types'; import styled from 'styled-components'; import Suggestions from './Suggestions'; import ClickOutside from './ClickOutside'; -import { - EuiButton, - EuiFieldSearch, - EuiFlexGroup, - EuiFlexItem, - EuiProgress, - EuiToolTip -} from '@elastic/eui'; -import { units, fontSizes } from '../../../../style/variables'; +import { EuiFieldSearch, EuiProgress, EuiToolTip } from '@elastic/eui'; +import { units, fontSizes, colors } from '../../../../style/variables'; const KEY_CODES = { LEFT: 37, @@ -36,6 +29,7 @@ const BetaLabel = styled.div` font-size: ${fontSizes.small}; transform: translateY(calc(-100% - ${units.quarter}px)); cursor: pointer; + color: ${colors.gray2}; `; export class Typeahead extends Component { @@ -178,53 +172,46 @@ export class Typeahead extends Component { onClickOutside={this.onClickOutside} style={{ position: 'relative' }} > - - - - -
Beta
-
-
- - + + +
Beta
+
+
+ + { + if (node) { + this.inputRef = node; + } + }} + disabled={this.props.disabled} + value={this.state.value} + onKeyDown={this.onKeyDown} + onKeyUp={this.onKeyUp} + onChange={this.onChangeInputValue} + onClick={this.onClickInput} + autoComplete="off" + spellCheck={false} + /> + + {this.props.isLoading && ( + { - if (node) { - this.inputRef = node; - } - }} - disabled={this.props.disabled} - value={this.state.value} - onKeyDown={this.onKeyDown} - onKeyUp={this.onKeyUp} - onChange={this.onChangeInputValue} - onClick={this.onClickInput} - autoComplete="off" - spellCheck={false} /> - - {this.props.isLoading && ( - - )} -
- - - Search - - -
+ )} +