fix(webapp): increase the space between the name of the producers

edenia · May 9, 2023 · a9ec56d · a9ec56d
1 parent f9fd549
commit a9ec56d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
diff --git a/webapp/src/components/ProducersChart/index.js b/webapp/src/components/ProducersChart/index.js
@@ -59,22 +59,39 @@ const CustomBarLabel = memo(
       outerRadius - gap,
       midAngle,
     )
-    const cartesianText = polarToCartesian(cx, cy, outerRadius + 8, midAngle)
+    const spacing = sm ? 16 : 12
+    const cartesianText = polarToCartesian(
+      cx,
+      cy,
+      outerRadius + spacing,
+      midAngle,
+    )
     const link = generalConfig.eosRateLink
       ? `${generalConfig.eosRateLink}/block-producers/${payload.owner}`
       : payload.url
 
+    const getNameTextAnchor = (x, cx) => {
+      if (x + 30 >= cx && x < cx) {
+        return 'middle'
+      } else if (x > cx) {
+        return 'start'
+      } else {
+        return 'end'
+      }
+    }
+
     const ProducerName = () => {
       const Content = () => (
         <text
           transform={`translate(${cartesianText.x}, ${cartesianText.y})`}
-          textAnchor={x > cx ? 'start' : 'end'}
+          textAnchor={getNameTextAnchor(x, cx)}
           dominantBaseline="central"
           fill={
             fill === theme.palette.primary.dark
               ? theme.palette.primary.dark
               : theme.palette.primary.light
           }
+          fontSize={sm ? 14 : 12}
           fontFamily="Roboto, Helvetica, Arial, sans-serif;"
           fontWeight={fill === theme.palette.primary.dark ? 'bold' : 'normal'}
         >

diff --git a/webapp/src/components/ProducersChart/styles.js b/webapp/src/components/ProducersChart/styles.js
@@ -4,9 +4,9 @@ export default (theme) => ({
     padding: theme.spacing(2),
     borderRadius: theme.spacing(1),
     boxShadow:
-      '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)'
+      '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)',
   },
   description: {
-    fontWeight: 'normal'
-  }
+    fontWeight: 'normal',
+  },
 })
diff --git a/webapp/src/routes/Home/styles.js b/webapp/src/routes/Home/styles.js
@@ -102,6 +102,9 @@ export default (theme) => ({
     [theme.breakpoints.down('md')]: {
       marginBottom: '10px',
     },
+    '& .MuiPaper-root': {
+      height: '100%',
+    },
   },
   cardGrow: {
     flexGrow: '1',
@@ -110,6 +113,9 @@ export default (theme) => ({
       flexBasis: 'calc(100%/3)',
       marginBottom: '10px',
     },
+    '& .MuiPaper-root': {
+      height: '100%',
+    },
   },
   uniquelocations: {
     flexGrow: '1 !important',