Merge pull request #33 from CodeDead/feature/theme-reset

Feature/theme reset

Author: CodeDead

README.md

@@ -19,6 +19,24 @@ DeadHash is a free and open-source utility to calculate file and text hashes. Th
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and built using [Electron](https://electronjs.org/).
 
+## Building
+
+In order to produce binary distributable files or to start a development build, you must first issue the following command,
+in order to ensure that the React build is up-to-date:
+```
+yarn react-build
+```
+
+After running `yarn react-build`, you can issue the following command in order to produce the binary distributable files:
+```
+yarn build
+```
+
+If you want to start the development version, you can issue the following command, after running `yarn react-build`:
+```
+yarn start
+```
+
 ## Learn More
 
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

src/components/App/index.jsx

@@ -5,7 +5,7 @@ import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import Home from '../../routes/Home';
 import Settings from '../../routes/Settings';
 import ThemeSelector from '../../utils/ThemeSelector';
-import Topbar from '../Topbar';
+import TopBar from '../TopBar';
 import About from '../../routes/About';
 import File from '../../routes/File';
 import Text from '../../routes/Text';
@@ -71,7 +71,7 @@ const App = () => {
     <ThemeProvider theme={theme}>
       <BrowserRouter>
         <DropZone enabled={enabled} onDrop={onDrop} reRoute="/file">
-          <Topbar />
+          <TopBar />
           <CssBaseline />
           <Switch>
             <Route path="/settings">

src/components/Drawerbar/index.jsx src/components/DrawerBar/index.jsxsrc/components/Drawerbar/index.jsx renamed to src/components/DrawerBar/index.jsx

@@ -37,7 +37,7 @@ const useStyles = makeStyles((theme) => ({
 
 const { ipcRenderer } = window.require('electron');
 
-const Drawerbar = ({ open, onClose }) => {
+const DrawerBar = ({ open, onClose }) => {
   const [state] = useContext(MainContext);
   const language = state.languages[state.languageIndex];
   const selectedItem = state.selectedListItem;
@@ -145,4 +145,4 @@ const Drawerbar = ({ open, onClose }) => {
   );
 };
 
-export default Drawerbar;
+export default DrawerBar;

src/components/Topbar/index.jsx src/components/TopBar/index.jsxsrc/components/Topbar/index.jsx renamed to src/components/TopBar/index.jsx

@@ -9,11 +9,13 @@ import MenuIcon from '@material-ui/icons/Menu';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import CloseIcon from '@material-ui/icons/Close';
+import Brightness5Icon from '@material-ui/icons/Brightness5';
+import Brightness7Icon from '@material-ui/icons/Brightness7';
 import MinimizeIcon from '@material-ui/icons/Minimize';
 import FullScreenIcon from '@material-ui/icons/Fullscreen';
 import FullscreenExitIcon from '@material-ui/icons/FullscreenExit';
-import Drawerbar from '../Drawerbar';
-import { setLanguageIndex } from '../../reducers/MainReducer/Actions';
+import DrawerBar from '../DrawerBar';
+import { setLanguageIndex, setThemeStyle } from '../../reducers/MainReducer/Actions';
 import { MainContext } from '../../contexts/MainContextProvider';
 
 const drawerWidth = 220;
@@ -45,11 +47,11 @@ const useStyles = makeStyles((theme) => ({
 
 const { ipcRenderer } = window.require('electron');
 
-const Topbar = () => {
+const TopBar = () => {
   const [state, d1] = useContext(MainContext);
 
   const {
-    languageIndex, minimizeEnabled, maximizeEnabled, languageEnabled,
+    languageIndex, minimizeEnabled, maximizeEnabled, languageEnabled, themeStyle,
   } = state;
   const language = state.languages[languageIndex];
 
@@ -124,6 +126,13 @@ const Topbar = () => {
     ipcRenderer.send('handle-maximize');
   };
 
+  /**
+   * Change the theme style
+   */
+  const changeThemeStyle = () => {
+    d1(setThemeStyle(themeStyle === 'dark' ? 'light' : 'dark'));
+  };
+
   return (
     <div className={classes.root}>
       <AppBar
@@ -145,6 +154,10 @@ const Topbar = () => {
             {language.appName}
           </Typography>
 
+          <IconButton color="inherit" onClick={changeThemeStyle}>
+            {themeStyle === 'dark' ? <Brightness5Icon /> : <Brightness7Icon />}
+          </IconButton>
+
           {languageEnabled
             ? (
               <div>
@@ -264,10 +277,10 @@ const Topbar = () => {
           </IconButton>
         </Toolbar>
       </AppBar>
-      <Drawerbar open={drawerOpen} onClose={() => setDrawerOpen(false)} />
+      <DrawerBar open={drawerOpen} onClose={() => setDrawerOpen(false)} />
       <Toolbar />
     </div>
   );
 };
 
-export default Topbar;
+export default TopBar;

src/reducers/MainReducer/index.js

@@ -52,6 +52,7 @@ const MainReducer = (state, action) => {
       };
     case RESET_MAIN_REDUCER:
       localStorage.languageIndex = 1;
+      localStorage.themeStyle = 'light';
       localStorage.themeIndex = 0;
       localStorage.autoUpdate = true;
       localStorage.minimizeEnabled = true;
@@ -62,6 +63,7 @@ const MainReducer = (state, action) => {
       return {
         ...state,
         languageIndex: 1,
+        themeStyle: 'light',
         themeIndex: 0,
         autoUpdate: true,
         minimizeEnabled: true,