diff --git a/Client/package-lock.json b/Client/package-lock.json index ffe6bac57..ff72ed199 100644 --- a/Client/package-lock.json +++ b/Client/package-lock.json @@ -1317,9 +1317,15 @@ } }, "node_modules/@mui/x-charts": { +<<<<<<< HEAD + "version": "7.6.1", + "resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-7.6.1.tgz", + "integrity": "sha512-LuAVQX4lzhmsqk2NRdWCP+aQZ8kRwG7KOy8ulf8hR5NI5J1VsiOtH41J+qgV3uAC6hDMWL7fTgffrRDFTMci/g==", +======= "version": "7.6.2", "resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-7.6.2.tgz", "integrity": "sha512-oG22NRno1+HSLV/9jVLThnHAKN4g+MXOO6GqaQxN9LM0hjt1tgRsrNAlfcJndmj/dVwqFtynkFB5qWnTEBZs7Q==", +>>>>>>> 3f41db916efdd46069589e91f5886a4a01d11896 "dependencies": { "@babel/runtime": "^7.24.6", "@mui/base": "^5.0.0-beta.40", @@ -2235,9 +2241,15 @@ } }, "node_modules/caniuse-lite": { +<<<<<<< HEAD + "version": "1.0.30001628", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001628.tgz", + "integrity": "sha512-S3BnR4Kh26TBxbi5t5kpbcUlLJb9lhtDXISDPwOfI+JoC+ik0QksvkZtUVyikw3hjnkgkMPSJ8oIM9yMm9vflA==", +======= "version": "1.0.30001629", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001629.tgz", "integrity": "sha512-c3dl911slnQhmxUIT4HhYzT7wnBK/XYpGnYLOj4nJBaRiw52Ibe7YxlDaAeRECvA786zCuExhxIUJ2K7nHMrBw==", +>>>>>>> 3f41db916efdd46069589e91f5886a4a01d11896 "dev": true, "funding": [ { @@ -2607,9 +2619,15 @@ } }, "node_modules/electron-to-chromium": { +<<<<<<< HEAD + "version": "1.4.790", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.790.tgz", + "integrity": "sha512-eVGeQxpaBYbomDBa/Mehrs28MdvCXfJmEFzaMFsv8jH/MJDLIylJN81eTJ5kvx7B7p18OiPK0BkC06lydEy63A==", +======= "version": "1.4.792", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.792.tgz", "integrity": "sha512-rkg5/N3L+Y844JyfgPUyuKK0Hk0efo3JNxUDKvz3HgP6EmN4rNGhr2D8boLsfTV/hGo7ZGAL8djw+jlg99zQyA==", +>>>>>>> 3f41db916efdd46069589e91f5886a4a01d11896 "dev": true }, "node_modules/error-ex": { diff --git a/Client/src/Components/Charts/Servers/serverStatus.css b/Client/src/Components/Charts/Servers/serverStatus.css index 9126d9b3b..f42ae2801 100644 --- a/Client/src/Components/Charts/Servers/serverStatus.css +++ b/Client/src/Components/Charts/Servers/serverStatus.css @@ -13,8 +13,6 @@ .server-status-tile { width: 230px; - margin: var(--spacing-general-0); - margin-left: 10px; padding: var(--spacing-general-1); border: 1px solid var(--color-border-0); border-radius: var(--border-radius-0); diff --git a/Client/src/Components/CurrentMonitors/index.css b/Client/src/Components/CurrentMonitors/index.css new file mode 100644 index 000000000..7b00b1cec --- /dev/null +++ b/Client/src/Components/CurrentMonitors/index.css @@ -0,0 +1,15 @@ +.current-monitors { + border: 1px solid #eaecf0; + padding: 40px; + border-radius: 4px; +} + +.current-monitors-title-holder { + display: flex; +} + +.current-monitors-title { + font-size: 1rem; + font-weight: bold; + margin-right: var(); +} diff --git a/Client/src/Components/CurrentMonitors/index.jsx b/Client/src/Components/CurrentMonitors/index.jsx new file mode 100644 index 000000000..bf376c832 --- /dev/null +++ b/Client/src/Components/CurrentMonitors/index.jsx @@ -0,0 +1,18 @@ +import "./index.css"; +import React from "react"; + +const CurrentMonitors = () => { + return ( +
+
+
+
Current monitors
+
5
+
+
+
+
+ ); +}; + +export default CurrentMonitors; diff --git a/Client/src/Components/DashboardMenu/index.jsx b/Client/src/Components/DashboardMenu/index.jsx index 716d68497..2d52139ff 100644 --- a/Client/src/Components/DashboardMenu/index.jsx +++ b/Client/src/Components/DashboardMenu/index.jsx @@ -1,56 +1,28 @@ -import LanguageIcon from "@mui/icons-material/Language"; -import ReportGmailerrorredIcon from "@mui/icons-material/ReportGmailerrorred"; -import SensorsIcon from "@mui/icons-material/Sensors"; -import SettingsIcon from "@mui/icons-material/Settings"; -import AllInclusiveIcon from "@mui/icons-material/AllInclusive"; -import SvgIcon from '@mui/material/SvgIcon'; -import './index.css'; +import "./index.css"; +import DashboardMenuButton from "../DashboardMenuButton"; + +import Monitors from "../../assets/Images/Icon-monitor-gray.png"; +import Incidents from "../../assets/Images/Icon-warning-gray.png"; +import SensorsIcon from "../../assets/Images/Icon-signal-gray.png"; +import AllInclusiveIcon from "../../assets/Images/Icon-link-gray.png"; +import SettingsIcon from "../../assets/Images/Icon-setting-gray.png"; /** * @component * DashboardMenu component displays a menu with icons and corresponding text. * Each menu item consists of an icon and a text label. - * + * * @returns {JSX.Element} The JSX element representing the DashboardMenu component. */ function DashboardMenu() { return ( -
-
- -
- Monitors -
-
- -
- -
- Incidents -
-
- -
- -
- Status Pages -
-
- -
- -
- Integrations -
-
- -
- -
- Settings -
-
+
+ {DashboardMenuButton(Monitors, "Monitors", "/monitors")} + {DashboardMenuButton(Incidents, "Incidents", "/incidents")} + {DashboardMenuButton(SensorsIcon, "Status Pages", "/status")} + {DashboardMenuButton(AllInclusiveIcon, "Integrations", "/integrations")} + {DashboardMenuButton(SettingsIcon, "Settings", "/settings")}
); } diff --git a/Client/src/Components/DashboardMenuButton/index.css b/Client/src/Components/DashboardMenuButton/index.css new file mode 100644 index 000000000..0966effc3 --- /dev/null +++ b/Client/src/Components/DashboardMenuButton/index.css @@ -0,0 +1,23 @@ +.icon-container { + padding: 8px 15px; +} + +.icon-container:hover { + background-color: var(--env-var-color-13); + border-radius: var(--env-var-radius-1); + cursor: pointer; +} + +.icon-container.active { + background-color: var(--env-var-color-13); + border-radius: var(--env-var-radius-1); +} + +.icon { + width: var(--env-var-img-width-1); +} + +.dashboard-menu-text { + font-size: var(--env-var-font-size-medium); + color: var(--env-var-color-12); +} diff --git a/Client/src/Components/DashboardMenuButton/index.jsx b/Client/src/Components/DashboardMenuButton/index.jsx new file mode 100644 index 000000000..a8bc5ccdf --- /dev/null +++ b/Client/src/Components/DashboardMenuButton/index.jsx @@ -0,0 +1,36 @@ +import "./index.css"; +import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; + +/** + * Renders a menu button with an icon and title. + * + * @component + * @param {React.ElementType} icon - The icon component to be rendered. + * @param {string} title - The title of the menu button. + * @returns {React.ReactElement} The rendered menu button component. + */ + +const DashboardMenuButton = (icon, title, to) => { + const [isActive, setIsActive] = useState(false); + const navigate = useNavigate(); + + const handleClick = () => { + setIsActive(!isActive); + navigate(to); + }; + + return ( +
+ Monitors +
+ {title} +
+
+ ); +}; + +export default DashboardMenuButton; diff --git a/Client/src/Components/DashboardSidebar/index.css b/Client/src/Components/DashboardSidebar/index.css index 43af36fbd..d53e02409 100644 --- a/Client/src/Components/DashboardSidebar/index.css +++ b/Client/src/Components/DashboardSidebar/index.css @@ -1,31 +1,34 @@ .dashboard-sidebar { - height: 100vh; - width: 250px; - background-color: #f4f4f4; - box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); - position: fixed; - top: 0; - left: 0; - display: flex; - flex-direction: column; - justify-content: space-between; - padding: 20px 0; - } - - .menu-container { - margin-top: 60px; - } - - .support-container { - display: flex; - align-items: center; - padding: 10px 20px; - margin-bottom: 40px; - } - - .support-text { - margin-left: 8px; - font-size: 16px; - color: #333; - } - \ No newline at end of file + height: 100vh; + width: 250px; + border: 1px solid var(--color-border-0); + border-radius: var(--border-radius-0); + position: fixed; + top: 0; + left: 0; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 20px 0; +} + +.menu-container { + margin-top: 60px; +} + +.support-container { + display: flex; + align-items: center; + padding: 28px 35px; + margin-bottom: 30px; +} + +.support-text { + font-size: var(--env-var-font-size-medium); + color: var(--env-var-color-12); +} + +.support-icon { + width: var(--env-var-img-width-1); + margin-right: 8px; +} diff --git a/Client/src/Components/DashboardSidebar/index.jsx b/Client/src/Components/DashboardSidebar/index.jsx index 846452dbc..6538501d7 100644 --- a/Client/src/Components/DashboardSidebar/index.jsx +++ b/Client/src/Components/DashboardSidebar/index.jsx @@ -1,12 +1,12 @@ -import DashboardMenu from '../../Components/DashboardMenu'; -import SupportIcon from '@mui/icons-material/Support'; -import SvgIcon from '@mui/material/SvgIcon'; -import './index.css'; +import DashboardMenu from "../../Components/DashboardMenu"; +import SvgIcon from "@mui/material/SvgIcon"; +import "./index.css"; +import SupportIcon from "../../assets/Images/Icon-support-gray.png"; /** * @component * DashboardSidebar component serves as a sidebar containing the DashboardMenu and a Support icon at the bottom. - * + * * @returns {JSX.Element} The JSX element representing the DashboardSidebar component. */ @@ -17,7 +17,7 @@ function DashboardSidebar() {
- + SupportIcon Support
diff --git a/Client/src/Components/NavBar/index.css b/Client/src/Components/NavBar/index.css index c99251fe0..b4a9a07ba 100644 --- a/Client/src/Components/NavBar/index.css +++ b/Client/src/Components/NavBar/index.css @@ -1 +1,32 @@ -/* NavBar Component Styles*/ \ No newline at end of file +/* NavBar Component Styles*/ +.icon-button-toggle { + display: flex; + align-items: center; + justify-content: center; +} + +.icon-button-avatar { + width: 25px; + height: 25px; + margin-right: var(--env-var-spacing-1); +} + +.icon-button-toggle-title { + font-size: var(--env-var-font-size-medium); + color: var(--env-var-color-5); + margin-right: var(--env-var-spacing-2); +} + +.icon-button-toggle-pic { + width: 10px; + height: 5px; +} + +#icon-button { + color: transparent; + -webkit-transition: none; + transition: none; + outline: none; + box-shadow: none; + background-color: transparent; +} diff --git a/Client/src/Components/NavBar/index.jsx b/Client/src/Components/NavBar/index.jsx index 2c255eae0..c0cb00ddc 100644 --- a/Client/src/Components/NavBar/index.jsx +++ b/Client/src/Components/NavBar/index.jsx @@ -1,18 +1,20 @@ -import { useState } from 'react'; -import AppBar from '@mui/material/AppBar'; -import Box from '@mui/material/Box'; -import Toolbar from '@mui/material/Toolbar'; -import IconButton from '@mui/material/IconButton'; -import Typography from '@mui/material/Typography'; -import Menu from '@mui/material/Menu'; -import MenuIcon from '@mui/icons-material/Menu'; -import Container from '@mui/material/Container'; -import Avatar from '@mui/material/Avatar'; -import Tooltip from '@mui/material/Tooltip'; -import MenuItem from '@mui/material/MenuItem'; -import { useTheme } from '@mui/material/styles'; +import "./index.css"; +import { useState } from "react"; +import AppBar from "@mui/material/AppBar"; +import Box from "@mui/material/Box"; +import Toolbar from "@mui/material/Toolbar"; +import IconButton from "@mui/material/IconButton"; +import Typography from "@mui/material/Typography"; +import Menu from "@mui/material/Menu"; +import MenuIcon from "@mui/icons-material/Menu"; +import Container from "@mui/material/Container"; +import Avatar from "@mui/material/Avatar"; +import Tooltip from "@mui/material/Tooltip"; +import MenuItem from "@mui/material/MenuItem"; +import { useTheme } from "@mui/material/styles"; +import ChevronDown from "../../assets/Images/Icon-chevron-down.png"; -const settings = ['Profile', 'Team', 'Invite Colleagues', 'Logout']; +const settings = ["Profile", "Team", "Invite Colleagues", "Logout"]; /** * NavBar component @@ -46,8 +48,15 @@ function NavBar() { }; return ( - - + + - UPTIME GENIE + Peak Watch - + UPTIME GENIE @@ -102,8 +110,25 @@ function NavBar() { - - + +
+ +
Jackie Dawn
+ ChevronDown +
{settings.map((setting) => ( - - {setting} + + + {setting} + ))} diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css index 3adc8ef22..1280fb080 100644 --- a/Client/src/Layouts/HomeLayout/index.css +++ b/Client/src/Layouts/HomeLayout/index.css @@ -1,11 +1,10 @@ .home-layout { - display: flex; - } - - .main-content { - margin-left: 250px; - flex: 1; - padding: 20px; - overflow-y: auto; - } - \ No newline at end of file + display: flex; +} + +.main-content { + margin-left: 250px; + flex: 1; + /* padding: 20px; */ + overflow-y: auto; +} diff --git a/Client/src/Layouts/HomeLayout/index.jsx b/Client/src/Layouts/HomeLayout/index.jsx index 7f0615907..851722d9b 100644 --- a/Client/src/Layouts/HomeLayout/index.jsx +++ b/Client/src/Layouts/HomeLayout/index.jsx @@ -1,7 +1,7 @@ -import NavBar from '../../Components/NavBar'; -import { Outlet } from 'react-router'; -import DashboardSidebar from '../../Components/DashboardSidebar'; -import './index.css'; +import NavBar from "../../Components/NavBar"; +import { Outlet } from "react-router"; +import DashboardSidebar from "../../Components/DashboardSidebar"; +import "./index.css"; const HomeLayout = () => { return ( @@ -10,8 +10,9 @@ const HomeLayout = () => {
+ ); -} +}; export default HomeLayout; diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css index e69de29bb..d6d272e7c 100644 --- a/Client/src/Pages/Monitors/index.css +++ b/Client/src/Pages/Monitors/index.css @@ -0,0 +1,24 @@ +.monitors { + width: 70vw; + padding: 4vw; +} + +.monitors-bar { + display: flex; + justify-content: space-between; + align-items: center; +} + +.monitors-bar-title { + font-size: 24px; + font-weight: 700; +} + +.monitors-stats { + display: flex; + justify-content: space-between; +} + +.monitors-gaps-medium { + height: var(--env-var-spacing-2); +} diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx index 6d4e3d59d..0c0555d5a 100644 --- a/Client/src/Pages/Monitors/index.jsx +++ b/Client/src/Pages/Monitors/index.jsx @@ -1,9 +1,30 @@ -import React from 'react' +import Button from "../../Components/Button"; +import ServerStatus from "../../Components/Charts/Servers/ServerStatus"; +import CurrentMonitors from "../../Components/CurrentMonitors"; +import "./index.css"; +import React from "react"; const Monitors = () => { - return ( -
Monitors
- ) -} + return ( +
+
+
Hello, Jackie
+
+
+
+ + + +
+
+ +
+ ); +}; -export default Monitors \ No newline at end of file +export default Monitors; diff --git a/Client/src/assets/Images/Icon-chevron-down.png b/Client/src/assets/Images/Icon-chevron-down.png new file mode 100644 index 000000000..fa3822cc8 Binary files /dev/null and b/Client/src/assets/Images/Icon-chevron-down.png differ diff --git a/Client/src/assets/Images/Icon-chevron-up.png b/Client/src/assets/Images/Icon-chevron-up.png new file mode 100644 index 000000000..e74961ac4 Binary files /dev/null and b/Client/src/assets/Images/Icon-chevron-up.png differ diff --git a/Client/src/assets/Images/Icon-link-gray.png b/Client/src/assets/Images/Icon-link-gray.png new file mode 100644 index 000000000..f31beb1dc Binary files /dev/null and b/Client/src/assets/Images/Icon-link-gray.png differ diff --git a/Client/src/assets/Images/Icon-monitor-gray.png b/Client/src/assets/Images/Icon-monitor-gray.png new file mode 100644 index 000000000..6bb16215a Binary files /dev/null and b/Client/src/assets/Images/Icon-monitor-gray.png differ diff --git a/Client/src/assets/Images/Icon-monitor-gray.svg b/Client/src/assets/Images/Icon-monitor-gray.svg new file mode 100644 index 000000000..f40f36433 --- /dev/null +++ b/Client/src/assets/Images/Icon-monitor-gray.svg @@ -0,0 +1,3 @@ + + + diff --git a/Client/src/assets/Images/Icon-setting-gray.png b/Client/src/assets/Images/Icon-setting-gray.png new file mode 100644 index 000000000..f77106c29 Binary files /dev/null and b/Client/src/assets/Images/Icon-setting-gray.png differ diff --git a/Client/src/assets/Images/Icon-signal-gray.png b/Client/src/assets/Images/Icon-signal-gray.png new file mode 100644 index 000000000..450c4b3f7 Binary files /dev/null and b/Client/src/assets/Images/Icon-signal-gray.png differ diff --git a/Client/src/assets/Images/Icon-support-gray.png b/Client/src/assets/Images/Icon-support-gray.png new file mode 100644 index 000000000..839bd5018 Binary files /dev/null and b/Client/src/assets/Images/Icon-support-gray.png differ diff --git a/Client/src/assets/Images/Icon-warning-gray.png b/Client/src/assets/Images/Icon-warning-gray.png new file mode 100644 index 000000000..ebdf81536 Binary files /dev/null and b/Client/src/assets/Images/Icon-warning-gray.png differ diff --git a/Client/src/index.css b/Client/src/index.css index b44125b2e..092992f09 100644 --- a/Client/src/index.css +++ b/Client/src/index.css @@ -25,6 +25,9 @@ --env-var-color-8: #fff; --env-var-color-9: #f2f2f2; --env-var-color-10: #175cd3; + --env-var-color-11: #5d6b98; + --env-var-color-12: #182230; + --env-var-color-13: #f9fafb; --env-var-radius-1: 4px; --env-var-radius-2: 8px; @@ -49,6 +52,9 @@ --env-var-default-1: 24px; --env-var-default-2: 40px; + + --env-var-shadow-1: 0px 4px 24px -4px rgba(16, 24, 40, 0.08), + 0px 3px 3px -3px rgba(16, 24, 40, 0.03); } a {