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
-
-
-
+ )}
+