Skip to content

Commit 3092a12

Browse files
wiseaidevwiseaidev
authored
Merge pull request #9 from coder-inbox/fix-app-theme
fix in app theme
2 parents 4e8263e + 5d9624d commit 3092a12

File tree

21 files changed

+368
-266
lines changed

21 files changed

+368
-266
lines changed

‎src/App.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ const darkTheme = createTheme({
197197
main: "#F50057",
198198
},
199199
background: {
200-
paper: "#121212",
200+
paper: "#222222",
201201
default: "#080808",
202202
},
203203
text: {

‎src/components/AppHeader/index.jsx

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
import { uploadPicture, userLogout } from "@app/store/authReducer/actions";
2020
import { useTheme } from "@mui/material/styles";
2121

22+
import { toggleTheme } from "@app/store/authReducer";
2223
import AppBar from "@mui/material/AppBar";
2324
import Toolbar from "@mui/material/Toolbar";
2425
import CustomElevator from "@app/components/Header/CustomElevator";
@@ -98,7 +99,7 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
9899
const toggleDarkTheme = () => {
99100
const newTheme = darkTheme ? "light" : "dark";
100101
setDarkTheme(newTheme === "dark");
101-
localStorage.setItem("theme", newTheme);
102+
dispatch(toggleTheme(newTheme));
102103
};
103104

104105
const handleOpenNavMenu = (event) => {
@@ -152,10 +153,11 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
152153
return (
153154
<Box
154155
sx={{
155-
borderBottom: `1px solid ${theme.palette.divider}`,
156+
borderBottom: `1px solid ${theme.palette.text.primary}`,
156157
display: "flex",
157158
alignItems: "center",
158159
padding: "10px 16px",
160+
backgroundColor: theme.palette.background.default,
159161
}}
160162
>
161163
<Box
@@ -168,7 +170,7 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
168170
}}
169171
>
170172
<IconButton onClick={(e) => handleViewModeChange(e.target.value)}>
171-
<MenuIcon />
173+
<MenuIcon sx={{ color: theme.palette.text.primary }} />
172174
</IconButton>
173175
<Box
174176
component="img"
@@ -205,7 +207,7 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
205207
sx={{
206208
position: "relative",
207209
width: "100%",
208-
backgroundColor: theme.palette.background.default,
210+
color: theme.palette.text.primary,
209211
}}
210212
>
211213
<InputBase
@@ -218,10 +220,8 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
218220
padding: "5px 15px 5px 35px",
219221
height: "36px",
220222
borderRadius: "4px",
221-
border: `1px solid ${theme.palette.divider}`,
222-
color: theme.palette.text.primary,
223+
border: `1px solid ${theme.palette.text.primary}`,
223224
fontSize: "12px",
224-
backgroundColor: theme.palette.background.paper,
225225
transition: "all 0.3s ease",
226226
"&:focus": {
227227
borderColor: theme.palette.text.primary,
@@ -249,7 +249,11 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
249249
}}
250250
aria-label="Toggle theme"
251251
>
252-
{darkTheme ? <Brightness4Icon /> : <Brightness7Icon />}
252+
{darkTheme ? (
253+
<Brightness4Icon sx={{ color: theme.palette.text.primary }} />
254+
) : (
255+
<Brightness7Icon sx={{ color: theme.palette.text.primary }} />
256+
)}
253257
</IconButton>
254258
<IconButton color="primary" onClick={handleRefreshClick}>
255259
<RefreshIcon />
@@ -322,7 +326,14 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
322326
horizontal: "right",
323327
}}
324328
>
325-
<Box p={{ xs: 2, md: 3 }}>
329+
<Box
330+
p={{
331+
xs: 2,
332+
md: 3,
333+
color: theme.palette.text.primary,
334+
backgroundColor: theme.palette.background.paper,
335+
}}
336+
>
326337
<Box className="user-root">
327338
<input {...getInputProps()} />
328339
<IconButton className="icon-btn-root" {...getRootProps()}>
@@ -339,13 +350,23 @@ const AppHeader = ({ viewMode, handleViewModeChange }) => {
339350
className="user-title"
340351
component="h3"
341352
variant="h6"
342-
sx={{ color: "#fff" }}
353+
sx={{
354+
color: theme.palette.text.primary,
355+
backgroundColor: theme.palette.background.paper,
356+
}}
343357
>
344-
{currentAuthUser?.first_name
345-
? currentAuthUser?.first_name
358+
{currentAuthUser?.full_name
359+
? currentAuthUser?.full_name
346360
: ""}
347361
</Typography>
348-
<Typography className="user-sub-title" component="span">
362+
<Typography
363+
className="user-sub-title"
364+
component="span"
365+
sx={{
366+
color: theme.palette.text.primary,
367+
backgroundColor: theme.palette.background.paper,
368+
}}
369+
>
349370
{currentAuthUser?.bio
350371
? currentAuthUser?.bio.substring(0, 30) + "..."
351372
: ""}

‎src/components/ComposeMail/index.jsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ import DeleteIcon from "@mui/icons-material/Delete";
1414
import LaunchIcon from "@mui/icons-material/Launch";
1515
import SendIcon from "@mui/icons-material/Send";
1616
import { composeMail } from "@app/store/mailAppReducer/actions";
17-
import FilePicker from "../FilePicker";
17+
import FilePicker from "@app/components/FilePicker";
1818
import AppTextInput from "@app/components/AppTextInput";
1919
import { isValidEmail } from "@app/components/Helper";
2020
import CustomCard from "@app/components/CustomCard";
2121
import CustomCardContent from "@app/components/CustomCardContent";
2222
import CustomCardHeader from "@app/components/CustomCardHeader";
23-
import EmojiPicker from "../MailDetail/EmojiPicker";
23+
import EmojiPicker from "@app/components/MailDetail/EmojiPicker";
2424
import { alpha, useTheme } from "@mui/material/styles";
2525
import { useDispatch } from "react-redux";
2626
const ComposeMail = ({
@@ -181,6 +181,7 @@ const ComposeMail = ({
181181
height: "100%",
182182
transition: "all 0.3s ease",
183183
backgroundColor: theme.palette.popupColor.main,
184+
borderRadius: 0,
184185
boxShadow:
185186
"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)",
186187
"&.card-minimise": {
@@ -438,7 +439,12 @@ const ComposeMail = ({
438439
<Box>
439440
<Tooltip title="Delete">
440441
<IconButton onClick={onDiscardMail}>
441-
<DeleteIcon />
442+
<DeleteIcon
443+
sx={{
444+
color: theme.palette.text.primary,
445+
backgroundColor: theme.palette.background.paper,
446+
}}
447+
/>
442448
</IconButton>
443449
</Tooltip>
444450
</Box>

‎src/components/CustomContentHead/index.jsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { isValidElement } from "react";
22
import PropTypes from "prop-types";
33
import CustomTitle from "@app/components/CustomTitle";
44
import CustomSubTitle from "@app/components/CustomSubTitle";
5-
import { useTheme } from "@mui/material";
5+
import { Box, useTheme } from "@mui/material";
66

77
function CustomContentHead({
88
icon,
@@ -33,19 +33,19 @@ function CustomContentHead({
3333
};
3434

3535
return (
36-
<div sx={headRootStyle} className="custom-content-head" {...restProps}>
36+
<Box sx={headRootStyle} className="custom-content-head" {...restProps}>
3737
{avatar && isValidElement(avatar) ? (
38-
<div sx={avatarStyle} className="custom-avatar">
38+
<Box sx={avatarStyle} className="custom-avatar">
3939
{avatar}
40-
</div>
40+
</Box>
4141
) : (
4242
icon && (
43-
<div sx={avatarStyle} className="custom-avatar">
43+
<Box sx={avatarStyle} className="custom-avatar">
4444
{icon}
45-
</div>
45+
</Box>
4646
)
4747
)}
48-
<div sx={headerContentStyle} className="custom-header-content">
48+
<Box sx={headerContentStyle} className="custom-header-content">
4949
{title && (
5050
<CustomTitle
5151
sx={titleStyle}
@@ -62,8 +62,8 @@ function CustomContentHead({
6262
{...subTitleProps}
6363
/>
6464
)}
65-
</div>
66-
</div>
65+
</Box>
66+
</Box>
6767
);
6868
}
6969

‎src/components/CustomDropdownMenu/index.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect, useState } from "react";
22
import PropTypes from "prop-types";
33

4-
import { Menu, MenuItem } from "@mui/material";
4+
import { Box, Menu, MenuItem } from "@mui/material";
55

66
const DropdownMenu = ({ TriggerComponent, items, onItemClick }) => {
77
const [anchorEl, setAnchorEl] = useState(null);
@@ -29,10 +29,10 @@ const DropdownMenu = ({ TriggerComponent, items, onItemClick }) => {
2929
};
3030
return (
3131
<>
32-
<div className="pointer">
32+
<Box className="pointer">
3333
{/* eslint-disable-next-line*/}
3434
<TriggerComponent.type {...TriggerComponent.props} onClick={openMenu} />
35-
</div>
35+
</Box>
3636
<Menu
3737
anchorEl={anchorEl}
3838
keepMounted
@@ -51,7 +51,7 @@ const DropdownMenu = ({ TriggerComponent, items, onItemClick }) => {
5151
}
5252
>
5353
{item.icon}
54-
<div className="ml-2">{item.label}</div>
54+
<Box className="ml-2">{item.label}</Box>
5555
</MenuItem>
5656
);
5757
})}

‎src/components/CustomList/ListFooter.jsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from "react";
22
import PropTypes from "prop-types";
3-
import { CircularProgress, useTheme } from "@mui/material";
3+
import { Box, CircularProgress, useTheme } from "@mui/material";
44

55
const ListFooter = ({ loading, footerText }) => {
66
const theme = useTheme();
77

88
return (
9-
<div
9+
<Box
1010
sx={{
1111
padding: "10px",
1212
color: theme.palette.text.secondary,
@@ -15,7 +15,7 @@ const ListFooter = ({ loading, footerText }) => {
1515
}}
1616
>
1717
{loading ? (
18-
<div
18+
<Box
1919
sx={{
2020
display: "flex",
2121
padding: "8px",
@@ -26,11 +26,11 @@ const ListFooter = ({ loading, footerText }) => {
2626
>
2727
<CircularProgress size={16} />
2828
<span sx={{ marginLeft: "8px" }}>Loading...</span>
29-
</div>
29+
</Box>
3030
) : (
3131
<p>{footerText}</p>
3232
)}
33-
</div>
33+
</Box>
3434
);
3535
};
3636

‎src/components/CustomMedia/index.jsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const CustomMedia = ({
3535
};
3636

3737
return (
38-
<div sx={avatarClasses}>
38+
<Box sx={avatarClasses}>
3939
<Box mr={3} clone>
4040
{isValidElement(avatar) ? (
4141
avatar
@@ -47,7 +47,7 @@ const CustomMedia = ({
4747
/>
4848
)}
4949
</Box>
50-
</div>
50+
</Box>
5151
);
5252
}
5353
return null;
@@ -73,29 +73,29 @@ const CustomMedia = ({
7373
return (
7474
<Box sx={mediaObjectClasses} {...rest}>
7575
{getAvatarComponent()}
76-
<div sx={mediaImageClasses} onClick={onBodyClick}>
77-
<div sx={mediaHeaderClasses}>
78-
<div sx={{ className: "custom-media-header-content" }}>
76+
<Box sx={mediaImageClasses} onClick={onBodyClick}>
77+
<Box sx={mediaHeaderClasses}>
78+
<Box sx={{ className: "custom-media-header-content" }}>
7979
{title && <CustomTitle content={title} {...titleProps} />}
8080
{subTitle && (
8181
<CustomSubTitle content={subTitle} {...subTitleProps} />
8282
)}
83-
</div>
83+
</Box>
8484
{actionsComponent && (
85-
<div className="custom-media-actions ml-3">{actionsComponent}</div>
85+
<Box className="custom-media-actions ml-3">{actionsComponent}</Box>
8686
)}
87-
</div>
87+
</Box>
8888
{content && (
89-
<div className="mb-3">
89+
<Box className="mb-3">
9090
{typeof content === "string" ? (
9191
<Typography {...contentProps}>{content}</Typography>
9292
) : (
9393
content
9494
)}
95-
</div>
95+
</Box>
9696
)}
9797
{children}
98-
</div>
98+
</Box>
9999
{footerComponent && (
100100
<Box
101101
ml={3}

‎src/components/CustomSummary/index.jsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const CustomSummary = ({
2727

2828
if (typeof badge !== "string") {
2929
const node = (
30-
<div
30+
<Box
3131
style={{
3232
backgroundColor: "white",
3333
boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.15)",
@@ -39,7 +39,7 @@ const CustomSummary = ({
3939
className="custom-badge"
4040
>
4141
{badge}
42-
</div>
42+
</Box>
4343
);
4444
badgeContent.badgeContent = node;
4545
}
@@ -65,7 +65,7 @@ const CustomSummary = ({
6565

6666
const componentContent = () => {
6767
return (
68-
<div
68+
<Box
6969
style={{
7070
display: "flex",
7171
alignItems: "center",
@@ -75,7 +75,7 @@ const CustomSummary = ({
7575
className={align}
7676
>
7777
{getAvatarComponent()}
78-
<div
78+
<Box
7979
className="custom-user-info"
8080
style={{
8181
marginLeft: align === "horizontal" ? "15px" : "0",
@@ -104,8 +104,8 @@ const CustomSummary = ({
104104
>
105105
{subTitle}
106106
</Box>
107-
</div>
108-
</div>
107+
</Box>
108+
</Box>
109109
);
110110
};
111111

‎src/components/EditInfo/index.jsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,13 @@ const EditInfo = ({ open, onCloseDialog }) => {
8484
>
8585
Edit Personal Information.
8686
</DialogTitle>
87-
<DialogContent dividers>
87+
<DialogContent
88+
dividers
89+
sx={{
90+
color: theme.palette.text.primary,
91+
backgroundColor: theme.palette.background.paper,
92+
}}
93+
>
8894
<Box component="form" onSubmit={onSubmit}>
8995
<Box
9096
display="flex"

0 commit comments

Comments
 (0)