make usable on smartphones

client/public/logo.svg

@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 511.99999 512.00001"
+   version="1.1"
+   id="svg10"
+   sodipodi:docname="logo.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   width="512"
+   height="512"
+   inkscape:export-filename="/home/stepanusatiuk/Projects/todolist/client/public/logo.svg.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96">
+  <metadata
+     id="metadata16">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1027"
+     id="namedview12"
+     showgrid="false"
+     inkscape:zoom="1.0717047"
+     inkscape:cx="260.7842"
+     inkscape:cy="274.68146"
+     inkscape:window-x="0"
+     inkscape:window-y="28"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g8" />
+  <g
+     id="g8"
+     style="fill:#61dafb"
+     transform="translate(0,-83.299988)">
+    <rect
+       id="rect18"
+       width="450"
+       height="80"
+       x="31"
+       y="175.29999"
+       style="stroke-width:1.46474838" />
+    <rect
+       id="rect18-6"
+       width="450"
+       height="80"
+       x="31"
+       y="295.29999"
+       style="stroke-width:1.46474838" />
+    <rect
+       id="rect18-7"
+       width="450"
+       height="80"
+       x="31"
+       y="415.29999"
+       style="stroke-width:1.46474838" />
+  </g>
+</svg>

client/public/manifest.json

@@ -3,9 +3,9 @@
   "name": "Simple todo list",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "logo.svg.png",
+      "sizes": "512x512",
+      "type": "image/png"
     }
   ],
   "start_url": "./",

client/src/components/App.css

@@ -125,8 +125,45 @@ li button {
   box-shadow: inset 3px 0 6px -3px rgba(0, 0, 0, 0.3);
 }
 
-/* make buttons bigger on smartphones */
+/* make it usable on smartphones */
 @media only screen and (max-width: 600px) {
+  #header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: white;
+    z-index: 5;
+    width: 100%;
+  }
+  #inputs {
+    position: fixed;
+    top: 8rem;
+    left: 0;
+    background-color: white;
+    z-index: 10;
+    width: 100%;
+    height: 65px;
+    max-height: 65px !important;
+  }
+  #container {
+    margin-top: 12rem;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    margin-bottom: 3rem;
+  }
+  #filters {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    max-height: 3rem !important;
+    opacity: 1 !important;
+    background-color: white;
+  }
+  #filters button {
+    height: 3rem !important;
+    padding: 0 1.5rem !important;
+  }
   li button {
     padding: 0 1.5rem !important;
   }

client/src/components/Container.css

@@ -22,6 +22,9 @@ body {
 }
 
 @media only screen and (max-width: 600px) {
+  #root {
+    margin: 0;
+  }
   #container {
     max-width: 100%;
   }
@@ -43,7 +46,7 @@ body {
   height: 100%;
   flex-grow: 0;
   flex-shrink: 1;
-  color: #888888;
+  color: #555555;
   border: none;
   background: none;
   transition: 0.1s ease-in-out;

client/src/components/todos/Input.js

@@ -19,6 +19,7 @@ function Input({ onClick, styles }) {
   return (
     <div style={styles} id="inputs">
       <input
+        aria-label="todo text"
         ref={node => {
           input = node;
         }}

client/src/components/user/EditForm.js

@@ -31,7 +31,6 @@ function EditForm({
   if (!user.user) {
     history.push('/');
   }
-  console.log(user);
   if (user.user && user.editSuccess) {
     reset();
     history.push('/');
@@ -41,9 +40,9 @@ function EditForm({
       <div id="user-header">
         <ButtonBase
           style={{
-            marginRight: '1rem',
+            marginLeft: '0',
+            marginRight: 'auto',
             padding: '0 0.5rem',
-            borderRadius: '7px',
           }}
           onClick={() => {
             history.push('/');

client/src/components/user/FetchButton.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import { ButtonBase } from '@material-ui/core';
-
-import { fetchLists } from '../../actions/lists';
-
-function FetchButton({ onClick, children }) {
-  return (
-    <ButtonBase
-      style={{
-        marginLeft: 0,
-        marginRight: 'auto',
-        padding: '0 1rem',
-      }}
-      onClick={e => {
-        e.preventDefault();
-        onClick();
-      }}
-    >
-      {children}
-    </ButtonBase>
-  );
-}
-
-FetchButton.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  children: PropTypes.node.isRequired,
-};
-
-function mapDispatchToProps(dispatch) {
-  return {
-    onClick: () => dispatch(fetchLists()),
-  };
-}
-
-export default connect(
-  null,
-  mapDispatchToProps,
-)(FetchButton);

client/src/components/user/HeaderLink.js

@@ -7,8 +7,8 @@ function Link({ history, to, text }) {
   return (
     <ButtonBase
       style={{
-        marginLeft: 'auto',
-        marginRight: 0,
+        marginLeft: '0',
+        marginRight: 'auto',
         padding: '0 1rem',
       }}
       onClick={e => {

client/src/components/user/Status.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import { ButtonBase } from '@material-ui/core';
-
-function Status({ userFetching, listsFetching }) {
-  return (
-    <ButtonBase
-      style={{
-        marginRight: 'auto',
-        padding: '0 0.5rem',
-        borderRadius: '7px',
-        marginLeft: '1rem',
-      }}
-    >
-      {userFetching ? 'loading user' : null}
-      {listsFetching ? 'loading lists' : null}
-    </ButtonBase>
-  );
-}
-
-Status.propTypes = {
-  userFetching: PropTypes.bool.isRequired,
-  listsFetching: PropTypes.bool.isRequired,
-};
-
-function mapStateToProps(state) {
-  return {
-    userFetching: state.user.fetching,
-    listsFetching: state.lists.fetching,
-  };
-}
-
-export default connect(mapStateToProps)(Status);

client/src/components/user/UserHeader.js

@@ -1,16 +1,12 @@
 import React from 'react';
 
 import LogoutLink from './LogoutLink';
-import FetchButton from './FetchButton';
-import Status from './Status';
 import HeaderLink from './HeaderLink';
 
 export default function UserHeader() {
   return (
     <div id="user-header">
-      <FetchButton>sync</FetchButton>
-      <Status />
-      <HeaderLink to="/edit" text="edit"/>
+      <HeaderLink to="/edit" text="account"/>
       <LogoutLink>logout</LogoutLink>
     </div>
   );