maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Uptime] Fix kuery bar dark theme (#87827)

Browse source
This commit is contained in:
Shahzad 2021-01-11 16:30:01 +01:00 committed by GitHub
parent 3eeec0f571
commit 8d385a4ebd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestion.tsx
View file

@ -5,14 +5,13 @@
*/
import React, { useRef, useEffect, RefObject } from 'react';
import styled from 'styled-components';
import { EuiSuggestItem } from '@elastic/eui';
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { QuerySuggestion } from '../../../../../../../../src/plugins/data/public';
import { euiStyled } from '../../../../../../observability/public';
const SuggestionItem = styled.div<{ selected: boolean }>`
background: ${(props) => (props.selected ? theme.euiColorLightestShade : 'initial')};
const SuggestionItem = euiStyled.div<{ selected: boolean }>`
background: ${(props) => (props.selected ? props.theme.eui.euiColorLightestShade : 'initial')};
`;
function getIconColor(type: string) {

29
x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestions.tsx
View file

@ -5,12 +5,11 @@
*/
import React, { useRef, useState, useEffect } from 'react';
import styled from 'styled-components';
import { isEmpty } from 'lodash';
import { tint } from 'polished';
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { rgba } from 'polished';
import { Suggestion } from './suggestion';
import { QuerySuggestion } from '../../../../../../../../src/plugins/data/public';
import { euiStyled } from '../../../../../../observability/public';
export const unit = 16;
@ -30,16 +29,30 @@ export function px(value: number): string {
return `${value}px`;
}
const List = styled.ul`
const List = euiStyled.ul`
width: 100%;
border: 1px solid ${theme.euiColorLightShade};
border: 1px solid ${(props) => props.theme.eui.euiColorLightShade};
border-radius: ${px(units.quarter)};
box-shadow: 0px ${px(units.quarter)} ${px(units.double)} ${tint(0.1, theme.euiColorFullShade)};
background: #fff;
background-color: ${(props) => props.theme.eui.euiColorEmptyShade};
z-index: 10;
max-height: ${px(unit * 20)};
overflow: scroll;
overflow: auto;
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 {

2
x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/typehead.tsx
View file

@ -236,8 +236,6 @@ export const Typeahead: React.FC<TypeaheadProps> = ({
};
const onMouseEnterSuggestion = (index: number) => {
setState({ ...state, index });
setState((prevState) => ({
...prevState,
index,