Merge remote-tracking branch 'upstream/master' into feat/registration-flow

2026-01-14 05:39:50 -06:00 · 2024-06-07 13:54:52 -07:00
parent 7f93c8aee0 2a7b1f6aaa
commit 19b69f231e
26 changed files with 360 additions and 140 deletions
--- a/Client/package-lock.json
+++ b/Client/package-lock.json
@@ -1424,10 +1424,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==",
-      "license": "MIT",
+>>>>>>> 3f41db916efdd46069589e91f5886a4a01d11896
      "dependencies": {
        "@babel/runtime": "^7.24.6",
        "@mui/base": "^5.0.0-beta.40",
@@ -2431,9 +2436,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": [
        {
@@ -2837,11 +2848,16 @@
      }
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.4.795",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.795.tgz",
-      "integrity": "sha512-hHo4lK/8wb4NUa+NJYSFyJ0xedNHiR6ylilDtb8NUW9d4dmBFmGiecYEKCEbti1wTNzbKXLfl4hPWEkAFbHYlw==",
-      "dev": true,
-      "license": "ISC"
+<<<<<<< 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": {
      "version": "1.3.2",
--- 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);
--- a/Client/src/Components/CurrentMonitors/index.css
+++ 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();
+}
--- a/Client/src/Components/CurrentMonitors/index.jsx
+++ b/Client/src/Components/CurrentMonitors/index.jsx
@@ -0,0 +1,18 @@
+import "./index.css";
+import React from "react";
+
+const CurrentMonitors = () => {
+  return (
+    <div className="current-monitors">
+      <div className="current-monitors-bar">
+        <div className="current-monitors-title-holder">
+          <div className="current-monitors-title">Current monitors</div>
+          <div className="current-monitors-counter">5</div>
+        </div>
+        <div className="current-monitors-search-bar"></div>
+      </div>
+    </div>
+  );
+};
+
+export default CurrentMonitors;
--- 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 (
-    <div className="dashboard-menu-container"> 
-      <div className="icon-container">
-        <SvgIcon component={LanguageIcon} />
-        <div className="text-container">
-          <span className="dashboard-menu-text">Monitors</span>
-        </div>
-      </div>
-
-      <div className="icon-container">
-        <SvgIcon component={ReportGmailerrorredIcon} />
-        <div className="text-container">
-          <span className="dashboard-menu-text">Incidents</span>
-        </div>
-      </div>
-
-      <div className="icon-container">
-        <SvgIcon component={SensorsIcon} />
-        <div className="text-container">
-          <span className="dashboard-menu-text">Status Pages</span>
-        </div>
-      </div>
-
-      <div className="icon-container">
-        <SvgIcon component={AllInclusiveIcon} />
-        <div className="text-container">
-          <span className="dashboard-menu-text">Integrations</span>
-        </div>
-      </div>
-
-      <div className="icon-container">
-        <SvgIcon component={SettingsIcon} />
-        <div className="text-container">
-          <span className="dashboard-menu-text">Settings</span>
-        </div>
-      </div>
+    <div className="dashboard-menu-container">
+      {DashboardMenuButton(Monitors, "Monitors", "/monitors")}
+      {DashboardMenuButton(Incidents, "Incidents", "/incidents")}
+      {DashboardMenuButton(SensorsIcon, "Status Pages", "/status")}
+      {DashboardMenuButton(AllInclusiveIcon, "Integrations", "/integrations")}
+      {DashboardMenuButton(SettingsIcon, "Settings", "/settings")}
    </div>
  );
 }
--- a/Client/src/Components/DashboardMenuButton/index.css
+++ 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);
+}
--- a/Client/src/Components/DashboardMenuButton/index.jsx
+++ 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 (
+    <div
+      className={`icon-container ${isActive ? "active" : ""}`}
+      onClick={handleClick}
+    >
+      <img className="icon" src={icon} alt="Monitors" />
+      <div className="text-container">
+        <span className="dashboard-menu-text">{title}</span>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardMenuButton;
--- 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; 
-  }
-  
+  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;
+}
--- 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() {
        <DashboardMenu />
      </div>
      <div className="support-container">
-        <SvgIcon component={SupportIcon} />
+        <img className="support-icon" src={SupportIcon} alt="SupportIcon" />
        <span className="support-text">Support</span>
      </div>
    </div>
--- a/Client/src/Components/NavBar/index.css
+++ b/Client/src/Components/NavBar/index.css
@@ -1 +1,32 @@
-/* NavBar Component Styles*/
+/* 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;
+}
--- 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 (
-    <AppBar position="fixed" sx={{ width: '100%' }}>
-      <Container maxWidth="xxl" sx={{ width: '100%' }}>
+    <AppBar
+      position="fixed"
+      sx={{
+        width: "100%",
+        backgroundColor: "white",
+        boxShadow: "var(--env-var-shadow-1)",
+      }}
+    >
+      <Container maxWidth="xxl" sx={{ width: "100%" }}>
        <Toolbar disableGutters>
          <Typography
            variant="h6"
@@ -56,18 +65,17 @@ function NavBar() {
            href="#"
            sx={{
              mr: 2,
-              display: { xs: 'none', md: 'flex' },
-              fontFamily: 'monospace',
+              display: { xs: "none", md: "flex" },
              fontWeight: theme.typography.fontWeightBold,
              letterSpacing: theme.spacing(0.3),
-              color: 'inherit',
-              textDecoration: 'none',
+              color: "var(--env-var-color-11)",
+              textDecoration: "none",
            }}
          >
-            UPTIME GENIE
+            Peak Watch
          </Typography>

-          <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
+          <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
            <IconButton
              size="large"
              aria-label="account of current user"
@@ -86,13 +94,13 @@ function NavBar() {
            href="#"
            sx={{
              mr: 2,
-              display: { xs: 'flex', md: 'none' },
+              display: { xs: "flex", md: "none" },
              flexGrow: 1,
-              fontFamily: 'monospace',
+              fontFamily: "monospace",
              fontWeight: theme.typography.fontWeightBold,
              letterSpacing: theme.spacing(0.3),
-              color: 'inherit',
-              textDecoration: 'none',
+              color: "inherit",
+              textDecoration: "none",
            }}
          >
            UPTIME GENIE
@@ -102,8 +110,25 @@ function NavBar() {

          <Box sx={{ flexGrow: 0 }}>
            <Tooltip title="Open settings">
-              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-                <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
+              <IconButton
+                id="icon-button"
+                onClick={handleOpenUserMenu}
+                sx={{ p: 0 }}
+              >
+                <div className="icon-button-toggle">
+                  <Avatar
+                    alt="Remy Sharp"
+                    src="/static/images/avatar/2.jpg"
+                    className="icon-button-avatar"
+                    style={{ width: "25px", height: "25px" }}
+                  />
+                  <div className="icon-button-toggle-title">Jackie Dawn</div>
+                  <img
+                    className="icon-button-toggle-pic"
+                    src={ChevronDown}
+                    alt="ChevronDown"
+                  />
+                </div>
              </IconButton>
            </Tooltip>
            <Menu
@@ -111,20 +136,29 @@ function NavBar() {
              id="menu-appbar"
              anchorEl={anchorElUser}
              anchorOrigin={{
-                vertical: 'top',
-                horizontal: 'right',
+                vertical: "top",
+                horizontal: "right",
              }}
              keepMounted
              transformOrigin={{
-                vertical: 'top',
-                horizontal: 'right',
+                vertical: "top",
+                horizontal: "right",
              }}
              open={Boolean(anchorElUser)}
              onClose={handleCloseUserMenu}
            >
              {settings.map((setting) => (
-                <MenuItem key={setting} onClick={handleCloseUserMenu}>
-                  <Typography textAlign="center">{setting}</Typography>
+                <MenuItem
+                  id="menu-item"
+                  key={setting}
+                  onClick={handleCloseUserMenu}
+                >
+                  <Typography
+                    fontSize="var(--env-var-font-size-medium)"
+                    textAlign="center"
+                  >
+                    {setting}
+                  </Typography>
                </MenuItem>
              ))}
            </Menu>
--- 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; 
-  }
-  
+  display: flex;
+}
+
+.main-content {
+  margin-left: 250px;
+  flex: 1;
+  /* padding: 20px;  */
+  overflow-y: auto;
+}
--- a/Client/src/Layouts/HomeLayout/index.jsx
+++ b/Client/src/Layouts/HomeLayout/index.jsx
@@ -22,6 +22,7 @@ const HomeLayout = () => {
        {token && <p>Email: {decodedToken.email}</p>}
        {/* I am a demo */}
      </div>
+      <Outlet />
    </div>
  );
 };
--- a/Client/src/Pages/Login/index.jsx
+++ b/Client/src/Pages/Login/index.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { useState } from "react";
 import "./index.css";
 import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
 import Logomark from "../../assets/Images/Logomark.png";
@@ -9,6 +9,24 @@ import Google from "../../assets/Images/Google.png";
 import PasswordTextField from "../../Components/TextFields/Password/PasswordTextField";

 const Login = () => {
+  const idMap = {
+    "login-email-input": "email",
+    "login-password-input": "password",
+  };
+
+  const [form, setForm] = useState({
+    email: "",
+    password: "",
+  });
+
+  const handleInput = (e) => {
+    const fieldName = idMap[e.target.id];
+    setForm({
+      ...form,
+      [fieldName]: e.target.value,
+    });
+  };
+
  return (
    <div className="login-page">
      <BackgroundPattern></BackgroundPattern>
@@ -25,15 +43,17 @@ const Login = () => {
        <div className="login-form-v3-spacing" />
        <div className="login-form-inputs">
          <EmailTextField
+            onChange={handleInput}
            error={false}
            placeholder="Enter your email"
            id="login-email-input"
          />
          <div className="login-form-v2-spacing" />
          <PasswordTextField
+            onChange={handleInput}
            error={false}
            placeholder="Password"
-            id="login-email-input"
+            id="login-password-input"
          />
        </div>
        <div className="login-form-v3-spacing" />
--- 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);
+}
--- 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 (
-        <div>Monitors</div>
-    )
-}
+  return (
+    <div className="monitors">
+      <div className="monitors-bar">
+        <div className="monitors-bar-title">Hello, Jackie</div>
+        <Button
+          level="primary"
+          label="Create new monitor"
+          sx={{ padding: "10px 20px", fontSize: "13px" }}
+        />
+      </div>
+      <div className="monitors-gaps-medium"></div>
+      <div className="monitors-stats">
+        <ServerStatus title="Up" value="4" state="up" />
+        <ServerStatus title="Down" value="0" state="down" />
+        <ServerStatus title="Paused" value="0" state="pause" />
+      </div>
+      <div className="monitors-gaps-medium"></div>
+      <CurrentMonitors />
+    </div>
+  );
+};

-export default Monitors
+export default Monitors;
--- a/Client/src/assets/Images/Icon-chevron-down.png
+++ b/Client/src/assets/Images/Icon-chevron-down.png
--- a/Client/src/assets/Images/Icon-chevron-up.png
+++ b/Client/src/assets/Images/Icon-chevron-up.png
--- a/Client/src/assets/Images/Icon-link-gray.png
+++ b/Client/src/assets/Images/Icon-link-gray.png
--- a/Client/src/assets/Images/Icon-monitor-gray.png
+++ b/Client/src/assets/Images/Icon-monitor-gray.png
--- a/Client/src/assets/Images/Icon-monitor-gray.svg
+++ b/Client/src/assets/Images/Icon-monitor-gray.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 11H21M1 11C1 16.5228 5.47715 21 11 21M1 11C1 5.47715 5.47715 1 11 1M21 11C21 16.5228 16.5228 21 11 21M21 11C21 5.47715 16.5228 1 11 1M11 1C13.5013 3.73835 14.9228 7.29203 15 11C14.9228 14.708 13.5013 18.2616 11 21M11 1C8.49872 3.73835 7.07725 7.29203 7 11C7.07725 14.708 8.49872 18.2616 11 21" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/Client/src/assets/Images/Icon-setting-gray.png
+++ b/Client/src/assets/Images/Icon-setting-gray.png
--- a/Client/src/assets/Images/Icon-signal-gray.png
+++ b/Client/src/assets/Images/Icon-signal-gray.png
--- a/Client/src/assets/Images/Icon-support-gray.png
+++ b/Client/src/assets/Images/Icon-support-gray.png
--- a/Client/src/assets/Images/Icon-warning-gray.png
+++ b/Client/src/assets/Images/Icon-warning-gray.png
--- 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 {