diff --git a/Client/index.html b/Client/index.html index 95d113e91..2b6c6b546 100644 --- a/Client/index.html +++ b/Client/index.html @@ -5,7 +5,7 @@ - Uptime Genie + BlueWave Uptime @@ -13,4 +13,4 @@ - \ No newline at end of file + diff --git a/Client/src/Components/Avatar/index.jsx b/Client/src/Components/Avatar/index.jsx index ebb669cf6..4f4351508 100644 --- a/Client/src/Components/Avatar/index.jsx +++ b/Client/src/Components/Avatar/index.jsx @@ -35,7 +35,8 @@ const Avatar = ({ src, small, sx }) => { src ? src : user?.avatarImage ? image : "/static/images/avatar/2.jpg" } sx={{ - fontSize: small ? "13px" : "20px", + fontSize: small ? "13px" : "22px", + fontWeight: 400, display: "inline-flex", "&::before": { content: `""`, diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css index 5e2a7424e..fd1f75b53 100644 --- a/Client/src/Components/BasicTable/index.css +++ b/Client/src/Components/BasicTable/index.css @@ -1,36 +1,31 @@ -.MuiTable-root .host-row { - display: flex; - align-items: center; -} -.MuiTable-root .host-row a { +.MuiTable-root .host a { width: var(--env-var-img-width-2); height: var(--env-var-img-width-2); color: var(--env-var-color-5); margin-right: 10px; - margin-bottom: 2px; } -.MuiTable-root .host-row a svg { +.MuiTable-root .host a svg { width: var(--env-var-font-size-large); height: var(--env-var-font-size-large); } -.MuiTable-root .host-row .host-percentage { - font-size: var(--env-var-font-size-small); -} - -.MuiTable-root .label { - border-color: var(--env-var-color-4); - border-radius: var(--env-var-radius-2); - padding: calc(var(--env-var-spacing-1) / 2); -} - -.MuiTable-root .host-name { +.MuiTable-root .host div:nth-child(2) { width: fit-content; - margin-right: 10px; font-weight: 700; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } +.MuiTable-root .host div:nth-child(2) span { + font-size: var(--env-var-font-size-small); + margin-left: 10px; +} + +.MuiTable-root .label { + line-height: 1; + border-radius: var(--env-var-radius-2); + padding: 7px; + font-size: var(--env-var-font-size-small-plus); +} .MuiPaper-root:has(table.MuiTable-root) { box-shadow: none; @@ -85,7 +80,11 @@ .MuiPaper-root + .MuiPagination-root ul { justify-content: center; } -.MuiPaper-root + .MuiPagination-root ul li button { +.MuiPaper-root + + .MuiPagination-root + ul + li:not(:first-child):not(:last-child) + button { font-size: var(--env-var-font-size-medium); color: var(--env-var-color-5); font-weight: 500; @@ -123,6 +122,6 @@ .MuiPaper-root + .MuiPagination-root .MuiPaginationItem-root.Mui-selected { background-color: var(--env-var-color-15); } -.MuiPaper-root + .MuiPagination-root div.MuiPaginationItem-root{ +.MuiPaper-root + .MuiPagination-root div.MuiPaginationItem-root { user-select: none; } diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx index 2a580d512..3f89de700 100644 --- a/Client/src/Components/BasicTable/index.jsx +++ b/Client/src/Components/BasicTable/index.jsx @@ -135,7 +135,9 @@ const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => { {displayData.map((row) => { return ( diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/index.jsx index 9078e2497..bba101dc1 100644 --- a/Client/src/Components/Button/index.jsx +++ b/Client/src/Components/Button/index.jsx @@ -72,7 +72,8 @@ const Button = ({ onClick={onClick} disableRipple sx={{ - lineHeight: 1, + lineHeight: 1.5, + fontWeight: 400, boxShadow: "none", textTransform: "none", "&:focus": { diff --git a/Client/src/Components/Charts/ResponseTimeChart/index.jsx b/Client/src/Components/Charts/ResponseTimeChart/index.jsx index d76abc196..063ce3b16 100644 --- a/Client/src/Components/Charts/ResponseTimeChart/index.jsx +++ b/Client/src/Components/Charts/ResponseTimeChart/index.jsx @@ -8,7 +8,12 @@ const ResponseTimeChart = ({ checks = [] }) => { return (
- + {normalizedChecks.map((check, index) => ( { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - return ( -
+
{title}
{value}
diff --git a/Client/src/Components/Inputs/Field/index.css b/Client/src/Components/Inputs/Field/index.css index c08c8876e..3e2435694 100644 --- a/Client/src/Components/Inputs/Field/index.css +++ b/Client/src/Components/Inputs/Field/index.css @@ -24,6 +24,7 @@ .field h3.MuiTypography-root span.field-optional { opacity: 0.6; margin-left: 4px; + font-weight: 400; } .field h5.MuiTypography-root { position: relative; diff --git a/Client/src/Components/Inputs/Select/index.css b/Client/src/Components/Inputs/Select/index.css index 1e8e4e354..1952feb43 100644 --- a/Client/src/Components/Inputs/Select/index.css +++ b/Client/src/Components/Inputs/Select/index.css @@ -15,6 +15,9 @@ font-size: var(--env-var-font-size-medium); color: var(--env-var-color-5); } +.select-wrapper h3.MuiTypography-root{ + font-weight: 500; +} .MuiInputBase-root:has(> .MuiSelect-select) fieldset { border-color: var(--env-var-color-29); } diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx index 2fba0b4a7..331d68900 100644 --- a/Client/src/Components/Label/index.jsx +++ b/Client/src/Components/Label/index.jsx @@ -134,6 +134,7 @@ const StatusLabel = ({ status, text, customStyles }) => { {setting} diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx index 699624528..07bbf6e68 100644 --- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx +++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx @@ -34,7 +34,7 @@ import Select from "../../Inputs/Select"; const TeamPanel = () => { const theme = useTheme(); - const { authToken } = useSelector((state) => state.auth); + const { authToken, user } = useSelector((state) => state.auth); //TODO const [orgStates, setOrgStates] = useState({ name: "Bluewave Labs", @@ -65,7 +65,7 @@ const TeamPanel = () => { }; fetchTeam(); - }, []); + }, [user]); useEffect(() => { let team = members; diff --git a/Client/src/Features/Auth/authSlice.js b/Client/src/Features/Auth/authSlice.js index 2b75c8d33..a30c295d9 100644 --- a/Client/src/Features/Auth/authSlice.js +++ b/Client/src/Features/Auth/authSlice.js @@ -61,7 +61,7 @@ export const update = createAsyncThunk( form.deleteProfileImage && fd.append("deleteProfileImage", form.deleteProfileImage); - const res = await axiosInstance.post(`/auth/user/${user._id}`, fd, { + const res = await axiosInstance.put(`/auth/user/${user._id}`, fd, { headers: { Authorization: `Bearer ${token}`, "Content-Type": "multipart/form-data", @@ -185,9 +185,7 @@ const handleForgotRejected = (state, action) => { const handleNewPasswordRejected = (state, action) => { state.isLoading = false; state.success = false; - state.msg = action.payload - ? action.payload.msg - : "Failed to reset password."; + state.msg = action.payload ? action.payload.msg : "Failed to reset password."; }; const authSlice = createSlice({ diff --git a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js index 05c182f5f..52a02cd55 100644 --- a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js +++ b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js @@ -77,9 +77,9 @@ export const updateUptimeMonitor = createAsyncThunk( name: monitor.name, description: monitor.description, interval: monitor.interval, - notifications: monitor.notifications + notifications: monitor.notifications, }; - const res = await axiosInstance.post( + const res = await axiosInstance.put( `/monitors/edit/${monitor._id}`, updatedFields, { @@ -104,16 +104,12 @@ export const deleteUptimeMonitor = createAsyncThunk( async (data, thunkApi) => { try { const { authToken, monitor } = data; - const res = await axiosInstance.post( - `/monitors/delete/${monitor._id}`, - {}, - { - headers: { - Authorization: `Bearer ${authToken}`, - "Content-Type": "application/json", - }, - } - ); + const res = await axiosInstance.delete(`/monitors/${monitor._id}`, { + headers: { + Authorization: `Bearer ${authToken}`, + "Content-Type": "application/json", + }, + }); return res.data; } catch (error) { if (error.response && error.response.data) { diff --git a/Client/src/Pages/Account/index.css b/Client/src/Pages/Account/index.css index 29d41aeff..c05cc01e7 100644 --- a/Client/src/Pages/Account/index.css +++ b/Client/src/Pages/Account/index.css @@ -31,7 +31,7 @@ .account .MuiButtonGroup-root button { border-color: var(--env-var-color-16); } -.account button{ +.account button:not(.MuiIconButton-root) { height: 34px; } .account [class$="-form"] { @@ -70,7 +70,6 @@ align-items: center; } - /* for testing, will remove later */ @media only screen and (max-width: 1600px) { .edit-profile-form__wrapper .MuiStack-root:not(.row-stack), @@ -106,4 +105,4 @@ } .edit-team-form .MuiTableBody-root .MuiTableCell-root { padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2) !important; -} \ No newline at end of file +} diff --git a/Client/src/Pages/Account/index.jsx b/Client/src/Pages/Account/index.jsx index 05a5d1761..db08ec3a2 100644 --- a/Client/src/Pages/Account/index.jsx +++ b/Client/src/Pages/Account/index.jsx @@ -51,15 +51,12 @@ const Account = ({ open = "profile" }) => { minWidth: "fit-content", minHeight: 0, paddingLeft: "0", - paddingY: "10px", - marginRight: "20px", + paddingY: theme.gap.small, + fontWeight: 400, + marginRight: theme.gap.ml, "&:focus": { outline: "none", }, - "& .MuiTouchRipple-root": { - pointerEvents: "none", - display: "none", - }, }} /> ))} diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx index b40ad966c..d40cb078b 100644 --- a/Client/src/Pages/Auth/Login.jsx +++ b/Client/src/Pages/Auth/Login.jsx @@ -158,9 +158,9 @@ const Login = () => { } label="Remember me" /> - navigate("/forgot-password")}> + navigate("/forgot-password")}> Forgot password - + @@ -179,13 +179,13 @@ const Login = () => { Don't have an account? - { navigate("/register"); }} > Sign up - + diff --git a/Client/src/Pages/Auth/index.css b/Client/src/Pages/Auth/index.css index c9fa48fe5..4f2767f54 100644 --- a/Client/src/Pages/Auth/index.css +++ b/Client/src/Pages/Auth/index.css @@ -103,7 +103,7 @@ /* ///// */ .login-page .MuiStack-root:not(:has(> .MuiButtonBase-root)) - span:not(.MuiTypography-root):not(.field-required) { + > span:not(.field-required):not(.input-error) { color: var(--env-var-color-3); cursor: pointer; font-weight: 600; diff --git a/Client/src/Pages/Incidents/index.css b/Client/src/Pages/Incidents/index.css index 9d2ba8ee0..1b1d2f364 100644 --- a/Client/src/Pages/Incidents/index.css +++ b/Client/src/Pages/Incidents/index.css @@ -1,12 +1,16 @@ -.incidents h1.MuiTypography-root { +.incidents h1.MuiTypography-root, +.incidents p.MuiTypography-root { color: var(--env-var-color-5); } .incidents h1.MuiTypography-root { font-size: var(--env-var-font-size-large); font-weight: 600; } -.incidents button.MuiButtonBase-root { +.incidents button.MuiButtonBase-root, +.incidents p.MuiTypography-root { font-size: var(--env-var-font-size-medium); +} +.incidents button.MuiButtonBase-root { height: 34px; border-color: var(--env-var-color-16); } @@ -14,4 +18,4 @@ /* remove later */ .incidents .MuiSelect-select { padding: 0 10px; -} \ No newline at end of file +} diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index 72ecef9dd..e245e0b6c 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -1,18 +1,20 @@ import { useState, useEffect } from "react"; import { useSelector } from "react-redux"; -import { Typography, ButtonGroup, Stack } from "@mui/material"; - +import { Typography, ButtonGroup, Stack, Box } from "@mui/material"; +import WestRoundedIcon from "@mui/icons-material/WestRounded"; import Button from "../../Components/Button"; import axiosInstance from "../../Utils/axiosConfig"; import BasicTable from "../../Components/BasicTable"; import { StatusLabel } from "../../Components/Label"; import { useTheme } from "@emotion/react"; +import { useNavigate } from "react-router"; +import Select from "../../Components/Inputs/Select"; import "./index.css"; -import Select from "../../Components/Inputs/Select"; const Incidents = () => { const theme = useTheme(); + const navigate = useNavigate(); const authState = useSelector((state) => state.auth); const [monitors, setMonitors] = useState({}); const [selectedMonitor, setSelectedMonitor] = useState("0"); @@ -58,13 +60,19 @@ const Incidents = () => { setSelectedMonitor(event.target.value); }; let incidents = []; + let hasAnyIncidents = false; + let hasSpecificIncidents = false; if (selectedMonitor === "0") { Object.values(monitors).forEach((monitor) => { incidents = incidents.concat(monitor.checks); }); + if (incidents.length !== 0) hasAnyIncidents = true; + hasSpecificIncidents = hasAnyIncidents; } else { const monitor = monitors[selectedMonitor]; incidents = monitor.checks; + if (incidents.length !== 0) hasSpecificIncidents = true; + hasAnyIncidents = true; } incidents = incidents .sort((a, b) => { @@ -92,48 +100,83 @@ const Incidents = () => { data.rows = incidents; return ( - - - Incident history for: - + {hasAnyIncidents && hasSpecificIncidents && ( + +