Merge bddf134 into a7d1c1f

daemon/web/components/IconHeader/IconHeader.js

@@ -9,8 +9,8 @@ const icons = {
   settings: <i className="fas fa-cog" />,
 };
 
-const IconHeader = ({ title, type }) => (
-  <div className="iconheader">
+const IconHeader = ({ title, type, style }) => (
+  <div className="iconheader" style={style}>
     {icons[type]}
     <h1 className="header">{title}</h1>
   </div>
@@ -19,6 +19,7 @@ const IconHeader = ({ title, type }) => (
 IconHeader.propTypes = {
   title: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
+  style: PropTypes.object,
 };
 
 export default IconHeader;

daemon/web/components/ShutdownButton/ShutdownButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './index.sass';
+
+const ShutdownButton = ({ style }) =>
+  (
+    <div>
+      <button className="ShutdownButton" type="button" disabled style={style}>Shut down</button>
+    </div>
+  );
+
+ShutdownButton.propTypes = {
+  style: PropTypes.object,
+};
+
+export default ShutdownButton;

daemon/web/components/ShutdownButton/index.sass

@@ -0,0 +1,14 @@
+@import '../../styles/index'
+
+.ShutdownButton
+  font-family: Rubik
+  font-size: 12px
+  font-weight: 500
+  letter-spacing: 1px
+  padding: 5px 10px
+  border-radius: 4px
+  border: none
+  border-bottom: 1px solid $separator
+
+  &:disabled
+    opacity: 0.5

daemon/web/pages/main/Main.js

@@ -11,6 +11,7 @@ import {
 import InertiaAPI from '../../common/API';
 import Containers from '../containers/Containers';
 import Dashboard from '../dashboard/Dashboard';
+import Settings from '../settings/Settings';
 import * as mainActions from '../../actions/main';
 
 // hardcode all styles for now, until we flesh out UI
@@ -232,6 +233,7 @@ class MainWrapper extends React.Component {
 
           <Link to={`${this.props.match.url}/dashboard`}>Click to go to Dashboard</Link>
           <Link to={`${this.props.match.url}/containers`}>Click to go to Containers</Link>
+          <Link to={`${this.props.match.url}/settings`}>Click to go to Settings</Link>
         </header>
 
         <div style={styles.innerContainer}>
@@ -260,6 +262,11 @@ class MainWrapper extends React.Component {
                 path={`${this.props.match.url}/containers`}
                 component={() => <Containers />}
               />
+              <Route
+                exact
+                path={`${this.props.match.url}/settings`}
+                component={() => <Settings />}
+              />
             </Switch>
           </div>
         </div>

daemon/web/pages/settings/Settings.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import ShutdownButton from '../../components/ShutdownButton/ShutdownButton';
+import IconHeader from '../../components/IconHeader/IconHeader';
+
+
+import {
+  Table,
+  TableCell,
+  TableRow,
+  TableHeader,
+  TableBody,
+} from '../../components/Table/Table';
+
+class SettingsWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+
+      <div>
+        <IconHeader type="settings" title="PROJECT INFORMATION" style={{ margin: '1rem' }} />
+        <Table style={{ width: '90%', margin: '1rem' }}>
+          <TableHeader>
+            <TableRow>
+              <TableCell style={{ fontWeight: '900', fontSize: '14px' }}>Project-name</TableCell>
+              <TableCell />
+              <TableCell />
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            <TableRow>
+              <TableCell>Branch</TableCell>
+              <TableCell>somebranch</TableCell>
+              <TableCell />
+            </TableRow>
+
+            <TableRow>
+              <TableCell>Commit</TableCell>
+              <TableCell>commit hash</TableCell>
+              <TableCell />
+            </TableRow>
+
+            <TableRow>
+              <TableCell>Message</TableCell>
+              <TableCell>penguin</TableCell>
+              <TableCell />
+            </TableRow>
+            <TableRow>
+              <TableCell>Build Type</TableCell>
+              <TableCell>docker-compose</TableCell>
+              <TableCell />
+            </TableRow>
+          </TableBody>
+        </Table>
+        <ShutdownButton style={{ margin: '1rem' }} />
+      </div>
+    );
+  }
+}
+
+SettingsWrapper.propTypes = {};
+
+const mapStateToProps = () => { return {}; };
+
+const mapDispatchToProps = () => { return {}; };
+
+const Settings = connect(mapStateToProps, mapDispatchToProps)(SettingsWrapper);
+
+export default Settings;