diff --git a/x-pack/common/eui_styled_components/eui_styled_components.tsx b/x-pack/common/eui_styled_components/eui_styled_components.tsx new file mode 100644 index 00000000000000..8e5fba31ac5a44 --- /dev/null +++ b/x-pack/common/eui_styled_components/eui_styled_components.tsx @@ -0,0 +1,43 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import * as styledComponents from 'styled-components'; +import { ThemedStyledComponentsModule, ThemeProvider, ThemeProviderProps } from 'styled-components'; + +import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; +import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; + +export interface EuiTheme { + eui: typeof euiLightVars | typeof euiDarkVars; + darkMode: boolean; +} + +const EuiThemeProvider = ({ + darkMode = false, + ...otherProps +}: ThemeProviderProps & { + darkMode?: boolean; + children?: React.ReactNode; +}) => ( + ({ + eui: darkMode ? euiDarkVars : euiLightVars, + darkMode, + })} + /> +); + +const { + default: euiStyled, + css, + injectGlobal, + keyframes, + withTheme, +} = styledComponents as ThemedStyledComponentsModule; + +export { css, euiStyled, EuiThemeProvider, injectGlobal, keyframes, withTheme }; diff --git a/x-pack/common/eui_styled_components/index.ts b/x-pack/common/eui_styled_components/index.ts new file mode 100644 index 00000000000000..6d5e8a5a326e7c --- /dev/null +++ b/x-pack/common/eui_styled_components/index.ts @@ -0,0 +1,19 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { + css, + euiStyled, + EuiTheme, + EuiThemeProvider, + injectGlobal, + keyframes, + withTheme, +} from './eui_styled_components'; + +export { css, euiStyled, EuiTheme, EuiThemeProvider, injectGlobal, keyframes, withTheme }; +// tslint:disable-next-line:no-default-export to mimick the styled-components module +export default euiStyled; diff --git a/x-pack/plugins/infra/public/apps/start_app.tsx b/x-pack/plugins/infra/public/apps/start_app.tsx index 097a94cbaa1c1c..a7d3b81d66d4b9 100644 --- a/x-pack/plugins/infra/public/apps/start_app.tsx +++ b/x-pack/plugins/infra/public/apps/start_app.tsx @@ -11,13 +11,11 @@ import { ApolloProvider } from 'react-apollo'; import { Provider as ReduxStoreProvider } from 'react-redux'; import { BehaviorSubject } from 'rxjs'; import { pluck } from 'rxjs/operators'; -import { ThemeProvider } from 'styled-components'; // TODO use theme provided from parentApp when kibana supports it import { EuiErrorBoundary } from '@elastic/eui'; -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { I18nContext } from 'ui/i18n'; +import { EuiThemeProvider } from '../../../../common/eui_styled_components'; import { InfraFrontendLibs } from '../lib/lib'; import { PageRouter } from '../routes'; import { createStore } from '../store'; @@ -39,14 +37,9 @@ export async function startApp(libs: InfraFrontendLibs) { - ({ - eui: libs.framework.darkMode ? euiDarkVars : euiLightVars, - darkMode: libs.framework.darkMode, - })} - > + - + diff --git a/x-pack/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx b/x-pack/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx index 1995ec289b64ff..b8cf13977c0b3d 100644 --- a/x-pack/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx +++ b/x-pack/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx @@ -11,10 +11,10 @@ import { EuiPanel, } from '@elastic/eui'; import React from 'react'; -import styled from 'styled-components'; import { AutocompleteSuggestion } from 'ui/autocomplete_providers'; +import euiStyled from '../../../../../common/eui_styled_components'; import { composeStateUpdaters } from '../../utils/typed_react'; import { SuggestionItem } from './suggestion_item'; @@ -296,11 +296,11 @@ const FixedEuiFieldSearch: React.SFC< } > = EuiFieldSearch as any; -const AutocompleteContainer = styled.div` +const AutocompleteContainer = euiStyled.div` position: relative; `; -const SuggestionsPanel = styled(EuiPanel).attrs({ +const SuggestionsPanel = euiStyled(EuiPanel).attrs({ paddingSize: 'none', hasShadow: true, })` diff --git a/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx b/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx index 69c02e1c7f7d73..802bd88cf09c77 100644 --- a/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx +++ b/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx @@ -7,9 +7,9 @@ import { EuiIcon } from '@elastic/eui'; import { transparentize } from 'polished'; import React from 'react'; -import styled from 'styled-components'; import { AutocompleteSuggestion } from 'ui/autocomplete_providers'; +import euiStyled from '../../../../../common/eui_styled_components'; interface SuggestionItemProps { isSelected?: boolean; @@ -44,25 +44,25 @@ export class SuggestionItem extends React.Component { } } -const SuggestionItemContainer = styled.div<{ +const SuggestionItemContainer = euiStyled.div<{ isSelected?: boolean; }>` display: flex; flex-direction: row; font-size: ${props => props.theme.eui.euiFontSizeS}; - height: ${props => props.theme.eui.euiSizeXl}; + height: ${props => props.theme.eui.euiSizeXL}; white-space: nowrap; background-color: ${props => props.isSelected ? props.theme.eui.euiColorLightestShade : 'transparent'}; `; -const SuggestionItemField = styled.div` +const SuggestionItemField = euiStyled.div` align-items: center; cursor: pointer; display: flex; flex-direction: row; - height: ${props => props.theme.eui.euiSizeXl}; - padding: ${props => props.theme.eui.euiSizeXs}; + height: ${props => props.theme.eui.euiSizeXL}; + padding: ${props => props.theme.eui.euiSizeXS}; `; const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: string }>` @@ -71,7 +71,7 @@ const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: str color: ${props => getEuiIconColor(props.theme, props.suggestionType)}; flex: 0 0 auto; justify-content: center; - width: ${props => props.theme.eui.euiSizeXl}; + width: ${props => props.theme.eui.euiSizeXL}; `; const SuggestionItemTextField = SuggestionItemField.extend` diff --git a/x-pack/plugins/infra/public/components/empty_states/no_data.tsx b/x-pack/plugins/infra/public/components/empty_states/no_data.tsx index bf6726a8ba5aed..be0f1eb78efeeb 100644 --- a/x-pack/plugins/infra/public/components/empty_states/no_data.tsx +++ b/x-pack/plugins/infra/public/components/empty_states/no_data.tsx @@ -6,7 +6,8 @@ import { EuiButton, EuiEmptyPrompt } from '@elastic/eui'; import React from 'react'; -import styled from 'styled-components'; + +import euiStyled from '../../../../../common/eui_styled_components'; interface NoDataProps { titleText: string; @@ -36,6 +37,6 @@ export const NoData: React.SFC = ({ /> ); -const CenteredEmptyPrompt = styled(EuiEmptyPrompt)` +const CenteredEmptyPrompt = euiStyled(EuiEmptyPrompt)` align-self: center; `; diff --git a/x-pack/plugins/infra/public/components/empty_states/no_indices.tsx b/x-pack/plugins/infra/public/components/empty_states/no_indices.tsx index 8abbb89b309c90..a1aadd7542c14c 100644 --- a/x-pack/plugins/infra/public/components/empty_states/no_indices.tsx +++ b/x-pack/plugins/infra/public/components/empty_states/no_indices.tsx @@ -6,7 +6,8 @@ import { EuiEmptyPrompt } from '@elastic/eui'; import React from 'react'; -import styled from 'styled-components'; + +import euiStyled from '../../../../../common/eui_styled_components'; interface NoIndicesProps { message: string; @@ -24,6 +25,6 @@ export const NoIndices: React.SFC = ({ actions, message, title, /> ); -const CenteredEmptyPrompt = styled(EuiEmptyPrompt)` +const CenteredEmptyPrompt = euiStyled(EuiEmptyPrompt)` align-self: center; `; diff --git a/x-pack/plugins/infra/public/components/error_page.tsx b/x-pack/plugins/infra/public/components/error_page.tsx index 8fc16e551e3d82..cf16229a8dc4bf 100644 --- a/x-pack/plugins/infra/public/components/error_page.tsx +++ b/x-pack/plugins/infra/public/components/error_page.tsx @@ -14,8 +14,8 @@ import { } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import React from 'react'; -import styled from 'styled-components'; +import euiStyled from '../../../../common/eui_styled_components'; import { FlexPage } from './page'; interface Props { @@ -64,6 +64,6 @@ export const ErrorPage: React.SFC = ({ detailedMessage, retry, shortMessa ); -const MinimumPageContent = styled(EuiPageContent)` +const MinimumPageContent = euiStyled(EuiPageContent)` min-width: 50vh; `; diff --git a/x-pack/plugins/infra/public/components/eui/toolbar/toolbar.tsx b/x-pack/plugins/infra/public/components/eui/toolbar/toolbar.tsx index 7efeb4da88967b..b65f3043c2144d 100644 --- a/x-pack/plugins/infra/public/components/eui/toolbar/toolbar.tsx +++ b/x-pack/plugins/infra/public/components/eui/toolbar/toolbar.tsx @@ -6,9 +6,9 @@ import { EuiPanel } from '@elastic/eui'; -import styled from 'styled-components'; +import euiStyled from '../../../../../../common/eui_styled_components'; -export const Toolbar = styled(EuiPanel).attrs({ +export const Toolbar = euiStyled(EuiPanel).attrs({ grow: false, paddingSize: 'none', })` diff --git a/x-pack/plugins/infra/public/components/loading/index.tsx b/x-pack/plugins/infra/public/components/loading/index.tsx index fc7da8ff69d9e5..30dfef9ed48bdf 100644 --- a/x-pack/plugins/infra/public/components/loading/index.tsx +++ b/x-pack/plugins/infra/public/components/loading/index.tsx @@ -6,7 +6,8 @@ import { EuiLoadingChart, EuiPanel, EuiText } from '@elastic/eui'; import * as React from 'react'; -import styled from 'styled-components'; + +import euiStyled from '../../../../../common/eui_styled_components'; interface InfraLoadingProps { text: string | JSX.Element; @@ -32,7 +33,7 @@ export class InfraLoadingPanel extends React.PureComponent = ({ ); }; -const PositiveAreaPath = styled.path` +const PositiveAreaPath = euiStyled.path` fill: ${props => props.theme.darkMode ? props.theme.eui.euiColorMediumShade : props.theme.eui.euiColorLightShade}; `; -const NegativeAreaPath = styled.path` +const NegativeAreaPath = euiStyled.path` fill: ${props => props.theme.darkMode ? props.theme.eui.euiColorLightShade diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/highlighted_interval.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/highlighted_interval.tsx index 67981d1b5e9bf6..98eb85c72628b4 100644 --- a/x-pack/plugins/infra/public/components/logging/log_minimap/highlighted_interval.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_minimap/highlighted_interval.tsx @@ -5,7 +5,8 @@ */ import * as React from 'react'; -import styled from 'styled-components'; + +import euiStyled from '../../../../../../common/eui_styled_components'; interface HighlightedIntervalProps { className?: string; @@ -35,7 +36,7 @@ export const HighlightedInterval: React.SFC = ({ HighlightedInterval.displayName = 'HighlightedInterval'; -const HighlightPolygon = styled.polygon` +const HighlightPolygon = euiStyled.polygon` fill: ${props => props.theme.eui.euiColorPrimary}; fill-opacity: 0.3; stroke: ${props => props.theme.eui.euiColorPrimary}; diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/log_minimap.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/log_minimap.tsx index 52fce179c3f668..91f44f791625b9 100644 --- a/x-pack/plugins/infra/public/components/logging/log_minimap/log_minimap.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_minimap/log_minimap.tsx @@ -6,8 +6,8 @@ import { scaleLinear } from 'd3-scale'; import * as React from 'react'; -import styled from 'styled-components'; +import euiStyled from '../../../../../../common/eui_styled_components'; import { LogEntryTime } from '../../../../common/log_entry'; // import { SearchSummaryBucket } from '../../../../common/log_search_summary'; import { DensityChart } from './density_chart'; @@ -116,11 +116,11 @@ export class LogMinimap extends React.Component { } } -const MinimapBackground = styled.rect` +const MinimapBackground = euiStyled.rect` fill: ${props => props.theme.eui.euiColorLightestShade}; `; -const MinimapBorder = styled.line` +const MinimapBorder = euiStyled.line` stroke: ${props => props.theme.eui.euiColorMediumShade}; stroke-width: 1px; `; diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/search_marker.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/search_marker.tsx index df383cf07459c9..3889c5f07d4b9a 100644 --- a/x-pack/plugins/infra/public/components/logging/log_minimap/search_marker.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_minimap/search_marker.tsx @@ -6,8 +6,8 @@ import { FormattedMessage } from '@kbn/i18n/react'; import * as React from 'react'; -import styled, { keyframes } from 'styled-components'; +import euiStyled, { keyframes } from '../../../../../../common/eui_styled_components'; import { LogEntryTime } from '../../../../common/log_entry'; import { SearchSummaryBucket } from '../../../../common/log_search_summary'; import { SearchMarkerTooltip } from './search_marker_tooltip'; @@ -102,11 +102,11 @@ const fadeInAnimation = keyframes` } `; -const SearchMarkerGroup = styled.g` +const SearchMarkerGroup = euiStyled.g` animation: ${fadeInAnimation} ${props => props.theme.eui.euiAnimSpeedExtraSlow} ease-in both; `; -const SearchMarkerBackgroundRect = styled.rect` +const SearchMarkerBackgroundRect = euiStyled.rect` fill: ${props => props.theme.eui.euiColorSecondary}; opacity: 0; transition: opacity ${props => props.theme.eui.euiAnimSpeedNormal} ease-in; @@ -116,6 +116,6 @@ const SearchMarkerBackgroundRect = styled.rect` } `; -const SearchMarkerForegroundRect = styled.rect` +const SearchMarkerForegroundRect = euiStyled.rect` fill: ${props => props.theme.eui.euiColorSecondary}; `; diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx index d70e32ca1618d7..f259b22bc32f74 100644 --- a/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx @@ -6,7 +6,8 @@ import { scaleTime } from 'd3-scale'; import * as React from 'react'; -import styled from 'styled-components'; + +import euiStyled from '../../../../../../common/eui_styled_components'; interface TimeRulerProps { end: number; @@ -43,13 +44,13 @@ export const TimeRuler: React.SFC = ({ end, height, start, tickC TimeRuler.displayName = 'TimeRuler'; -const TimeRulerTickLabel = styled.text` +const TimeRulerTickLabel = euiStyled.text` font-size: ${props => props.theme.eui.euiFontSizeXS}; line-height: ${props => props.theme.eui.euiLineHeight}; fill: ${props => props.theme.eui.textColors.subdued}; `; -const TimeRulerGridLine = styled.line` +const TimeRulerGridLine = euiStyled.line` stroke: ${props => props.theme.darkMode ? props.theme.eui.euiColorDarkShade : props.theme.eui.euiColorMediumShade}; stroke-dasharray: 2, 2; diff --git a/x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_input.tsx b/x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_input.tsx index 1b157ff65fc67e..5855bc5419f652 100644 --- a/x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_input.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_input.tsx @@ -8,7 +8,8 @@ import { EuiFieldSearch } from '@elastic/eui'; import { InjectedIntl, injectI18n } from '@kbn/i18n/react'; import classNames from 'classnames'; import * as React from 'react'; -import styled from 'styled-components'; + +import euiStyled from '../../../../../../common/eui_styled_components'; interface LogSearchInputProps { className?: string; @@ -76,7 +77,7 @@ export const LogSearchInput = injectI18n( } ); -const PlainSearchField = styled(EuiFieldSearch)` +const PlainSearchField = euiStyled(EuiFieldSearch)` background: transparent; box-shadow: none; diff --git a/x-pack/plugins/infra/public/components/logging/log_statusbar.tsx b/x-pack/plugins/infra/public/components/logging/log_statusbar.tsx index 95749c62d07560..c52ef4a5062dc5 100644 --- a/x-pack/plugins/infra/public/components/logging/log_statusbar.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_statusbar.tsx @@ -5,9 +5,10 @@ */ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -import styled from 'styled-components'; -export const LogStatusbar = styled(EuiFlexGroup).attrs({ +import euiStyled from '../../../../../common/eui_styled_components'; + +export const LogStatusbar = euiStyled(EuiFlexGroup).attrs({ alignItems: 'center', gutterSize: 'none', justifyContent: 'flexEnd', diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/item_field.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/item_field.tsx index b098e6b9234b39..0f8bee197d0a52 100644 --- a/x-pack/plugins/infra/public/components/logging/log_text_stream/item_field.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/item_field.tsx @@ -4,11 +4,10 @@ * you may not use this file except in compliance with the Elastic License. */ -import styled from 'styled-components'; - +import euiStyled from '../../../../../../common/eui_styled_components'; import { switchProp } from '../../../utils/styles'; -export const LogTextStreamItemField = styled.div.attrs<{ +export const LogTextStreamItemField = euiStyled.div.attrs<{ scale?: 'small' | 'medium' | 'large'; }>({})` font-size: ${props => diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/item_message_field.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/item_message_field.tsx index 8d5ea413dffa9b..76144f64be7ee9 100644 --- a/x-pack/plugins/infra/public/components/logging/log_text_stream/item_message_field.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/item_message_field.tsx @@ -6,8 +6,8 @@ import { darken, transparentize } from 'polished'; import * as React from 'react'; -import styled, { css } from 'styled-components'; +import euiStyled, { css } from '../../../../../../common/eui_styled_components'; import { TextScale } from '../../../../common/log_text_scale'; import { tintOrShade } from '../../../utils/styles'; import { LogTextStreamItemField } from './item_field'; @@ -69,7 +69,11 @@ const renderHighlightFragments = (text: string, highlights: string[]): React.Rea const highlightedFieldStyle = css` background-color: ${props => - tintOrShade(props.theme.eui.euiTextColor, props.theme.eui.euiColorSecondary, 0.15)}; + tintOrShade( + props.theme.eui.euiTextColor as any, // workaround for incorrect upstream `tintOrShade` types + props.theme.eui.euiColorSecondary as any, + 0.15 + )}; `; const hoveredFieldStyle = css` @@ -104,7 +108,7 @@ const LogTextStreamItemMessageFieldWrapper = LogTextStreamItemField.extend.attrs ${props => (props.isWrapped ? wrappedFieldStyle : unwrappedFieldStyle)}; `; -const HighlightSpan = styled.span` +const HighlightSpan = euiStyled.span` display: inline-block; background-color: ${props => props.theme.eui.euiColorSecondary}; color: ${props => props.theme.eui.euiColorGhost}; diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx index fe626ecfc8b7ea..6fc54c4fde859d 100644 --- a/x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx @@ -7,7 +7,8 @@ import { EuiButtonEmpty, EuiIcon, EuiProgress, EuiText } from '@elastic/eui'; import { FormattedMessage, FormattedRelative } from '@kbn/i18n/react'; import * as React from 'react'; -import styled from 'styled-components'; + +import euiStyled from '../../../../../../common/eui_styled_components'; interface LogTextStreamLoadingItemViewProps { alignment: 'top' | 'bottom'; @@ -136,13 +137,13 @@ class ProgressEntry extends React.PureComponent { } } -const ProgressEntryWrapper = styled.div` +const ProgressEntryWrapper = euiStyled.div` align-items: center; display: flex; - min-height: ${props => props.theme.eui.euiSizeXxl}; + min-height: ${props => props.theme.eui.euiSizeXXL}; position: relative; `; -const ProgressMessage = styled.div` +const ProgressMessage = euiStyled.div` padding: 8px 16px; `; diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_item_view.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_item_view.tsx index 70442eb004253e..bc2803bbfe0e74 100644 --- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_item_view.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_item_view.tsx @@ -6,10 +6,10 @@ import { darken, transparentize } from 'polished'; import * as React from 'react'; -import styled from 'styled-components'; import { EuiButtonIcon, EuiToolTip } from '@elastic/eui'; import { InjectedIntl, injectI18n } from '@kbn/i18n/react'; +import euiStyled from '../../../../../../common/eui_styled_components'; import { LogEntry } from '../../../../common/log_entry'; import { SearchResult } from '../../../../common/log_search_result'; import { TextScale } from '../../../../common/log_text_scale'; @@ -111,11 +111,11 @@ interface IconProps { isHovered: boolean; } -const EmptyIcon = styled.div` +const EmptyIcon = euiStyled.div` width: 24px; `; -const LogTextStreamIconDiv = styled('div')` +const LogTextStreamIconDiv = euiStyled('div')` flex-grow: 0; background-color: ${props => props.isHovered @@ -128,7 +128,7 @@ const LogTextStreamIconDiv = styled('div')` font-size: 0.9em; `; -const LogTextStreamLogEntryItemDiv = styled.div` +const LogTextStreamLogEntryItemDiv = euiStyled.div` font-family: ${props => props.theme.eui.euiCodeFontFamily}; font-size: ${props => props.theme.eui.euiFontSize}; line-height: ${props => props.theme.eui.euiLineHeight}; diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_stream_item_view_.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_stream_item_view_.tsx index 98bc10a6240d95..be55ab51a77233 100644 --- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_stream_item_view_.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_stream_item_view_.tsx @@ -5,8 +5,8 @@ */ import * as React from 'react'; -import styled from 'styled-components'; +import euiStyled from '../../../../../../common/eui_styled_components'; import { LogEntry } from '../../../../common/log_entry'; interface LogEntryStreamItemViewProps { @@ -25,7 +25,7 @@ export class LogEntryStreamItemView extends React.PureComponent { @@ -227,7 +227,7 @@ export class VerticalScrollPanel extends React.PureComponent< } } -const ScrollPanelWrapper = styled.div.attrs<{ scrollbarOffset?: number }>({})` +const ScrollPanelWrapper = euiStyled.div.attrs<{ scrollbarOffset?: number }>({})` overflow-x: hidden; overflow-y: scroll; position: relative; diff --git a/x-pack/plugins/infra/public/components/logging/log_time_controls.tsx b/x-pack/plugins/infra/public/components/logging/log_time_controls.tsx index 8539dd455de12e..de14851c101cae 100644 --- a/x-pack/plugins/infra/public/components/logging/log_time_controls.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_time_controls.tsx @@ -8,7 +8,8 @@ import { EuiDatePicker, EuiFilterButton, EuiFilterGroup } from '@elastic/eui'; import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react'; import moment, { Moment } from 'moment'; import React from 'react'; -import styled from 'styled-components'; + +import euiStyled from '../../../../../common/eui_styled_components'; const noop = () => undefined; @@ -96,6 +97,6 @@ class LogTimeControlsUI extends React.PureComponent { export const LogTimeControls = injectI18n(LogTimeControlsUI); -const InlineWrapper = styled.div` +const InlineWrapper = euiStyled.div` display: inline-block; `; diff --git a/x-pack/plugins/infra/public/components/metrics/invalid_node.tsx b/x-pack/plugins/infra/public/components/metrics/invalid_node.tsx index 041b650fee9a50..cd003a446d83a2 100644 --- a/x-pack/plugins/infra/public/components/metrics/invalid_node.tsx +++ b/x-pack/plugins/infra/public/components/metrics/invalid_node.tsx @@ -7,7 +7,8 @@ import { EuiButton, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import React from 'react'; -import styled from 'styled-components'; + +import euiStyled from '../../../../../common/eui_styled_components'; import { WithSourceConfigurationFlyoutState } from '../../components/source_configuration/source_configuration_flyout_state'; import { WithKibanaChrome } from '../../containers/with_kibana_chrome'; @@ -71,6 +72,6 @@ export const InvalidNodeError: React.SFC = ({ nodeName }) ); -const CenteredEmptyPrompt = styled(EuiEmptyPrompt)` +const CenteredEmptyPrompt = euiStyled(EuiEmptyPrompt)` align-self: center; `; diff --git a/x-pack/plugins/infra/public/components/metrics/sections/gauges_section.tsx b/x-pack/plugins/infra/public/components/metrics/sections/gauges_section.tsx index 0f3bf13f198cc9..2c49d778d55b71 100644 --- a/x-pack/plugins/infra/public/components/metrics/sections/gauges_section.tsx +++ b/x-pack/plugins/infra/public/components/metrics/sections/gauges_section.tsx @@ -15,7 +15,8 @@ import { } from '@elastic/eui'; import { get, last, max } from 'lodash'; import React, { ReactText } from 'react'; -import styled from 'styled-components'; + +import euiStyled from '../../../../../../common/eui_styled_components'; import { InfraMetricData } from '../../../graphql/types'; import { InfraFormatterType } from '../../../lib/lib'; import { InfraMetricLayoutSection } from '../../../pages/metrics/layouts/types'; @@ -96,7 +97,7 @@ export class GaugesSection extends React.PureComponent { } } -const GroupBox = styled.div` +const GroupBox = euiStyled.div` display: flex; flex-flow: row wrap; justify-content: space-evenly; diff --git a/x-pack/plugins/infra/public/components/metrics/side_nav.tsx b/x-pack/plugins/infra/public/components/metrics/side_nav.tsx index 94a954a719bd8c..f72411bd4dc19e 100644 --- a/x-pack/plugins/infra/public/components/metrics/side_nav.tsx +++ b/x-pack/plugins/infra/public/components/metrics/side_nav.tsx @@ -4,14 +4,11 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; - -import styled from 'styled-components'; - import { EuiHideFor, EuiPageSideBar, EuiShowFor, EuiSideNav } from '@elastic/eui'; - import { InjectedIntl, injectI18n } from '@kbn/i18n/react'; +import React from 'react'; +import euiStyled from '../../../../../common/eui_styled_components'; import { InfraMetricLayout, InfraMetricLayoutSection } from '../../pages/metrics/layouts/types'; interface Props { @@ -73,7 +70,7 @@ export const MetricsSideNav = injectI18n( } ); -const SideNavContainer = styled.div` +const SideNavContainer = euiStyled.div` position: fixed; z-index: 1; height: 88vh; diff --git a/x-pack/plugins/infra/public/components/metrics/time_controls.tsx b/x-pack/plugins/infra/public/components/metrics/time_controls.tsx index 7a33cb97fbdb72..2b1d405c2d5ba6 100644 --- a/x-pack/plugins/infra/public/components/metrics/time_controls.tsx +++ b/x-pack/plugins/infra/public/components/metrics/time_controls.tsx @@ -8,11 +8,10 @@ import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/e import { FormattedMessage } from '@kbn/i18n/react'; import moment, { Moment } from 'moment'; import React from 'react'; -import styled from 'styled-components'; - -import { RangeDatePicker, RecentlyUsed } from '../range_date_picker'; +import euiStyled from '../../../../../common/eui_styled_components'; import { metricTimeActions } from '../../store'; +import { RangeDatePicker, RecentlyUsed } from '../range_date_picker'; interface MetricsTimeControlsProps { currentTimeRange: metricTimeActions.MetricRangeTimeState; @@ -219,7 +218,8 @@ export class MetricsTimeControls extends React.Component< } }; } -const MetricsTimeControlsContainer = styled.div` + +const MetricsTimeControlsContainer = euiStyled.div` display: flex; justify-content: right; flex-flow: row wrap; diff --git a/x-pack/plugins/infra/public/components/nodes_overview/index.tsx b/x-pack/plugins/infra/public/components/nodes_overview/index.tsx index 554c17dbfd2860..902141a4634fc7 100644 --- a/x-pack/plugins/infra/public/components/nodes_overview/index.tsx +++ b/x-pack/plugins/infra/public/components/nodes_overview/index.tsx @@ -8,8 +8,8 @@ import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react'; import { get, max, min } from 'lodash'; import React from 'react'; -import styled from 'styled-components'; +import euiStyled from '../../../../../common/eui_styled_components'; import { InfraMetricType, InfraNode, @@ -206,20 +206,20 @@ export const NodesOverview = injectI18n( } ); -const MainContainer = styled.div` +const MainContainer = euiStyled.div` position: relative; flex: 1 1 auto; `; -const TableContainer = styled.div` +const TableContainer = euiStyled.div` padding: ${props => props.theme.eui.paddingSizes.l}; `; -const ViewSwitcherContainer = styled.div` +const ViewSwitcherContainer = euiStyled.div` padding: ${props => props.theme.eui.paddingSizes.l}; `; -const MapContainer = styled.div` +const MapContainer = euiStyled.div` position: absolute; display: flex; top: 0; diff --git a/x-pack/plugins/infra/public/components/page.tsx b/x-pack/plugins/infra/public/components/page.tsx index c4b608e2e9c643..e66b74ae3e37d3 100644 --- a/x-pack/plugins/infra/public/components/page.tsx +++ b/x-pack/plugins/infra/public/components/page.tsx @@ -5,22 +5,23 @@ */ import { EuiPage } from '@elastic/eui'; -import styled from 'styled-components'; -export const ColumnarPage = styled.div` +import euiStyled from '../../../../common/eui_styled_components'; + +export const ColumnarPage = euiStyled.div` display: flex; flex-direction: column; align-items: stretch; flex: 1 0 0%; `; -export const PageContent = styled.div` +export const PageContent = euiStyled.div` flex: 1 0 0%; display: flex; flex-direction: row; background-color: ${props => props.theme.eui.euiColorEmptyShade}; `; -export const FlexPage = styled(EuiPage)` +export const FlexPage = euiStyled(EuiPage)` flex: 1 0 0%; `; diff --git a/x-pack/plugins/infra/public/components/waffle/gradient_legend.tsx b/x-pack/plugins/infra/public/components/waffle/gradient_legend.tsx index c3ea29cd216b17..37a4b4bc563a0b 100644 --- a/x-pack/plugins/infra/public/components/waffle/gradient_legend.tsx +++ b/x-pack/plugins/infra/public/components/waffle/gradient_legend.tsx @@ -5,7 +5,8 @@ */ import React from 'react'; -import styled from 'styled-components'; + +import euiStyled from '../../../../../common/eui_styled_components'; import { InfraFormatter, InfraWaffleMapBounds, @@ -52,7 +53,7 @@ export const GradientLegend: React.SFC = ({ legend, bounds, formatter }) ); }; -const GradientLegendContainer = styled.div` +const GradientLegendContainer = euiStyled.div` position: absolute; height: 10px; bottom: 0; @@ -60,13 +61,13 @@ const GradientLegendContainer = styled.div` right: 40px; `; -const GradientLegendTick = styled.div` +const GradientLegendTick = euiStyled.div` position: absolute; bottom: 0; top: -18px; `; -const GradientLegendTickLine = styled.div` +const GradientLegendTickLine = euiStyled.div` position: absolute; background-color: ${props => props.theme.eui.euiBorderColor}; width: 1px; @@ -81,7 +82,7 @@ const GradientLegendTickLine = styled.div` } `; -const GradientLegendTickLabel = styled.div` +const GradientLegendTickLabel = euiStyled.div` position: absolute; font-size: 11px; text-align: center; diff --git a/x-pack/plugins/infra/public/components/waffle/group_name.tsx b/x-pack/plugins/infra/public/components/waffle/group_name.tsx index 22c58b3a7dc920..fb45e2c5872e1f 100644 --- a/x-pack/plugins/infra/public/components/waffle/group_name.tsx +++ b/x-pack/plugins/infra/public/components/waffle/group_name.tsx @@ -5,7 +5,8 @@ */ import { EuiLink, EuiToolTip } from '@elastic/eui'; import React from 'react'; -import styled from 'styled-components'; + +import euiStyled from '../../../../../common/eui_styled_components'; import { InfraPathType } from '../../graphql/types'; import { InfraWaffleMapGroup, InfraWaffleMapOptions } from '../../lib/lib'; @@ -58,7 +59,7 @@ export class GroupName extends React.PureComponent { }; } -const GroupNameContainer = styled.div` +const GroupNameContainer = euiStyled.div` position: relative; text-align: center font-size: 16px; @@ -73,7 +74,7 @@ interface InnerProps { isChild?: boolean; } -const Inner = styled('div')` +const Inner = euiStyled('div')` border: 1px solid ${props => props.theme.eui.euiBorderColor}; background-color: ${props => props.isChild ? props.theme.eui.euiColorLightestShade : props.theme.eui.euiColorEmptyShade}; @@ -85,7 +86,7 @@ const Inner = styled('div')` overflow: hidden; `; -const Name = styled.div` +const Name = euiStyled.div` flex: 1 1 auto; padding: 6px 10px; overflow: hidden; @@ -93,7 +94,7 @@ const Name = styled.div` white-space: nowrap; `; -const Count = styled.div` +const Count = euiStyled.div` flex: 0 0 auto; border-left: 1px solid ${props => props.theme.eui.euiBorderColor}; padding: 6px 10px; diff --git a/x-pack/plugins/infra/public/components/waffle/group_of_groups.tsx b/x-pack/plugins/infra/public/components/waffle/group_of_groups.tsx index 7005c1d8f03b98..02a0554fbd2482 100644 --- a/x-pack/plugins/infra/public/components/waffle/group_of_groups.tsx +++ b/x-pack/plugins/infra/public/components/waffle/group_of_groups.tsx @@ -5,7 +5,8 @@ */ import React from 'react'; -import styled from 'styled-components'; + +import euiStyled from '../../../../../common/eui_styled_components'; import { InfraNodeType, InfraTimerangeInput } from '../../graphql/types'; import { InfraWaffleMapBounds, @@ -48,11 +49,11 @@ export const GroupOfGroups: React.SFC = props => { ); }; -const GroupOfGroupsContainer = styled.div` +const GroupOfGroupsContainer = euiStyled.div` margin: 0 10px; `; -const Groups = styled.div` +const Groups = euiStyled.div` display: flex; background-color: rgba(0, 0, 0, 0.05); flex-wrap: wrap; diff --git a/x-pack/plugins/infra/public/components/waffle/group_of_nodes.tsx b/x-pack/plugins/infra/public/components/waffle/group_of_nodes.tsx index c84dc3934693b4..04011904cdbba2 100644 --- a/x-pack/plugins/infra/public/components/waffle/group_of_nodes.tsx +++ b/x-pack/plugins/infra/public/components/waffle/group_of_nodes.tsx @@ -5,7 +5,8 @@ */ import React from 'react'; -import styled from 'styled-components'; + +import euiStyled from '../../../../../common/eui_styled_components'; import { InfraNodeType, InfraTimerangeInput } from '../../graphql/types'; import { InfraWaffleMapBounds, @@ -58,11 +59,11 @@ export const GroupOfNodes: React.SFC = ({ ); }; -const GroupOfNodesContainer = styled.div` +const GroupOfNodesContainer = euiStyled.div` margin: 0 10px; `; -const Nodes = styled.div` +const Nodes = euiStyled.div` display: flex; background-color: rgba(0, 0, 0, 0.05); flex-wrap: wrap; diff --git a/x-pack/plugins/infra/public/components/waffle/legend.tsx b/x-pack/plugins/infra/public/components/waffle/legend.tsx index 55f7ed0e876227..ee403aa59fe13f 100644 --- a/x-pack/plugins/infra/public/components/waffle/legend.tsx +++ b/x-pack/plugins/infra/public/components/waffle/legend.tsx @@ -4,7 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ import React from 'react'; -import styled from 'styled-components'; + +import euiStyled from '../../../../../common/eui_styled_components'; import { WithWaffleOptions } from '../../containers/waffle/with_waffle_options'; import { InfraFormatter, InfraWaffleMapBounds, InfraWaffleMapLegend } from '../../lib/lib'; import { GradientLegend } from './gradient_legend'; @@ -48,7 +49,7 @@ export const Legend: React.SFC = ({ dataBounds, legend, bounds, formatter ); }; -const LegendContainer = styled.div` +const LegendContainer = euiStyled.div` position: absolute; bottom: 10px; left: 10px; diff --git a/x-pack/plugins/infra/public/components/waffle/legend_controls.tsx b/x-pack/plugins/infra/public/components/waffle/legend_controls.tsx index acd974d2099c2d..0731ad02f8f18a 100644 --- a/x-pack/plugins/infra/public/components/waffle/legend_controls.tsx +++ b/x-pack/plugins/infra/public/components/waffle/legend_controls.tsx @@ -19,7 +19,8 @@ import { } from '@elastic/eui'; import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react'; import React, { SyntheticEvent, useState } from 'react'; -import styled from 'styled-components'; + +import euiStyled from '../../../../../common/eui_styled_components'; import { InfraWaffleMapBounds } from '../../lib/lib'; interface Props { @@ -162,7 +163,7 @@ export const LegendControls = injectI18n( } ); -const ControlContainer = styled.div` +const ControlContainer = euiStyled.div` position: absolute; top: -20px; right: 6px; diff --git a/x-pack/plugins/infra/public/components/waffle/map.tsx b/x-pack/plugins/infra/public/components/waffle/map.tsx index 435fb63dd5defa..75fe93dfd67dae 100644 --- a/x-pack/plugins/infra/public/components/waffle/map.tsx +++ b/x-pack/plugins/infra/public/components/waffle/map.tsx @@ -4,7 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ import React from 'react'; -import styled from 'styled-components'; + +import euiStyled from '../../../../../common/eui_styled_components'; import { nodesToWaffleMap } from '../../containers/waffle/nodes_to_wafflemap'; import { isWaffleMapGroupWithGroups, @@ -95,7 +96,7 @@ export const Map: React.SFC = ({ ); }; -const WaffleMapOuterContainer = styled.div` +const WaffleMapOuterContainer = euiStyled.div` flex: 1 0 0%; display: flex; justify-content: center; @@ -104,7 +105,7 @@ const WaffleMapOuterContainer = styled.div` overflow-y: auto; `; -const WaffleMapInnerContainer = styled.div` +const WaffleMapInnerContainer = euiStyled.div` display: flex; flex-direction: row; flex-wrap: wrap; diff --git a/x-pack/plugins/infra/public/components/waffle/node.tsx b/x-pack/plugins/infra/public/components/waffle/node.tsx index bf28453bda229c..60baefb9514478 100644 --- a/x-pack/plugins/infra/public/components/waffle/node.tsx +++ b/x-pack/plugins/infra/public/components/waffle/node.tsx @@ -8,9 +8,9 @@ import { EuiToolTip } from '@elastic/eui'; import moment from 'moment'; import { darken, readableColor } from 'polished'; import React from 'react'; -import styled from 'styled-components'; import { InjectedIntl, injectI18n } from '@kbn/i18n/react'; +import euiStyled from '../../../../../common/eui_styled_components'; import { InfraNodeType } from '../../../server/lib/adapters/nodes'; import { InfraTimerangeInput } from '../../graphql/types'; import { InfraWaffleMapBounds, InfraWaffleMapNode, InfraWaffleMapOptions } from '../../lib/lib'; @@ -116,7 +116,7 @@ export const Node = injectI18n( } ); -const NodeContainer = styled.div` +const NodeContainer = euiStyled.div` position: relative; `; @@ -124,7 +124,7 @@ interface ColorProps { color: string; } -const SquareOuter = styled('div')` +const SquareOuter = euiStyled('div')` position: absolute; top: 4px; left: 4px; @@ -135,7 +135,7 @@ const SquareOuter = styled('div')` box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); `; -const SquareInner = styled('div')` +const SquareInner = euiStyled('div')` cursor: pointer; position: absolute; top: 0; @@ -146,7 +146,7 @@ const SquareInner = styled('div')` background-color: ${props => props.color}; `; -const ValueInner = styled.button` +const ValueInner = euiStyled.button` position: absolute; top: 0; left: 0; @@ -169,7 +169,7 @@ const ValueInner = styled.button` } `; -const Value = styled('div')` +const Value = euiStyled('div')` font-weight: bold; font-size: 0.9em; text-align: center; @@ -179,7 +179,7 @@ const Value = styled('div')` color: ${props => readableColor(props.color)}; `; -const Label = styled('div')` +const Label = euiStyled('div')` text-overflow: ellipsis; font-size: 0.7em; margin-bottom: 0.7em; diff --git a/x-pack/plugins/infra/public/components/waffle/steps_legend.tsx b/x-pack/plugins/infra/public/components/waffle/steps_legend.tsx index 732578da792c72..2b55d5652ec4ef 100644 --- a/x-pack/plugins/infra/public/components/waffle/steps_legend.tsx +++ b/x-pack/plugins/infra/public/components/waffle/steps_legend.tsx @@ -6,7 +6,8 @@ import { darken } from 'polished'; import React from 'react'; -import styled from 'styled-components'; + +import euiStyled from '../../../../../common/eui_styled_components'; import { InfraFormatter, InfraWaffleMapRuleOperator, @@ -46,18 +47,18 @@ export const StepLegend: React.SFC = ({ legend, formatter }) => { return {legend.rules.map(createStep(formatter))}; }; -const StepLegendContainer = styled.div` +const StepLegendContainer = euiStyled.div` display: flex; padding: 10px 40px 10px 10px; `; -const StepContainer = styled.div` +const StepContainer = euiStyled.div` display: flex; margin-right: 20px align-items: center; `; -const StepSquare = styled.div` +const StepSquare = euiStyled.div` position: relative; width: 24px; height: 24px; @@ -67,7 +68,7 @@ const StepSquare = styled.div` box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); `; -const StepSquareInner = styled.div` +const StepSquareInner = euiStyled.div` position: absolute; top: 0; left: 0; @@ -76,6 +77,6 @@ const StepSquareInner = styled.div` border-radius: 3px; `; -const StepLabel = styled.div` +const StepLabel = euiStyled.div` font-size: 12px; `; diff --git a/x-pack/plugins/infra/public/pages/error.tsx b/x-pack/plugins/infra/public/pages/error.tsx index 0fd62ccd7e0a14..0c9431bf501daf 100644 --- a/x-pack/plugins/infra/public/pages/error.tsx +++ b/x-pack/plugins/infra/public/pages/error.tsx @@ -14,11 +14,12 @@ import { } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import React from 'react'; -import styled from 'styled-components'; + +import euiStyled from '../../../../common/eui_styled_components'; import { Header } from '../components/header'; import { ColumnarPage, PageContent } from '../components/page'; -const DetailPageContent = styled(PageContent)` +const DetailPageContent = euiStyled(PageContent)` overflow: auto; background-color: ${props => props.theme.eui.euiColorLightestShade}; `; diff --git a/x-pack/plugins/infra/public/pages/logs/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/page_content.tsx index 2ec4c0d60c9bbb..85429c624d7c18 100644 --- a/x-pack/plugins/infra/public/pages/logs/page_content.tsx +++ b/x-pack/plugins/infra/public/pages/logs/page_content.tsx @@ -5,8 +5,8 @@ */ import React, { useContext } from 'react'; -import styled from 'styled-components'; +import euiStyled from '../../../../../common/eui_styled_components'; import { AutoSizer } from '../../components/auto_sizer'; import { LogMinimap } from '../../components/logging/log_minimap'; import { ScrollableLogTextStreamView } from '../../components/logging/log_text_stream'; @@ -101,14 +101,14 @@ export const LogsPageContent: React.FunctionComponent = ({ showFlyout, se ); }; -const LogPageEventStreamColumn = styled.div` +const LogPageEventStreamColumn = euiStyled.div` flex: 1 0 0%; overflow: hidden; display: flex; flex-direction: column; `; -const LogPageMinimapColumn = styled.div` +const LogPageMinimapColumn = euiStyled.div` flex: 1 0 0%; overflow: hidden; min-width: 100px; diff --git a/x-pack/plugins/infra/public/pages/metrics/index.tsx b/x-pack/plugins/infra/public/pages/metrics/index.tsx index d637d25bb79925..d7c3403391086a 100644 --- a/x-pack/plugins/infra/public/pages/metrics/index.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/index.tsx @@ -16,8 +16,8 @@ import { import { InjectedIntl, injectI18n } from '@kbn/i18n/react'; import { GraphQLFormattedError } from 'graphql'; import React from 'react'; -import styled, { withTheme } from 'styled-components'; +import euiStyled, { EuiTheme, withTheme } from '../../../../../common/eui_styled_components'; import { InfraMetricsErrorCodes } from '../../../common/errors'; import { AutoSizer } from '../../components/auto_sizer'; import { DocumentTitle } from '../../components/document_title'; @@ -40,17 +40,17 @@ import { Error, ErrorPageBody } from '../error'; import { layoutCreators } from './layouts'; import { InfraMetricLayoutSection } from './layouts/types'; -const DetailPageContent = styled(PageContent)` +const DetailPageContent = euiStyled(PageContent)` overflow: auto; background-color: ${props => props.theme.eui.euiColorLightestShade}; `; -const EuiPageContentWithRelative = styled(EuiPageContent)` +const EuiPageContentWithRelative = euiStyled(EuiPageContent)` position: relative; `; interface Props { - theme: { eui: any }; + theme: EuiTheme; match: { params: { type: string; @@ -250,13 +250,13 @@ export const MetricDetail = withTheme( ) ); -const MetricsDetailsPageColumn = styled.div` +const MetricsDetailsPageColumn = euiStyled.div` flex: 1 0 0%; display: flex; flex-direction: column; `; -const MetricsTitleTimeRangeContainer = styled.div` +const MetricsTitleTimeRangeContainer = euiStyled.div` display: flex; flex-flow: row wrap; justify-content: space-between; diff --git a/x-pack/plugins/infra/public/pages/metrics/layouts/types.ts b/x-pack/plugins/infra/public/pages/metrics/layouts/types.ts index 370fbbff679516..d9ad1d943f5a34 100644 --- a/x-pack/plugins/infra/public/pages/metrics/layouts/types.ts +++ b/x-pack/plugins/infra/public/pages/metrics/layouts/types.ts @@ -4,6 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ +import { EuiTheme } from '../../../../../../common/eui_styled_components'; import { InfraMetric } from '../../../graphql/types'; import { InfraFormatterType } from '../../../lib/lib'; @@ -54,4 +55,4 @@ export interface InfraMetricLayout { sections: InfraMetricLayoutSection[]; } -export type InfraMetricLayoutCreator = (theme: { eui: any }) => InfraMetricLayout[]; +export type InfraMetricLayoutCreator = (theme: EuiTheme) => InfraMetricLayout[];