make it usable on smartphones

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%;
   }

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/HeaderLink.js

@@ -7,8 +7,8 @@ function Link({ history, to, text }) {
   return (
     <ButtonBase
       style={{
-        marginLeft: 'auto',
+        marginLeft: '0',
-        marginRight: 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>
+      <HeaderLink to="/edit" text="account"/>
-      <Status />
-      <HeaderLink to="/edit" text="edit"/>
       <LogoutLink>logout</LogoutLink>
     </div>
   );