From 4ccc36acc28aae741b2e9eab8103cf6182407f5d Mon Sep 17 00:00:00 2001 From: Aryaman Kumar Sharma Date: Sat, 1 Mar 2025 10:21:39 +0530 Subject: [PATCH 1/5] Fix: Infrastructure Details Page Design --- src/Components/Charts/CustomGauge/index.jsx | 8 ++-- src/Components/StatBox/index.jsx | 7 ++-- .../Details/Components/GaugeBoxes/Gauge.jsx | 38 +++++++++++++++---- .../Details/Hooks/useHardwareUtils.jsx | 1 + src/Pages/Infrastructure/Details/index.jsx | 2 +- src/Utils/Theme/constants.js | 9 +++++ 6 files changed, 50 insertions(+), 15 deletions(-) diff --git a/src/Components/Charts/CustomGauge/index.jsx b/src/Components/Charts/CustomGauge/index.jsx index d29663004..5c8481898 100644 --- a/src/Components/Charts/CustomGauge/index.jsx +++ b/src/Components/Charts/CustomGauge/index.jsx @@ -62,6 +62,7 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold = className="radial-chart" width={radius} height={radius} + sx={{ backgroundColor: theme.palette.accent.baseBackground, borderRadius: "50%" }} > {`${progressWithinRange.toFixed(1)}%`} diff --git a/src/Components/StatBox/index.jsx b/src/Components/StatBox/index.jsx index 3c91e1aae..71e01b4da 100644 --- a/src/Components/StatBox/index.jsx +++ b/src/Components/StatBox/index.jsx @@ -3,6 +3,7 @@ import Image from "../Image"; import { useTheme } from "@mui/material/styles"; import PropTypes from "prop-types"; import useUtils from "../../Pages/Uptime/Monitors/Hooks/useUtils"; +import { lighten } from "@mui/material/styles"; /** * StatBox Component @@ -50,7 +51,7 @@ const StatBox = ({ borderColor: theme.palette[themeColor].lowContrast, } : { - background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.primary.main} 45%)`, + background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 10%, ${theme.palette.primary.main} 45%)`, borderColor: theme.palette.primary.lowContrast, }; @@ -62,7 +63,7 @@ const StatBox = ({ color: theme.palette.primary.contrastTextSecondary, }; - const spanFixedStyles = { marginLeft: theme.spacing(2), fontSize: 15 }; + const spanFixedStyles = { marginLeft: theme.spacing(2), fontSize: 15, fontWeight: 600}; const detailTextStyles = gradient ? { color: theme.palette[themeColor].contrastText, @@ -120,7 +121,7 @@ const StatBox = ({ )} {heading} - {subHeading} + {subHeading} ); diff --git a/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx b/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx index b1202682d..3adf0066b 100644 --- a/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx +++ b/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx @@ -9,6 +9,17 @@ import PropTypes from "prop-types"; const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) => { const theme = useTheme(); + const boxStyle = { + borderRadius: 2, + backgroundColor: theme.palette.tertiary.main, + width: "40%", + mb: 2, + mt: 2, + pr: 4, + textAlign: 'right', + fontWeight: 600 + } + return ( gap={theme.spacing(2)} alignItems="center" > - - {heading} + + + {heading} + {metricOne} - {valueOne} + {valueOne} {metricTwo} - {valueTwo} + {valueTwo} diff --git a/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx b/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx index bc540dfe3..1752533d0 100644 --- a/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx +++ b/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx @@ -64,6 +64,7 @@ const useHardwareUtils = () => { return ( <> {Number(MB.toFixed(0))} + {space ? " " : ""} MB ); diff --git a/src/Pages/Infrastructure/Details/index.jsx b/src/Pages/Infrastructure/Details/index.jsx index f686fa9ff..fc704b444 100644 --- a/src/Pages/Infrastructure/Details/index.jsx +++ b/src/Pages/Infrastructure/Details/index.jsx @@ -62,7 +62,7 @@ const InfrastructureDetails = () => { monitor={monitor} /> - No check history for htis monitor yet. + No check history for this monitor yet. ); diff --git a/src/Utils/Theme/constants.js b/src/Utils/Theme/constants.js index 36ab0a0f4..7397e6f5a 100644 --- a/src/Utils/Theme/constants.js +++ b/src/Utils/Theme/constants.js @@ -94,6 +94,7 @@ const newColors = { blueGray600: "#344054", blueGray800: "#1C2130", blueBlueWave: "#1570EF", + lightBlueWave: "#CDE2FF", /* I changed green 100 and green 700. Need to change red and warning as well, and refactor the object following the structure */ green100: "#67cd78", green200: "#4B9B77", @@ -138,6 +139,14 @@ const newSemanticColors = { light: newColors.offWhite, dark: newColors.offWhite, }, + base: { + light: newColors.lightBlueWave, + dark: newColors.lightBlueWave, + }, + baseBackground: { + light: paletteColors.white, + dark: newColors.offBlack, + } }, primary: { main: { From 3632e1d1824477c0afc47cd3ce9ea91d3ad8656f Mon Sep 17 00:00:00 2001 From: Aryaman Sharma Date: Sat, 1 Mar 2025 10:30:51 +0530 Subject: [PATCH 2/5] Fix: Infrastructure Details Page Design --- src/Components/StatBox/index.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Components/StatBox/index.jsx b/src/Components/StatBox/index.jsx index 71e01b4da..ab0411a68 100644 --- a/src/Components/StatBox/index.jsx +++ b/src/Components/StatBox/index.jsx @@ -3,7 +3,6 @@ import Image from "../Image"; import { useTheme } from "@mui/material/styles"; import PropTypes from "prop-types"; import useUtils from "../../Pages/Uptime/Monitors/Hooks/useUtils"; -import { lighten } from "@mui/material/styles"; /** * StatBox Component From 696fb88c11213dc4fd06b51786a46b909fe42d34 Mon Sep 17 00:00:00 2001 From: Aryaman Kumar Sharma Date: Mon, 3 Mar 2025 10:51:52 +0530 Subject: [PATCH 3/5] Fix: Infrastructure Details Page Design --- src/Components/Charts/CustomGauge/index.jsx | 5 ++--- src/Components/StatBox/index.jsx | 2 +- .../Details/Components/GaugeBoxes/Gauge.jsx | 5 ++--- src/Utils/Theme/constants.js | 12 ++++-------- 4 files changed, 9 insertions(+), 15 deletions(-) diff --git a/src/Components/Charts/CustomGauge/index.jsx b/src/Components/Charts/CustomGauge/index.jsx index 5c8481898..3c7e13610 100644 --- a/src/Components/Charts/CustomGauge/index.jsx +++ b/src/Components/Charts/CustomGauge/index.jsx @@ -62,7 +62,7 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold = className="radial-chart" width={radius} height={radius} - sx={{ backgroundColor: theme.palette.accent.baseBackground, borderRadius: "50%" }} + sx={{ backgroundColor: theme.palette.primary.main, borderRadius: "50%" }} > {`${progressWithinRange.toFixed(1)}%`} diff --git a/src/Components/StatBox/index.jsx b/src/Components/StatBox/index.jsx index ab0411a68..54a4af5ca 100644 --- a/src/Components/StatBox/index.jsx +++ b/src/Components/StatBox/index.jsx @@ -120,7 +120,7 @@ const StatBox = ({ )} {heading} - {subHeading} + {subHeading} ); diff --git a/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx b/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx index 3adf0066b..ee2ab5963 100644 --- a/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx +++ b/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx @@ -15,9 +15,8 @@ const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) => width: "40%", mb: 2, mt: 2, - pr: 4, - textAlign: 'right', - fontWeight: 600 + pr: 2, + textAlign: 'right' } return ( diff --git a/src/Utils/Theme/constants.js b/src/Utils/Theme/constants.js index 7397e6f5a..81d83ecd7 100644 --- a/src/Utils/Theme/constants.js +++ b/src/Utils/Theme/constants.js @@ -139,14 +139,6 @@ const newSemanticColors = { light: newColors.offWhite, dark: newColors.offWhite, }, - base: { - light: newColors.lightBlueWave, - dark: newColors.lightBlueWave, - }, - baseBackground: { - light: paletteColors.white, - dark: newColors.offBlack, - } }, primary: { main: { @@ -180,6 +172,10 @@ const newSemanticColors = { light: newColors.gray200, dark: "#313131" /* newColors.blueGray600 */, }, + light: { + light: newColors.lightBlueWave, + dark: newColors.lightBlueWave, + }, contrastText: { light: newColors.blueGray600, dark: newColors.gray200, From e9ae301af7af6be45713f3a560eed8ccc2bed439 Mon Sep 17 00:00:00 2001 From: Aryaman Kumar Sharma Date: Tue, 4 Mar 2025 00:58:59 +0530 Subject: [PATCH 4/5] Fix: Infrastructure Details Page Design --- .../Details/Components/GaugeBoxes/Gauge.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx b/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx index ee2ab5963..916d3e8e9 100644 --- a/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx +++ b/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx @@ -9,13 +9,13 @@ import PropTypes from "prop-types"; const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) => { const theme = useTheme(); - const boxStyle = { + const valueStyle = { borderRadius: 2, backgroundColor: theme.palette.tertiary.main, width: "40%", - mb: 2, - mt: 2, - pr: 2, + mb: theme.spacing(2), + mt: theme.spacing(2), + pr: theme.spacing(2), textAlign: 'right' } @@ -54,7 +54,7 @@ const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) => gap={theme.spacing(2)} > {metricOne} - {valueOne} + {valueOne} gap={theme.spacing(2)} > {metricTwo} - {valueTwo} + {valueTwo} From 053fc45296214532aae78992cadcb9444878989d Mon Sep 17 00:00:00 2001 From: Aryaman Kumar Sharma Date: Tue, 4 Mar 2025 01:03:00 +0530 Subject: [PATCH 5/5] Fix: Infrastructure Details Page Design --- .../Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx b/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx index 916d3e8e9..d374d1960 100644 --- a/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx +++ b/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx @@ -10,7 +10,7 @@ const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) => const theme = useTheme(); const valueStyle = { - borderRadius: 2, + borderRadius: theme.spacing(2), backgroundColor: theme.palette.tertiary.main, width: "40%", mb: theme.spacing(2),