Skip to content

Commit fe57823

Browse files
hodeszahodesza
committed
Darkmode implemented
1 parent 4a4ccf9 commit fe57823

13 files changed

+1542
-982
lines changed

‎.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
declare module '*.png'
1+
declare module '*.png'

‎app/components/Occupied.tsx

+61-6
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ import DashboardIcon from '@material-ui/icons/Dashboard';
2424
import NotificationsIcon from '@material-ui/icons/Notifications';
2525
import PersonIcon from '@material-ui/icons/Person';
2626
import UpdateIcon from '@material-ui/icons/Update';
27-
2827
// MODALS
2928
import AddModal from '../modals/AddModal';
3029
import ServicesModal from '../modals/ServicesModal';
@@ -33,6 +32,7 @@ import ServicesModal from '../modals/ServicesModal';
3332
// import '../stylesheets/Occupied.scss';
3433
import '../stylesheets/Occupied.scss';
3534

35+
3636
// DASHBOARD CONTEXT
3737
import { DashboardContext } from '../context/DashboardContext';
3838

@@ -46,15 +46,17 @@ type ClickEvent = React.MouseEvent<HTMLElement>;
4646

4747
const Occupied = React.memo(() => {
4848
const { setServicesData } = useContext(ApplicationContext);
49-
const { applications, getApplications, deleteApp } = useContext(DashboardContext);
49+
const { applications, getApplications, deleteApp, mode, changeMode } = useContext(DashboardContext);
5050
const [open, setOpen] = useState<boolean>(false);
5151
const [addOpen, setAddOpen] = useState<boolean>(false);
5252
const [index, setIndex] = useState<number>(0);
5353
const [app, setApp] = useState<string>('');
5454
const [searchTerm, setSearchTerm] = useState<string>('Search...');
5555
// Dynamic refs
5656
const delRef = useRef<any>([]);
57-
57+
//check context from dashboard
58+
console.log(mode);
59+
5860
useEffect(() => {
5961
setServicesData([]);
6062
getApplications();
@@ -75,8 +77,61 @@ const Occupied = React.memo(() => {
7577
setOpen(true);
7678
}
7779
};
78-
79-
const useStyles = makeStyles<Theme, StyleProps>(theme => ({
80+
//Conditional Rendering of UI Modals for Light and Dark Mode
81+
const useStylesDark = makeStyles<Theme, StyleProps>(theme => ({
82+
// ALL CARDS
83+
paper: {
84+
display: 'flex',
85+
flexDirection: 'column',
86+
alignContent: 'center',
87+
alignItems: 'center',
88+
position: 'relative',
89+
overflow: 'visible',
90+
height: 280,
91+
width: 280,
92+
textAlign: 'center',
93+
color: '#ffffff', // dark mode
94+
whiteSpace: 'nowrap',
95+
backgroundColor: 'transparent', // dark mode
96+
borderRadius: 3,
97+
border: '0',
98+
boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)', // dark mode
99+
'&:hover, &.Mui-focusVisible': {
100+
backgroundColor: 'rgba(255, 255, 255, 0.2)', // dark mode
101+
color: '#ffffff',
102+
fontWeight: 600,
103+
},
104+
},
105+
iconbutton: {
106+
boxShadow: 'none',
107+
color: 'none',
108+
visibility: 'hidden',
109+
},
110+
btnStyle: {
111+
position: 'absolute',
112+
top: -10,
113+
left: -72,
114+
margin: '0',
115+
color: '#eeeeee',
116+
borderRadius: '0',
117+
backgroundColor: 'none',
118+
visibility: 'visible',
119+
},
120+
icon: {
121+
width: '75px',
122+
height: '75px',
123+
boxShadow: 'none',
124+
},
125+
// ALL CARDS: CONTENT
126+
fontStyles: {
127+
fontSize: '18px',
128+
fontFamily: 'Roboto',
129+
fontWeight: 300,
130+
// color: '#444d56',
131+
color: '#ffffff', // dark mode
132+
}
133+
}));
134+
const useStylesLight = makeStyles<Theme, StyleProps>(theme => ({
80135
// ALL CARDS
81136
paper: {
82137
display: 'flex',
@@ -130,7 +185,7 @@ const Occupied = React.memo(() => {
130185
}
131186
}));
132187

133-
const classes = useStyles({} as StyleProps);
188+
let classes = (mode === 'light mode')? useStylesLight({} as StyleProps) : useStylesDark({} as StyleProps) ;
134189

135190
return (
136191
<div className="entireArea">

‎app/components/Settings.tsx

+16-3
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,30 @@
1-
import React from 'react';
1+
import React, {useContext, useEffect, useState} from 'react';
22
import '../stylesheets/Settings.scss';
3+
4+
// DASHBOARD CONTEXT
5+
import { DashboardContext } from '../context/DashboardContext';
6+
37
// Need to add flag to turn off the splash at start
48
// Need to add flag to turn off getting started page
59
// Need to add flag to turn on/off live data (ideally persist on restart)
610
// Need to add dark mode
11+
12+
//Typescript
13+
type ClickEvent = React.MouseEvent<HTMLElement>;
14+
715
const Settings: React.SFC = React.memo((props) => {
16+
//use context from Dash board regarding currentMode
17+
let {mode, changeMode} = useContext(DashboardContext);
18+
const handleClick = (mode: string) => {
19+
changeMode(mode);
20+
}
821
return (
922
<div className="settings">
10-
<button className="mode" id="lightMode">
23+
<button className="mode" id="lightMode" onClick={() => handleClick("light mode")}>
1124
Light
1225
</button>
1326

14-
<button className="mode" id="darkMode">
27+
<button className="mode" id="darkMode" onClick={() => handleClick("dark mode")}>
1528
Dark
1629
</button>
1730
</div>

‎app/containers/MainContainer.tsx

+24-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, {useContext} from 'react';
22
import { Route, Switch } from 'react-router-dom';
33

44
// import GraphsContainer from './Archived';
@@ -14,11 +14,31 @@ import '../stylesheets/MainContainer.scss';
1414
// import '../stylesheets/MainContainer_darkmode.scss';
1515

1616
import ApplicationContextProvider from '../context/ApplicationContext';
17-
17+
import { DashboardContext } from '../context/DashboardContext';
18+
//var currOccu
19+
//if mode = dark set currOccu to dark mode
1820
const MainContainer = React.memo(() => {
19-
21+
const { mode, changeMode } = useContext(DashboardContext);
22+
23+
const lightMode = {
24+
backgroundColor: "#eeeeee",
25+
flex: "1",
26+
minHeight: "100vh",
27+
flexDirection: "column" as "column",
28+
paddingLeft: "140px",
29+
}
30+
const darkMode = {
31+
backgroundImage: "url('../assets/mountain_longer.png')",
32+
backgroundSize: 'contain',
33+
backgroundColor: "#eeeeee",
34+
flex: "1",
35+
minHeight: "100vh",
36+
flexDirection: "column" as "column",
37+
paddingLeft: "140px",
38+
}
39+
let currentMode = (mode === 'light mode')? lightMode : darkMode;
2040
return (
21-
<div className="main-container">
41+
<div className="main-container" style ={currentMode}>
2242
<div className="main-routes">
2343
<Switch>
2444
<Route exact path="/" component={Home} />

‎app/containers/SidebarContainer.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, {useContext, useEffect, useState} from 'react';
22
import { Link } from 'react-router-dom';
33

44
import HomeSharpIcon from '@material-ui/icons/HomeSharp';
@@ -9,6 +9,8 @@ import SettingsIcon from '@material-ui/icons/Settings';
99
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
1010
import '../stylesheets/SidebarContainer.scss';
1111

12+
import { DashboardContext } from '../context/DashboardContext';
13+
1214
const iconStyles = {
1315
WebkitBoxSizing: 'border-box',
1416
boxShadow: 'none',
@@ -19,6 +21,8 @@ const iconStyles = {
1921
}
2022

2123
const SidebarContainer = React.memo(function SidebarContainer(props): JSX.Element {
24+
const { mode, changeMode } = useContext(DashboardContext);
25+
console.log(mode);
2226
return (
2327
<div className="sidebar-container" id="mySidebar">
2428
<div className="sidebar">

‎app/context/DashboardContext.tsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const DashboardContext = createContext<any>(null);
2424
*/
2525
const DashboardContextProvider = React.memo(({ children }: Props) => {
2626
const [applications, setApplications] = useState<string[]>([]);
27-
27+
const [mode, setMode] = useState<string>('light mode');
2828
/**
2929
* Sends a request for all existing applications belonging to a user
3030
* and sets the applications state to the list of app names
@@ -57,9 +57,17 @@ const DashboardContextProvider = React.memo(({ children }: Props) => {
5757
const result = ipcRenderer.sendSync('deleteApp', index);
5858
setApplications(result);
5959
}, []);
60+
61+
/**
62+
* Sets Light and Dark mode for application from Settings
63+
*/
6064

65+
const changeMode = useCallback((currMode: string) => {
66+
setMode(currMode);
67+
// console.log('hello');
68+
}, [])
6169
return (
62-
<DashboardContext.Provider value={{ applications, getApplications, addApp, deleteApp }}>
70+
<DashboardContext.Provider value={{ applications, getApplications, addApp, deleteApp, mode, changeMode }}>
6371
{children}
6472
</DashboardContext.Provider>
6573
);

‎app/stylesheets/MainContainer.scss

+21-24
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,23 @@
11
@import './constants.scss';
2-
32
.main-container {
4-
background-color: $grey;
5-
flex: 1;
6-
min-height: 100vh;
7-
@include centerWithFlex(space-between);
8-
flex-direction: column;
9-
padding-left: 140px;
10-
11-
.main-routes {
12-
width: 100%;
13-
height: 100%;
14-
padding-bottom: 20px;
15-
}
16-
17-
.copyright-container {
18-
@include centerWithFlex(center);
19-
position: fixed;
20-
bottom: 0;
21-
width: 100%;
22-
padding: 10px;
23-
margin: 30px 0px;
24-
color: $background;
25-
}
26-
}
3+
background-color: $grey;
4+
flex: 1;
5+
min-height: 100vh;
6+
@include centerWithFlex(space-between);
7+
flex-direction: column;
8+
padding-left: 140px;
9+
.main-routes {
10+
width: 100%;
11+
height: 100%;
12+
padding-bottom: 20px;
13+
}
14+
.copyright-container {
15+
@include centerWithFlex(center);
16+
position: fixed;
17+
bottom: 0;
18+
width: 100%;
19+
padding: 10px;
20+
margin: 30px 0px;
21+
color: $background;
22+
}
23+
}

‎app/stylesheets/MainContainer_darkmode.scss

+22-25
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
11
@import './constants.scss';
2-
32
.main-container {
4-
background-image: url('../assets/mountain_longer.png');
5-
background-size: contain;
6-
flex: 1;
7-
min-height: 100vh;
8-
@include centerWithFlex(space-between);
9-
flex-direction: column;
10-
padding-left: 140px;
11-
12-
.main-routes {
13-
width: 100%;
14-
height: 100%;
15-
padding-bottom: 20px;
16-
}
17-
18-
.copyright-container {
19-
@include centerWithFlex(center);
20-
position: fixed;
21-
bottom: 0;
22-
width: 100%;
23-
padding: 10px;
24-
margin: 30px 0px;
25-
color: $background;
26-
}
27-
}
3+
// background-image: url('../assets/mountain_longer.png');
4+
// background-size: contain;
5+
// flex: 1;
6+
// min-height: 100vh;
7+
@include centerWithFlex(space-between);
8+
// flex-direction: column;
9+
// padding-left: 140px;
10+
.main-routes {
11+
width: 100%;
12+
height: 100%;
13+
padding-bottom: 20px;
14+
}
15+
.copyright-container {
16+
@include centerWithFlex(center);
17+
position: fixed;
18+
bottom: 0;
19+
width: 100%;
20+
padding: 10px;
21+
margin: 30px 0px;
22+
color: $background;
23+
}
24+
}

0 commit comments

Comments
 (0)