From 4820c1ee8a4fd1a92ac5847a8d8bc5ec6238405b Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Sat, 1 Mar 2025 21:56:21 +0530 Subject: [PATCH 1/7] FIX-1848 made changes in the contents tab in the status page. --- .../Create/Components/Tabs/Content.jsx | 31 ++++++++----------- .../Create/Components/Tabs/SectionStack.jsx | 22 +++++++++++++ 2 files changed, 35 insertions(+), 18 deletions(-) create mode 100644 src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx diff --git a/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx b/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx index 8eda4fe0a..6adf3cca9 100644 --- a/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx +++ b/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx @@ -1,13 +1,13 @@ // Components -import { Stack, Typography, Button } from "@mui/material"; +import { Stack, Typography } from "@mui/material"; import { TabPanel } from "@mui/lab"; -import ConfigBox from "../../../../../Components/ConfigBox"; import MonitorList from "../MonitorList"; import Search from "../../../../../Components/Inputs/Search"; import Checkbox from "../../../../../Components/Inputs/Checkbox"; // Utils import { useState } from "react"; import { useTheme } from "@emotion/react"; +import SectionStack from "./SectionStack"; const Content = ({ tabValue, form, @@ -34,14 +34,10 @@ const Content = ({ return ( - - - Status page servers - - You can add any number of servers that you monitor to your status page. You - can also reorder them for the best viewing experience. - - + - {" "} - - - Features - Show more details on the status page - - + + + - + diff --git a/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx b/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx new file mode 100644 index 000000000..2eacf5ea5 --- /dev/null +++ b/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx @@ -0,0 +1,22 @@ +import { Stack, Typography } from "@mui/material"; +import ConfigBox from "../../../../../Components/ConfigBox"; +import PropTypes from "prop-types"; + +// This can be used to add any extra/additional section/stacks on top of existing sections on the tab +const SectionStack = ({ title, description, children }) => ( + + + {title} + {description} + + {children} + +); + +SectionStack.propTypes = { + title: PropTypes.string.isRequired, // Title must be a string and is required + description: PropTypes.string.isRequired, // Description must be a string and is required + children: PropTypes.node.isRequired, +}; + +export default SectionStack; From b6726fba542256d6569a134f90f6a1ae75ef1979 Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Sat, 1 Mar 2025 22:34:33 +0530 Subject: [PATCH 2/7] FIX-1848 removed the unwanted box element as it does not serve any purpose. --- src/Pages/StatusPage/Create/Components/Tabs/Content.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx b/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx index 6adf3cca9..3a95a07b0 100644 --- a/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx +++ b/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx @@ -91,7 +91,6 @@ const Content = ({ - ); }; From d123bed87518c144c7eac0bc72ceb8034fcd3cef Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Sat, 1 Mar 2025 22:43:35 +0530 Subject: [PATCH 3/7] FIX-1848 minor theme fixes. --- .../Create/Components/Tabs/SectionStack.jsx | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx b/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx index 2eacf5ea5..9708d8a85 100644 --- a/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx +++ b/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx @@ -1,17 +1,21 @@ import { Stack, Typography } from "@mui/material"; import ConfigBox from "../../../../../Components/ConfigBox"; import PropTypes from "prop-types"; +import { useTheme } from "@emotion/react"; // This can be used to add any extra/additional section/stacks on top of existing sections on the tab -const SectionStack = ({ title, description, children }) => ( - - - {title} - {description} - - {children} - -); +const SectionStack = ({ title, description, children }) => { + const theme = useTheme(); + return ( + + + {title} + {description} + + {children} + + ); +}; SectionStack.propTypes = { title: PropTypes.string.isRequired, // Title must be a string and is required From 649b5ad2a4de368142f0fccaae75e2ce1949e50b Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Sun, 2 Mar 2025 21:23:15 +0530 Subject: [PATCH 4/7] FIX-1848 removed the border and background colour. --- src/Pages/Account/index.jsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/Pages/Account/index.jsx b/src/Pages/Account/index.jsx index 00d805f34..48b0984f5 100644 --- a/src/Pages/Account/index.jsx +++ b/src/Pages/Account/index.jsx @@ -57,10 +57,6 @@ const Account = ({ open = "profile" }) => { className="account" px={theme.spacing(20)} py={theme.spacing(12)} - backgroundColor={theme.palette.primary.main} - border={1} - borderColor={theme.palette.primary.lowContrast} - borderRadius={theme.shape.borderRadius} > Date: Sun, 2 Mar 2025 22:59:00 +0530 Subject: [PATCH 5/7] FIX-1848 added theme for alerts specfic. --- src/Components/Alert/index.jsx | 4 ++-- src/Utils/Theme/constants.js | 10 ++++++++++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/Components/Alert/index.jsx b/src/Components/Alert/index.jsx index a52761ca4..54fba31b8 100644 --- a/src/Components/Alert/index.jsx +++ b/src/Components/Alert/index.jsx @@ -36,8 +36,8 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => { */ const text = theme.palette.secondary.contrastText; - const bg = theme.palette.secondary.main; - const border = theme.palette.secondary.contrastText; + const border = theme.palette.alert.border; + const bg = theme.palette.alert.background; const icon = icons[variant]; return ( diff --git a/src/Utils/Theme/constants.js b/src/Utils/Theme/constants.js index cd2b2e316..37c98274e 100644 --- a/src/Utils/Theme/constants.js +++ b/src/Utils/Theme/constants.js @@ -290,6 +290,16 @@ const newSemanticColors = { dark: "#C084FC", }, }, + alert: { + background: { + light: newColors.gray200, + dark: "#1c1c1c", + }, + border: { + light: newColors.blueGray600, + dark: "#515151", + }, + }, }; export { typographyLevels, semanticColors as colors, newSemanticColors }; From 641aeff08c30e0a0bc1f6c9ec2d1dd47b6f2ac7b Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Sun, 2 Mar 2025 23:13:32 +0530 Subject: [PATCH 6/7] FIX-1484 added in new colors for extensibility and maintainability. --- src/Utils/Theme/constants.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/Utils/Theme/constants.js b/src/Utils/Theme/constants.js index 37c98274e..b0124c645 100644 --- a/src/Utils/Theme/constants.js +++ b/src/Utils/Theme/constants.js @@ -40,7 +40,6 @@ const paletteColors = { blueGray150: "#667085", blueGray200: "#475467", blueGray400: "#344054", - blueGray900: "#1c2130", blueBlueWave: "#1570EF", blue700: "#4E5BA6", purple300: "#664EFF", @@ -89,10 +88,12 @@ const newColors = { gray100: "#F3F3F3", gray200: "#EFEFEF", gray500: "#A2A3A3", + gray900: "#1c1c1c", blueGray50: "#E8F0FE", blueGray500: "#475467", blueGray600: "#344054", blueGray800: "#1C2130", + blueGray900: "#515151", blueBlueWave: "#1570EF", /* I changed green 100 and green 700. Need to change red and warning as well, and refactor the object following the structure */ green100: "#67cd78", @@ -293,11 +294,11 @@ const newSemanticColors = { alert: { background: { light: newColors.gray200, - dark: "#1c1c1c", + dark: newColors.gray900, }, border: { light: newColors.blueGray600, - dark: "#515151", + dark: newColors.blueGray900, }, }, }; From 8f9c38895328d75de9d4229684029419acea9219 Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Mon, 3 Mar 2025 09:16:25 +0530 Subject: [PATCH 7/7] FIX-1848 addressed the comments in order to modify the theme implementation. --- src/Components/Alert/index.jsx | 4 ++-- .../Tabs/{SectionStack.jsx => ConfigStack.jsx} | 6 +++--- .../StatusPage/Create/Components/Tabs/Content.jsx | 10 +++++----- src/Utils/Theme/constants.js | 4 ++-- 4 files changed, 12 insertions(+), 12 deletions(-) rename src/Pages/StatusPage/Create/Components/Tabs/{SectionStack.jsx => ConfigStack.jsx} (86%) diff --git a/src/Components/Alert/index.jsx b/src/Components/Alert/index.jsx index 54fba31b8..0b32fe2b1 100644 --- a/src/Components/Alert/index.jsx +++ b/src/Components/Alert/index.jsx @@ -36,8 +36,8 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => { */ const text = theme.palette.secondary.contrastText; - const border = theme.palette.alert.border; - const bg = theme.palette.alert.background; + const border = theme.palette.alert.contrastText; + const bg = theme.palette.alert.main; const icon = icons[variant]; return ( diff --git a/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx b/src/Pages/StatusPage/Create/Components/Tabs/ConfigStack.jsx similarity index 86% rename from src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx rename to src/Pages/StatusPage/Create/Components/Tabs/ConfigStack.jsx index 9708d8a85..6eb64a519 100644 --- a/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx +++ b/src/Pages/StatusPage/Create/Components/Tabs/ConfigStack.jsx @@ -4,7 +4,7 @@ import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; // This can be used to add any extra/additional section/stacks on top of existing sections on the tab -const SectionStack = ({ title, description, children }) => { +const ConfigStack = ({ title, description, children }) => { const theme = useTheme(); return ( @@ -17,10 +17,10 @@ const SectionStack = ({ title, description, children }) => { ); }; -SectionStack.propTypes = { +ConfigStack.propTypes = { title: PropTypes.string.isRequired, // Title must be a string and is required description: PropTypes.string.isRequired, // Description must be a string and is required children: PropTypes.node.isRequired, }; -export default SectionStack; +export default ConfigStack; diff --git a/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx b/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx index 3a95a07b0..f6945ab5b 100644 --- a/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx +++ b/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx @@ -7,7 +7,7 @@ import Checkbox from "../../../../../Components/Inputs/Checkbox"; // Utils import { useState } from "react"; import { useTheme } from "@emotion/react"; -import SectionStack from "./SectionStack"; +import ConfigStack from "./ConfigStack"; const Content = ({ tabValue, form, @@ -34,7 +34,7 @@ const Content = ({ return ( - @@ -68,8 +68,8 @@ const Content = ({ setSelectedMonitors={handleMonitorsChange} /> - - + @@ -89,7 +89,7 @@ const Content = ({ onChange={handleFormChange} /> - + ); diff --git a/src/Utils/Theme/constants.js b/src/Utils/Theme/constants.js index b0124c645..a02827c7f 100644 --- a/src/Utils/Theme/constants.js +++ b/src/Utils/Theme/constants.js @@ -292,11 +292,11 @@ const newSemanticColors = { }, }, alert: { - background: { + main: { light: newColors.gray200, dark: newColors.gray900, }, - border: { + contrastText: { light: newColors.blueGray600, dark: newColors.blueGray900, },