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

CallToActionCard: updates component to use the new theme model (#33309)

Browse Source 
* updates component to use the new theme model

* fixes frontend test
This commit is contained in:
Uchechukwu Obasi 2021-04-27 15:52:47 +01:00 committed by GitHub
parent fce40fff63
commit 3725654b38
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { GrafanaTheme } from '@grafana/data';
import { css, cx } from '@emotion/css';
import { useStyles } from '../../themes/ThemeContext';
import { useStyles2 } from '../../themes/ThemeContext';
import { GrafanaThemeV2 } from '@grafana/data';
export interface CallToActionCardProps {
message?: string | JSX.Element;
@ -16,7 +16,7 @@ export const CallToActionCard: React.FunctionComponent<CallToActionCardProps> =
footer,
className,
}) => {
const css = useStyles(getStyles);
const css = useStyles2(getStyles);
return (
<div className={cx([css.wrapper, className])}>
@ -27,12 +27,12 @@ export const CallToActionCard: React.FunctionComponent<CallToActionCardProps> =
);
};
const getStyles = (theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaThemeV2) => ({
wrapper: css`
label: call-to-action-card;
padding: ${theme.spacing.lg};
background: ${theme.colors.bg2};
border-radius: ${theme.border.radius.md};
padding: ${theme.spacing(3)};
background: ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius(2)};
display: flex;
flex-direction: column;
align-items: center;
@ -40,10 +40,10 @@ const getStyles = (theme: GrafanaTheme) => ({
flex-grow: 1;
`,
message: css`
margin-bottom: ${theme.spacing.lg};
margin-bottom: ${theme.spacing(3)};
font-style: italic;
`,
footer: css`
margin-top: ${theme.spacing.lg};
margin-top: ${theme.spacing(3)}};
`,
});

2
packages/grafana-ui/src/components/CallToActionCard/__snapshots__/CallToActionCard.test.tsx.snap
View File

@ -15,7 +15,7 @@ exports[`CallToActionCard rendering when message and footer provided 1`] = `
Click me
</a>
<div
class="css-1sg2huk"
class="css-11lqfaj"
>
footer content
</div>