Skip to content

Commit 1a1f4e7

Browse files
author
Jovert Lota Palonpon
committed
[Theming] dark/light support
1 parent a5c77e2 commit 1a1f4e7

File tree

15 files changed

+212
-40
lines changed

15 files changed

+212
-40
lines changed

‎resources/js/Backoffice.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { withWidth, CssBaseline, MuiThemeProvider } from '@material-ui/core';
44

55
import { Navigator } from './core';
66
import { ROUTES } from './config';
7-
import { backofficeTheme as theme } from './themes';
7+
import { dark as darkTheme, light as lightTheme } from './themes/backoffice';
88
import { Loading } from './views';
99

1010
class Backoffice extends Component {
@@ -200,14 +200,18 @@ class Backoffice extends Component {
200200

201201
render() {
202202
const { width } = this.props;
203-
const { loading } = this.state;
203+
const { loading, nightMode } = this.state;
204204

205205
return (
206-
<MuiThemeProvider theme={theme}>
206+
<MuiThemeProvider theme={nightMode ? darkTheme : lightTheme}>
207207
<CssBaseline />
208208

209209
{loading ? (
210-
<Loading />
210+
<Loading
211+
pageProps={{
212+
...this.state,
213+
}}
214+
/>
211215
) : (
212216
<Router>
213217
<Navigator

‎resources/js/themes/backoffice/dark.js

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import { createMuiTheme } from '@material-ui/core';
2+
3+
let theme = createMuiTheme({
4+
typography: {
5+
useNextVariants: true,
6+
h5: {
7+
fontWeight: 500,
8+
fontSize: 26,
9+
letterSpacing: 0.5,
10+
},
11+
},
12+
13+
palette: {
14+
type: 'dark',
15+
primary: {
16+
light: '#63ccff',
17+
main: '#009be5',
18+
dark: '#006db3',
19+
},
20+
},
21+
22+
shape: {
23+
borderRadius: 8,
24+
},
25+
});
26+
27+
theme = {
28+
...theme,
29+
overrides: {
30+
MuiDrawer: {
31+
paper: {
32+
backgroundColor: '#18202c',
33+
},
34+
},
35+
36+
MuiButton: {
37+
label: {
38+
textTransform: 'initial',
39+
},
40+
contained: {
41+
boxShadow: 'none',
42+
'&:active': {
43+
boxShadow: 'none',
44+
},
45+
},
46+
},
47+
48+
MuiTabs: {
49+
root: {
50+
marginLeft: theme.spacing.unit,
51+
},
52+
indicator: {
53+
height: 3,
54+
borderTopLeftRadius: 3,
55+
borderTopRightRadius: 3,
56+
backgroundColor: theme.palette.common.white,
57+
},
58+
},
59+
60+
MuiTab: {
61+
root: {
62+
textTransform: 'initial',
63+
margin: '0 16px',
64+
minWidth: 0,
65+
[theme.breakpoints.up('md')]: {
66+
minWidth: 0,
67+
},
68+
},
69+
70+
labelContainer: {
71+
padding: 0,
72+
[theme.breakpoints.up('md')]: {
73+
padding: 0,
74+
},
75+
},
76+
},
77+
78+
MuiIconButton: {
79+
root: {
80+
padding: theme.spacing.unit,
81+
},
82+
},
83+
84+
MuiTooltip: {
85+
tooltip: {
86+
borderRadius: 4,
87+
},
88+
},
89+
90+
MuiDivider: {
91+
root: {
92+
backgroundColor: '#404854',
93+
},
94+
},
95+
96+
MuiListItemText: {
97+
primary: {
98+
fontWeight: theme.typography.fontWeightMedium,
99+
},
100+
},
101+
102+
MuiListItemIcon: {
103+
root: {
104+
color: 'inherit',
105+
marginRight: 0,
106+
'& svg': {
107+
fontSize: 20,
108+
},
109+
},
110+
},
111+
112+
MuiAvatar: {
113+
root: {
114+
width: 32,
115+
height: 32,
116+
},
117+
},
118+
},
119+
120+
props: {
121+
MuiTab: {
122+
disableRipple: true,
123+
},
124+
},
125+
126+
mixins: {
127+
...theme.mixins,
128+
toolbar: {
129+
minHeight: 48,
130+
},
131+
},
132+
};
133+
134+
export default theme;

‎resources/js/themes/backoffice/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default as dark } from './dark';
2+
export { default as light } from './light';

‎resources/js/themes/backoffice.js renamed to ‎resources/js/themes/backoffice/light.js

File renamed without changes.

‎resources/js/themes/index.js

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎resources/js/ui/Snackbar.js

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
IconButton,
99
Snackbar as MuiSnackbar,
1010
SnackbarContent,
11+
Typography,
1112
withStyles,
1213
} from '@material-ui/core';
1314

@@ -44,7 +45,7 @@ const Snackbar = props => {
4445
if (action && actionText) {
4546
primaryAction = (
4647
<Button key="undo" color="inherit" size="small" onClick={action}>
47-
{actionText}
48+
<Typography>{actionText}</Typography>
4849
</Button>
4950
);
5051
}
@@ -86,7 +87,8 @@ const Snackbar = props => {
8687
classes.iconVariant,
8788
)}
8889
/>
89-
{body}
90+
91+
<Typography>{body}</Typography>
9092
</span>
9193
}
9294
action={actions.reverse()}
@@ -96,6 +98,14 @@ const Snackbar = props => {
9698
);
9799
};
98100

101+
Snackbar.propTypes = {
102+
type: PropTypes.oneOf(['success', 'warning', 'error', 'info']).isRequired,
103+
body: PropTypes.string.isRequired,
104+
closed: PropTypes.func.isRequired,
105+
actionText: PropTypes.string,
106+
action: PropTypes.func,
107+
};
108+
99109
const styles = theme => ({
100110
success: {
101111
backgroundColor: colors.green[600],
@@ -115,6 +125,7 @@ const styles = theme => ({
115125

116126
icon: {
117127
fontSize: 20,
128+
color: theme.palette.common['white'],
118129
},
119130

120131
iconVariant: {
@@ -128,12 +139,4 @@ const styles = theme => ({
128139
},
129140
});
130141

131-
Snackbar.propTypes = {
132-
type: PropTypes.oneOf(['success', 'warning', 'error', 'info']).isRequired,
133-
body: PropTypes.string.isRequired,
134-
closed: PropTypes.func.isRequired,
135-
actionText: PropTypes.string,
136-
action: PropTypes.func,
137-
};
138-
139142
export default withStyles(styles)(Snackbar);

‎resources/js/ui/TableToolbar/TableToolbar.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
33

44
import {
55
Chip,
6+
Grid,
67
Grow,
78
IconButton,
89
Paper,
@@ -163,7 +164,7 @@ class TableToolbar extends Component {
163164
{Object.keys(filters).map((filterKey, key) => {
164165
return (
165166
<div key={key} className={classes.filter}>
166-
<small className={classes.filterName}>
167+
<Typography className={classes.filterName}>
167168
{
168169
columns.find(
169170
column =>
@@ -174,7 +175,7 @@ class TableToolbar extends Component {
174175
),
175176
).name
176177
}
177-
</small>
178+
</Typography>
178179

179180
<Chip
180181
icon={this.filterIcon(
@@ -231,6 +232,10 @@ export default withStyles(
231232
},
232233

233234
filter: {
235+
display: 'flex',
236+
flexWrap: 'no-wrap',
237+
flexDirection: 'row',
238+
alignItems: 'center',
234239
margin: theme.spacing.unit / 2,
235240
},
236241

‎resources/js/views/Loading.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react';
22
import { withStyles, Grid, CircularProgress } from '@material-ui/core';
33

4-
import logo from '../../img/logos/short-light.svg';
4+
import darkLogo from '../../img/logos/short-dark.svg';
5+
import lightLogo from '../../img/logos/short-light.svg';
56

67
const Loading = props => (
78
<Grid
@@ -13,7 +14,7 @@ const Loading = props => (
1314
<Grid item>
1415
<Grid item className={props.classes.logoContainer}>
1516
<img
16-
src={logo}
17+
src={props.pageProps.nightMode ? darkLogo : lightLogo}
1718
alt="company-logo"
1819
className={props.classes.logo}
1920
/>

‎resources/js/views/__backoffice/layouts/Master.js

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ class Master extends Component {
106106
message,
107107
alert,
108108
} = this.props;
109-
const { navigating } = pageProps;
109+
const { navigating, nightMode } = pageProps;
110110

111111
const { mobileOpen, message: globalMessage } = this.state;
112112

@@ -175,6 +175,11 @@ class Master extends Component {
175175
position="static"
176176
elevation={0}
177177
className={classes.breadcrumbBar}
178+
style={{
179+
backgroundColor: nightMode
180+
? '#303030'
181+
: '#FAFAFA',
182+
}}
178183
>
179184
<div className={classes.breadcrumbWrapper}>
180185
<Breadcrumbs arial-label="Breadcrumb">
@@ -259,7 +264,7 @@ class Master extends Component {
259264
</main>
260265

261266
<footer className={classes.footer}>
262-
<p>
267+
<Typography>
263268
{Lang.get('navigation.citation')}{' '}
264269
<Link
265270
href="https://github.com/palonponjovertlota"
@@ -268,7 +273,7 @@ class Master extends Component {
268273
>
269274
@palonponjovertlota
270275
</Link>
271-
</p>
276+
</Typography>
272277
</footer>
273278
</div>
274279
</div>
@@ -321,7 +326,6 @@ const styles = theme => ({
321326
},
322327

323328
breadcrumbBar: {
324-
backgroundColor: theme.palette.grey['200'],
325329
zIndex: 0,
326330
},
327331

@@ -349,7 +353,6 @@ const styles = theme => ({
349353
flex: 1,
350354
padding: `0 ${theme.spacing.unit}px`,
351355
marginBottom: 50,
352-
backgroundColor: theme.palette.grey['200'],
353356
[theme.breakpoints.up('sm')]: {
354357
padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px`,
355358
},
@@ -364,7 +367,7 @@ const styles = theme => ({
364367
right: 0,
365368
bottom: 0,
366369
left: 0,
367-
padding: theme.spacing.unit * 2,
370+
padding: theme.spacing.unit * 4,
368371
textAlign: 'center',
369372
},
370373
});

‎resources/js/views/__backoffice/partials/Header.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -514,9 +514,11 @@ const Header = props => {
514514
color="inherit"
515515
>
516516
<Avatar className={classes.avatar}>
517-
{`${user.firstname.charAt(
518-
0,
519-
)}${user.lastname.charAt(0)}`}
517+
<Typography>
518+
{`${user.firstname.charAt(
519+
0,
520+
)}${user.lastname.charAt(0)}`}
521+
</Typography>
520522
</Avatar>
521523
</IconButton>
522524

0 commit comments

Comments
 (0)