updated component to use new theme model (#33305)

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;