Packuno · luis-e-alvarez · Nov 24, 2017 · Nov 20, 2017 · Nov 20, 2017 · Nov 20, 2017
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@ node_modules
 docs
 config
 *.DS_STORE
+bundle.js
 
 #Floobits
 .floo

diff --git a/client/dist/bundle.js b/client/dist/bundle.js
diff --git a/client/dist/dashboard.html b/client/dist/dashboard.html
diff --git a/client/dist/index.html b/client/dist/index.html
@@ -2,6 +2,9 @@
 <html>
 <head>
   <title>Packuno</title>
+  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="./style.css" rel="stylesheet">
 </head>
 <body>
 

diff --git a/client/dist/style.css b/client/dist/style.css
@@ -1,25 +1,26 @@
 #sidebar {
-    position:absolute;
-    width:21%;
-    height:100%;
+    position: absolute;
+    width: 21%;
+    height: 100%;
     background-color: lightblue;
-    font-family: Arial, sans-serif;
     padding: 25px;
+    overflow: auto;
 }
 
 #content { 
-    position:absolute;
+    overflow: auto;
+    position: absolute;
     margin-left: 25%;
-    width:100%;
-    height:100%;
+    width: 100%;
+    height: 100%;
     background-color: lightgrey;
-    font-family: Arial, Helvetica, sans-serif;
     padding: 25px;
 }
 
 body {
     margin:0;
-    padding: 0;
+    padding: 20px;
+    font-family: 'Roboto', sans-serif;
 }
 
 h2 {
@@ -29,19 +30,19 @@ h2 {
 #openButton {
   background-color: Transparent;
   border: none;
-  cursor:pointer;
+  cursor: pointer;
   overflow: hidden;
-  outline:none;
+  outline: none;
   font-size: 30px;
   display: inline;
 }
 
 #closeButton {
   background-color: Transparent;
   border: none;
-  cursor:pointer;
+  cursor: pointer;
   overflow: hidden;
-  outline:none;
+  outline: none;
   font-size: 30px;
   float: right;
 }
@@ -94,8 +95,13 @@ h2 {
    text-decoration: none;
 }
 
-#menu ul li a.active: hover {
-   color: #fff;
-   background: #000;
-   font-weight: bold;
+.image {
+  object-fit: cover;
+  width: 200px;
+  height: 200px;
+  pointer-events: none;
+}
+
+.changeHover: hover {
+   background: grey;
 }
diff --git a/client/src/actions/home.actions.jsx → client/src/actions/items.actions.jsx b/client/src/actions/home.actions.jsx → client/src/actions/items.actions.jsx
@@ -1,5 +1,5 @@
 
-let itemID = 0;
+let itemID = 4;
 
 export const addItem = (item, category = '') => {
   return {

diff --git a/client/src/components/AddItemForm.component.jsx b/client/src/components/AddItemForm.component.jsx
@@ -1,52 +1,75 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import MenuItem from 'material-ui/Menu/MenuItem';
+import TextField from 'material-ui/TextField';
+import Button from 'material-ui/Button';
 
 
+const styles = theme => ({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  textField: {
+    marginLeft: theme.spacing.unit,
+    marginRight: theme.spacing.unit,
+    width: 200,
+  },
+  menu: {
+    width: 200,
+  },
+  button: {
+    margin: theme.spacing.unit,
+  },
+});
+
 class AddItemForm extends React.Component {
-  constructor(props) {    super(props);
+  constructor(props) {
+    super(props);
     this.state = {
       item_input: '',
       category_input: '',
     };
   }
 
   render() {
+    const { classes } = this.props;
     const { item_input, category_input } = this.state;
     return (
       <div>
-        <form onSubmit={() => this.props.onSubmit(item_input, category_input)} >
-          <label>Item</label>
-          <input type="text" value={this.state.item_input} onChange={e => this.setState({ item_input: e.target.value })} />
-          <label>Category</label>
-          <input type="text" value={this.state.category_input} onChange={e => this.setState({ category_input: e.target.value })} />
-          <button>Add</button>
-         </form>
+        <form
+          onSubmit={() => this.props.onSubmit(item_input, category_input)}
+          className={classes.container}
+        >
+          <TextField
+            value={this.state.item_input}
+            onChange={e => this.setState({ item_input: e.target.value })}
+            label="Item"
+            className="textField"
+            margin="normal"
+          />
+          <TextField
+            value={this.state.category_input}
+            onChange={e => this.setState({ category_input: e.target.value })}
+            label="Category"
+            className={classes.textField}
+            margin="normal"
+          />
+          <Button color="primary" type="submit" className={classes.button}>
+            Add
+          </Button>
+        </form>
       </div>
     );
   }
 }
 
-// AddItemForm.propTypes = {
-//   onSubmit: PropTypes.func.isRequired,
-// };
-
-
-// const AddItemForm = ({ onSubmit }) => {
-
-//   let item_input = '';
-//   let category_input = '';
 
-//   return (
-//     <div>
-//       <form onSubmit={(e) => { onSubmit(item_input.value, category_input.value);}} >
-//         <label>Item</label>
-//         <input type="text" ref={input => this.item_input = input} />
-//         <label>Category</label>
-//         <input type="text" ref={input => this.category_input = input} />
-//         <button></button>
-//       </form>
-//     </div>
-//   );
-// };
+AddItemForm.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  classes: PropTypes.object.isRequired,
+};
 
 
-export default AddItemForm;
+export default withStyles(styles)(AddItemForm);
diff --git a/client/src/components/App.component.jsx b/client/src/components/App.component.jsx
@@ -3,7 +3,6 @@ import React from 'react';
 export default function App() {
   return (
     <div>
-      App component
     </div>
   );
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,7 @@ node_modules @@
     docs
     config
     *.DS_STORE
+    bundle.js
     #Floobits
     .floo
@@ Expand Down @@