From 2e476167ebdcc8d211a926619fa7937f614f7a81 Mon Sep 17 00:00:00 2001
From: Olof Bourghardt <ob655088@gmail.com>
Date: Wed, 4 Aug 2021 08:47:37 +0200
Subject: [PATCH] Explore: use GrafanaTheme2 (ExploreGraphNGPanel component)
 (#37450)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Explore: use GrafanaTheme2

* Explore: add correct style values

* Update public/app/features/explore/ExploreGraphNGPanel.tsx

Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>

* Explore: change margin-right to xs

* Explore: change margin-right to new theme xs

Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>
---
 .../features/explore/ExploreGraphNGPanel.tsx  | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/public/app/features/explore/ExploreGraphNGPanel.tsx b/public/app/features/explore/ExploreGraphNGPanel.tsx
index 23a5c95590b..d32a6348754 100644
--- a/public/app/features/explore/ExploreGraphNGPanel.tsx
+++ b/public/app/features/explore/ExploreGraphNGPanel.tsx
@@ -10,7 +10,7 @@ import {
   FieldColorModeId,
   FieldConfigSource,
   getFrameDisplayName,
-  GrafanaTheme,
+  GrafanaTheme2,
   TimeZone,
 } from '@grafana/data';
 import {
@@ -23,7 +23,7 @@ import {
   TimeSeries,
   TooltipDisplayMode,
   TooltipPlugin,
-  useStyles,
+  useStyles2,
   useTheme2,
   ZoomPlugin,
 } from '@grafana/ui';
@@ -93,7 +93,7 @@ export function ExploreGraphNGPanel({
     overrides: [],
   });
 
-  const style = useStyles(getStyles);
+  const style = useStyles2(getStyles);
   const timeRange = {
     from: dateTime(absoluteRange.from),
     to: dateTime(absoluteRange.to),
@@ -188,24 +188,24 @@ export function ExploreGraphNGPanel({
   );
 }
 
-const getStyles = (theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   timeSeriesDisclaimer: css`
     label: time-series-disclaimer;
     width: 300px;
-    margin: ${theme.spacing.sm} auto;
+    margin: ${theme.spacing(1)} auto;
     padding: 10px 0;
-    border-radius: ${theme.border.radius.md};
+    border-radius: ${theme.spacing(2)};
     text-align: center;
-    background-color: ${theme.colors.bg1};
+    background-color: ${theme.colors.background.primary};
   `,
   disclaimerIcon: css`
     label: disclaimer-icon;
-    color: ${theme.palette.yellow};
-    margin-right: ${theme.spacing.xs};
+    color: ${theme.colors.warning.main};
+    margin-right: ${theme.spacing(0.5)};
   `,
   showAllTimeSeries: css`
     label: show-all-time-series;
     cursor: pointer;
-    color: ${theme.colors.linkExternal};
+    color: ${theme.colors.text.link};
   `,
 });