Use IconBox consistently

Client/src/Pages/Auth/CheckEmail.jsx

@@ -5,10 +5,10 @@ import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router";
 import { createToast } from "../../Utils/toastUtils";
 import { forgotPassword } from "../../Features/Auth/authSlice";
-import { IconBox } from "./styled";
 import Background from "../../assets/Images/background-grid.svg?react";
 import EmailIcon from "../../assets/icons/email.svg?react";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
+import IconBox from "../../Components/IconBox";
 import "./index.css";
 
 const CheckEmail = () => {
@@ -144,9 +144,22 @@ const CheckEmail = () => {
 					textAlign="center"
 				>
 					<Box>
-						<IconBox>
-							<EmailIcon alt="email icon" />
-						</IconBox>
+						<Stack
+							direction="row"
+							justifyContent="center"
+						>
+							<IconBox
+								height={48}
+								width={48}
+								minWidth={48}
+								borderRadius={12}
+								svgWidth={24}
+								svgHeight={24}
+								mb={theme.spacing(4)}
+							>
+								<EmailIcon alt="email icon" />
+							</IconBox>
+						</Stack>
 						<Typography component="h1">Check your email</Typography>
 						<Typography>
 							We sent a password reset link to{" "}

Client/src/Pages/Auth/ForgotPassword.jsx

@@ -6,12 +6,12 @@ import { forgotPassword } from "../../Features/Auth/authSlice";
 import { useEffect, useState } from "react";
 import { credentials } from "../../Validation/validation";
 import { useNavigate } from "react-router-dom";
-import { IconBox } from "./styled";
 import TextInput from "../../Components/Inputs/TextInput";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
 import Key from "../../assets/icons/key.svg?react";
 import Background from "../../assets/Images/background-grid.svg?react";
 import LoadingButton from "@mui/lab/LoadingButton";
+import IconBox from "../../Components/IconBox";
 import "./index.css";
 
 const ForgotPassword = () => {
@@ -146,9 +146,22 @@ const ForgotPassword = () => {
 					textAlign="center"
 				>
 					<Box>
-						<IconBox>
-							<Key alt="password key icon" />
-						</IconBox>
+						<Stack
+							direction="row"
+							justifyContent="center"
+						>
+							<IconBox
+								height={48}
+								width={48}
+								minWidth={48}
+								borderRadius={12}
+								svgWidth={24}
+								svgHeight={24}
+								mb={theme.spacing(4)}
+							>
+								<Key alt="password key icon" />
+							</IconBox>
+						</Stack>
 						<Typography component="h1">Forgot password?</Typography>
 						<Typography>No worries, we&apos;ll send you reset instructions.</Typography>
 					</Box>

Client/src/Pages/Auth/NewPasswordConfirmed.jsx

@@ -4,10 +4,10 @@ import { useNavigate } from "react-router";
 import { useDispatch } from "react-redux";
 import { clearAuthState } from "../../Features/Auth/authSlice";
 import { clearUptimeMonitorState } from "../../Features/UptimeMonitors/uptimeMonitorsSlice";
-import { IconBox } from "./styled";
 import Background from "../../assets/Images/background-grid.svg?react";
 import ConfirmIcon from "../../assets/icons/check-outlined.svg?react";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
+import IconBox from "../../Components/IconBox";
 import "./index.css";
 
 const NewPasswordConfirmed = () => {
@@ -80,9 +80,22 @@ const NewPasswordConfirmed = () => {
 					textAlign="center"
 				>
 					<Box>
-						<IconBox>
-							<ConfirmIcon alt="password confirm icon" />
-						</IconBox>
+						<Stack
+							direction="row"
+							justifyContent="center"
+						>
+							<IconBox
+								height={48}
+								width={48}
+								minWidth={48}
+								borderRadius={12}
+								svgWidth={24}
+								svgHeight={24}
+								mb={theme.spacing(4)}
+							>
+								<ConfirmIcon alt="password confirm icon" />
+							</IconBox>
+						</Stack>
 						<Typography component="h1">Password reset</Typography>
 						<Typography mb={theme.spacing(2)}>
 							Your password has been successfully reset. Click below to log in magically.
@@ -91,7 +104,7 @@ const NewPasswordConfirmed = () => {
 					<Button
 						variant="contained"
 						color="primary"
-						onClick={() => navigate("/monitors")}
+						onClick={() => navigate("/uptime")}
 						sx={{
 							width: "100%",
 							maxWidth: 400,

Client/src/Pages/Auth/SetNewPassword.jsx

@@ -11,8 +11,7 @@ import { credentials } from "../../Validation/validation";
 import Check from "../../Components/Check/Check";
 import TextInput from "../../Components/Inputs/TextInput";
 import { PasswordEndAdornment } from "../../Components/Inputs/TextInput/Adornments";
-
-import { IconBox } from "./styled";
+import IconBox from "../../Components/IconBox";
 import LockIcon from "../../assets/icons/lock.svg?react";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
 import Background from "../../assets/Images/background-grid.svg?react";
@@ -126,9 +125,22 @@ const SetNewPassword = () => {
 					textAlign="center"
 				>
 					<Box>
-						<IconBox>
-							<LockIcon alt="lock icon" />
-						</IconBox>
+						<Stack
+							direction="row"
+							justifyContent="center"
+						>
+							<IconBox
+								height={48}
+								width={48}
+								minWidth={48}
+								borderRadius={12}
+								svgWidth={24}
+								svgHeight={24}
+								mb={theme.spacing(4)}
+							>
+								<LockIcon alt="lock icon" />
+							</IconBox>
+						</Stack>
 						<Typography component="h1">Set new password</Typography>
 						<Typography>
 							Your new password must be different to previously used passwords.

Client/src/Pages/Auth/styled.jsx

@@ -1,26 +0,0 @@
-import { Box, styled } from "@mui/material";
-
-export const IconBox = styled(Box)(({ theme }) => ({
-	height: 48,
-	minWidth: 48,
-	width: 48,
-	position: "relative",
-	border: 1,
-	borderStyle: "solid",
-	borderColor: theme.palette.border.dark,
-	borderRadius: 12,
-	backgroundColor: theme.palette.background.accent,
-	margin: "auto",
-	marginBottom: 8,
-	"& svg": {
-		position: "absolute",
-		top: "50%",
-		left: "50%",
-		transform: "translate(-50%, -50%)",
-		width: 24,
-		height: 24,
-		"& path": {
-			stroke: theme.palette.text.tertiary,
-		},
-	},
-}));

Client/src/Pages/PageSpeed/Details/index.jsx

@@ -5,7 +5,7 @@ import { useTheme } from "@emotion/react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { formatDurationRounded, formatDurationSplit } from "../../../Utils/timeUtils";
-import { ChartBox, IconBox, StatBox } from "./styled";
+import { ChartBox, StatBox } from "./styled";
 import { logger } from "../../../Utils/Logger";
 import { networkService } from "../../../main";
 import SkeletonLayout from "./skeleton";
@@ -22,6 +22,7 @@ import PieChart from "./Charts/PieChart";
 import useUtils from "../../Uptime/utils";
 import "./index.css";
 import { useIsAdmin } from "../../../Hooks/useIsAdmin";
+import IconBox from "../../../Components/IconBox";
 
 const PageSpeedDetails = () => {
 	const theme = useTheme();

Client/src/Pages/PageSpeed/Details/styled.jsx

@@ -41,29 +41,6 @@ export const ChartBox = styled(Stack)(({ theme }) => ({
 	},
 }));
 
-export const IconBox = styled(Box)(({ theme }) => ({
-	height: 34,
-	minWidth: 34,
-	width: 34,
-	position: "relative",
-	border: 1,
-	borderStyle: "solid",
-	borderColor: theme.palette.border.dark,
-	borderRadius: 4,
-	backgroundColor: theme.palette.background.accent,
-	"& svg": {
-		position: "absolute",
-		top: "50%",
-		left: "50%",
-		transform: "translate(-50%, -50%)",
-		width: 20,
-		height: 20,
-		"& path": {
-			stroke: theme.palette.text.tertiary,
-		},
-	},
-}));
-
 export const StatBox = styled(Box)(({ theme }) => ({
 	padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
 	minWidth: 200,

Client/src/Pages/PageSpeed/card.jsx

@@ -4,13 +4,12 @@ import { StatusLabel } from "../../Components/Label";
 import { Box, Grid, Stack, Typography } from "@mui/material";
 import { useNavigate } from "react-router";
 import { useTheme } from "@emotion/react";
-import { IconBox } from "./Details/styled";
 import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip } from "recharts";
 import { useSelector } from "react-redux";
 import { formatDateWithTz, formatDurationSplit } from "../../Utils/timeUtils";
 import useUtils from "../Uptime/utils";
 import { useState } from "react";
-
+import IconBox from "../../Components/IconBox";
 /**
  * CustomToolTip displays a tooltip with formatted date and score information.
  * @param {Object} props

Client/src/Pages/Uptime/Details/index.jsx

@@ -26,14 +26,14 @@ import HistoryIcon from "../../../assets/icons/history-icon.svg?react";
 import PaginationTable from "./PaginationTable";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import PulseDot from "../../../Components/Animated/PulseDot";
-import { StatBox, ChartBox, IconBox } from "./styled";
+import { StatBox, ChartBox } from "./styled";
 import { DownBarChart, ResponseGaugeChart, UpBarChart } from "./Charts";
 import SkeletonLayout from "./skeleton";
 import "./index.css";
 import useUtils from "../utils";
 import { formatDateWithTz } from "../../../Utils/timeUtils";
 import { useIsAdmin } from "../../../Hooks/useIsAdmin";
-
+import IconBox from "../../../Components/IconBox";
 /**
  * Details page component displaying monitor details and related information.
  * @component

Client/src/Pages/Uptime/Details/styled.jsx

@@ -44,29 +44,6 @@ export const ChartBox = styled(Stack)(({ theme }) => ({
 	},
 }));
 
-export const IconBox = styled(Box)(({ theme }) => ({
-	height: 34,
-	minWidth: 34,
-	width: 34,
-	position: "relative",
-	border: 1,
-	borderStyle: "solid",
-	borderColor: theme.palette.border.dark,
-	borderRadius: 4,
-	backgroundColor: theme.palette.background.accent,
-	"& svg": {
-		position: "absolute",
-		top: "50%",
-		left: "50%",
-		transform: "translate(-50%, -50%)",
-		width: 20,
-		height: 20,
-		"& path": {
-			stroke: theme.palette.text.tertiary,
-		},
-	},
-}));
-
 export const StatBox = styled(Box)(({ theme }) => ({
 	padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
 	minWidth: 200,