F OpenNebula/one#5422: Fix widget styles in mobile

src/fireedge/src/client/components/Cards/WavesCard.js

@@ -15,14 +15,24 @@ const useStyles = makeStyles(theme => {
       padding: '2em',
       position: 'relative',
       overflow: 'hidden',
-      backgroundColor: ({ bgColor }) => getBackgroundColor(bgColor, 0.3)
+      backgroundColor: ({ bgColor }) => getBackgroundColor(bgColor, 0.3),
+      [theme.breakpoints.only('xs')]: {
+        display: 'inline-flex',
+        alignItem: 'baseline',
+        gap: '1em'
+      }
     },
     icon: {
       position: 'absolute',
       top: 0,
       right: 0,
+      width: '100%',
+      height: '100%',
+      textAlign: 'end',
       '& > svg': {
-        color: addOpacityToColor(theme.palette.common.white, 0.2)
+        color: addOpacityToColor(theme.palette.common.white, 0.2),
+        height: '100%',
+        width: '30%'
       }
     },
     wave: {
@@ -61,7 +71,7 @@ const WavesCard = React.memo(({ text, value, bgColor, icon: Icon }) => {
       <span className={clsx(classes.wave, classes.wave2)} />
       {Icon && (
         <span className={classes.icon}>
-          <Icon size='9em' />
+          <Icon />
         </span>
       )}
     </Paper>

src/fireedge/src/client/components/Charts/SingleBar.js

@@ -5,7 +5,7 @@ import { makeStyles, Tooltip } from '@material-ui/core'
 import { TypographyWithPoint } from 'client/components/Typography'
 import { addOpacityToColor } from 'client/utils'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles(theme => ({
   legend: {
     display: 'grid',
     gridGap: '1rem',
@@ -19,7 +19,10 @@ const useStyles = makeStyles(() => ({
     backgroundColor: '#616161e0',
     transition: '1s',
     gridTemplateColumns: ({ fragments }) =>
-      fragments?.map(fragment => `${fragment}fr`)?.join(' ')
+      fragments?.map(fragment => `${fragment}fr`)?.join(' '),
+    [theme.breakpoints.only('xs')]: {
+      display: 'none'
+    }
   }
 }))
 
@@ -32,8 +35,8 @@ const SingleBar = ({ legend, data, total }) => {
     <>
       {/* LEGEND */}
       <div className={classes.legend}>
-        {legend?.map(({ name, color }) => (
-          <TypographyWithPoint key={name} pointColor={color}>
+        {legend?.map(({ name, color }, idx) => (
+          <TypographyWithPoint key={name} pointColor={color} data-attr={data[idx]}>
             {name}
           </TypographyWithPoint>
         ))}
@@ -50,7 +53,7 @@ const SingleBar = ({ legend, data, total }) => {
           }
 
           return (
-            <Tooltip arrow key={label} placement="top" title={`${label}: ${value}`}>
+            <Tooltip arrow key={label} placement='top' title={`${label}: ${value}`}>
               <div style={style}></div>
             </Tooltip>
           )

src/fireedge/src/client/components/Widgets/TotalProviders/styles.js

@@ -22,7 +22,8 @@ export default makeStyles(theme => ({
   content: {
     display: 'grid',
     gridTemplateColumns: 'repeat(auto-fit, minmax(125px, 1fr))',
-    gridGap: '2em'
+    gridGap: '2em',
+    padding: '0 2em'
   },
   legendSecondary: {
     fontSize: '0.9rem',
@@ -30,6 +31,9 @@ export default makeStyles(theme => ({
     color: theme.palette.text.secondary
   },
   chart: {
-    height: 200
+    height: 200,
+    [theme.breakpoints.only('xs')]: {
+      display: 'none'
+    }
   }
 }))

src/fireedge/src/client/components/Widgets/TotalProvisionInfrastructures.js

@@ -6,15 +6,25 @@ import {
   Folder as DatastoreIcon,
   NetworkAlt as NetworkIcon
 } from 'iconoir-react'
+import { makeStyles } from '@material-ui/core'
 
-import { useOne } from 'client/features/One'
+import { useProvision } from 'client/features/One'
 import Count from 'client/components/Count'
 import { WavesCard } from 'client/components/Cards'
 import { get } from 'client/utils'
 import { T } from 'client/constants'
 
+const useStyles = makeStyles(({ breakpoints }) => ({
+  root: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
+    gridGap: '2em'
+  }
+}))
+
 const TotalProvisionInfrastructures = () => {
-  const { provisions } = useOne()
+  const classes = useStyles()
+  const provisions = useProvision()
 
   const provisionsByProvider = React.useMemo(() =>
     provisions
@@ -39,11 +49,7 @@ const TotalProvisionInfrastructures = () => {
   return React.useMemo(() => (
     <div
       data-cy='dashboard-widget-total-infrastructures'
-      style={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
-        gridGap: '2em'
-      }}
+      className={classes.root}
     >
       <WavesCard
         text={T.Clusters}

src/fireedge/src/client/containers/Dashboard/Provision/styles.js

@@ -1,9 +1,9 @@
 import { makeStyles } from '@material-ui/core'
 
-export default makeStyles(() => ({
+export default makeStyles({
   withoutAnimations: {
     '& *, & *::before, & *::after': {
       animation: 'none !important'
     }
   }
-}))
+})