From 5d9624d940ae4ee6bf78d88c389534d67afeaf1b Mon Sep 17 00:00:00 2001 From: wiseaidev Date: Mon, 2 Oct 2023 09:07:56 +0300 Subject: [PATCH] fix in app theme --- src/App.jsx | 2 +- src/components/AppHeader/index.jsx | 47 +++-- src/components/ComposeMail/index.jsx | 12 +- src/components/CustomContentHead/index.jsx | 18 +- src/components/CustomDropdownMenu/index.jsx | 8 +- src/components/CustomList/ListFooter.jsx | 10 +- src/components/CustomMedia/index.jsx | 22 +-- src/components/CustomSummary/index.jsx | 12 +- src/components/EditInfo/index.jsx | 8 +- src/components/FilePicker/index.jsx | 10 +- src/components/MailApp/index.jsx | 2 - src/components/MailDetail/DetailHeader.jsx | 25 ++- src/components/MailDetail/HeaderOptions.jsx | 45 ++++- src/components/MailDetail/index.jsx | 11 +- src/components/MailsList/ListHeader/index.jsx | 9 +- src/components/MailsList/index.jsx | 1 + src/components/ProfileDetail/index.jsx | 131 ++++---------- src/components/Sidebar/AddLabel.jsx | 7 +- src/components/Sidebar/ItemCell.jsx | 10 +- src/components/Sidebar/index.jsx | 170 ++++++++++++++++-- src/components/UserStatus/index.jsx | 74 -------- 21 files changed, 368 insertions(+), 266 deletions(-) delete mode 100644 src/components/UserStatus/index.jsx diff --git a/src/App.jsx b/src/App.jsx index e3d3d68..92292aa 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -197,7 +197,7 @@ const darkTheme = createTheme({ main: "#F50057", }, background: { - paper: "#121212", + paper: "#222222", default: "#080808", }, text: { diff --git a/src/components/AppHeader/index.jsx b/src/components/AppHeader/index.jsx index b930be0..99d0ab3 100644 --- a/src/components/AppHeader/index.jsx +++ b/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 ( { }} > handleViewModeChange(e.target.value)}> - + { sx={{ position: "relative", width: "100%", - backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, }} > { 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 ? : } + {darkTheme ? ( + + ) : ( + + )} @@ -322,7 +326,14 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => { horizontal: "right", }} > - + @@ -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 : ""} - + {currentAuthUser?.bio ? currentAuthUser?.bio.substring(0, 30) + "..." : ""} diff --git a/src/components/ComposeMail/index.jsx b/src/components/ComposeMail/index.jsx index f1d9b4e..fc32f4f 100644 --- a/src/components/ComposeMail/index.jsx +++ b/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 = ({ - + diff --git a/src/components/CustomContentHead/index.jsx b/src/components/CustomContentHead/index.jsx index a18b653..c3a9174 100644 --- a/src/components/CustomContentHead/index.jsx +++ b/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 ( -
+ {avatar && isValidElement(avatar) ? ( -
+ {avatar} -
+ ) : ( icon && ( -
+ {icon} -
+ ) )} -
+ {title && ( )} -
-
+ + ); } diff --git a/src/components/CustomDropdownMenu/index.jsx b/src/components/CustomDropdownMenu/index.jsx index 4f4e7c1..dc8f219 100644 --- a/src/components/CustomDropdownMenu/index.jsx +++ b/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 ( <> -
+ {/* eslint-disable-next-line*/} -
+ { } > {item.icon} -
{item.label}
+ {item.label} ); })} diff --git a/src/components/CustomList/ListFooter.jsx b/src/components/CustomList/ListFooter.jsx index 4a4515d..9eeec3c 100644 --- a/src/components/CustomList/ListFooter.jsx +++ b/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 ( -
{ }} > {loading ? ( -
{ > Loading... -
+ ) : (

{footerText}

)} -
+ ); }; diff --git a/src/components/CustomMedia/index.jsx b/src/components/CustomMedia/index.jsx index ea17069..8262b76 100644 --- a/src/components/CustomMedia/index.jsx +++ b/src/components/CustomMedia/index.jsx @@ -35,7 +35,7 @@ const CustomMedia = ({ }; return ( -
+ {isValidElement(avatar) ? ( avatar @@ -47,7 +47,7 @@ const CustomMedia = ({ /> )} -
+ ); } return null; @@ -73,29 +73,29 @@ const CustomMedia = ({ return ( {getAvatarComponent()} -
-
-
+ + + {title && } {subTitle && ( )} -
+ {actionsComponent && ( -
{actionsComponent}
+ {actionsComponent} )} -
+ {content && ( -
+ {typeof content === "string" ? ( {content} ) : ( content )} -
+ )} {children} -
+ {footerComponent && ( {badge} - + ); badgeContent.badgeContent = node; } @@ -65,7 +65,7 @@ const CustomSummary = ({ const componentContent = () => { return ( -
{getAvatarComponent()} -
{subTitle} -
-
+ + ); }; diff --git a/src/components/EditInfo/index.jsx b/src/components/EditInfo/index.jsx index 4f7f1ff..dc743a9 100644 --- a/src/components/EditInfo/index.jsx +++ b/src/components/EditInfo/index.jsx @@ -84,7 +84,13 @@ const EditInfo = ({ open, onCloseDialog }) => { > Edit Personal Information. - + { + const theme = useTheme(); const { getRootProps, getInputProps } = useDropzone({ accept: "image/*, .pdf, .zip", multiple: true, @@ -24,7 +25,12 @@ const FilePicker = ({ onAddAttachments }) => { - + diff --git a/src/components/MailApp/index.jsx b/src/components/MailApp/index.jsx index b39fc9a..7b5d7f9 100644 --- a/src/components/MailApp/index.jsx +++ b/src/components/MailApp/index.jsx @@ -56,8 +56,6 @@ const MailApp = () => { return ( { sx={{ borderBottom: `1px solid ${theme.palette.borderColor.main}`, display: "flex", + backgroundColor: theme.palette.background.paper, + color: theme.palette.text.primary, alignItems: "center", padding: "11px 16px 10px 16px", [theme.breakpoints.down("xs")]: { @@ -75,7 +77,7 @@ const DetailHeader = ({ selectedMail, labelsList }) => { > - + { - + @@ -109,11 +111,26 @@ const DetailHeader = ({ selectedMail, labelsList }) => { anchorEl={showMoreOptions} open={Boolean(showMoreOptions)} onClose={onHideMoreOptions} + sx={{ + color: theme.palette.text.primary, + }} > - + {selectedMail.favorite ? "Remove from Favorite" : "Mark as Favorite"} - + {selectedMail.important ? "Remove from Important" : "Mark as Important"} diff --git a/src/components/MailDetail/HeaderOptions.jsx b/src/components/MailDetail/HeaderOptions.jsx index 1d1a5d2..6439507 100644 --- a/src/components/MailDetail/HeaderOptions.jsx +++ b/src/components/MailDetail/HeaderOptions.jsx @@ -70,7 +70,12 @@ const HeaderOptions = ({ onChangeMailFolder("spam")} - sx={{ padding: "6px", "& .MuiSvgIcon-root": { fontSize: 18 } }} + sx={{ + padding: "6px", + "& .MuiSvgIcon-root": { fontSize: 18 }, + backgroundColor: theme.palette.background.paper, + color: theme.palette.text.primary, + }} > @@ -81,7 +86,12 @@ const HeaderOptions = ({ onChangeMailFolder("archived")} - sx={{ padding: "6px", "& .MuiSvgIcon-root": { fontSize: 18 } }} + sx={{ + padding: "6px", + "& .MuiSvgIcon-root": { fontSize: 18 }, + backgroundColor: theme.palette.background.paper, + color: theme.palette.text.primary, + }} > @@ -92,7 +102,12 @@ const HeaderOptions = ({ onChangeMailFolder("trash")} - sx={{ padding: "6px", "& .MuiSvgIcon-root": { fontSize: 18 } }} + sx={{ + padding: "6px", + "& .MuiSvgIcon-root": { fontSize: 18 }, + backgroundColor: theme.palette.background.paper, + color: theme.palette.text.primary, + }} > @@ -113,7 +128,12 @@ const HeaderOptions = ({ @@ -151,7 +171,12 @@ const HeaderOptions = ({ @@ -168,7 +193,15 @@ const HeaderOptions = ({ key={index} value={item.id} onClick={() => onClickFolderOption(item)} - sx={{ fontSize: 16, "&:hover": { backgroundColor: "transparent" } }} + sx={{ + fontSize: 16, + "&:hover": { + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, + }, + backgroundColor: theme.palette.background.paper, + color: theme.palette.text.primary, + }} > {item.icon} diff --git a/src/components/MailDetail/index.jsx b/src/components/MailDetail/index.jsx index 5def5b0..b5bb518 100644 --- a/src/components/MailDetail/index.jsx +++ b/src/components/MailDetail/index.jsx @@ -77,7 +77,14 @@ const MailDetail = ({ width, onClickForwardMail }) => { return ( <> - div": { height: "100%" } }}> + div": { height: "100%" }, + backgroundColor: theme.palette.background.paper, + color: theme.palette.text.primary, + }} + > @@ -101,7 +108,7 @@ const MailDetail = ({ width, onClickForwardMail }) => { textOverflow: "ellipsis", whiteSpace: "nowrap", width: "100%", - color: theme.palette.common.dark, + color: theme.palette.text.primary, }} > {subject} diff --git a/src/components/MailsList/ListHeader/index.jsx b/src/components/MailsList/ListHeader/index.jsx index af4781e..9e1f39c 100644 --- a/src/components/MailsList/ListHeader/index.jsx +++ b/src/components/MailsList/ListHeader/index.jsx @@ -131,7 +131,14 @@ const ListHeader = ({ checkedMails, setCheckedMails }) => { "& .MuiSelect-select:focus": { backgroundColor: "transparent" }, }} renderRow={(item, index) => ( - + {item.label} )} diff --git a/src/components/MailsList/index.jsx b/src/components/MailsList/index.jsx index d80b861..483496c 100644 --- a/src/components/MailsList/index.jsx +++ b/src/components/MailsList/index.jsx @@ -44,6 +44,7 @@ const MailsList = ({ flexDirection: "column", width: "100%", overflowY: "auto", + backgroundColor: theme.palette.background.paper, }} > {totalMails > 0 && ( diff --git a/src/components/ProfileDetail/index.jsx b/src/components/ProfileDetail/index.jsx index 613bf45..f702aa8 100644 --- a/src/components/ProfileDetail/index.jsx +++ b/src/components/ProfileDetail/index.jsx @@ -8,100 +8,26 @@ import { Typography, Button, } from "@mui/material"; -import EditIcon from "@mui/icons-material/Edit"; import DialpadIcon from "@mui/icons-material/Dialpad"; import PermIdentityIcon from "@mui/icons-material/PermIdentity"; import EmailIcon from "@mui/icons-material/Email"; import PersonIcon from "@mui/icons-material/Person"; -import UserStatus from "../UserStatus"; -import { useDispatch } from "react-redux"; import { useTheme } from "@mui/material/styles"; -const ProfileDetail = ({ - currentUser, - user, - userStatus, - statusColor, - setUserStatus, -}) => { - const [anchorEl, setAnchorEl] = React.useState(null); - const [edit, setEdit] = React.useState(false); +const ProfileDetail = ({ currentUser, user }) => { const theme = useTheme(); - const dispatch = useDispatch(); const handleClick = (event) => { setAnchorEl(event.currentTarget); }; - const handleClose = () => { - setAnchorEl(null); - }; - - const handleEditClose = () => { - setEdit(false); - }; - - const updateStatus = (status) => { - setAnchorEl(null); - if (currentUser) { - setUserStatus(status); - // TODO: dispatch(setCurrentUserStatus(status)); - } - }; - - const handleEdit = () => { - setEdit(true); - }; - - const getStatusColor = () => { - if (!userStatus) { - return theme.palette.grey[400]; - } - switch (userStatus.toLowerCase()) { - case "online": - return "#8DCD03"; - case "busy": - return "#FF8C00"; - case "don't disturb": - return "#E00930"; - default: - return theme.palette.grey[400]; - } - }; - return ( - - - - - - - - - + Personal Information - {currentUser && ( - - - - - - - )} - + - + - + - + - ); }; diff --git a/src/components/Sidebar/AddLabel.jsx b/src/components/Sidebar/AddLabel.jsx index b3e32ee..8c31b7a 100644 --- a/src/components/Sidebar/AddLabel.jsx +++ b/src/components/Sidebar/AddLabel.jsx @@ -49,7 +49,12 @@ const AddLabel = () => { minWidth: 18, }} > - + { }, }, "&.active": { - color: theme.palette.primary.main, - backgroundColor: theme.palette.action.selected, + color: theme.palette.text.primary, + backgroundColor: theme.palette.text.disabled, ".custom-icon-root": { color: theme.palette.primary.main, }, @@ -37,7 +37,11 @@ const ItemCell = ({ item, selectedItem, onChange, counter }) => { onClick={() => onChange(item.slug)} > - {item.icon ? item.icon : } + {item.icon ? ( + item.icon + ) : ( + + )} {counter > 0 && ( diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx index 5a6966b..c9661fe 100644 --- a/src/components/Sidebar/index.jsx +++ b/src/components/Sidebar/index.jsx @@ -32,24 +32,6 @@ import SocialIcon from "@mui/icons-material/People"; import ForumsIcon from "@mui/icons-material/Forum"; import EmailIcon from "@mui/icons-material/Email"; -const folderList = [ - { id: 1, name: "All Mail", slug: "all", icon: }, - { id: 2, name: "Inbox", slug: "inbox", icon: }, - { id: 3, name: "Sent", slug: "sent", icon: }, - { id: 4, name: "Drafts", slug: "drafts", icon: }, - { id: 5, name: "Spam", slug: "spam", icon: }, - { id: 6, name: "Trash", slug: "trash", icon: }, - { id: 7, name: "Archived", slug: "archived", icon: }, - { id: 8, name: "Promotions", slug: "promotions", icon: }, - { id: 9, name: "Personal", slug: "personal", icon: }, - { id: 10, name: "Social", slug: "social", icon: }, - { id: 11, name: "Forums", slug: "forums", icon: }, -]; - -const filterOptions = [ - { id: 1, name: "Starred", slug: "starred", icon: }, -]; - const Sidebar = ({ width, onOpenComposeDialog, onClickSendMail }) => { const { isSideBarCollapsed, @@ -62,6 +44,156 @@ const Sidebar = ({ width, onOpenComposeDialog, onClickSendMail }) => { const dispatch = useDispatch(); const theme = useTheme(); + const folderList = [ + { + id: 1, + name: "All Mail", + slug: "all", + icon: ( + + ), + }, + { + id: 2, + name: "Inbox", + slug: "inbox", + icon: ( + + ), + }, + { + id: 3, + name: "Sent", + slug: "sent", + icon: ( + + ), + }, + { + id: 4, + name: "Drafts", + slug: "drafts", + icon: ( + + ), + }, + { + id: 5, + name: "Spam", + slug: "spam", + icon: ( + + ), + }, + { + id: 6, + name: "Trash", + slug: "trash", + icon: ( + + ), + }, + { + id: 7, + name: "Archived", + slug: "archived", + icon: ( + + ), + }, + { + id: 8, + name: "Promotions", + slug: "promotions", + icon: ( + + ), + }, + { + id: 9, + name: "Personal", + slug: "personal", + icon: ( + + ), + }, + { + id: 10, + name: "Social", + slug: "social", + icon: ( + + ), + }, + { + id: 11, + name: "Forums", + slug: "forums", + icon: ( + + ), + }, + ]; + + const filterOptions = [ + { + id: 1, + name: "Starred", + slug: "starred", + icon: ( + + ), + }, + ]; + useEffect(() => { dispatch(getLabelsList()); dispatch(getContactsList()); @@ -110,6 +242,8 @@ const Sidebar = ({ width, onOpenComposeDialog, onClickSendMail }) => { borderRight: `solid 1px ${theme.palette.borderColor.main}`, overflowY: "auto", transition: "all 0.3s ease", + color: theme.palette.text.primary, + backgroundColor: theme.palette.background.default, }} > { - const theme = useTheme(); - - return ( - - updateStatus("Online")} - className={userStatus === "Online" ? "active" : ""} - sx={{ backgroundColor: "#8DCD03" }} - > - {" "} - Online - - updateStatus("Busy")} - className={userStatus === "Busy" ? "active" : ""} - sx={{ backgroundColor: "#FF8C00" }} - > - - Busy - - updateStatus("Don't Disturb")} - className={userStatus === "Don't Disturb" ? "active" : ""} - sx={{ backgroundColor: "#E00930" }} - > - - Don't Disturb - - updateStatus("Offline")} - className={userStatus === "Offline" ? "active" : ""} - sx={{ backgroundColor: "#C1C1C1" }} - > - - Offline - - - ); -}; - -export default UserStatus;