Moved toast notif to top right and some other small fixes

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

@@ -120,6 +120,10 @@ const Field = forwardRef(
           inputProps={{
             sx: {
               color: theme.palette.text.secondary,
+              "&:-webkit-autofill": {
+                WebkitBoxShadow: `0 0 0 100px ${theme.palette.background.fill} inset`,
+                WebkitTextFillColor: theme.palette.text.secondary,
+              },
             },
           }}
           sx={

Client/src/Pages/Auth/index.css

@@ -8,7 +8,6 @@
 }
 .auth button:not(.MuiIconButton-root),
 .auth p,
-.auth .field input,
 .auth span {
   font-size: var(--env-var-font-size-medium-plus);
 }

Client/src/Pages/Monitors/Configure/skeleton.jsx

@@ -12,8 +12,8 @@ const SkeletonLayout = () => {
   return (
     <>
       <Skeleton variant="rounded" width="15%" height={34} />
-      <Stack gap={theme.gap.xl} mt={theme.gap.medium}>
-        <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
+      <Stack gap={theme.spacing(20)} mt={theme.spacing(6)}>
+        <Stack direction="row" gap={theme.spacing(4)} mt={theme.spacing(4)}>
           <Skeleton
             variant="circular"
             style={{ minWidth: 24, minHeight: 24 }}
@@ -23,13 +23,13 @@ const SkeletonLayout = () => {
               variant="rounded"
               width="50%"
               height={24}
-              sx={{ mb: theme.gap.small }}
+              sx={{ mb: theme.spacing(4) }}
             />
             <Skeleton variant="rounded" width="50%" height={18} />
           </Box>
           <Stack
             direction="row"
-            gap={theme.gap.medium}
+            gap={theme.spacing(6)}
             sx={{
               ml: "auto",
               alignSelf: "flex-end",

Client/src/Utils/Theme/darkTheme.js

@@ -23,16 +23,17 @@ const shadow =
 const darkTheme = createTheme({
   typography: { fontFamily: fontFamilyDefault, fontSize: 13 },
   palette: {
+    mode: "dark",
     common: { main: "#1570ef" },
     text: text,
     background: background,
     border: border,
     info: {
-      text: "#475467",
-      main: "#475467",
-      bg: "#ffffff",
-      light: "#ffffff",
-      border: "#D0D5DD",
+      text: text.primary,
+      main: text.primary,
+      bg: background.main,
+      light: background.main,
+      border: border.light,
     },
     success: {
       text: "#079455",

Client/src/Utils/Theme/lightTheme.js

@@ -22,7 +22,6 @@ const shadow =
 const lightTheme = createTheme({
   typography: { fontFamily: fontFamilyDefault, fontSize: 13 },
   palette: {
-    mode: "dark",
     common: { main: "#1570ef" },
     text: text,
     background: background,

Client/src/Utils/toastUtils.jsx

@@ -19,7 +19,7 @@ export const createToast = ({
   config = {},
 }) => {
   const toastConfig = {
-    position: "bottom-right",
+    position: "top-right",
     autoClose: 3000,
     hideProgressBar: true,
     closeButton: false,

Client/src/index.css

@@ -67,6 +67,8 @@ body {
 }
 .Toastify__toast-body .alert {
   min-width: 150px;
+  padding: 5px 10px;
+  align-items: center;
 }
 .Toastify [class^="Toastify__toast"] {
   padding: 0;
@@ -76,6 +78,9 @@ body {
   min-height: 0;
   border-radius: 4px;
 }
+.Toastify [class*="Toastify__toast-theme"] {
+  background-color: transparent;
+}
 
 .MuiTouchRipple-root {
   display: none;