Fixed panels darkmode styles

Client/src/Components/Avatar/index.jsx

@@ -64,10 +64,10 @@ const Avatar = ({ src, small, sx }) => {
         "&::before": {
           content: `""`,
           position: "absolute",
-          top: "0",
-          left: "0",
-          width: `calc(100% - ${border * 2}px)`,
-          height: `calc(100% - ${border * 2}px)`,
+          top: 0,
+          left: 0,
+          width: `100%`,
+          height: `100%`,
           border: `${border}px solid rgba(255,255,255,0.2)`,
           borderRadius: "50%",
         },

Client/src/Components/ProgressBars/index.jsx

@@ -44,7 +44,7 @@ const ProgressUpload = ({
         borderRadius: theme.shape.borderRadius,
         border: 1,
         borderColor: theme.palette.border.light,
-        backgroundColor: "#fafafa",
+        backgroundColor: theme.palette.background.fill,
         "&:has(.input-error)": {
           borderColor: theme.palette.error.main,
           backgroundColor: theme.palette.error.bg,
@@ -62,23 +62,35 @@ const ProgressUpload = ({
         direction="row"
         mb={error ? 0 : theme.spacing(5)}
         gap={theme.spacing(5)}
-        alignItems={error ? "center" : "flex-end"}
+        alignItems={error ? "center" : "flex-start"}
       >
         {error ? (
           <ErrorOutlineOutlinedIcon />
         ) : icon ? (
-          <IconButton
+          <Box
             sx={{
+              position: "relative",
+              height: 30,
+              minWidth: 30,
+              border: 1,
+              borderColor: theme.palette.border.dark,
+              borderRadius: 2,
               backgroundColor: theme.palette.background.main,
-              pointerEvents: "none",
-              borderRadius: theme.shape.borderRadius,
-              border: 2,
-              borderColor: theme.palette.border.light,
-              boxShadow: theme.shape.boxShadow,
+              "& svg": {
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                width: 23,
+                height: 23,
+                "& path": {
+                  fill: theme.palette.other.icon,
+                },
+              },
             }}
           >
             {icon}
-          </IconButton>
+          </Box>
         ) : (
           ""
         )}

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

@@ -414,12 +414,12 @@ const ProfilePanel = () => {
             top: "50%",
             left: "50%",
             transform: "translate(-50%, -50%)",
-            width: 450,
+            width: 475,
             bgcolor: theme.palette.background.main,
             border: 1,
             borderColor: theme.palette.border.light,
             borderRadius: theme.shape.borderRadius,
-            boxShadow: 24,
+            boxShadow: theme.shape.boxShadow,
             p: theme.spacing(15),
             "&:focus": {
               outline: "none",

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

@@ -1,6 +1,13 @@
 import { useTheme } from "@emotion/react";
 import TabPanel from "@mui/lab/TabPanel";
-import { Button, ButtonGroup, Modal, Stack, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  Modal,
+  Stack,
+  Typography,
+} from "@mui/material";
 import { useEffect, useState } from "react";
 import Field from "../../Inputs/Field";
 import { credentials } from "../../../Validation/validation";
@@ -88,7 +95,7 @@ const TeamPanel = () => {
               id: idx,
               data: (
                 <Stack>
-                  <Typography style={{ color: theme.palette.text.secondary }}>
+                  <Typography color={theme.palette.text.secondary}>
                     {member.firstName + " " + member.lastName}
                   </Typography>
                   <Typography>
@@ -322,7 +329,6 @@ const TeamPanel = () => {
         aria-describedby="invite-member-to-team"
         open={isOpen}
         onClose={closeInviteModal}
-        disablePortal
       >
         <Stack
           gap={theme.spacing(5)}
@@ -331,29 +337,38 @@ const TeamPanel = () => {
             top: "50%",
             left: "50%",
             transform: "translate(-50%, -50%)",
-            width: 400,
+            width: 450,
             bgcolor: theme.palette.background.main,
             border: 1,
             borderColor: theme.palette.border.light,
             borderRadius: theme.shape.borderRadius,
-            boxShadow: 24,
+            boxShadow: theme.shape.boxShadow,
             p: theme.spacing(15),
             "&:focus": {
               outline: "none",
             },
           }}
         >
-          <Typography id="modal-invite-member" component="h1">
-            Invite new team member
-          </Typography>
-          <Typography
-            id="invite-member-to-team"
-            component="p"
-            sx={{ mb: theme.spacing(6) }}
-          >
-            When you add a new team member, they will get access to all
-            monitors.
-          </Typography>
+          <Box>
+            <Typography
+              id="modal-invite-member"
+              component="h1"
+              fontWeight={600}
+              fontColor={theme.palette.text.secondary}
+            >
+              Invite new team member
+            </Typography>
+            <Typography
+              id="invite-member-to-team"
+              component="p"
+              fontSize={13}
+              color={theme.palette.text.accent}
+              sx={{ mt: theme.spacing(1), mb: theme.spacing(4) }}
+            >
+              When you add a new team member, they will get access to all
+              monitors.
+            </Typography>
+          </Box>
           <Field
             type="email"
             id="input-team-member"

Client/src/Utils/Theme/darkTheme.js

@@ -18,7 +18,7 @@ const border = { light: "#27272a", dark: "#36363e" };
 const fontFamilyDefault =
   '"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif';
 const shadow =
-  "0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)";
+  "0px 4px 24px -4px rgba(255, 255, 255, 0.03), 0px 3px 3px -3px rgba(255, 255, 255, 0.01)";
 
 const darkTheme = createTheme({
   typography: { fontFamily: fontFamilyDefault, fontSize: 13 },

Client/src/index.css

@@ -56,12 +56,6 @@ html {
     0px 3px 3px -3px rgba(16, 24, 40, 0.03);
 }
 
-body {
-  margin: 0;
-  min-width: 320px;
-  height: 100%;
-}
-
 .MuiInputBase-root.Mui-disabled input {
   cursor: not-allowed;
 }