From 151593ef46f5a04c117ed62ef497d0cf047bbcff Mon Sep 17 00:00:00 2001
From: rogermyang <rogermyang@hotmail.com>
Date: Fri, 29 Jun 2018 15:52:34 -0700
Subject: [PATCH 1/3] settings page

---
 .../ShutdownButton/ShutdownButton.js          | 16 +++++
 .../web/components/ShutdownButton/index.sass  | 10 +++
 daemon/web/pages/main/Main.js                 |  7 ++
 daemon/web/pages/settings/Settings.js         | 72 +++++++++++++++++++
 4 files changed, 105 insertions(+)
 create mode 100644 daemon/web/components/ShutdownButton/ShutdownButton.js
 create mode 100644 daemon/web/components/ShutdownButton/index.sass
 create mode 100644 daemon/web/pages/settings/Settings.js

diff --git a/daemon/web/components/ShutdownButton/ShutdownButton.js b/daemon/web/components/ShutdownButton/ShutdownButton.js
new file mode 100644
index 00000000..6ed98324
--- /dev/null
+++ b/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;
diff --git a/daemon/web/components/ShutdownButton/index.sass b/daemon/web/components/ShutdownButton/index.sass
new file mode 100644
index 00000000..e86f25d2
--- /dev/null
+++ b/daemon/web/components/ShutdownButton/index.sass
@@ -0,0 +1,10 @@
+@import '../../styles/index'
+
+.ShutdownButton
+  font-family: Rubik
+  font-size: 12px
+  font-weight: 500
+  letter-spacing: 1px
+  padding: 5px 10px
+  border-radius: 4px
+  border: none
diff --git a/daemon/web/pages/main/Main.js b/daemon/web/pages/main/Main.js
index 86c390d2..8b3ee2ef 100644
--- a/daemon/web/pages/main/Main.js
+++ b/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>
diff --git a/daemon/web/pages/settings/Settings.js b/daemon/web/pages/settings/Settings.js
new file mode 100644
index 00000000..ea4e93bb
--- /dev/null
+++ b/daemon/web/pages/settings/Settings.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import ShutdownButton from '../../components/ShutdownButton/ShutdownButton';
+
+import {
+  Table,
+  TableCell,
+  TableRow,
+  TableHeader,
+  TableBody,
+} from '../../components/Table/Table';
+
+class SettingsWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+
+      <div>
+        <h1 style={{ margin: '1rem' }}>PROJECT INFORMATION</h1>
+        <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;

From 0336721069ccf36cf45eda83398c67084e93430e Mon Sep 17 00:00:00 2001
From: rogermyang <rogermyang@hotmail.com>
Date: Fri, 29 Jun 2018 16:11:04 -0700
Subject: [PATCH 2/3] added icon header

---
 daemon/web/components/IconHeader/IconHeader.js | 5 +++--
 daemon/web/pages/settings/Settings.js          | 4 +++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/daemon/web/components/IconHeader/IconHeader.js b/daemon/web/components/IconHeader/IconHeader.js
index fe9c2cca..5092154d 100644
--- a/daemon/web/components/IconHeader/IconHeader.js
+++ b/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;
diff --git a/daemon/web/pages/settings/Settings.js b/daemon/web/pages/settings/Settings.js
index ea4e93bb..4f3a2fed 100644
--- a/daemon/web/pages/settings/Settings.js
+++ b/daemon/web/pages/settings/Settings.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import ShutdownButton from '../../components/ShutdownButton/ShutdownButton';
+import IconHeader from '../../components/IconHeader/IconHeader';
+
 
 import {
   Table,
@@ -20,7 +22,7 @@ class SettingsWrapper extends React.Component {
     return (
 
       <div>
-        <h1 style={{ margin: '1rem' }}>PROJECT INFORMATION</h1>
+        <IconHeader type="settings" title="PROJECT INFORMATION" style={{ margin: '1rem' }} />
         <Table style={{ width: '90%', margin: '1rem' }}>
           <TableHeader>
             <TableRow>

From bddf134e9777d7fc1c7a21545010c2619685e9c4 Mon Sep 17 00:00:00 2001
From: rogermyang <rogermyang@hotmail.com>
Date: Fri, 29 Jun 2018 16:21:46 -0700
Subject: [PATCH 3/3] some more styles

---
 daemon/web/components/ShutdownButton/index.sass | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/daemon/web/components/ShutdownButton/index.sass b/daemon/web/components/ShutdownButton/index.sass
index e86f25d2..06856a77 100644
--- a/daemon/web/components/ShutdownButton/index.sass
+++ b/daemon/web/components/ShutdownButton/index.sass
@@ -8,3 +8,7 @@
   padding: 5px 10px
   border-radius: 4px
   border: none
+  border-bottom: 1px solid $separator
+  
+  &:disabled
+    opacity: 0.5
\ No newline at end of file