Merge pull request #341 from netdata/fix-heading-and-description-styles

Fix heading and description styles

Author: burbuli8ra

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/dashboard",
-  "version": "2.20.12",
+  "version": "2.20.14",
   "homepage": ".",
   "main": "./lib/src/index-npm.js",
   "files": [
@@ -18,7 +18,7 @@
     "@material/list": "^4.0.0",
     "@material/menu": "^2.3.0",
     "@material/menu-surface": "^1.0.0",
-    "@netdata/netdata-ui": "^1.6.33",
+    "@netdata/netdata-ui": "^1.7.18",
     "@rmwc/icon": "^5.7.2",
     "@rmwc/list": "^5.7.2",
     "@rmwc/menu": "^5.7.2",
@@ -119,6 +119,8 @@
     "clean": "./node_modules/rimraf/bin.js ./lib",
     "remove-unnecessary-dts": "rimraf ./lib/dashboard-react.d.ts",
     "ts-bundle": "npm run clean && tsc --noEmit false && node copy-assets && npm run remove-unnecessary-dts && npm run resolveAlias",
+    "cp-cloud": "cp -R ./lib ../cloud-frontend/node_modules/@netdata/dashboard/",
+    "to-cloud": "npm run ts-bundle && npm run cp-cloud",
     "eject": "react-scripts eject",
     "prepare": "install-peers && npm run ts-bundle",
     "resolveAlias": "tscpaths -p tsconfig.json -s ./src -o ./lib/src"

package.json

@@ -1,17 +1,17 @@
 import React from "react"
-import { H0, Flex } from "@netdata/netdata-ui"
+import { H0 } from "@netdata/netdata-ui"
 import { withMenuGroup } from "domains/charts/menuGroup"
 
 export const ChartMenuGroupIcon = ({ icon, ...rest }) => (
   <span dangerouslySetInnerHTML={{ __html: icon }} {...rest} />
 )
 
-export const ChartMenuGroupTitle = ({ icon, title, ...rest }) => (
-  <Flex as={H0} color="key" gap={2} {...rest}>
-    <ChartMenuGroupIcon icon={icon} />
-    <span>{title}</span>
-  </Flex>
-)
+export const ChartMenuGroupTitle = ({ title, ...rest }) =>
+  title ? (
+    <H0 color="text" {...rest}>
+      {title}
+    </H0>
+  ) : null
 
 export const ChartMenuGroupTitleContainer = withMenuGroup(
   ChartMenuGroupTitle,

src/domains/charts/chartMenuGroup/title.js

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

src/domains/charts/chartSubMenu/title.js

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