IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-12 00:25:46 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore(DashboardSearch): Convert to use useTheme2 (#39918)

Browse Source
This commit is contained in:
Ashley Harrison 2021-10-04 10:32:29 +01:00 committed by GitHub
parent d6fd17531d
commit c2c04f218a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/app/features/search/components/DashboardSearch.tsx
View File

@ -1,7 +1,7 @@
import React, { FC, memo } from 'react';
import { css } from '@emotion/css';
import { useTheme, CustomScrollbar, stylesFactory, IconButton } from '@grafana/ui';
import { GrafanaTheme } from '@grafana/data';
import { useTheme2, CustomScrollbar, stylesFactory, IconButton } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { useSearchQuery } from '../hooks/useSearchQuery';
import { useDashboardSearch } from '../hooks/useDashboardSearch';
import { SearchField } from './SearchField';
@ -15,7 +15,7 @@ export interface Props {
export const DashboardSearch: FC<Props> = memo(({ onCloseSearch }) => {
const { query, onQueryChange, onTagFilterChange, onTagAdd, onSortChange, onLayoutChange } = useSearchQuery({});
const { results, loading, onToggleSection, onKeyDown } = useDashboardSearch(query, onCloseSearch);
const theme = useTheme();
const theme = useTheme2();
const styles = getStyles(theme);
return (
@ -56,7 +56,7 @@ DashboardSearch.displayName = 'DashboardSearch';
export default DashboardSearch;
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const getStyles = stylesFactory((theme: GrafanaTheme2) => {
return {
overlay: css`
left: 0;
@ -65,22 +65,22 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
bottom: 0;
z-index: ${theme.zIndex.sidemenu};
position: fixed;
background: ${theme.colors.dashboardBg};
background: ${theme.colors.background.canvas};
@media only screen and (min-width: ${theme.breakpoints.md}) {
left: 60px;
${theme.breakpoints.up('md')} {
left: ${theme.components.sidemenu.width}px;
z-index: ${theme.zIndex.navbarFixed + 1};
}
`,
container: css`
max-width: 1400px;
margin: 0 auto;
padding: ${theme.spacing.md};
padding: ${theme.spacing(2)};
height: 100%;
@media only screen and (min-width: ${theme.breakpoints.md}) {
padding: 32px;
${theme.breakpoints.up('md')} {
padding: ${theme.spacing(4)};
}
`,
closeBtn: css`