Skip to content

Commit 6b7e195

Browse files
Wilson-TranWilson-Tran
authored
Merge pull request #10 from oslabs-beta/rb/darkMode-sun-moon
Rb/dark mode sun moon
2 parents 8dd6816 + bd37f96 commit 6b7e195

File tree

6 files changed

+158
-63
lines changed

6 files changed

+158
-63
lines changed

‎public/moon.png

1001 Bytes
Loading

‎public/sun.png

1.12 KB
Loading

‎src/App.jsx

Lines changed: 51 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import React, { useReducer } from 'react';
22
import styles from './App.module.scss';
3-
import { GlobalContext, globalState, globalReducer } from './context/reducers/globalReducer';
3+
import {
4+
GlobalContext,
5+
globalState,
6+
globalReducer,
7+
} from './context/reducers/globalReducer';
48
import { toggleTheme } from './context/actions/globalActions';
59
import ProjectLoader from './pages/ProjectLoader/ProjectLoader.jsx';
610
import NavBar from './components/NavBar/NavBar';
@@ -9,13 +13,14 @@ import RightPanel from './pages/RightPanel/RightPanel';
913
import FileDirectory from './components/FileDirectory/FileDirectory';
1014
import { CSSTransition } from 'react-transition-group';
1115
import { Switch } from '@material-ui/core';
16+
import { BiSun, BiMoon } from 'react-icons/bi';
1217
// import About from './pages/About/About';
1318

1419
const App = () => {
1520
const [global, dispatchToGlobal] = useReducer(globalReducer, globalState);
1621

1722
const changeTheme = () => {
18-
localStorage.setItem("theme", global.theme === 'light' ? 'dark' : 'light');
23+
localStorage.setItem('theme', global.theme === 'light' ? 'dark' : 'light');
1924
dispatchToGlobal(toggleTheme());
2025
};
2126

@@ -25,29 +30,43 @@ const App = () => {
2530
{/* pass global state and dispatch function as prop to context provider for child components */}
2631
<GlobalContext.Provider value={[global, dispatchToGlobal]}>
2732
<div id={styles.toggle}>
28-
<Switch checked={global.theme === 'light' ? true : false} onChange={changeTheme}/>
33+
<div id={styles.icon}>
34+
<span title="Dark Mode">
35+
<BiMoon size={'1.5rem'} />
36+
</span>
37+
<span title="Change theme">
38+
<Switch
39+
checked={global.theme === 'light' ? true : false}
40+
onChange={changeTheme}
41+
/>
42+
</span>
43+
<span title="Light Mode">
44+
<BiSun size={'1.5rem'} />
45+
</span>
46+
</div>
2947
</div>
30-
<ProjectLoader/>
48+
<ProjectLoader />
3149
</GlobalContext.Provider>
3250
</div>
3351
);
3452
}
3553
return (
36-
/**
37-
* Wrap the components that we want to share the unique states with.
38-
* You can only provide one value to a Provider.
39-
* - In order to avoid creating separate Contexts, wrap multiples in an array (ex: testCase and dispatchToTestCase).
40-
*
41-
*
42-
* NOTE: This concept is similar to Redux and how it provides the store to your top-level component and all of its children.
43-
* We just have to create separate providers for each reducer because we don’t have a global store ala Redux.
44-
*
45-
*
46-
* We access the value that we gave to the Provider through useContext
47-
*
48-
* 01/29 There does not seem to be 'about' page functionality visible
49-
*/
54+
/**
55+
* Wrap the components that we want to share the unique states with.
56+
* You can only provide one value to a Provider.
57+
* - In order to avoid creating separate Contexts, wrap multiples in an array (ex: testCase and dispatchToTestCase).
58+
*
59+
*
60+
* NOTE: This concept is similar to Redux and how it provides the store to your top-level component and all of its children.
61+
* We just have to create separate providers for each reducer because we don’t have a global store ala Redux.
62+
*
63+
*
64+
* We access the value that we gave to the Provider through useContext
65+
*
66+
* 01/29 There does not seem to be 'about' page functionality visible
67+
*/
5068
<div
69+
//This could/should be deleted:
5170
// id={
5271
// global.isProjectLoaded === 'about'
5372
// ? ''
@@ -62,14 +81,20 @@ const App = () => {
6281
id={styles.app}
6382
>
6483
<GlobalContext.Provider value={[global, dispatchToGlobal]}>
65-
<NavBar inAboutPage={false} />
66-
<div id={styles[`content${global.theme}`]}>
67-
<CSSTransition in={global.isFileDirectoryOpen} timeout={200} classNames="my-node" unmountOnExit appear>
68-
<FileDirectory fileTree={global.fileTree} />
69-
</CSSTransition>
70-
<LeftPanel />
71-
<RightPanel />
72-
</div>
84+
<NavBar inAboutPage={false} />
85+
<div id={styles[`content${global.theme}`]}>
86+
<CSSTransition
87+
in={global.isFileDirectoryOpen}
88+
timeout={200}
89+
classNames="my-node"
90+
unmountOnExit
91+
appear
92+
>
93+
<FileDirectory fileTree={global.fileTree} />
94+
</CSSTransition>
95+
<LeftPanel />
96+
<RightPanel />
97+
</div>
7398
</GlobalContext.Provider>
7499
</div>
75100
);

‎src/App.module.scss

Lines changed: 63 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,41 +3,42 @@
33
@import 'assets/stylesheets/fonts';
44
@import 'assets/stylesheets/colors';
55

6-
//file directory is open but right panel is closed
7-
#fileDirectoryOpenRightPanelClosed {
8-
display: grid;
9-
grid-template-columns: 280px auto;
10-
grid-template-rows: 100vh;
11-
grid-template-areas: 'navBar leftPanel';
12-
background-color: $light-gray3;
13-
}
6+
//Unnecessary/Not Used:
7+
// //file directory is open but right panel is closed
8+
// #fileDirectoryOpenRightPanelClosed {
9+
// display: grid;
10+
// grid-template-columns: 280px auto;
11+
// grid-template-rows: 100vh;
12+
// grid-template-areas: 'navBar leftPanel';
13+
// background-color: $light-gray3;
14+
// }
1415

15-
//both open
16-
#fileDirectoryOpenRightPanelOpen {
17-
display: grid;
18-
grid-template-columns: 280px auto 30%;
19-
grid-template-rows: 100vh;
20-
grid-template-areas: 'navBar leftPanel rightPanel';
21-
background-color: $eggshell;
22-
}
16+
// //both open
17+
// #fileDirectoryOpenRightPanelOpen {
18+
// display: grid;
19+
// grid-template-columns: 280px auto 30%;
20+
// grid-template-rows: 100vh;
21+
// grid-template-areas: 'navBar leftPanel rightPanel';
22+
// background-color: $eggshell;
23+
// }
2324

24-
//file directory is closed but right panel is open
25-
#fileDirectoryClosedRightPanelOpen {
26-
display: grid;
27-
grid-template-columns: 48px auto 30%;
28-
grid-template-rows: 100vh;
29-
grid-template-areas: 'navBar leftPanel rightPanel';
30-
background-color: $eggshell;
31-
}
25+
// //file directory is closed but right panel is open
26+
// #fileDirectoryClosedRightPanelOpen {
27+
// display: grid;
28+
// grid-template-columns: 48px auto 30%;
29+
// grid-template-rows: 100vh;
30+
// grid-template-areas: 'navBar leftPanel rightPanel';
31+
// background-color: $eggshell;
32+
// }
3233

33-
//both closed
34-
#fileDirectoryClosedRightPanelClosed {
35-
display: grid;
36-
grid-template-columns: 48px auto;
37-
grid-template-rows: 100vh;
38-
grid-template-areas: 'navBar leftPanel';
39-
background-color: $light-gray3;
40-
}
34+
// //both closed
35+
// #fileDirectoryClosedRightPanelClosed {
36+
// display: grid;
37+
// grid-template-columns: 48px auto;
38+
// grid-template-rows: 100vh;
39+
// grid-template-areas: 'navBar leftPanel';
40+
// background-color: $light-gray3;
41+
// }
4142

4243
#app{
4344
width: 100%;
@@ -95,4 +96,34 @@
9596
top: 10px;
9697
right: 10px;
9798
z-index: 3000;
99+
}
100+
101+
#icon {
102+
flex: 0 0 auto;
103+
display: flex;
104+
align-items: center;
105+
106+
span{
107+
cursor: pointer;
108+
&:hover{
109+
svg {
110+
path {
111+
fill: var(--icon-fill);
112+
}
113+
}
114+
}
115+
svg {
116+
path {
117+
fill: $eggshell;
118+
}
119+
}
120+
121+
}
122+
#activeEffect {
123+
svg {
124+
path {
125+
fill: var(--icon-fill);
126+
}
127+
}
128+
}
98129
}

‎src/components/NavBar/NavBar.jsx

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@ import OpenFolder from '../OpenFolder/OpenFolderButton';
1616
import ExportFileModal from '../Modals/ExportFileModal';
1717
import Modal from '../Modals/Modal';
1818
import { VscSettingsGear } from 'react-icons/vsc'
19-
import { FaFileExport, FaUserCircle } from 'react-icons/fa'
20-
import { GoFileSubmodule } from 'react-icons/go'
19+
import { FaFileExport, FaUserCircle } from 'react-icons/fa';
20+
import { BiSun, BiMoon } from 'react-icons/bi';
21+
import { GoFileSubmodule } from 'react-icons/go';
2122
import { ImHome3 } from "react-icons/im"
2223
import { Switch } from '@material-ui/core';
2324
import { useToggleModal } from '../TestMenu/testMenuHooks';
@@ -101,9 +102,17 @@ const NavBar = ({ inAboutPage }) => {
101102
<Button variant="outlined" type="button" onClick={handleLogout} id={styles.loginBtn}>
102103
LOGOUT
103104
</Button>
104-
<span title='Change theme'>
105-
<Switch checked={theme === 'light' ? true : false} onChange={changeTheme}/>
106-
</span>
105+
<div className={styles.modBtnContainer}>
106+
<span title='Dark Mode'>
107+
<BiMoon size={'1.5rem'} />
108+
</span>
109+
<span title='Change theme'>
110+
<Switch checked={theme === 'light' ? true : false} onChange={changeTheme}/>
111+
</span>
112+
<span title='Light Mode'>
113+
<BiSun size={'1.5rem'} />
114+
</span>
115+
</div>
107116
</div>
108117
<div>
109118
<Modal

‎src/components/NavBar/NavBar.module.scss

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,36 @@
5959
}
6060
}
6161

62+
.modBtnContainer{
63+
flex: 0 0 auto;
64+
display: flex;
65+
align-items: center;
66+
67+
span{
68+
cursor: pointer;
69+
&:hover{
70+
svg {
71+
path {
72+
fill: var(--icon-fill);
73+
}
74+
}
75+
}
76+
svg {
77+
path {
78+
fill: $eggshell;
79+
}
80+
}
81+
82+
}
83+
#activeEffect {
84+
svg {
85+
path {
86+
fill: var(--icon-fill);
87+
}
88+
}
89+
}
90+
}
91+
6292
#spearmintTitle{
6393
flex: 1 0 auto;
6494
align-self: center;

0 commit comments

Comments
 (0)