From 6c145297988af388ec1b07ef4541b1e7b97d69df Mon Sep 17 00:00:00 2001 From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca> Date: Fri, 21 Mar 2025 21:50:04 -0400 Subject: [PATCH 1/8] remove sidebar border and add borderRight --- src/Components/Sidebar/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx index 4fbc12538..80dcdf25f 100644 --- a/src/Components/Sidebar/index.jsx +++ b/src/Components/Sidebar/index.jsx @@ -205,9 +205,9 @@ function Sidebar() { */ sx={{ position: "relative", - border: 1, + borderRight: `1px solid ${theme.palette.primary.lowContrast}`, borderColor: theme.palette.primary.lowContrast, - borderRadius: theme.shape.borderRadius, + borderRadius: 0, "& :is(p, span, .MuiListSubheader-root)": { /* Text color for unselected menu items and menu headings From c790a9282ac4e7bd5286a6f4453512c5b1a64783 Mon Sep 17 00:00:00 2001 From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca> Date: Fri, 21 Mar 2025 22:43:31 -0400 Subject: [PATCH 2/8] modify sidebar and main layout styles to fix the positions --- src/Components/Layouts/HomeLayout/index.css | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/Components/Layouts/HomeLayout/index.css b/src/Components/Layouts/HomeLayout/index.css index ef6f38abd..85ac93941 100644 --- a/src/Components/Layouts/HomeLayout/index.css +++ b/src/Components/Layouts/HomeLayout/index.css @@ -1,9 +1,9 @@ .home-layout { position: relative; min-height: 100vh; - max-width: 1400px; + /* max-width: 1400px; */ margin: 0 auto; - padding: var(--env-var-spacing-2); + padding: 0; } /* TODO go for this approach for responsiveness. The aside needs to be taken care of */ @@ -15,10 +15,9 @@ .home-layout aside { position: sticky; - top: var(--env-var-spacing-2); + top: 0; left: 0; - - height: calc(100vh - var(--env-var-spacing-2) * 2); + height: 100vh; max-width: var(--env-var-side-bar-width); } @@ -26,3 +25,11 @@ min-height: calc(100vh - var(--env-var-spacing-2) * 2); flex: 1; } + +.home-layout > :nth-child(2) { + padding: var(--env-var-spacing-2); + min-height: calc(100vh - var(--env-var-spacing-2) * 2); + max-width: 1400px; + margin: 0 auto; + flex: 1; +} From 3bd48e235a0b4561680a1c304b0369887d081934 Mon Sep 17 00:00:00 2001 From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca> Date: Fri, 21 Mar 2025 22:56:34 -0400 Subject: [PATCH 3/8] center the uptime data table barchart --- .../Uptime/Monitors/Components/UptimeDataTable/index.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/Pages/Uptime/Monitors/Components/UptimeDataTable/index.jsx b/src/Pages/Uptime/Monitors/Components/UptimeDataTable/index.jsx index 9b5e7571f..a6ef105b6 100644 --- a/src/Pages/Uptime/Monitors/Components/UptimeDataTable/index.jsx +++ b/src/Pages/Uptime/Monitors/Components/UptimeDataTable/index.jsx @@ -149,7 +149,11 @@ const UptimeDataTable = ({ { id: "responseTime", content: t("responseTime"), - render: (row) => , + render: (row) => ( + + + + ), }, { id: "type", From 7dde4a74c9b805b4576a98c284ac9c5285e07d59 Mon Sep 17 00:00:00 2001 From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca> Date: Fri, 21 Mar 2025 23:39:51 -0400 Subject: [PATCH 4/8] wrap outlet in stack and update the layout styles --- src/Components/Fallback/index.jsx | 1 + src/Components/Layouts/HomeLayout/index.css | 8 +++----- src/Components/Layouts/HomeLayout/index.jsx | 4 +++- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/Components/Fallback/index.jsx b/src/Components/Fallback/index.jsx index 3e30cd374..bdee376c5 100644 --- a/src/Components/Fallback/index.jsx +++ b/src/Components/Fallback/index.jsx @@ -35,6 +35,7 @@ const Fallback = ({ title, checks, link = "/", isAdmin, vowelStart = false }) => overflow="hidden" sx={{ borderStyle: "dashed", + minHeight: "calc(100vh - var(--env-var-spacing-2) * 2)", }} > :nth-child(2) { +.home-content-wrapper { padding: var(--env-var-spacing-2); - min-height: calc(100vh - var(--env-var-spacing-2) * 2); max-width: 1400px; margin: 0 auto; flex: 1; -} +} \ No newline at end of file diff --git a/src/Components/Layouts/HomeLayout/index.jsx b/src/Components/Layouts/HomeLayout/index.jsx index b605a0d53..55b612522 100644 --- a/src/Components/Layouts/HomeLayout/index.jsx +++ b/src/Components/Layouts/HomeLayout/index.jsx @@ -12,7 +12,9 @@ const HomeLayout = () => { gap={14} > - + + + ); }; From 112f76dbf619507d6ba0b8b68475aa60c91706ff Mon Sep 17 00:00:00 2001 From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca> Date: Sat, 22 Mar 2025 00:15:01 -0400 Subject: [PATCH 5/8] add subtle color tint for sidebar --- src/Components/Sidebar/index.jsx | 1 + src/Utils/Theme/constants.js | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx index 80dcdf25f..cb2b5aafb 100644 --- a/src/Components/Sidebar/index.jsx +++ b/src/Components/Sidebar/index.jsx @@ -208,6 +208,7 @@ function Sidebar() { borderRight: `1px solid ${theme.palette.primary.lowContrast}`, borderColor: theme.palette.primary.lowContrast, borderRadius: 0, + backgroundColor: theme.palette.primary.sidebar, "& :is(p, span, .MuiListSubheader-root)": { /* Text color for unselected menu items and menu headings diff --git a/src/Utils/Theme/constants.js b/src/Utils/Theme/constants.js index 239d36e36..52623ac0c 100644 --- a/src/Utils/Theme/constants.js +++ b/src/Utils/Theme/constants.js @@ -109,6 +109,8 @@ const newColors = { red400: "#D92020", red600: "#9B4B4B", red700: "#980303", + sidebarLight: "#F9F9FB", + sidebarDark: "#1A1A1D", }; /* @@ -167,6 +169,10 @@ const newSemanticColors = { light: newColors.gray200, dark: newColors.blueGray600, }, + sidebar: { + light: newColors.sidebarLight, + dark: newColors.sidebarDark, + }, }, secondary: { main: { From 2b346cf34a0991ca351872523f6edeaee44ad4ac Mon Sep 17 00:00:00 2001 From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca> Date: Sat, 22 Mar 2025 00:47:14 -0400 Subject: [PATCH 6/8] update background color to use predefined theme --- src/Components/Sidebar/index.jsx | 2 +- src/Utils/Theme/constants.js | 6 ------ 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx index cb2b5aafb..2bc84ed23 100644 --- a/src/Components/Sidebar/index.jsx +++ b/src/Components/Sidebar/index.jsx @@ -208,7 +208,7 @@ function Sidebar() { borderRight: `1px solid ${theme.palette.primary.lowContrast}`, borderColor: theme.palette.primary.lowContrast, borderRadius: 0, - backgroundColor: theme.palette.primary.sidebar, + backgroundColor: theme.palette.primary.main, "& :is(p, span, .MuiListSubheader-root)": { /* Text color for unselected menu items and menu headings diff --git a/src/Utils/Theme/constants.js b/src/Utils/Theme/constants.js index 52623ac0c..239d36e36 100644 --- a/src/Utils/Theme/constants.js +++ b/src/Utils/Theme/constants.js @@ -109,8 +109,6 @@ const newColors = { red400: "#D92020", red600: "#9B4B4B", red700: "#980303", - sidebarLight: "#F9F9FB", - sidebarDark: "#1A1A1D", }; /* @@ -169,10 +167,6 @@ const newSemanticColors = { light: newColors.gray200, dark: newColors.blueGray600, }, - sidebar: { - light: newColors.sidebarLight, - dark: newColors.sidebarDark, - }, }, secondary: { main: { From 6a1dc1e2931c9b0ad447f783fac982ba6cb4a344 Mon Sep 17 00:00:00 2001 From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca> Date: Tue, 25 Mar 2025 13:30:28 -0400 Subject: [PATCH 7/8] remove top offest for sidebar --- src/Components/Layouts/HomeLayout/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Layouts/HomeLayout/index.css b/src/Components/Layouts/HomeLayout/index.css index 6d6ad08b8..28ac340f8 100644 --- a/src/Components/Layouts/HomeLayout/index.css +++ b/src/Components/Layouts/HomeLayout/index.css @@ -14,7 +14,7 @@ .home-layout aside { position: sticky; - top: var(--env-var-spacing-2); + top: 0; left: 0; height: 100vh; max-width: var(--env-var-side-bar-width); From a6d06fa8e0ff501848ba1491da913384620e360f Mon Sep 17 00:00:00 2001 From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca> Date: Tue, 25 Mar 2025 15:58:26 -0400 Subject: [PATCH 8/8] add slight padding for sidebar menu items --- src/Components/Sidebar/index.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx index 2bc84ed23..84fe9b33d 100644 --- a/src/Components/Sidebar/index.jsx +++ b/src/Components/Sidebar/index.jsx @@ -400,6 +400,7 @@ function Sidebar() { gap: theme.spacing(4), borderRadius: theme.shape.borderRadius, px: theme.spacing(4), + pl: theme.spacing(5), }} > {item.icon} @@ -654,6 +655,7 @@ function Sidebar() { gap: theme.spacing(4), borderRadius: theme.shape.borderRadius, px: theme.spacing(4), + pl: theme.spacing(5), }} > {item.icon}