From 28cf93e42c11f82505d80cd218c502826a2ddc93 Mon Sep 17 00:00:00 2001
From: Olof Bourghardt <ob655088@gmail.com>
Date: Thu, 19 Aug 2021 16:17:28 +0200
Subject: [PATCH] Explore: use GrafanaTheme2 (LiveTailButton component)
 (#37516)

* Explore: use GrafanaTheme2 in LiveTailsButton

* Remove unused theme
---
 .../app/features/explore/LiveTailButton.tsx   | 55 +++++++++----------
 1 file changed, 25 insertions(+), 30 deletions(-)

diff --git a/public/app/features/explore/LiveTailButton.tsx b/public/app/features/explore/LiveTailButton.tsx
index 5fdc4ce8e51..6bdc8335510 100644
--- a/public/app/features/explore/LiveTailButton.tsx
+++ b/public/app/features/explore/LiveTailButton.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import { css } from '@emotion/css';
 import { CSSTransition } from 'react-transition-group';
-import { useTheme, Tooltip, stylesFactory, ButtonGroup, ToolbarButton } from '@grafana/ui';
-import { GrafanaTheme } from '@grafana/data';
+import { Tooltip, ButtonGroup, ToolbarButton } from '@grafana/ui';
 
 type LiveTailButtonProps = {
   splitted: boolean;
@@ -16,8 +15,6 @@ type LiveTailButtonProps = {
 
 export function LiveTailButton(props: LiveTailButtonProps) {
   const { start, pause, resume, isLive, isPaused, stop, splitted } = props;
-  const theme = useTheme();
-  const styles = getStyles(theme);
   const buttonVariant = isLive && !isPaused ? 'active' : 'default';
   const onClickMain = isLive ? (isPaused ? resume : pause) : start;
 
@@ -57,29 +54,27 @@ export function LiveTailButton(props: LiveTailButtonProps) {
   );
 }
 
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  return {
-    stopButtonEnter: css`
-      label: stopButtonEnter;
-      width: 0;
-      opacity: 0;
-      overflow: hidden;
-    `,
-    stopButtonEnterActive: css`
-      label: stopButtonEnterActive;
-      opacity: 1;
-      width: 32px;
-    `,
-    stopButtonExit: css`
-      label: stopButtonExit;
-      width: 32px;
-      opacity: 1;
-      overflow: hidden;
-    `,
-    stopButtonExitActive: css`
-      label: stopButtonExitActive;
-      opacity: 0;
-      width: 0;
-    `,
-  };
-});
+const styles = {
+  stopButtonEnter: css`
+    label: stopButtonEnter;
+    width: 0;
+    opacity: 0;
+    overflow: hidden;
+  `,
+  stopButtonEnterActive: css`
+    label: stopButtonEnterActive;
+    opacity: 1;
+    width: 32px;
+  `,
+  stopButtonExit: css`
+    label: stopButtonExit;
+    width: 32px;
+    opacity: 1;
+    overflow: hidden;
+  `,
+  stopButtonExitActive: css`
+    label: stopButtonExitActive;
+    opacity: 0;
+    width: 0;
+  `,
+};