From 2399eb674b36842a8bec443d60807cbf5547ea38 Mon Sep 17 00:00:00 2001 From: Stepan Usatiuk Date: Mon, 9 Jul 2018 22:49:36 +0300 Subject: [PATCH] redesign --- react/src/components/App.css | 29 ++++++++++++++++---------- react/src/components/App.js | 2 +- react/src/components/Filters.js | 17 +++++++++++++++ react/src/components/Header.js | 13 +----------- react/src/components/Input.js | 6 ++++-- react/src/components/Lists.js | 4 ++-- react/src/components/Todo.js | 2 +- react/src/components/Todos.js | 4 +++- react/src/components/user/LoginForm.js | 2 +- react/src/containers/FetchButton.js | 5 ++--- react/src/containers/FilterLink.js | 5 ++--- react/src/containers/LogoutLink.js | 6 +++--- 12 files changed, 55 insertions(+), 40 deletions(-) create mode 100644 react/src/components/Filters.js diff --git a/react/src/components/App.css b/react/src/components/App.css index f48de72..fee6ae3 100644 --- a/react/src/components/App.css +++ b/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; diff --git a/react/src/components/App.js b/react/src/components/App.js index 82c96fc..10b8881 100644 --- a/react/src/components/App.js +++ b/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(); } diff --git a/react/src/components/Filters.js b/react/src/components/Filters.js new file mode 100644 index 0000000..fa6869a --- /dev/null +++ b/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 ( +
+ all + active + + completed + +
+ ); +} + +export default Filters; diff --git a/react/src/components/Header.js b/react/src/components/Header.js index 9b0104b..0478656 100644 --- a/react/src/components/Header.js +++ b/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 ( ); } diff --git a/react/src/components/Input.js b/react/src/components/Input.js index 4351db6..24e7cce 100644 --- a/react/src/components/Input.js +++ b/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(); } }} /> - ); diff --git a/react/src/components/Lists.js b/react/src/components/Lists.js index 0f146d2..de1df95 100644 --- a/react/src/components/Lists.js +++ b/react/src/components/Lists.js @@ -6,7 +6,7 @@ import SelectorContainer from '../containers/SelectorContainer'; export default function Lists({ userLoaded, listsLoaded }) { return ( - +
{userLoaded && listsLoaded && (
@@ -16,7 +16,7 @@ export default function Lists({ userLoaded, listsLoaded }) { )} {!userLoaded && loading.} {userLoaded && !listsLoaded && loading..} - +
); } diff --git a/react/src/components/Todo.js b/react/src/components/Todo.js index e466386..7261543 100644 --- a/react/src/components/Todo.js +++ b/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 = { diff --git a/react/src/components/Todos.js b/react/src/components/Todos.js index 1e9ff31..f79cfc9 100644 --- a/react/src/components/Todos.js +++ b/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 {
+
); } diff --git a/react/src/components/user/LoginForm.js b/react/src/components/user/LoginForm.js index 5701a3a..3f7a1ee 100644 --- a/react/src/components/user/LoginForm.js +++ b/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')) { diff --git a/react/src/containers/FetchButton.js b/react/src/containers/FetchButton.js index 45a5e76..87d9e2b 100644 --- a/react/src/containers/FetchButton.js +++ b/react/src/containers/FetchButton.js @@ -9,10 +9,9 @@ function FetchButton({ onClick, children }) { return ( { e.preventDefault(); diff --git a/react/src/containers/FilterLink.js b/react/src/containers/FilterLink.js index 238bedd..4ffd188 100644 --- a/react/src/containers/FilterLink.js +++ b/react/src/containers/FilterLink.js @@ -12,10 +12,9 @@ function Link({ active, onClick, children }) { return ( { diff --git a/react/src/containers/LogoutLink.js b/react/src/containers/LogoutLink.js index fa0a445..63ee862 100644 --- a/react/src/containers/LogoutLink.js +++ b/react/src/containers/LogoutLink.js @@ -9,9 +9,9 @@ function Link({ onClick, children }) { return ( { e.preventDefault();