diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_time_controls.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_time_controls.tsx
index 7f190f21484d..fac1e086101e 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_time_controls.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_time_controls.tsx
@@ -4,13 +4,18 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import { EuiButtonEmpty, EuiDatePicker, EuiFormControlLayout } from '@elastic/eui';
+import { EuiButton, EuiDatePicker, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import moment, { Moment } from 'moment';
import React, { useCallback } from 'react';
+import { withTheme, EuiTheme } from '../../../../../../../observability/public';
import { useWaffleTimeContext } from '../../hooks/use_waffle_time';
-export const WaffleTimeControls = () => {
+interface Props {
+ theme: EuiTheme;
+}
+
+export const WaffleTimeControls = withTheme(({ theme }: Props) => {
const {
currentTime,
isAutoReloading,
@@ -22,19 +27,19 @@ export const WaffleTimeControls = () => {
const currentMoment = moment(currentTime);
const liveStreamingButton = isAutoReloading ? (
-
+
-
+
) : (
-
+
-
+
);
const handleChangeDate = useCallback(
@@ -47,20 +52,31 @@ export const WaffleTimeControls = () => {
);
return (
-
-
-
+
+
+
+
+ {liveStreamingButton}
+
);
-};
+});