Explore: use GrafanaTheme2 (ExploreGraphNGPanel component) (#37450)

* Explore: use GrafanaTheme2

* Explore: add correct style values

* Update public/app/features/explore/ExploreGraphNGPanel.tsx

Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>

* Explore: change margin-right to xs

* Explore: change margin-right to new theme xs

Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>
This commit is contained in:
Olof Bourghardt 2021-08-04 08:47:37 +02:00 committed by GitHub
parent 0b7253406b
commit 2e476167eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -10,7 +10,7 @@ import {
FieldColorModeId,
FieldConfigSource,
getFrameDisplayName,
GrafanaTheme,
GrafanaTheme2,
TimeZone,
} from '@grafana/data';
import {
@ -23,7 +23,7 @@ import {
TimeSeries,
TooltipDisplayMode,
TooltipPlugin,
useStyles,
useStyles2,
useTheme2,
ZoomPlugin,
} from '@grafana/ui';
@ -93,7 +93,7 @@ export function ExploreGraphNGPanel({
overrides: [],
});
const style = useStyles(getStyles);
const style = useStyles2(getStyles);
const timeRange = {
from: dateTime(absoluteRange.from),
to: dateTime(absoluteRange.to),
@ -188,24 +188,24 @@ export function ExploreGraphNGPanel({
);
}
const getStyles = (theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
timeSeriesDisclaimer: css`
label: time-series-disclaimer;
width: 300px;
margin: ${theme.spacing.sm} auto;
margin: ${theme.spacing(1)} auto;
padding: 10px 0;
border-radius: ${theme.border.radius.md};
border-radius: ${theme.spacing(2)};
text-align: center;
background-color: ${theme.colors.bg1};
background-color: ${theme.colors.background.primary};
`,
disclaimerIcon: css`
label: disclaimer-icon;
color: ${theme.palette.yellow};
margin-right: ${theme.spacing.xs};
color: ${theme.colors.warning.main};
margin-right: ${theme.spacing(0.5)};
`,
showAllTimeSeries: css`
label: show-all-time-series;
cursor: pointer;
color: ${theme.colors.linkExternal};
color: ${theme.colors.text.link};
`,
});