chore(webapp): improve the text and refactor

edenia · Dec 20, 2022 · 00070ea · 00070ea
1 parent 3354df6
commit 00070ea
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 50 deletions.
diff --git a/webapp/src/components/InformationCard/ProducerInformation.js b/webapp/src/components/InformationCard/ProducerInformation.js
@@ -5,8 +5,9 @@ import Typography from '@mui/material/Typography'
 import { Popover, Tooltip } from '@mui/material'
 import CountryFlag from '../CountryFlag'
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
-import LaunchIcon from '@mui/icons-material/Launch'
+
 import CopyToClipboard from '../CopyToClipboard'
+import VisitSite from '../VisitSite'
 
 const ProducerInformation = ({ info, classes, t }) => {
   const [anchorEl, setAnchorEl] = useState(null)
@@ -49,12 +50,7 @@ const ProducerInformation = ({ info, classes, t }) => {
                 <Typography variant="body1" className={classes.textEllipsis}>
                   {t('website')}:
                 </Typography>
-                <Tooltip title={t('openLink')} arrow placement="left">
-                  <LaunchIcon
-                    onClick={() => window.open(info?.website, '_blank')}
-                    className={classes.clickableIcon}
-                  />
-                </Tooltip>
+                <VisitSite title={t('openLink')} url={info?.website} />
                 <Tooltip title={t('moreInfo')} arrow placement="right">
                   <InfoOutlinedIcon
                     className={classes.clickableIcon}
@@ -98,13 +94,7 @@ const ProducerInformation = ({ info, classes, t }) => {
                 <Typography variant="body1" className={classes.textEllipsis}>
                   {t('email')}:
                 </Typography>
-                <Tooltip title={t('openLink')} arrow placement="left">
-                  <LaunchIcon
-                    onClick={() => (window.location = `mailto:${info.email}`)}
-                    className={classes.clickableIcon}
-                  />
-                </Tooltip>
-
+                <VisitSite title={t('openLink')} url={`mailto:${info.email}`} />
                 <Tooltip title={t('moreInfo')} arrow placement="right">
                   <InfoOutlinedIcon
                     className={classes.clickableIcon}
@@ -148,12 +138,7 @@ const ProducerInformation = ({ info, classes, t }) => {
                 <Typography variant="body1" className={classes.textEllipsis}>
                   {t('ownershipDisclosure')}:
                 </Typography>
-                <Tooltip title={t('openLink')} arrow placement="left">
-                  <LaunchIcon
-                    onClick={() => window.open(info?.ownership, '_blank')}
-                    className={classes.clickableIcon}
-                  />
-                </Tooltip>
+                <VisitSite title={t('openLink')} url={info?.ownership} />
                 <Tooltip title={t('moreInfo')} arrow placement="right">
                   <InfoOutlinedIcon
                     className={classes.clickableIcon}
@@ -193,12 +178,7 @@ const ProducerInformation = ({ info, classes, t }) => {
                 <Typography variant="body1" className={classes.textEllipsis}>
                   {t('codeofconduct')}:
                 </Typography>
-                <Tooltip title={t('openLink')} arrow placement="left">
-                  <LaunchIcon
-                    onClick={() => window.open(info?.code_of_conduct, '_blank')}
-                    className={classes.clickableIcon}
-                  />
-                </Tooltip>
+                <VisitSite title={t('openLink')} url={info?.code_of_conduct} />
                 <Tooltip title={t('moreInfo')} arrow placement="right">
                   <InfoOutlinedIcon
                     className={classes.clickableIcon}
@@ -238,13 +218,7 @@ const ProducerInformation = ({ info, classes, t }) => {
                 <Typography variant="body1" className={classes.textEllipsis}>
                   {t('chainResources')}:
                 </Typography>
-                <Tooltip title={t('openLink')} arrow placement="left">
-                  <LaunchIcon
-                    onClick={() => window.open(info?.chain, '_blank')}
-                    className={classes.clickableIcon}
-                  />
-                </Tooltip>
-
+                <VisitSite title={t('openLink')} url={info?.chain} />
                 <Tooltip title={t('moreInfo')} arrow placement="right">
                   <InfoOutlinedIcon
                     className={classes.clickableIcon}

diff --git a/webapp/src/components/InformationCard/Stats.js b/webapp/src/components/InformationCard/Stats.js
@@ -1,16 +1,15 @@
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
-import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
-import LaunchIcon from '@mui/icons-material/Launch'
 
 import { eosConfig, generalConfig } from '../../config'
+import VisitSite from '../VisitSite'
 
 const Stats = ({ missedBlocks, t, classes, votes, rewards, eosRate }) => {
   if (eosConfig.networkName === 'lacchain') return <></>
 
   return (
-    <div className={classes.healthStatus}>
+    <div className={classes.stats}>
       <Typography variant="overline">{t('stats')}</Typography>
       <div className={classes.borderLine}>
         <div className={classes.rowWrapper}>
@@ -25,20 +24,15 @@ const Stats = ({ missedBlocks, t, classes, votes, rewards, eosRate }) => {
 
         {!!eosRate && (
           <div className={classes.rowWrapper}>
-            <Typography variant="body1">{`${t('EOSRate')}: 
-              ${eosRate.average.toFixed(2)} (${eosRate.ratings_cntr} ${t('ratings')})`}
+            <Typography variant="body1" className={classes.ratings}>
+              {`${t('EOSRate')}: 
+              ${eosRate.average.toFixed(2)} ${t('average')} 
+              (${eosRate.ratings_cntr} ${t('ratings')})`}
             </Typography>
-            <Tooltip title={t('openLink')} arrow placement="left">
-              <LaunchIcon
-                onClick={() =>
-                  window.open(
-                    `${generalConfig.eosRateLink}/block-producers/${eosRate.bp}`,
-                    '_blank',
-                  )
-                }
-                className={classes.clickableIcon}
-              />
-            </Tooltip>
+            <VisitSite
+              title={t('openLink')}
+              url={`${generalConfig.eosRateLink}/block-producers/${eosRate.bp}`}
+            />
           </div>
         )}
 

diff --git a/webapp/src/components/InformationCard/styles.js b/webapp/src/components/InformationCard/styles.js
@@ -188,6 +188,11 @@ export default (theme) => ({
       minWidth: 150,
     },
   },
+  ratings: {
+    [theme.breakpoints.up('lg')]: {
+      whiteSpace: 'pre-line !important',
+    },
+  },
   boxLabel: {
     alignItems: 'baseline !important',
   },
@@ -223,6 +228,15 @@ export default (theme) => ({
       minWidth: 130,
     },
   },
+  stats: {
+    '& .MuiTypography-body1': {
+      margin: theme.spacing(1, 0),
+      display: 'flex',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+    },
+  },
   social: {
     borderLeft: 'none',
     width: 100,

diff --git a/webapp/src/components/VisitSite/index.js b/webapp/src/components/VisitSite/index.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { makeStyles } from '@mui/styles'
+import Tooltip from '@mui/material/Tooltip'
+import LaunchIcon from '@mui/icons-material/Launch'
+
+import styles from './styles'
+
+const useStyles = makeStyles(styles)
+
+const VisitSite = ({ title, url, placement = 'left' }) => {
+  const classes = useStyles()
+
+  return (
+    <Tooltip title={title} arrow placement={placement}>
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={classes.link}
+      >
+        <LaunchIcon className={classes.clickableIcon} />
+      </a>
+    </Tooltip>
+  )
+}
+
+export default VisitSite
diff --git a/webapp/src/components/VisitSite/styles.js b/webapp/src/components/VisitSite/styles.js
@@ -0,0 +1,14 @@
+export default (theme) => ({
+  link: {
+    width: '24px',
+    height: '24px',
+    marginLeft: theme.spacing(3),
+  },
+  clickableIcon: {
+    color: 'black',
+    cursor: 'pointer',
+    '&:hover': {
+      color: '#1565c0',
+    },
+  },
+})
diff --git a/webapp/src/language/en.json b/webapp/src/language/en.json
@@ -253,6 +253,7 @@
     "account_key": "Account Key",
     "hs_bpJson": "BP Json",
     "emptyState": "This block producer does not provide any information.",
+    "average": "average rating",
     "ratings": "ratings"
   },
   "nodeCardComponent": {

diff --git a/webapp/src/language/es.json b/webapp/src/language/es.json
@@ -259,7 +259,8 @@
     "account_key": "Cuenta",
     "hs_bpJson": "BP Json",
     "emptyState": "Este productor de bloques no proporciona ninguna información.",
-    "ratings": "valoraciones"
+    "average": "calificación promedio",
+    "ratings": "calificaciones"
   },
   "nodeCardComponent": {
     "features": "Características",