Merge branch 'develop' into feat/fe/statuspage-3

Client/src/Components/Inputs/Select/index.jsx

@@ -49,6 +49,7 @@ const Select = ({
 	onBlur,
 	sx,
 	name = "",
+	labelControlSpacing = 2,
 }) => {
 	const theme = useTheme();
 	const itemStyles = {
@@ -57,10 +58,10 @@ const Select = ({
 		borderRadius: theme.shape.borderRadius,
 		margin: theme.spacing(2),
 	};
-
+	
 	return (
 		<Stack
-			gap={theme.spacing(2)}
+			gap={theme.spacing(labelControlSpacing)}
 			className="select-wrapper"
 		>
 			{label && (
@@ -144,6 +145,7 @@ Select.propTypes = {
 	onChange: PropTypes.func.isRequired,
 	onBlur: PropTypes.func,
 	sx: PropTypes.object,
+	labelControlSpacing: PropTypes.number,
 };
 
 export default Select;

Client/src/Components/Sidebar/index.jsx

@@ -270,7 +270,11 @@ function Sidebar() {
 						Menu
 					</ListSubheader>
 				}
-				sx={{ px: theme.spacing(6) }}
+				sx={{ 
+					px: theme.spacing(6),
+					height: "100%",
+					overflow: "hidden"
+				}}
 			>
 				{menu.map((item) =>
 					item.path ? (

Client/src/Components/TabPanels/Account/PasswordPanel.jsx

@@ -28,6 +28,9 @@ const PasswordPanel = () => {
 	const theme = useTheme();
 	const dispatch = useDispatch();
 
+
+	const SPACING_GAP = theme.spacing(12); 
+
 	//redux state
 	const { authToken, isLoading } = useSelector((state) => state.auth);
 
@@ -139,7 +142,7 @@ const PasswordPanel = () => {
 					direction="row"
 					justifyContent={"flex-start"}
 					alignItems={"center"}
-					gap={theme.spacing(8)}
+					gap={SPACING_GAP} 
 					flexWrap={"wrap"}
 				>
 					<Typography
@@ -164,7 +167,7 @@ const PasswordPanel = () => {
 				<Stack
 					direction="row"
 					alignItems={"center"}
-					gap={theme.spacing(8)}
+					gap={SPACING_GAP} 
 					flexWrap={"wrap"}
 				>
 					<Typography
@@ -190,7 +193,7 @@ const PasswordPanel = () => {
 				<Stack
 					direction="row"
 					alignItems={"center"}
-					gap={theme.spacing(8)}
+					gap={SPACING_GAP} 
 					flexWrap={"wrap"}
 				>
 					<Typography

Client/src/Components/TabPanels/Account/ProfilePanel.jsx

@@ -29,6 +29,8 @@ import Dialog from "../../Dialog";
 const ProfilePanel = () => {
 	const theme = useTheme();
 	const dispatch = useDispatch();
+	
+	const SPACING_GAP = theme.spacing(12);
 
 	//redux state
 	const { user, authToken, isLoading } = useSelector((state) => state.auth);
@@ -223,9 +225,9 @@ const ProfilePanel = () => {
 				className="edit-profile-form"
 				noValidate
 				spellCheck="false"
-				gap={theme.spacing(20)}
+				gap={SPACING_GAP} 
 			>
-				<Stack direction="row">
+				<Stack direction="row" gap={SPACING_GAP}>
 					<Box flex={0.9}>
 						<Typography component="h1">First name</Typography>
 					</Box>
@@ -240,7 +242,7 @@ const ProfilePanel = () => {
 						flex={1}
 					/>
 				</Stack>
-				<Stack direction="row">
+				<Stack direction="row" gap={SPACING_GAP}>
 					<Box flex={0.9}>
 						<Typography component="h1">Last name</Typography>
 					</Box>
@@ -255,7 +257,7 @@ const ProfilePanel = () => {
 						flex={1}
 					/>
 				</Stack>
-				<Stack direction="row">
+				<Stack direction="row" gap={SPACING_GAP}>
 					<Stack flex={0.9}>
 						<Typography component="h1">Email</Typography>
 						<Typography
@@ -275,7 +277,7 @@ const ProfilePanel = () => {
 						flex={1}
 					/>
 				</Stack>
-				<Stack direction="row">
+				<Stack direction="row" gap={SPACING_GAP}>
 					<Stack flex={0.9}>
 						<Typography component="h1">Your photo</Typography>
 						<Typography

Client/src/Components/TabPanels/Account/TeamPanel.jsx

@@ -30,6 +30,8 @@ const TeamPanel = () => {
 
 	const theme = useTheme();
 
+	const SPACING_GAP = theme.spacing(12);
+
 	const { authToken, user } = useSelector((state) => state.auth);
 	//TODO
 	// const [orgStates, setOrgStates] = useState({
@@ -228,7 +230,7 @@ const TeamPanel = () => {
 			{/* <Stack component="form">
         <Box sx={{ alignSelf: "flex-start" }}>
           <Typography component="h1">Organization name</Typography>
-        </Box>
+        </Box>	
         <Stack
           direction="row"
           justifyContent="flex-end"
@@ -275,7 +277,7 @@ const TeamPanel = () => {
 				component="form"
 				noValidate
 				spellCheck="false"
-				gap={theme.spacing(12)}
+				gap={SPACING_GAP} 
 			>
 				<Typography component="h1">Team members</Typography>
 				<Stack
@@ -339,7 +341,7 @@ const TeamPanel = () => {
 				theme={theme}
 			>
 				<TextInput
-					marginBottom={theme.spacing(12)}
+					marginBottom={SPACING_GAP} 
 					type="email"
 					id="input-team-member"
 					placeholder="Email"

Client/src/Pages/AdvancedSettings/index.jsx

@@ -270,6 +270,7 @@ const AdvancedSettings = ({ isAdmin }) => {
 								onChange={handleJWTTTLUnits}
 								onBlur={handleBlur}
 								error={errors.jwtTTLUnits}
+								labelControlSpacing={0}
 							/>
 						</Stack>
 						<TextInput

Client/src/Pages/Infrastructure/CreateMonitor/index.jsx

@@ -210,8 +210,8 @@ const CreateInfrastructureMonitor = () => {
 		<Box className="create-infrastructure-monitor">
 			<Breadcrumbs
 				list={[
-					{ name: "Infrastructure monitors", path: "infrastructure" },
-					{ name: "create", path: `infrastructure/create` },
+					{ name: "Infrastructure monitors", path: "/infrastructure" },
+					{ name: "create", path: `/infrastructure/create` },
 				]}
 			/>
 			<Stack

Client/src/Utils/Theme/globalTheme.js

@@ -237,6 +237,11 @@ const baseTheme = (palette) => ({
 							WebkitTextFillColor: "unset",
 						},
 					},
+					"& .MuiInputBase-input:-webkit-autofill": {
+						transition: "background-color 5000s ease-in-out 0s", 
+						WebkitBoxShadow: `0 0 0px 1000px ${theme.palette.background.main} inset`, 
+						WebkitTextFillColor: theme.palette.text.primary,
+					},
 					"& .MuiInputBase-input.MuiOutlinedInput-input": {
 						padding: "0 var(--env-var-spacing-1-minus) !important",
 					},