From 3bae330286cf39ebf3e3e7ac5b4cb41bf7272239 Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Fri, 23 Apr 2021 10:26:29 +0100
Subject: [PATCH] updated component to use new theme model (#33305)

---
 .../src/components/Button/ToolbarButtonRow.tsx         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/Button/ToolbarButtonRow.tsx b/packages/grafana-ui/src/components/Button/ToolbarButtonRow.tsx
index e3e57f63602..ce7f69b9830 100644
--- a/packages/grafana-ui/src/components/Button/ToolbarButtonRow.tsx
+++ b/packages/grafana-ui/src/components/Button/ToolbarButtonRow.tsx
@@ -1,14 +1,14 @@
 import React, { forwardRef, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
-import { GrafanaTheme } from '@grafana/data';
-import { useStyles } from '../../themes';
+import { useStyles2 } from '../../themes';
+import { GrafanaThemeV2 } from '@grafana/data';
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
   className?: string;
 }
 
 export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(({ className, children, ...rest }, ref) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
 
   return (
     <div ref={ref} className={cx(styles.wrapper, className)} {...rest}>
@@ -19,13 +19,13 @@ export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(({ className,
 
 ToolbarButtonRow.displayName = 'ToolbarButtonRow';
 
-const getStyles = (theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaThemeV2) => ({
   wrapper: css`
     display: flex;
 
     .button-group,
     .toolbar-button {
-      margin-left: ${theme.spacing.sm};
+      margin-left: ${theme.spacing(1)};
 
       &:first-child {
         margin-left: 0;