Search: Add primary background for global search container (#49473)

* Search: Add primarhy background for global search container

* Fix spacing for ActionRow

* Fixing ts issue

public/app/features/search/components/ActionRow.tsx

@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
 import React, { FC, ChangeEvent, FormEvent } from 'react';
 
-import { GrafanaTheme, SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { HorizontalGroup, RadioButtonGroup, stylesFactory, useTheme, Checkbox, InlineSwitch } from '@grafana/ui';
+import { HorizontalGroup, RadioButtonGroup, Checkbox, InlineSwitch, useStyles2 } from '@grafana/ui';
 import { SortPicker } from 'app/core/components/Select/SortPicker';
 import { TagFilter } from 'app/core/components/TagFilter/TagFilter';
 import { SearchSrv } from 'app/core/services/search_srv';
@@ -40,8 +40,7 @@ export const ActionRow: FC<Props> = ({
   hideLayout,
   showPreviews,
 }) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useStyles2(getStyles);
   const previewsEnabled = config.featureToggles.dashboardPreviews;
 
   return (
@@ -78,21 +77,21 @@ export const ActionRow: FC<Props> = ({
 
 ActionRow.displayName = 'ActionRow';
 
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
+export const getStyles = (theme: GrafanaTheme2) => {
   return {
     actionRow: css`
       display: none;
 
-      @media only screen and (min-width: ${theme.breakpoints.md}) {
+      ${theme.breakpoints.up('md')} {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: ${theme.spacing.lg} 0;
+        padding-bottom: ${theme.spacing(2)};
         width: 100%;
       }
     `,
     rowContainer: css`
-      margin-right: ${theme.spacing.md};
+      margin-right: ${theme.spacing(1)};
     `,
     checkboxWrapper: css`
       label {
@@ -100,4 +99,4 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       }
     `,
   };
-});
+};

public/app/features/search/components/DashboardSearch.tsx

@@ -140,11 +140,14 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
       max-width: 1400px;
       margin: 0 auto;
       padding: ${theme.spacing(2)};
+      background: ${theme.colors.background.primary};
+      border: 1px solid ${theme.components.panel.borderColor};
+      margin-top: ${theme.spacing(4)};
 
       height: 100%;
 
       ${theme.breakpoints.up('md')} {
-        padding: ${theme.spacing(4)};
+        padding: ${theme.spacing(3)};
       }
     `,
     closeBtn: css`
@@ -160,7 +163,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
       display: flex;
       flex-direction: column;
       height: 100%;
-      padding-bottom: ${theme.spacing(3)};
+      padding: ${theme.spacing(2, 0, 3, 0)};
     `,
     input: css`
       box-sizing: border-box;

public/app/features/search/page/components/ActionRow.tsx

@@ -104,11 +104,11 @@ export const getStyles = (theme: GrafanaTheme2) => {
     actionRow: css`
       display: none;
 
-      @media only screen and (min-width: ${theme.v1.breakpoints.md}) {
+      ${theme.breakpoints.up('md')} {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: ${theme.v1.spacing.lg} 0;
+        padding-bottom: ${theme.spacing(2)};
         width: 100%;
       }
     `,