screwing around with styling

Author: csakis

src/App.js

@@ -1,14 +1,14 @@
 import React from "react";
-import TodoInput from './components/ToDoInput'
-
+import TodoInput from "./components/ToDoInput";
+import { Container } from "@material-ui/core";
 
 function App() {
   return (
-    <div>
-      <h1>Hello</h1>
+    <Container maxWidth="md" >
+      <h1>React-Redux To Do List with Material-UI</h1>
       <TodoInput />
-    </div>
+    </Container>
   );
 }
 
-export default App
+export default App;

src/components/ToDoInput.js

@@ -2,33 +2,53 @@ import React from "react";
 import { connect } from "react-redux";
 import { addTodo } from "../actions/add-todo";
 import { changeInput } from "../actions/change-input";
-import { FormControl, InputLabel, Input, Button } from "@material-ui/core";
+import { FormControl, Grid, Button, TextField } from "@material-ui/core";
 
 const TodoInput = props => {
   return (
     <div>
       <FormControl>
-        <InputLabel>Add Todo</InputLabel>
-        <Input value={props.input} onChange={props.onChangeInput} />
+        {/* <Inputbel>Add Todo</InputLabel> */}
+        <Grid
+          container
+          spacing={3}
+          direction="row"
+          justify="center"
+          alignItems="center"
+        >
+          <Grid item xs={8}>
+            <TextField
+              variant="outlined"
+              label="Add ToDo"
+              margin="normal"
+              value={props.input}
+              onChange={props.onChangeInput}
+            />
+          </Grid>
+          <Grid item xs={4}>
+            <Button
+              variant="outlined"
+              color="primary"
+              onClick={() => {
+                props.onAddTodo(props.index + 1, props.input);
+              }}
+            >
+              Add to do
+            </Button>
+          </Grid>
+        </Grid>
       </FormControl>
-      <Button
-        onClick={() => {
-          props.onAddTodo(props.index + 1, props.input);
-        }}
-      >
-        Add to do
-      </Button>
     </div>
   );
 };
 
-const mapStatetoProps = state => {
+const mapStateToProps = state => {
   return {
     input: state.input.input,
     index: state.todos.index
   };
 };
-const mapActionstoProps = dispatch => {
+const mapActionsToProps = dispatch => {
   return {
     onAddTodo: (id, text) => {
       dispatch(addTodo({ id, text }));
@@ -39,6 +59,6 @@ const mapActionstoProps = dispatch => {
 };
 
 export default connect(
-  mapStatetoProps,
-  mapActionstoProps
+  mapStateToProps,
+  mapActionsToProps
 )(TodoInput);