public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates component with the new theme model (#33392)

Browse Source
This commit is contained in:
Uchechukwu Obasi
2021-04-26 17:06:00 +01:00
committed by GitHub
parent c88af6e221
commit de65cef850
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx
+8 -8
View File
@@ -1,7 +1,7 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import { DataFrame, DataLink, GrafanaTheme } from '@grafana/data'; import { DataFrame, DataLink, GrafanaThemeV2 } from '@grafana/data';
import { stylesFactory, useTheme } from '../../../themes'; import { stylesFactory, useTheme2 } from '../../../themes';
import { HorizontalGroup, VerticalGroup } from '../../Layout/Layout'; import { HorizontalGroup, VerticalGroup } from '../../Layout/Layout';
import { IconButton } from '../../IconButton/IconButton'; import { IconButton } from '../../IconButton/IconButton';
@@ -16,7 +16,7 @@ export interface DataLinksListItemProps {
} }
export const DataLinksListItem: FC<DataLinksListItemProps> = ({ link, onEdit, onRemove }) => { export const DataLinksListItem: FC<DataLinksListItemProps> = ({ link, onEdit, onRemove }) => {
const theme = useTheme(); const theme = useTheme2();
const styles = getDataLinkListItemStyles(theme); const styles = getDataLinkListItemStyles(theme);
const { title = '', url = '' } = link; const { title = '', url = '' } = link;
@@ -43,10 +43,10 @@ export const DataLinksListItem: FC<DataLinksListItemProps> = ({ link, onEdit, on
); );
}; };
const getDataLinkListItemStyles = stylesFactory((theme: GrafanaTheme) => { const getDataLinkListItemStyles = stylesFactory((theme: GrafanaThemeV2) => {
return { return {
wrapper: css` wrapper: css`
margin-bottom: ${theme.spacing.md}; margin-bottom: ${theme.spacing(2)};
width: 100%; width: 100%;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@@ -56,12 +56,12 @@ const getDataLinkListItemStyles = stylesFactory((theme: GrafanaTheme) => {
font-style: italic; font-style: italic;
`, `,
title: css` title: css`
color: ${theme.colors.formLabel}; color: ${theme.colors.text.primary};
font-size: ${theme.typography.size.sm}; font-size: ${theme.typography.size.sm};
font-weight: ${theme.typography.weight.semibold}; font-weight: ${theme.typography.fontWeightMedium};
`, `,
url: css` url: css`
color: ${theme.colors.textWeak}; color: ${theme.colors.text.secondary};
font-size: ${theme.typography.size.sm}; font-size: ${theme.typography.size.sm};
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;