Add status header

Dashboard/app/main/constants/index.js

@@ -1,5 +1,5 @@
 //App preferences
-export const windowSize = { width: 620, height: 320 };
+export const windowSize = { width: 620, height: 350 };
 export const windowOffset = 40;
 export const appIconPath = '../../dist-assets/icon.ico';
 export const trayIconPath = '../../dist-assets/tray.ico';

Dashboard/app/renderer/app.js

@@ -7,6 +7,7 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
 import { ThemeProvider } from '@material-ui/core/styles';
 import LampButtonList from './components/LampButtonList';
+import Header from './components/Header';
 
 const store = createStore(
   rootReducer,
@@ -31,6 +32,7 @@ ReactDOM.render(
   <Provider store={store}>
     <ThemeProvider theme={darkTheme}>
       <CssBaseline />
+      <Header error={false} />
       <LampButtonList />
     </ThemeProvider>
   </Provider>,

Dashboard/app/renderer/components/Header.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import Box from '@material-ui/core/Box';
+import SettingsIcon from '@material-ui/icons/Settings';
+import IconButton from '@material-ui/core/IconButton';
+import CheckCircleIcon from '@material-ui/icons/CheckCircle';
+import ErrorIcon from '@material-ui/icons/Error';
+import Tooltip from '@material-ui/core/Tooltip';
+import { useSelector } from 'react-redux/';
+
+function ConnectionStatus({ error }) {
+  if (error) {
+    return <ErrorIcon />;
+  } else {
+    return <CheckCircleIcon />;
+  }
+}
+
+export default function Header() {
+  const comConnectionStatus = useSelector((state) => state.comConnectionStatusReducer);
+
+  return (
+    <div>
+      <Box
+        bgcolor="primary.main"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          height: 30,
+        }}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            justifyItems: 'space-between',
+            width: '100%',
+            marginLeft: 10,
+            marginRight: 10,
+          }}>
+          <Tooltip title={comConnectionStatus ? 'Click to reconnect' : 'Click to disconnect'}>
+            <IconButton size="small">
+              <ConnectionStatus error={comConnectionStatus} />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title="Open Settings">
+            <IconButton size="small">
+              <SettingsIcon />
+            </IconButton>
+          </Tooltip>
+        </div>
+      </Box>
+    </div>
+  );
+}