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; `;