Skip to content

Commit

Permalink
Dark Mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@rtenorioh
rtenorioh authored May 22, 2022
1 parent fd34098 commit cf8969a
Show file tree
Hide file tree
Showing 23 changed files with 177 additions and 144 deletions.
105 changes: 99 additions & 6 deletions frontend/src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,39 @@
import React, { useState, useEffect } from "react";
import React, { useContext, useState, useEffect } from "react";
import Routes from "./routes";
import "react-toastify/dist/ReactToastify.css";

import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import { ptBR } from "@material-ui/core/locale";

import {
CssBaseline,
Switch,
FormGroup,
FormControlLabel,
makeStyles
} from "@material-ui/core";
import Brightness4Icon from '@material-ui/icons/Brightness4';
import Brightness7Icon from '@material-ui/icons/Brightness7';
import lightBackground from "../src/assets/wa-background-light.png";
import darkBackground from "../src/assets/wa-background-dark.jpg";

const useStyles = makeStyles(() => ({
switch: {
margin: "2px",
position: "absolute",
right: "0",
},
visible: {
display: "none",
},
}));

const App = () => {
const [locale, setLocale] = useState();
const [checked, setChecked] = React.useState(false);
const classes = useStyles();

const theme = createTheme(
const lightTheme = createTheme(
{
scrollbarStyles: {
"&::-webkit-scrollbar": {
Expand All @@ -23,25 +48,93 @@ const App = () => {
palette: {
primary: { main: "#6B62FE" },
},
backgroundImage: `url(${lightBackground})`,
},
locale
);

const darkTheme = createTheme(
{
overrides: {
MuiCssBaseline: {
'@global': {
body: {
backgroundColor: "#080d14",
}
}
}
},
scrollbarStyles: {
"&::-webkit-scrollbar": {
width: "8px",
height: "8px",
},
"&::-webkit-scrollbar-thumb": {
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
backgroundColor: "#ffffff",
},
},
palette: {
primary: { main: "#d500f9" },
secondary: { main: "#ff9100" },
background: {
default: "#080d14",
paper: "#181d22",
},
text: {
primary: "#d500f9",
secondary: "#ffffff",
},
},
backgroundImage: `url(${darkBackground})`,
},
locale
);

const [theme, setTheme] = useState("light");

const themeToggle = () => {
theme === "light" ? setTheme("dark") : setTheme("light");
};

const handleChange = (event) => {
setChecked(event.target.checked);
if (checked === false) {
themeToggle();
} else if (checked === true) {
themeToggle();
}
};

useEffect(() => {
const i18nlocale = localStorage.getItem("i18nextLng");
const browserLocale =
i18nlocale.substring(0, 2) + i18nlocale.substring(3, 5);
const browserLocale = i18nlocale.substring(0, 2) + i18nlocale.substring(3, 5);

if (browserLocale === "ptBR") {
setLocale(ptBR);
}
}, []);

return (
<ThemeProvider theme={theme}>
<ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>
<Routes />
<CssBaseline />
<FormGroup row className={classes.switch}>
<FormControlLabel control={
<Switch
className={classes.visible}
checked={checked}
onChange={handleChange}
inputProps={{ 'aria-label': 'controlled' }}
/>
} label={theme === "light" ?
<Brightness4Icon color="primary" /> :
<Brightness7Icon color="primary" />
}
/>
</FormGroup>
</ThemeProvider>
);
};

export default App;
export default App;
Binary file added frontend/src/assets/wa-background-dark.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 frontend/src/assets/wa-background.png → frontend/src/assets/wa-background-light.png
View file
File renamed without changes
4 changes: 2 additions & 2 deletions frontend/src/components/ContactDrawer/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,15 @@ const useStyles = makeStyles(theme => ({
header: {
display: "flex",
borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
backgroundColor: "#eee",
backgroundColor: theme.palette.background.default,
alignItems: "center",
padding: theme.spacing(0, 1),
minHeight: "73px",
justifyContent: "flex-start",
},
content: {
display: "flex",
backgroundColor: "#eee",
backgroundColor: theme.palette.background.paper,
flexDirection: "column",
padding: "8px 0px 8px 8px",
height: "100%",
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/MessageInput/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const useStyles = makeStyles((theme) => ({
},

newMessageBox: {
background: "#eee",
background: theme.palette.background.default,
width: "100%",
display: "flex",
padding: "7px",
Expand All @@ -64,7 +64,7 @@ const useStyles = makeStyles((theme) => ({
messageInputWrapper: {
padding: 6,
marginRight: 7,
background: "#fff",
background: theme.palette.background.paper,
display: "flex",
borderRadius: 20,
flex: 1,
Expand Down
3 changes: 1 addition & 2 deletions frontend/src/components/MessagesList/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ import VcardPreview from "../VcardPreview";
import LocationPreview from "../LocationPreview";
import ModalImageCors from "../ModalImageCors";
import MessageOptionsMenu from "../MessageOptionsMenu";
import whatsBackground from "../../assets/wa-background.png";

import api from "../../services/api";
import toastError from "../../errors/toastError";
Expand All @@ -41,7 +40,7 @@ const useStyles = makeStyles((theme) => ({
},

messagesList: {
backgroundImage: `url(${whatsBackground})`,
backgroundImage: theme.backgroundImage,
display: "flex",
flexDirection: "column",
flexGrow: 1,
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/components/Ticket/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,15 @@ const drawerWidth = 320;

const useStyles = makeStyles((theme) => ({
root: {
backgroundColor: theme.palette.background.default,
display: "flex",
height: "100%",
position: "relative",
overflow: "hidden",
},

ticketInfo: {
backgroundColor: theme.palette.background.default,
maxWidth: "50%",
flexBasis: "50%",
[theme.breakpoints.down("sm")]: {
Expand All @@ -36,6 +38,7 @@ const useStyles = makeStyles((theme) => ({
},
},
ticketActionButtons: {
backgroundColor: theme.palette.background.default,
maxWidth: "50%",
flexBasis: "50%",
display: "flex",
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/TicketHeader/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { useHistory } from "react-router-dom";
const useStyles = makeStyles((theme) => ({
ticketHeader: {
display: "flex",
backgroundColor: "#eee",
backgroundColor: theme.palette.background.default,
flex: "none",
borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
[theme.breakpoints.down("sm")]: {
Expand Down
7 changes: 3 additions & 4 deletions frontend/src/components/TicketListItem/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import VisibilityIcon from '@material-ui/icons/Visibility';
import ReplayIcon from '@material-ui/icons/Replay';
import StopIcon from '@material-ui/icons/Stop';
import api from "../../services/api";
//import ButtonWithSpinner from "../ButtonWithSpinner";
import MarkdownWrapper from "../MarkdownWrapper";
import { Tooltip } from "@material-ui/core";
import { AuthContext } from "../../context/Auth/AuthContext";
Expand Down Expand Up @@ -112,8 +111,8 @@ const useStyles = makeStyles(theme => ({
marginRight: 5,
right: 20,
bottom: 30,
background: "#2576D2",
color: "#ffffff",
backgroundColor: theme.palette.background.default,
color: theme.palette.primary.main,
border: "1px solid #CCC",
padding: 1,
paddingLeft: 5,
Expand Down Expand Up @@ -346,4 +345,4 @@ const TicketListItem = ({ ticket }) => {
);
};

export default TicketListItem;
export default TicketListItem;
14 changes: 7 additions & 7 deletions frontend/src/components/TicketsManager/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import React, { useContext, useEffect, useRef, useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import SearchIcon from "@material-ui/icons/Search";
import InputBase from "@material-ui/core/InputBase";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Badge from "@material-ui/core/Badge";
Expand Down Expand Up @@ -37,7 +36,7 @@ const useStyles = makeStyles((theme) => ({

tabsHeader: {
flex: "none",
backgroundColor: "#eee",
backgroundColor: theme.palette.background.default,
},

settingsIcon: {
Expand All @@ -55,31 +54,32 @@ const useStyles = makeStyles((theme) => ({
display: "flex",
justifyContent: "space-between",
alignItems: "center",
background: "#fafafa",
backgroundColor: theme.palette.background.paper,
padding: theme.spacing(1),
},

serachInputWrapper: {
flex: 1,
background: "#fff",
backgroundColor: theme.palette.background.default,
display: "flex",
borderRadius: 40,
padding: 4,
marginRight: theme.spacing(1),
},

searchIcon: {
color: "grey",
color: theme.palette.primary.main,
marginLeft: 6,
marginRight: 6,
alignSelf: "center",
},

searchInput: {
flex: 11,
outlineStyle: "none",
flex: 1,
border: "none",
borderRadius: 25,
padding: "10px",
outline: "none",
},

badge: {
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/UserModal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import { Can } from "../Can";

const useStyles = makeStyles(theme => ({
root: {
backgroundColor: theme.palette.background.paper,
display: "flex",
flexWrap: "wrap",
},
Expand Down Expand Up @@ -183,7 +184,7 @@ const UserModal = ({ open, onClose, userId }) => {
aria-label="toggle password visibility"
onClick={() => setShowPassword((e) => !e)}
>
{showPassword ? <VisibilityOff /> : <Visibility />}
{showPassword ? <VisibilityOff color="secondary" /> : <Visibility color="secondary" />}
</IconButton>
</InputAdornment>
)
Expand Down
12 changes: 10 additions & 2 deletions frontend/src/layout/MainListItems.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,17 @@ import { i18n } from "../translate/i18n";
import { WhatsAppsContext } from "../context/WhatsApp/WhatsAppsContext";
import { AuthContext } from "../context/Auth/AuthContext";
import { Can } from "../components/Can";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
icon: {
color: theme.palette.secondary.main
},
}));

function ListItemLink(props) {
const { icon, primary, to, className } = props;
const classes = useStyles();

const renderLink = React.useMemo(
() =>
Expand All @@ -38,7 +46,7 @@ function ListItemLink(props) {
return (
<li>
<ListItem button component={renderLink} className={className}>
{icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
{icon ? <ListItemIcon className={classes.icon}>{icon}</ListItemIcon> : null}
<ListItemText primary={primary} />
</ListItem>
</li>
Expand Down Expand Up @@ -160,4 +168,4 @@ const MainListItems = (props) => {
);
};

export default MainListItems;
export default MainListItems;
2 changes: 1 addition & 1 deletion frontend/src/layout/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ const LoggedInLayout = ({ children }) => {
>
<div className={classes.toolbarIcon}>
<img src={logodash} alt="logo" />
<IconButton onClick={() => setDrawerOpen(!drawerOpen)}>
<IconButton color="secondary" onClick={() => setDrawerOpen(!drawerOpen)}>
<ChevronLeftIcon />
</IconButton>
</div>
Expand Down
Loading

0 comments on commit cf8969a

Please sign in to comment.