redesign

react/src/components/App.css

@@ -7,8 +7,9 @@
 #lists {
   display: flex;
   flex-direction: row;
-  flex-grow: 0;
-  max-width: 40%;
+  flex-grow: 1;
+  width: 80%;
+  margin-right: 1rem;
 }
 
 .loading {
@@ -39,11 +40,12 @@
 #filters {
   display: flex;
   justify-content: center;
-  margin: 0.2rem 0.1rem;
-  margin-left: 0.5rem;
-  margin-right: 0.75rem;
+  margin: 0;
   align-self: center;
   flex-shrink: 0;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  position: sticky;
+  z-index: 5;
 }
 
 #filters button {
@@ -56,7 +58,7 @@
   display: flex;
   height: 2.5rem;
   position: relative;
-  z-index: 5;
+  z-index: 10;
 }
 
 #input {
@@ -74,15 +76,21 @@
   border: none;
 }
 
+#input::placeholder {
+  opacity: 0.35;
+}
+
+#input:focus::placeholder {
+  opacity: 0;
+}
+
 #add {
   color: black;
-  font-size: 1rem;
-  font-weight: 500;
-  flex-grow: 1;
+  flex-grow: 0;
   margin: 0;
   padding: 0;
   height: 100%;
-  max-width: 5rem;
+  max-width: 2rem;
   background-color: white;
   border: none;
 }
@@ -186,7 +194,6 @@ textarea.todo--input {
 
 .filter {
   margin: 0.1rem;
-  padding: 0.5rem;
   color: #555555;
   border: none;
   background: none;

react/src/components/App.js

@@ -10,7 +10,7 @@ import TodosContainer from '../containers/TodosContainer';
 import LoginForm from '../components/user/LoginForm';
 import SignupForm from '../components/user/SignupForm';
 
-export default class App extends React.Component {
+export default class App extends React.PureComponent {
   componentDidMount() {
     this.props.loadUser();
   }

react/src/components/Filters.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import FilterLink from '../containers/FilterLink';
+import { VisibilityFilters } from '../actions/todos';
+
+function Filters() {
+  return (
+    <div id="filters">
+      <FilterLink filter={VisibilityFilters.SHOW_ALL}>all</FilterLink>
+      <FilterLink filter={VisibilityFilters.SHOW_ACTIVE}>active</FilterLink>
+      <FilterLink filter={VisibilityFilters.SHOW_COMPLETED}>
+        completed
+      </FilterLink>
+    </div>
+  );
+}
+
+export default Filters;

react/src/components/Header.js

@@ -1,23 +1,12 @@
 import React from 'react';
-import FilterLink from '../containers/FilterLink';
 import UserHeader from '../components/UserHeader';
-import { VisibilityFilters } from '../actions/todos';
 import ListsContainer from '../containers/ListsContainer';
 
 export default function Header() {
   return (
     <div id="header">
       <UserHeader />
-      <div id="lists-header">
-        <ListsContainer />
-        <div id="filters">
-          <FilterLink filter={VisibilityFilters.SHOW_ALL}>all</FilterLink>
-          <FilterLink filter={VisibilityFilters.SHOW_ACTIVE}>active</FilterLink>
-          <FilterLink filter={VisibilityFilters.SHOW_COMPLETED}>
-            completed
-          </FilterLink>
-        </div>
-      </div>
+      <ListsContainer />
     </div>
   );
 }

react/src/components/Input.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '@material-ui/core';
+import AddIcon from '@material-ui/icons/Add';
 
 function Input(props) {
   let input;
@@ -20,14 +21,15 @@ function Input(props) {
         }}
         id="input"
         type="text"
+        placeholder="Add something!"
         onKeyPress={e => {
           if (e.key === 'Enter') {
             submit();
           }
         }}
       />
-      <Button id="add" onClick={() => submit()}>
-        add
+      <Button style={{ borderRadius: 0 }} id="add" onClick={() => submit()}>
+        <AddIcon />
       </Button>
     </div>
   );

react/src/components/Lists.js

@@ -6,7 +6,7 @@ import SelectorContainer from '../containers/SelectorContainer';
 
 export default function Lists({ userLoaded, listsLoaded }) {
   return (
-    <React.Fragment>
+    <div id="lists-header">
       {userLoaded &&
         listsLoaded && (
           <div id="lists">
@@ -16,7 +16,7 @@ export default function Lists({ userLoaded, listsLoaded }) {
         )}
       {!userLoaded && <span className="loading">loading.</span>}
       {userLoaded && !listsLoaded && <span className="loading">loading..</span>}
-    </React.Fragment>
+    </div>
   );
 }
 

react/src/components/Todo.js

@@ -15,7 +15,7 @@ const disabledAction = {
   color: '#dddddd',
 };
 
-class Todo extends React.Component {
+class Todo extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {

react/src/components/Todos.js

@@ -4,8 +4,9 @@ import PropTypes from 'prop-types';
 import InputContainer from '../containers/InputContainer';
 import TodoListContainer from '../containers/TodoListContainer';
 import Header from './Header';
+import Filters from './Filters';
 
-export default class Todos extends React.Component {
+export default class Todos extends React.PureComponent {
   componentDidUpdate() {
     if (!this.props.user.user && !this.props.user.dirty) {
       this.props.history.replace('/login');
@@ -17,6 +18,7 @@ export default class Todos extends React.Component {
         <Header />
         <InputContainer />
         <TodoListContainer />
+        <Filters />
       </div>
     );
   }

react/src/components/user/LoginForm.js

@@ -12,7 +12,7 @@ import '../Form.css';
 
 import { login, reset, loginJWT } from '../../actions/user';
 
-class LoginForm extends React.Component {
+class LoginForm extends React.PureComponent {
   componentDidMount() {
     const params = new URLSearchParams(new URL(window.location).search);
     if (params.has('jwt')) {

react/src/containers/FetchButton.js

@@ -9,10 +9,9 @@ function FetchButton({ onClick, children }) {
   return (
     <ButtonBase
       style={{
+        marginLeft: 0,
         marginRight: 'auto',
-        padding: '0 0.5rem',
-        borderRadius: '7px',
-        marginLeft: '1rem',
+        padding: '0 1rem',
       }}
       onClick={e => {
         e.preventDefault();

react/src/containers/FilterLink.js

@@ -12,10 +12,9 @@ function Link({ active, onClick, children }) {
   return (
     <ButtonBase
       style={{
-        margin: '0 0.2rem',
-        padding: '1rem 0.3rem',
+        padding: '0 1rem',
         color: active ? 'black' : '#444444',
-        borderRadius: '7px',
+        height: '2rem',
       }}
       className={classes.join(' ')}
       onClick={e => {

react/src/containers/LogoutLink.js

@@ -9,9 +9,9 @@ function Link({ onClick, children }) {
   return (
     <ButtonBase
       style={{
-        marginRight: '1rem',
-        padding: '0 0.5rem',
-        borderRadius: '7px',
+        marginLeft: 'auto',
+        marginRight: 0,
+        padding: '0 1rem',
       }}
       onClick={e => {
         e.preventDefault();