use material-ui for controls

react/src/components/App.css

@@ -116,18 +116,6 @@ li button.todo {
   box-shadow: none;
 }
 
-.delete {
-  background-color: pink;
-}
-
-.edit {
-  background-color: lightcyan;
-}
-
-.save {
-  background-color: lightgreen;
-}
-
 ul {
   margin: 0;
   padding: 0;

react/src/components/Form.css

@@ -1,12 +1,14 @@
 #form {
-  padding: 2rem 1rem;
+  margin: 2rem;
+  display: flex;
+  justify-content: center;
 }
 
-input {
-  border: none;
-  border-bottom: 1px solid #999999;
-  margin-left: 1rem;
-  height: 2rem;
+form {
+  max-width: 80%;
+  display: flex;
+  flex-direction: column;
+  width: 20rem;
 }
 
 .error {
@@ -14,9 +16,8 @@ input {
   color: red;
 }
 
-form button {
-  padding: 0.25rem 1rem;
-  background: #f5f5f5;
-  border: 1px solid #f0f0f0;
-  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
+#submitbutton {
+  margin: auto;
+  margin-top: 1rem;
+  margin-right: 0.5rem;
 }

react/src/components/Input.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { Button } from '@material-ui/core';
 
 function Input(props) {
   let input;
@@ -25,9 +26,9 @@ function Input(props) {
           }
         }}
       />
-      <button id="add" onClick={() => submit()}>
+      <Button id="add" onClick={() => submit()}>
         add
-      </button>
+      </Button>
     </div>
   );
 }

react/src/components/ListActions.js

@@ -10,6 +10,7 @@ const button = {
   width: 24,
   height: 24,
   padding: 0,
+  margin: 3,
 };
 
 const icon = {

react/src/components/Selector.css

@@ -1,6 +1,6 @@
 #listselector {
   display: flex;
-  margin-left: 0.2rem;
+  margin-left: 1rem;
   overflow: hidden;
   align-self: center;
   background-color: #fbfbfb;

react/src/components/Selector.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { IconButton } from '@material-ui/core';
+import { IconButton, Select, MenuItem } from '@material-ui/core';
 import AddIcon from '@material-ui/icons/Add';
 import CheckIcon from '@material-ui/icons/Check';
 
@@ -78,13 +78,17 @@ export default function Selector({
   if (list) {
     return (
       <div id="listselector">
-        <select value={list} onChange={e => onChange(e.target.value)}>
+        <Select
+          style={{ fontSize: '1.5rem' }}
+          value={list}
+          onChange={e => onChange(e.target.value)}
+        >
           {Object.values(lists.lists).map(elem => (
-            <option key={elem.id} value={elem.id}>
+            <MenuItem key={elem.id} value={elem.id}>
               {elem.name}
-            </option>
+            </MenuItem>
           ))}
-        </select>
+        </Select>
       </div>
     );
   }

react/src/components/Todo.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { animated } from 'react-spring';
+import { ButtonBase } from '@material-ui/core';
 import DeleteIcon from '@material-ui/icons/Delete';
 import EditIcon from '@material-ui/icons/Edit';
 import CheckIcon from '@material-ui/icons/Check';
@@ -57,15 +58,10 @@ class Todo extends React.Component {
       editClasses.push('disabled');
     }
 
-    const todoClasses = ['todo'];
-    if (this.props.todo.completed) {
-      todoClasses.push('done');
-    }
-
     let input;
 
     const text = this.state.editing ? (
-      <div className={todoClasses.join(' ')}>
+      <div className="todo">
         <textarea
           className="todo--input"
           defaultValue={this.props.todo.text}
@@ -75,38 +71,48 @@ class Todo extends React.Component {
         />
       </div>
     ) : (
-      <button
-        className={todoClasses.join(' ')}
+      <ButtonBase
+        style={{
+          justifyContent: 'left',
+          paddingLeft: '1.5rem',
+          borderTop: '1px solid #f0f0f0',
+          textDecoration: this.props.todo.completed ? 'line-through' : 'none',
+          color: this.props.todo.completed ? '#888888' : 'black',
+        }}
+        className="todo"
         onClick={this.state.hover ? this.props.toggleTodo : null}
       >
         {this.props.todo.text}
-      </button>
+      </ButtonBase>
     );
-    const buttons = this.state.editing
+    const ButtonBases = this.state.editing
       ? [
-          <animated.button
+          <ButtonBase
             key="save"
+            style={{ backgroundColor: 'lightgreen' }}
             className="save"
             onClick={() => this.stopEdit(input.value)}
           >
             <CheckIcon style={icon} />
-          </animated.button>,
+          </ButtonBase>,
         ]
       : [
-          <animated.button
+          <ButtonBase
             key="remove"
+            style={{ backgroundColor: 'pink' }}
             className={deleteClasses.join(' ')}
             onClick={this.props.removeTodo}
           >
             <DeleteIcon style={icon} />
-          </animated.button>,
-          <animated.button
+          </ButtonBase>,
+          <ButtonBase
             key="edit"
+            style={{ backgroundColor: 'lightcyan' }}
             className={editClasses.join(' ')}
             onClick={this.startEdit}
           >
             <EditIcon style={icon} />
-          </animated.button>,
+          </ButtonBase>,
         ];
     return (
       <animated.li
@@ -116,7 +122,7 @@ class Todo extends React.Component {
         onMouseOut={this.onMouseOut}
         onBlur={this.onMouseOut}
       >
-        {buttons}
+        {ButtonBases}
         {text}
       </animated.li>
     );

react/src/components/TodoList.js

@@ -16,9 +16,9 @@ export default function TodosContainer({
         native
         items={todos}
         keys={todo => todo.id}
-        from={{ height: 0, borderColor: '#f0f0f0', opacity: 0.9 }}
+        from={{ height: 0, borderColor: '#f0f0f0', opacity: 0.7 }}
         enter={{ height: 60, borderColor: '#f0f0f0', opacity: 1 }}
-        leave={{ height: 0, borderColor: '#ffffff', opacity: 0.5 }}
+        leave={{ height: 0, borderColor: '#ffffff', opacity: 0.3 }}
       >
         {todos.map(todo => styles => (
           <Todo

react/src/components/user/InputField.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { TextField } from '@material-ui/core';
 
 export default function InputField({
   required,
@@ -9,12 +10,10 @@ export default function InputField({
   type,
 }) {
   return (
-    <div>
-      <label htmlFor={input.name}>
-        {label} <input required={required} {...input} type={type} />
-      </label>
+    <React.Fragment>
+      <TextField label={label} required={required} {...input} type={type} />
       {touched && error && <span className="error">{error}</span>}
-    </div>
+    </React.Fragment>
   );
 }
 

react/src/components/user/LoginForm.js

@@ -3,10 +3,12 @@ import { Field, reduxForm } from 'redux-form';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import { ButtonBase, Button } from '@material-ui/core';
+
 import InputField from './InputField';
+import UserErrors from './UserErrors';
 
 import '../Form.css';
-import UserErrors from './UserErrors';
 
 import { login, reset } from '../../actions/user';
 
@@ -15,20 +17,25 @@ function LoginForm({ handleSubmit, onLogin, user, history, resetUser }) {
     history.push('/');
   }
   return (
-    <div>
+    <React.Fragment>
       <div id="user-header">
-        <button
+        <ButtonBase
+          style={{
+            marginRight: '1rem',
+            padding: '0 0.5rem',
+            borderRadius: '7px',
+          }}
           onClick={() => {
             resetUser();
             history.push('/signup');
           }}
         >
           signup
-        </button>
+        </ButtonBase>
       </div>
       <div id="form">
-        <UserErrors user={user} />
         <form onSubmit={handleSubmit(onLogin)}>
+          <UserErrors user={user} />
           <Field
             label="username"
             name="username"
@@ -43,10 +50,14 @@ function LoginForm({ handleSubmit, onLogin, user, history, resetUser }) {
             component={InputField}
             type="password"
           />
-          <button type="submit">Login</button>
+          <div id="submitbutton">
+            <Button variant="contained" color="primary" type="submit">
+              Login
+            </Button>
+          </div>
         </form>
       </div>
-    </div>
+    </React.Fragment>
   );
 }
 

react/src/components/user/SignupForm.js

@@ -3,6 +3,7 @@ import { Field, reduxForm } from 'redux-form';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import { ButtonBase, Button } from '@material-ui/core';
 
 import InputField from './InputField';
 import UserErrors from './UserErrors';
@@ -14,7 +15,7 @@ import { signup, reset } from '../../actions/user';
 function validate(values) {
   const errors = {};
   if (values.password !== values.passwordRepeat) {
-    errors.passwordRepeat = 'Invalid';
+    errors.passwordRepeat = 'Passwords should match';
   }
   return errors;
 }
@@ -24,20 +25,25 @@ function SignupForm({ handleSubmit, onSignup, user, history, resetUser }) {
     history.push('/');
   }
   return (
-    <div>
+    <React.Fragment>
       <div id="user-header">
-        <button
+        <ButtonBase
+          style={{
+            marginRight: '1rem',
+            padding: '0 0.5rem',
+            borderRadius: '7px',
+          }}
           onClick={() => {
             resetUser();
             history.push('/login');
           }}
         >
           login
-        </button>
+        </ButtonBase>
       </div>
       <div id="form">
-        <UserErrors user={user} />
         <form onSubmit={handleSubmit(onSignup)}>
+          <UserErrors user={user} />
           <Field
             label="username"
             name="username"
@@ -59,10 +65,14 @@ function SignupForm({ handleSubmit, onSignup, user, history, resetUser }) {
             component={InputField}
             type="password"
           />
-          <button type="submit">Signup</button>
+          <div id="submitbutton">
+            <Button variant="contained" color="primary" type="submit">
+              Signup
+            </Button>
+          </div>
         </form>
       </div>
-    </div>
+    </React.Fragment>
   );
 }
 

react/src/containers/FilterLink.js

@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 import React from 'react';
 import PropTypes from 'prop-types';
+import { ButtonBase } from '@material-ui/core';
 import { setVisibilityFilter } from '../actions/todos';
 
 function Link({ active, onClick, children }) {
@@ -9,7 +10,12 @@ function Link({ active, onClick, children }) {
     classes.push('filter--active');
   }
   return (
-    <button
+    <ButtonBase
+      style={{
+        margin: '0 0.2rem',
+        padding: '1rem 0.3rem',
+        borderRadius: '7px',
+      }}
       className={classes.join(' ')}
       onClick={e => {
         e.preventDefault();
@@ -17,7 +23,7 @@ function Link({ active, onClick, children }) {
       }}
     >
       {children}
-    </button>
+    </ButtonBase>
   );
 }
 
@@ -39,4 +45,7 @@ function mapDispatchToProps(dispatch, ownProps) {
   };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Link);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Link);

react/src/containers/LogoutLink.js

@@ -1,13 +1,19 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import { ButtonBase } from '@material-ui/core';
 
 import { logout } from '../actions/user';
 
 function Link({ onClick, children }) {
   const classes = ['logout'];
   return (
-    <button
+    <ButtonBase
+      style={{
+        marginRight: '1rem',
+        padding: '0 0.5rem',
+        borderRadius: '7px',
+      }}
       className={classes.join(' ')}
       onClick={e => {
         e.preventDefault();
@@ -15,7 +21,7 @@ function Link({ onClick, children }) {
       }}
     >
       {children}
-    </button>
+    </ButtonBase>
   );
 }