chore(webapp): use LightIcon in block producers health indicators

- Change Healthcheck icons - Remove tooltip from bpjson health check
edenia · Nov 2, 2022 · 6f9458f · 6f9458f
1 parent 3bd4593
commit 6f9458f
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 32 deletions.
diff --git a/webapp/src/components/HealthCheck/LightIcon.js b/webapp/src/components/HealthCheck/LightIcon.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import { makeStyles } from '@mui/styles'
-import ReportIcon from '@mui/icons-material/Report'
-import VerifiedIcon from '@mui/icons-material/Verified'
-import TimerOffIcon from '@mui/icons-material/TimerOff'
-import WarningIcon from '@mui/icons-material/Warning'
+import CloseIcon from '@mui/icons-material/Close'
+import DoneOutlinedIcon from '@mui/icons-material/DoneOutlined'
+import TimerOffOutlinedIcon from '@mui/icons-material/TimerOffOutlined'
+import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined'
 
 import styles from './styles'
 
@@ -14,13 +14,13 @@ const LightIcon = ({ status }) => {
 
   switch (status) {
     case 'greenLight':
-      return <VerifiedIcon className={classes.greenLight} />
+      return <DoneOutlinedIcon className={classes.greenLight} />
     case 'timerOff':
-      return <TimerOffIcon className={classes.timerOff} />
+      return <TimerOffOutlinedIcon className={classes.timerOff} />
     case 'yellowLight':
-      return <WarningIcon className={classes.yellowLight} />
+      return <ReportProblemOutlinedIcon className={classes.yellowLight} />
     default:
-      return <ReportIcon className={classes.redLight} />
+      return <CloseIcon className={classes.redLight} />
   }
 }
 

diff --git a/webapp/src/components/HealthCheck/styles.js b/webapp/src/components/HealthCheck/styles.js
@@ -1,8 +1,8 @@
 export default (theme) => ({
   icon: {
     '& svg': {
-      width: '16px !important',
-      height: '16px !important',
+      width: '20px !important',
+      height: '20px !important',
       cursor: 'pointer',
     },
   },
@@ -29,18 +29,18 @@ export default (theme) => ({
     cursor: 'pointer',
   },
   greenLight: {
-    color: 'darkgreen',
+    color: theme.palette.success.main,
   },
   timerOff: {
     color: 'orange',
   },
   yellowLight: {
-    color: 'orangered',
+    color: theme.palette.warning.main,
   },
   redLight: {
-    color: 'darkred',
+    color: theme.palette.error.main,
   },
   test: {
-    boxShadow: '10px 5px 5px red !important'
-  }
+    boxShadow: '10px 5px 5px red !important',
+  },
 })
diff --git a/webapp/src/components/NodeCard/styles.js b/webapp/src/components/NodeCard/styles.js
@@ -54,8 +54,8 @@ export default (theme) => ({
     fontWeight: 'normal',
     marginLeft: theme.spacing(3),
     '& svg': {
-      width: '15px',
-      height: '15px',
+      width: '20px',
+      height: '20px',
       alignSelf: 'center',
       marginLeft: theme.spacing(2),
     },

diff --git a/webapp/src/components/ProducerHealthIndicators/index.js b/webapp/src/components/ProducerHealthIndicators/index.js
@@ -2,12 +2,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { makeStyles } from '@mui/styles'
-import Tooltip from '@mui/material/Tooltip'
 import { useTranslation } from 'react-i18next'
-import DoneOutlinedIcon from '@mui/icons-material/DoneOutlined'
-import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined'
 import Typography from '@mui/material/Typography'
 
+import LightIcon from '../HealthCheck/LightIcon'
+
 import styles from './styles'
 
 const useStyles = makeStyles(styles)
@@ -21,19 +20,16 @@ const ProducerHealthIndicators = ({ producer, message }) => {
   return (
     <div>
       {producer.health_status.map((item, index) => (
-        <Tooltip
-          key={`health-indicator-${index}`}
-          title={t(`hs_${item.name}`)}
-          aria-label="add"
+        <div
+          className={classes.wrapper}
+          key={`health-indicator-${producer?.owner || ''}-${index}`}
         >
-          <div className={classes.wrapper}>
-            <Typography>{`${t(`hs_${item.name}`)}: ${
-              item.valid ? t('found') : t('missing')
-            }`}</Typography>
-            {item.valid && <DoneOutlinedIcon className="success" />}
-            {!item.valid && <ReportProblemOutlinedIcon className="warning" />}
-          </div>
-        </Tooltip>
+          <Typography>{`${t(`hs_${item.name}`)}: ${
+            item.valid ? t('found') : t('missing')
+          }`}</Typography>
+          {item.valid && <LightIcon status="greenLight" />}
+          {!item.valid && <LightIcon status="yellowLight" />}
+        </div>
       ))}
     </div>
   )