[Uptime] Fix kuery bar dark theme (#87827)
This commit is contained in:
parent
3eeec0f571
commit
8d385a4ebd
|
@ -5,14 +5,13 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { useRef, useEffect, RefObject } from 'react';
|
import React, { useRef, useEffect, RefObject } from 'react';
|
||||||
import styled from 'styled-components';
|
|
||||||
import { EuiSuggestItem } from '@elastic/eui';
|
import { EuiSuggestItem } from '@elastic/eui';
|
||||||
import theme from '@elastic/eui/dist/eui_theme_light.json';
|
|
||||||
|
|
||||||
import { QuerySuggestion } from '../../../../../../../../src/plugins/data/public';
|
import { QuerySuggestion } from '../../../../../../../../src/plugins/data/public';
|
||||||
|
import { euiStyled } from '../../../../../../observability/public';
|
||||||
|
|
||||||
const SuggestionItem = styled.div<{ selected: boolean }>`
|
const SuggestionItem = euiStyled.div<{ selected: boolean }>`
|
||||||
background: ${(props) => (props.selected ? theme.euiColorLightestShade : 'initial')};
|
background: ${(props) => (props.selected ? props.theme.eui.euiColorLightestShade : 'initial')};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
function getIconColor(type: string) {
|
function getIconColor(type: string) {
|
||||||
|
|
|
@ -5,12 +5,11 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { useRef, useState, useEffect } from 'react';
|
import React, { useRef, useState, useEffect } from 'react';
|
||||||
import styled from 'styled-components';
|
|
||||||
import { isEmpty } from 'lodash';
|
import { isEmpty } from 'lodash';
|
||||||
import { tint } from 'polished';
|
import { rgba } from 'polished';
|
||||||
import theme from '@elastic/eui/dist/eui_theme_light.json';
|
|
||||||
import { Suggestion } from './suggestion';
|
import { Suggestion } from './suggestion';
|
||||||
import { QuerySuggestion } from '../../../../../../../../src/plugins/data/public';
|
import { QuerySuggestion } from '../../../../../../../../src/plugins/data/public';
|
||||||
|
import { euiStyled } from '../../../../../../observability/public';
|
||||||
|
|
||||||
export const unit = 16;
|
export const unit = 16;
|
||||||
|
|
||||||
|
@ -30,16 +29,30 @@ export function px(value: number): string {
|
||||||
return `${value}px`;
|
return `${value}px`;
|
||||||
}
|
}
|
||||||
|
|
||||||
const List = styled.ul`
|
const List = euiStyled.ul`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 1px solid ${theme.euiColorLightShade};
|
border: 1px solid ${(props) => props.theme.eui.euiColorLightShade};
|
||||||
border-radius: ${px(units.quarter)};
|
border-radius: ${px(units.quarter)};
|
||||||
box-shadow: 0px ${px(units.quarter)} ${px(units.double)} ${tint(0.1, theme.euiColorFullShade)};
|
background-color: ${(props) => props.theme.eui.euiColorEmptyShade};
|
||||||
background: #fff;
|
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
max-height: ${px(unit * 20)};
|
max-height: ${px(unit * 20)};
|
||||||
overflow: scroll;
|
overflow: auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
height: ${({ theme }) => theme.eui.euiScrollBar};
|
||||||
|
width: ${({ theme }) => theme.eui.euiScrollBar};
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background-clip: content-box;
|
||||||
|
background-color: ${({ theme }) => rgba(theme.eui.euiColorDarkShade, 0.5)};
|
||||||
|
border: ${({ theme }) => theme.eui.euiScrollBarCorner} solid transparent;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-corner,
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
interface SuggestionsProps {
|
interface SuggestionsProps {
|
||||||
|
|
|
@ -236,8 +236,6 @@ export const Typeahead: React.FC<TypeaheadProps> = ({
|
||||||
};
|
};
|
||||||
|
|
||||||
const onMouseEnterSuggestion = (index: number) => {
|
const onMouseEnterSuggestion = (index: number) => {
|
||||||
setState({ ...state, index });
|
|
||||||
|
|
||||||
setState((prevState) => ({
|
setState((prevState) => ({
|
||||||
...prevState,
|
...prevState,
|
||||||
index,
|
index,
|
||||||
|
|
Loading…
Reference in a new issue