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

Explore: use GrafanaTheme2 (MetaInfoText component) (#37539)

Browse Source 
* Explore: use GrafanaTheme2 in MetaInfoText component

* Explore: change font-size to h6 size

* Explore: add correct font weight

* Use correct style value for font-size

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Use error color style

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Use bodySmall font-size instead of h6 font-size

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

Co-authored-by: Giordano Ricci <me@giordanoricci.com>
This commit is contained in:
Olof Bourghardt 2021-08-11 08:25:54 +02:00 committed by GitHub
parent 87b8a74576
commit 2a1363f175
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
public/app/features/explore/MetaInfoText.tsx
View File

@ -1,35 +1,35 @@
import React, { memo } from 'react';
import { css } from '@emotion/css';
import { GrafanaTheme } from '@grafana/data';
import { useStyles } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
const getStyles = (theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
metaContainer: css`
flex: 1;
color: ${theme.colors.textWeak};
margin-bottom: ${theme.spacing.d};
color: ${theme.colors.text.secondary};
margin-bottom: ${theme.spacing(2)};
min-width: 30%;
display: flex;
flex-wrap: wrap;
`,
metaItem: css`
margin-right: ${theme.spacing.d};
margin-top: ${theme.spacing.xs};
margin-right: ${theme.spacing(2)};
margin-top: ${theme.spacing(0.5)};
display: flex;
align-items: baseline;
.logs-meta-item__error {
color: ${theme.palette.red};
color: ${theme.colors.error.text};
}
`,
metaLabel: css`
margin-right: calc(${theme.spacing.d} / 2);
font-size: ${theme.typography.size.sm};
font-weight: ${theme.typography.weight.semibold};
margin-right: calc(${theme.spacing(2)} / 2);
font-size: ${theme.typography.bodySmall.fontSize};
font-weight: ${theme.typography.fontWeightMedium};
`,
metaValue: css`
font-family: ${theme.typography.fontFamily.monospace};
font-size: ${theme.typography.size.sm};
font-family: ${theme.typography.fontFamilyMonospace};
font-size: ${theme.typography.bodySmall.fontSize};
`,
});
@ -39,7 +39,7 @@ export interface MetaItemProps {
}
export const MetaInfoItem = memo(function MetaInfoItem(props: MetaItemProps) {
const style = useStyles(getStyles);
const style = useStyles2(getStyles);
const { label, value } = props;
return (
@ -55,7 +55,7 @@ export interface MetaInfoTextProps {
}
export const MetaInfoText = memo(function MetaInfoText(props: MetaInfoTextProps) {
const style = useStyles(getStyles);
const style = useStyles2(getStyles);
const { metaItems } = props;
return (