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