Dashboard: Empty dashboard page adapt font size to design (#65466)

adapt fontsizes to design
This commit is contained in:
Polina Boneva 2023-03-28 19:34:41 +03:00 committed by GitHub
parent 0aee7338ad
commit 09ff5ab522
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -52,10 +52,10 @@ export const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
<h1 className={cx(styles.headerSection, styles.headerBig)}>
Start your new dashboard by adding a visualization
</h1>
<h4 className={cx(styles.bodySection, styles.bodyBig)}>
<div className={cx(styles.bodySection, styles.bodyBig)}>
Select a data source and then query and visualize your data with charts, stats and tables or create lists,
markdowns and other widgets.
</h4>
</div>
<Button
size="lg"
icon="plus"
@ -71,10 +71,10 @@ export const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
</div>
<div className={cx(styles.centeredContent, styles.others)}>
<div className={cx(styles.containerBox, styles.centeredContent, styles.rowContainer)}>
<h2 className={cx(styles.headerSection, styles.headerSmall)}>Add a row</h2>
<h5 className={cx(styles.bodySection, styles.bodySmall)}>
<h3 className={cx(styles.headerSection, styles.headerSmall)}>Add a row</h3>
<div className={cx(styles.bodySection, styles.bodySmall)}>
Group your visualizations into expandable sections.
</h5>
</div>
<Button
icon="plus"
fill="outline"
@ -89,10 +89,10 @@ export const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
</Button>
</div>
<div className={cx(styles.containerBox, styles.centeredContent, styles.libraryContainer)}>
<h2 className={cx(styles.headerSection, styles.headerSmall)}>Import panel</h2>
<h5 className={cx(styles.bodySection, styles.bodySmall)}>
<h3 className={cx(styles.headerSection, styles.headerSmall)}>Import panel</h3>
<div className={cx(styles.bodySection, styles.bodySmall)}>
Import visualizations that are shared with other dashboards.
</h5>
</div>
<Button
icon="plus"
fill="outline"
@ -171,6 +171,8 @@ const getStyles = (theme: GrafanaTheme2) => {
bodySection: css({
label: 'body-section',
fontWeight: theme.typography.fontWeightRegular,
fontSize: theme.typography.body.fontSize,
lineHeight: theme.typography.body.lineHeight,
color: theme.colors.text.secondary,
textAlign: 'center',
}),