fix in app theme

Author: wiseaidev

src/App.jsx

@@ -197,7 +197,7 @@ const darkTheme = createTheme({
       main: "#F50057",
     },
     background: {
-      paper: "#121212",
+      paper: "#222222",
       default: "#080808",
     },
     text: {

src/components/AppHeader/index.jsx

@@ -19,6 +19,7 @@ import {
 import { uploadPicture, userLogout } from "@app/store/authReducer/actions";
 import { useTheme } from "@mui/material/styles";
 
+import { toggleTheme } from "@app/store/authReducer";
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import CustomElevator from "@app/components/Header/CustomElevator";
@@ -98,7 +99,7 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
   const toggleDarkTheme = () => {
     const newTheme = darkTheme ? "light" : "dark";
     setDarkTheme(newTheme === "dark");
-    localStorage.setItem("theme", newTheme);
+    dispatch(toggleTheme(newTheme));
   };
 
   const handleOpenNavMenu = (event) => {
@@ -152,10 +153,11 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
   return (
     <Box
       sx={{
-        borderBottom: `1px solid ${theme.palette.divider}`,
+        borderBottom: `1px solid ${theme.palette.text.primary}`,
         display: "flex",
         alignItems: "center",
         padding: "10px 16px",
+        backgroundColor: theme.palette.background.default,
       }}
     >
       <Box
@@ -168,7 +170,7 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
         }}
       >
         <IconButton onClick={(e) => handleViewModeChange(e.target.value)}>
-          <MenuIcon />
+          <MenuIcon sx={{ color: theme.palette.text.primary }} />
         </IconButton>
         <Box
           component="img"
@@ -205,7 +207,7 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
           sx={{
             position: "relative",
             width: "100%",
-            backgroundColor: theme.palette.background.default,
+            color: theme.palette.text.primary,
           }}
         >
           <InputBase
@@ -218,10 +220,8 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
               padding: "5px 15px 5px 35px",
               height: "36px",
               borderRadius: "4px",
-              border: `1px solid ${theme.palette.divider}`,
-              color: theme.palette.text.primary,
+              border: `1px solid ${theme.palette.text.primary}`,
               fontSize: "12px",
-              backgroundColor: theme.palette.background.paper,
               transition: "all 0.3s ease",
               "&:focus": {
                 borderColor: theme.palette.text.primary,
@@ -249,7 +249,11 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
           }}
           aria-label="Toggle theme"
         >
-          {darkTheme ? <Brightness4Icon /> : <Brightness7Icon />}
+          {darkTheme ? (
+            <Brightness4Icon sx={{ color: theme.palette.text.primary }} />
+          ) : (
+            <Brightness7Icon sx={{ color: theme.palette.text.primary }} />
+          )}
         </IconButton>
         <IconButton color="primary" onClick={handleRefreshClick}>
           <RefreshIcon />
@@ -322,7 +326,14 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
               horizontal: "right",
             }}
           >
-            <Box p={{ xs: 2, md: 3 }}>
+            <Box
+              p={{
+                xs: 2,
+                md: 3,
+                color: theme.palette.text.primary,
+                backgroundColor: theme.palette.background.paper,
+              }}
+            >
               <Box className="user-root">
                 <input {...getInputProps()} />
                 <IconButton className="icon-btn-root" {...getRootProps()}>
@@ -339,13 +350,23 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
                     className="user-title"
                     component="h3"
                     variant="h6"
-                    sx={{ color: "#fff" }}
+                    sx={{
+                      color: theme.palette.text.primary,
+                      backgroundColor: theme.palette.background.paper,
+                    }}
                   >
-                    {currentAuthUser?.first_name
-                      ? currentAuthUser?.first_name
+                    {currentAuthUser?.full_name
+                      ? currentAuthUser?.full_name
                       : ""}
                   </Typography>
-                  <Typography className="user-sub-title" component="span">
+                  <Typography
+                    className="user-sub-title"
+                    component="span"
+                    sx={{
+                      color: theme.palette.text.primary,
+                      backgroundColor: theme.palette.background.paper,
+                    }}
+                  >
                     {currentAuthUser?.bio
                       ? currentAuthUser?.bio.substring(0, 30) + "..."
                       : ""}

src/components/ComposeMail/index.jsx

@@ -14,13 +14,13 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import LaunchIcon from "@mui/icons-material/Launch";
 import SendIcon from "@mui/icons-material/Send";
 import { composeMail } from "@app/store/mailAppReducer/actions";
-import FilePicker from "../FilePicker";
+import FilePicker from "@app/components/FilePicker";
 import AppTextInput from "@app/components/AppTextInput";
 import { isValidEmail } from "@app/components/Helper";
 import CustomCard from "@app/components/CustomCard";
 import CustomCardContent from "@app/components/CustomCardContent";
 import CustomCardHeader from "@app/components/CustomCardHeader";
-import EmojiPicker from "../MailDetail/EmojiPicker";
+import EmojiPicker from "@app/components/MailDetail/EmojiPicker";
 import { alpha, useTheme } from "@mui/material/styles";
 import { useDispatch } from "react-redux";
 const ComposeMail = ({
@@ -181,6 +181,7 @@ const ComposeMail = ({
           height: "100%",
           transition: "all 0.3s ease",
           backgroundColor: theme.palette.popupColor.main,
+          borderRadius: 0,
           boxShadow:
             "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
           "&.card-minimise": {
@@ -438,7 +439,12 @@ const ComposeMail = ({
               <Box>
                 <Tooltip title="Delete">
                   <IconButton onClick={onDiscardMail}>
-                    <DeleteIcon />
+                    <DeleteIcon
+                      sx={{
+                        color: theme.palette.text.primary,
+                        backgroundColor: theme.palette.background.paper,
+                      }}
+                    />
                   </IconButton>
                 </Tooltip>
               </Box>

src/components/CustomContentHead/index.jsx

@@ -2,7 +2,7 @@ import React, { isValidElement } from "react";
 import PropTypes from "prop-types";
 import CustomTitle from "@app/components/CustomTitle";
 import CustomSubTitle from "@app/components/CustomSubTitle";
-import { useTheme } from "@mui/material";
+import { Box, useTheme } from "@mui/material";
 
 function CustomContentHead({
   icon,
@@ -33,19 +33,19 @@ function CustomContentHead({
   };
 
   return (
-    <div sx={headRootStyle} className="custom-content-head" {...restProps}>
+    <Box sx={headRootStyle} className="custom-content-head" {...restProps}>
       {avatar && isValidElement(avatar) ? (
-        <div sx={avatarStyle} className="custom-avatar">
+        <Box sx={avatarStyle} className="custom-avatar">
           {avatar}
-        </div>
+        </Box>
       ) : (
         icon && (
-          <div sx={avatarStyle} className="custom-avatar">
+          <Box sx={avatarStyle} className="custom-avatar">
             {icon}
-          </div>
+          </Box>
         )
       )}
-      <div sx={headerContentStyle} className="custom-header-content">
+      <Box sx={headerContentStyle} className="custom-header-content">
         {title && (
           <CustomTitle
             sx={titleStyle}
@@ -62,8 +62,8 @@ function CustomContentHead({
             {...subTitleProps}
           />
         )}
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }
 

src/components/CustomDropdownMenu/index.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 
-import { Menu, MenuItem } from "@mui/material";
+import { Box, Menu, MenuItem } from "@mui/material";
 
 const DropdownMenu = ({ TriggerComponent, items, onItemClick }) => {
   const [anchorEl, setAnchorEl] = useState(null);
@@ -29,10 +29,10 @@ const DropdownMenu = ({ TriggerComponent, items, onItemClick }) => {
   };
   return (
     <>
-      <div className="pointer">
+      <Box className="pointer">
         {/* eslint-disable-next-line*/}
         <TriggerComponent.type {...TriggerComponent.props} onClick={openMenu} />
-      </div>
+      </Box>
       <Menu
         anchorEl={anchorEl}
         keepMounted
@@ -51,7 +51,7 @@ const DropdownMenu = ({ TriggerComponent, items, onItemClick }) => {
               }
             >
               {item.icon}
-              <div className="ml-2">{item.label}</div>
+              <Box className="ml-2">{item.label}</Box>
             </MenuItem>
           );
         })}

src/components/CustomList/ListFooter.jsx

@@ -1,12 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { CircularProgress, useTheme } from "@mui/material";
+import { Box, CircularProgress, useTheme } from "@mui/material";
 
 const ListFooter = ({ loading, footerText }) => {
   const theme = useTheme();
 
   return (
-    <div
+    <Box
       sx={{
         padding: "10px",
         color: theme.palette.text.secondary,
@@ -15,7 +15,7 @@ const ListFooter = ({ loading, footerText }) => {
       }}
     >
       {loading ? (
-        <div
+        <Box
           sx={{
             display: "flex",
             padding: "8px",
@@ -26,11 +26,11 @@ const ListFooter = ({ loading, footerText }) => {
         >
           <CircularProgress size={16} />
           <span sx={{ marginLeft: "8px" }}>Loading...</span>
-        </div>
+        </Box>
       ) : (
         <p>{footerText}</p>
       )}
-    </div>
+    </Box>
   );
 };
 

src/components/CustomMedia/index.jsx

@@ -35,7 +35,7 @@ const CustomMedia = ({
       };
 
       return (
-        <div sx={avatarClasses}>
+        <Box sx={avatarClasses}>
           <Box mr={3} clone>
             {isValidElement(avatar) ? (
               avatar
@@ -47,7 +47,7 @@ const CustomMedia = ({
               />
             )}
           </Box>
-        </div>
+        </Box>
       );
     }
     return null;
@@ -73,29 +73,29 @@ const CustomMedia = ({
   return (
     <Box sx={mediaObjectClasses} {...rest}>
       {getAvatarComponent()}
-      <div sx={mediaImageClasses} onClick={onBodyClick}>
-        <div sx={mediaHeaderClasses}>
-          <div sx={{ className: "custom-media-header-content" }}>
+      <Box sx={mediaImageClasses} onClick={onBodyClick}>
+        <Box sx={mediaHeaderClasses}>
+          <Box sx={{ className: "custom-media-header-content" }}>
             {title && <CustomTitle content={title} {...titleProps} />}
             {subTitle && (
               <CustomSubTitle content={subTitle} {...subTitleProps} />
             )}
-          </div>
+          </Box>
           {actionsComponent && (
-            <div className="custom-media-actions ml-3">{actionsComponent}</div>
+            <Box className="custom-media-actions ml-3">{actionsComponent}</Box>
           )}
-        </div>
+        </Box>
         {content && (
-          <div className="mb-3">
+          <Box className="mb-3">
             {typeof content === "string" ? (
               <Typography {...contentProps}>{content}</Typography>
             ) : (
               content
             )}
-          </div>
+          </Box>
         )}
         {children}
-      </div>
+      </Box>
       {footerComponent && (
         <Box
           ml={3}

src/components/CustomSummary/index.jsx

@@ -27,7 +27,7 @@ const CustomSummary = ({
 
   if (typeof badge !== "string") {
     const node = (
-      <div
+      <Box
         style={{
           backgroundColor: "white",
           boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.15)",
@@ -39,7 +39,7 @@ const CustomSummary = ({
         className="custom-badge"
       >
         {badge}
-      </div>
+      </Box>
     );
     badgeContent.badgeContent = node;
   }
@@ -65,7 +65,7 @@ const CustomSummary = ({
 
   const componentContent = () => {
     return (
-      <div
+      <Box
         style={{
           display: "flex",
           alignItems: "center",
@@ -75,7 +75,7 @@ const CustomSummary = ({
         className={align}
       >
         {getAvatarComponent()}
-        <div
+        <Box
           className="custom-user-info"
           style={{
             marginLeft: align === "horizontal" ? "15px" : "0",
@@ -104,8 +104,8 @@ const CustomSummary = ({
           >
             {subTitle}
           </Box>
-        </div>
-      </div>
+        </Box>
+      </Box>
     );
   };
 

src/components/EditInfo/index.jsx

@@ -84,7 +84,13 @@ const EditInfo = ({ open, onCloseDialog }) => {
       >
         Edit Personal Information.
       </DialogTitle>
-      <DialogContent dividers>
+      <DialogContent
+        dividers
+        sx={{
+          color: theme.palette.text.primary,
+          backgroundColor: theme.palette.background.paper,
+        }}
+      >
         <Box component="form" onSubmit={onSubmit}>
           <Box
             display="flex"