diff --git a/src/fireedge/src/client/components/Cards/WavesCard.js b/src/fireedge/src/client/components/Cards/WavesCard.js
index 6e9c51005b..18f4362fea 100644
--- a/src/fireedge/src/client/components/Cards/WavesCard.js
+++ b/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 }) => {
{Icon && (
-
+
)}
diff --git a/src/fireedge/src/client/components/Charts/SingleBar.js b/src/fireedge/src/client/components/Charts/SingleBar.js
index 6c1ea9710c..bf4bce0c86 100644
--- a/src/fireedge/src/client/components/Charts/SingleBar.js
+++ b/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 */}
- {legend?.map(({ name, color }) => (
-
+ {legend?.map(({ name, color }, idx) => (
+
{name}
))}
@@ -50,7 +53,7 @@ const SingleBar = ({ legend, data, total }) => {
}
return (
-
+
)
diff --git a/src/fireedge/src/client/components/Widgets/TotalProviders/styles.js b/src/fireedge/src/client/components/Widgets/TotalProviders/styles.js
index b0949214ea..f4945bcde2 100644
--- a/src/fireedge/src/client/components/Widgets/TotalProviders/styles.js
+++ b/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'
+ }
}
}))
diff --git a/src/fireedge/src/client/components/Widgets/TotalProvisionInfrastructures.js b/src/fireedge/src/client/components/Widgets/TotalProvisionInfrastructures.js
index 5f416b832b..b7f322b529 100644
--- a/src/fireedge/src/client/components/Widgets/TotalProvisionInfrastructures.js
+++ b/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(() => (
({
+export default makeStyles({
withoutAnimations: {
'& *, & *::before, & *::after': {
animation: 'none !important'
}
}
-}))
+})