feat(sidebar): Add about PlayOS menu option

README.md

@@ -8,12 +8,12 @@ PlayOS can be integrated with any blockchain that supports some sort of programm
 
 We are still porting code over to a decentralised manner, any help is greatly appreciated.
 
-## Running PlayOS
+## ⚙️ Running PlayOS
 ```npm i && npm start```
 
 PlayOS will be available at `http://localhost:3000/`
 
-## Contributing to PlayOS
+## 📝 Contributing to PlayOS
 
 We accept contributions to the repository. Feel free to fork and send in a PR. You can check the issues for any known tasks (or add your own).
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "playos",
-  "version": "1.8.0",
+  "version": "2.0.0-alpha",
   "description": "PlayOS, blockchain agnostic portal",
   "main": "index.js",
   "scripts": {

src/js/components/molecules/SideNavigation/AboutDialog.scss

@@ -0,0 +1,20 @@
+.title {
+    padding-bottom: 0 !important;
+
+    h2 {
+        display: flex;
+
+        span {
+            padding-left: 20px;
+        }
+    }
+}
+
+.content {
+    padding-top: 0 !important;
+}
+
+.version {
+    text-align: right;
+    margin-bottom: 30px !important;
+}

src/js/components/molecules/SideNavigation/AboutDialog.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogActions from '@material-ui/core/DialogActions';
+import Typography from '@material-ui/core/Typography';
+const packageJson = require('../../../../../package.json');
+const styles = require('./AboutDialog.scss');
+
+interface Props {
+    open: boolean;
+    onClose: () => void;
+}
+
+
+export default function AboutDialog(props: Props) {
+    return (
+        <Dialog open={props.open} onClose={() => props.onClose()}>
+            <DialogTitle className={styles.title}>
+                <img src="res/img/PlayOSLogoSide_black.svg" alt="PlayOS" />
+                <span>Matterhorn</span>
+            </DialogTitle>
+            <DialogContent className={styles.content}>
+                <DialogContentText>
+                    <Typography variant="body2" className={styles.version}>v{packageJson.version}</Typography>
+                    Licensed under GPL v3 <br />
+                    Code available at GitHub
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => props.onClose()}>Ok</Button>
+            </DialogActions>
+        </Dialog>
+    );
+}

src/js/components/molecules/SideNavigation/SideNavigation.tsx

@@ -7,9 +7,11 @@ import ListItemText from '@material-ui/core/ListItemText';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew';
 import GetAppIcon from '@material-ui/icons/GetApp';
+import InfoIcon from '@material-ui/icons/Info';
 import { setOpenSideBarNavigationState } from '../../../store/SideBarNavigationStore';
 import UserService from '../../../services/UserService';
 import AppInstallDialog from './AppInstallDialog';
+import AboutDialog from './AboutDialog';
 const styles = require('./SideNavigation.scss');
 
 interface Props {
@@ -19,6 +21,7 @@ interface Props {
 
 function SideNavigation(props: Props) {
     const [isAppInstallDialogOpen, setAppInstallDialogOpen] = React.useState(false);
+    const [isAboutDialogOpen, setAboutDialogOpen] = React.useState(false);
 
     function handleDrawerOnClose() {
         props.dispatch(setOpenSideBarNavigationState(false));
@@ -38,6 +41,11 @@ function SideNavigation(props: Props) {
         setAppInstallDialogOpen(false);
     }
 
+    function handleAboutClick() {
+        handleDrawerOnClose();
+        setAboutDialogOpen(true);
+    }
+
     return (
         <>
             <Drawer className={styles.drawer} anchor="right" open={props.isOpen} onClose={handleDrawerOnClose}>
@@ -48,6 +56,12 @@ function SideNavigation(props: Props) {
                         </ListItemIcon>
                         <ListItemText>Install App</ListItemText>
                     </ListItem>
+                    <ListItem button onClick={handleAboutClick}>
+                        <ListItemIcon>
+                            <InfoIcon />
+                        </ListItemIcon>
+                        <ListItemText>About PlayOS</ListItemText>
+                    </ListItem>
                     <ListItem button onClick={handleLogoutClick}>
                         <ListItemIcon>
                             <PowerSettingsNewIcon />
@@ -57,6 +71,7 @@ function SideNavigation(props: Props) {
                 </List>
             </Drawer>
             <AppInstallDialog open={isAppInstallDialogOpen} onClose={handleInstallAppDialogClose} />
+            <AboutDialog open={isAboutDialogOpen} onClose={() => setAboutDialogOpen(false)} />
         </>
     );
 }