* Added a dark theme

* Added translations
* Make use of the CssBaseLine
* Minor refactoring

Author: CodeDead

src/components/App/index.js

@@ -9,15 +9,19 @@ import Topbar from "../Topbar";
 import About from "../../routes/About";
 import File from "../../routes/File";
 import Text from "../../routes/Text";
+import Drawerbar from "../Drawerbar";
+import {CssBaseline} from "@material-ui/core";
 
 function App() {
 
     const themeIndex = useSelector(state => state.MainReducer.themeIndex);
     const color = ThemeSelector(themeIndex);
+    const themeType = themeIndex === 8 ? 'dark' : 'light';
 
     const theme = createMuiTheme({
         palette: {
             primary: color,
+            type: themeType
         }
     });
 
@@ -26,6 +30,8 @@ function App() {
             <BrowserRouter>
                 <div className="App">
                     <Topbar/>
+                    <Drawerbar/>
+                    <CssBaseline/>
                     <Switch>
                         <Route path={"/settings"}>
                             <Settings/>

src/components/CryptographyMenu/index.js

@@ -34,8 +34,8 @@ const CryptographyMenu = ({handleIndexChange, selectedIndex}) => {
             <ListItem button selected={selectedIndex === 0}>
                 <ListItemIcon onClick={() => handleIndexChange(0)}><KeyIcon/></ListItemIcon>
                 <ListItemText onClick={() => handleIndexChange(0)} primary={language.cryptography}/>
-                {openCollapse ? <ExpandLessIcon onClick={handleOpenMenu}/> :
-                    <ExpandMoreIcon onClick={handleOpenMenu}/>}
+                {openCollapse ? <ExpandLessIcon color="inherit" onClick={handleOpenMenu}/> :
+                    <ExpandMoreIcon color="inherit" onClick={handleOpenMenu}/>}
             </ListItem>
             <Collapse in={openCollapse} timeout="auto" unmountOnExit>
                 <List component="div" disablePadding>

src/components/Drawerbar/index.js

@@ -111,7 +111,7 @@ const Drawerbar = () => {
 
             <List>
                 <ListItem onClick={() => handleIndexChange(3)} selected={selectedItem === 3} button>
-                    <ListItemIcon><BuildIcon/></ListItemIcon>
+                    <ListItemIcon><BuildIcon color="inherit"/></ListItemIcon>
                     <ListItemText primary={language.settings}/>
                 </ListItem>
             </List>
@@ -120,12 +120,12 @@ const Drawerbar = () => {
 
             <List>
                 <ListItem onClick={() => handleIndexChange(4)} button>
-                    <ListItemIcon><HelpIcon/></ListItemIcon>
+                    <ListItemIcon><HelpIcon color="inherit" /></ListItemIcon>
                     <ListItemText primary={language.help}/>
                 </ListItem>
 
                 <ListItem onClick={() => handleIndexChange(5)} selected={selectedItem === 5} button>
-                    <ListItemIcon><InfoIcon/></ListItemIcon>
+                    <ListItemIcon><InfoIcon color="inherit"/></ListItemIcon>
                     <ListItemText primary={language.about}/>
                 </ListItem>
             </List>
@@ -134,7 +134,7 @@ const Drawerbar = () => {
 
             <List>
                 <ListItem onClick={() => remote.getGlobal("mainWindow").close()} button>
-                    <ListItemIcon><CloseIcon /></ListItemIcon>
+                    <ListItemIcon><CloseIcon color="inherit" /></ListItemIcon>
                     <ListItemText primary={language.exit} />
                 </ListItem>
             </List>

src/components/Topbar/index.js

@@ -25,10 +25,6 @@ const useStyles = makeStyles(theme => ({
     hide: {
         display: 'none'
     },
-    offset: {
-        ...theme.mixins.toolbar,
-        flexGrow: 1
-    },
     appBar: {
         transition: theme.transitions.create(['margin', 'width'], {
             easing: theme.transitions.easing.sharp,
@@ -112,7 +108,7 @@ const Topbar = () => {
 
     return (
         <div className={classes.root}>
-            <AppBar position="fixed" className={open ? classes.appBarShift + ' ' + classes.appBar : classes.appBar}>
+            <AppBar position="fixed" color={"primary"} className={open ? classes.appBarShift + ' ' + classes.appBar : classes.appBar}>
                 <Toolbar variant={"dense"}>
                     <IconButton edge="start" className={open ? classes.hide : null} color="inherit"
                                 aria-label="menu" onClick={openDrawer}>
@@ -191,8 +187,7 @@ const Topbar = () => {
                     </IconButton>
                 </Toolbar>
             </AppBar>
-            <div className={classes.offset}/>
-            <Drawerbar/>
+            <Toolbar />
         </div>
     );
 };

src/languages/de_DE.js

@@ -66,7 +66,9 @@ const de_DE = () => {
         minimizeEnabled: "Schaltfläche \"Minimieren\"",
         maximizeEnabled: "Schaltfläche \"Maximieren\"",
         languageEnabled: "Schaltfläche \"Sprache\"",
-        exit: "Schließen"
+        exit: "Schließen",
+        darkTheme: "Dunkel",
+        darkThemeDescription: "Schont die Augen."
     }
 };
 

src/languages/en_US.js

@@ -66,7 +66,9 @@ const en_US = () => {
         minimizeEnabled: "Minimize button",
         maximizeEnabled: "Maximize button",
         languageEnabled: "Language button",
-        exit: "Exit"
+        exit: "Exit",
+        darkTheme: "Dark",
+        darkThemeDescription: "Easy on the eyes."
     }
 };
 

src/languages/fr_FR.js

@@ -66,7 +66,9 @@ const fr_FR = () => {
         minimizeEnabled: "Bouton Réduire",
         maximizeEnabled: "Bouton Agrandir",
         languageEnabled: "Bouton de langue",
-        exit: "Fermer"
+        exit: "Fermer",
+        darkTheme: "Foncé",
+        darkThemeDescription: "Facile sur les yeux."
     }
 };
 

src/languages/it_IT.js

@@ -66,7 +66,9 @@ const it_IT = () => {
         minimizeEnabled: "Pulsante Riduci a icona",
         maximizeEnabled: "Pulsante Massimizza",
         languageEnabled: "Pulsante lingua",
-        exit: "Uscire"
+        exit: "Uscire",
+        darkTheme: "Buio",
+        darkThemeDescription: "Facile per gli occhi."
     }
 };
 

src/languages/jp_JP.js

@@ -66,7 +66,9 @@ const jp_JP = () => {
         minimizeEnabled: "最小化ボタン",
         maximizeEnabled: "最大化ボタン",
         languageEnabled: "言語ボタン",
-        exit: "出口"
+        exit: "出口",
+        darkTheme: "闇",
+        darkThemeDescription: "目に優しい。"
     }
 };
 

src/languages/nl_NL.js

@@ -66,7 +66,9 @@ const nl_NL = () => {
         minimizeEnabled: "Minimaliseer knop",
         maximizeEnabled: "Maximaliseer knop",
         languageEnabled: "Taal knop",
-        exit: "Sluiten"
+        exit: "Sluiten",
+        darkTheme: "Donker",
+        darkThemeDescription: "Makkelijk voor de ogen."
     }
 };