Feat/3047 (#411)

* update section titles and description colors

* reduce section title font-size

Co-authored-by: Panos Christophides <[email protected]>

Author: christophidesp

src/domains/charts/chartMenuGroup/title.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { H0 } from "@netdata/netdata-ui"
+import { H1 } from "@netdata/netdata-ui"
 import { withMenuGroup } from "domains/charts/menuGroup"
 
 export const ChartMenuGroupIcon = ({ icon, ...rest }) => (
@@ -8,9 +8,9 @@ export const ChartMenuGroupIcon = ({ icon, ...rest }) => (
 
 export const ChartMenuGroupTitle = ({ title, ...rest }) =>
   title ? (
-    <H0 color="text" {...rest}>
+    <H1 color="sectionTitle" {...rest}>
       {title}
-    </H0>
+    </H1>
   ) : null
 
 export const ChartMenuGroupTitleContainer = withMenuGroup(

src/domains/charts/chartSubMenu/title.js

@@ -1,10 +1,10 @@
 import React from "react"
-import { H3 } from "@netdata/netdata-ui"
+import { H3, TextBig } from "@netdata/netdata-ui"
 import { withSubMenu } from "domains/charts/subMenu"
 
 export const ChartSubMenuTitle = ({ title, ...rest }) =>
   title ? (
-    <H3 color="text" {...rest}>
+    <H3 color="sectionTitle" strong={false} {...rest}>
       {title}
     </H3>
   ) : null

src/domains/charts/description/index.js

@@ -20,7 +20,12 @@ const Description = ({ children, onClick, ...rest }) => {
   )
 
   return children ? (
-    <Text color="textDescription" dangerouslySetInnerHTML={{ __html: children }} onClick={click} {...rest} />
+    <Text
+      color="sectionDescription"
+      dangerouslySetInnerHTML={{ __html: children }}
+      onClick={click}
+      {...rest}
+    />
   ) : null
 }