From faa80003b9beeef6609940fde857eb39f4874455 Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Wed, 28 Apr 2021 09:01:18 +0100
Subject: [PATCH] DataLinksInlineEditor: updates component with the new theme
 model (#33391)

---
 .../DataLinksInlineEditor/DataLinksInlineEditor.tsx    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx
index e6f096c1cbf..007ff6c3a69 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx
@@ -1,10 +1,10 @@
-import { DataFrame, DataLink, GrafanaTheme, VariableSuggestion } from '@grafana/data';
+import { DataFrame, DataLink, GrafanaThemeV2, VariableSuggestion } from '@grafana/data';
 import React, { useState } from 'react';
 import { css } from '@emotion/css';
 import { Button } from '../../Button/Button';
 import { cloneDeep } from 'lodash';
 import { Modal } from '../../Modal/Modal';
-import { stylesFactory, useTheme } from '../../../themes';
+import { stylesFactory, useTheme2 } from '../../../themes';
 import { DataLinksListItem } from './DataLinksListItem';
 import { DataLinkEditorModalContent } from './DataLinkEditorModalContent';
 
@@ -21,7 +21,7 @@ export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({
   getSuggestions,
   data,
 }) => {
-  const theme = useTheme();
+  const theme = useTheme2();
   const [editIndex, setEditIndex] = useState<number | null>(null);
   const [isNew, setIsNew] = useState(false);
 
@@ -111,10 +111,10 @@ export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({
   );
 };
 
-const getDataLinksInlineEditorStyles = stylesFactory((theme: GrafanaTheme) => {
+const getDataLinksInlineEditorStyles = stylesFactory((theme: GrafanaThemeV2) => {
   return {
     wrapper: css`
-      margin-bottom: ${theme.spacing.md};
+      margin-bottom: ${theme.spacing(2)};
     `,
   };
 });