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

elastic · Jan 11, 2021 · cdec6c9 · cdec6c9
1 parent 1baef27
commit cdec6c9
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 14 deletions.
diff --git a/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestion.tsx b/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestion.tsx
@@ -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) {

diff --git a/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestions.tsx b/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestions.tsx
@@ -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 {

diff --git a/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/typehead.tsx b/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/typehead.tsx
@@ -236,8 +236,6 @@ export const Typeahead: React.FC<TypeaheadProps> = ({
   };
 
   const onMouseEnterSuggestion = (index: number) => {
-    setState({ ...state, index });
-
     setState((prevState) => ({
       ...prevState,
       index,