From 0bbfe3f7b4edf2b9b6d7671c00e7bb41d14ab7f8 Mon Sep 17 00:00:00 2001
From: Olof Bourghardt <ob655088@gmail.com>
Date: Thu, 5 Aug 2021 13:30:31 +0200
Subject: [PATCH] Explore: use GrafanaTheme2 (NoDataSourceCallToAction
 component) (#37542)

* Explore: use GrafanaTheme2 in NoDataSourceCallToAction component

* Explore: add px to the end of styling
---
 public/app/features/explore/NoDataSourceCallToAction.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/app/features/explore/NoDataSourceCallToAction.tsx b/public/app/features/explore/NoDataSourceCallToAction.tsx
index 0f9d17732b5..964a04c6c72 100644
--- a/public/app/features/explore/NoDataSourceCallToAction.tsx
+++ b/public/app/features/explore/NoDataSourceCallToAction.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { css } from '@emotion/css';
-import { LinkButton, CallToActionCard, Icon, useTheme } from '@grafana/ui';
+import { LinkButton, CallToActionCard, Icon, useTheme2 } from '@grafana/ui';
 
 export const NoDataSourceCallToAction = () => {
-  const theme = useTheme();
+  const theme = useTheme2();
 
   const message =
     'Explore requires at least one data source. Once you have added a data source, you can query it here.';
@@ -29,8 +29,8 @@ export const NoDataSourceCallToAction = () => {
   );
 
   const cardClassName = css`
-    max-width: ${theme.breakpoints.lg};
-    margin-top: ${theme.spacing.md};
+    max-width: ${theme.breakpoints.values.lg}px;
+    margin-top: ${theme.spacing(2)};
     align-self: center;
   `;