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