From 09ff5ab522131ba647c311423ed08ffaaab339c4 Mon Sep 17 00:00:00 2001
From: Polina Boneva <13227501+polibb@users.noreply.github.com>
Date: Tue, 28 Mar 2023 19:34:41 +0300
Subject: [PATCH] Dashboard: Empty dashboard page adapt font size to design
 (#65466)

adapt fontsizes to design
---
 .../dashboard/dashgrid/DashboardEmpty.tsx      | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx b/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx
index 554dbe784c5..e72c0b3d6e8 100644
--- a/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx
@@ -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',
     }),