diff --git a/client/public/favicon.ico b/client/public/favicon.ico deleted file mode 100644 index a11777c..0000000 Binary files a/client/public/favicon.ico and /dev/null differ diff --git a/client/public/logo.svg b/client/public/logo.svg new file mode 100644 index 0000000..4254222 --- /dev/null +++ b/client/public/logo.svg @@ -0,0 +1,80 @@ + + diff --git a/client/public/logo.svg.png b/client/public/logo.svg.png new file mode 100644 index 0000000..e82e8dc Binary files /dev/null and b/client/public/logo.svg.png differ diff --git a/client/public/manifest.json b/client/public/manifest.json index f8b5db3..a31f37f 100644 --- a/client/public/manifest.json +++ b/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": "./", diff --git a/client/src/components/App.css b/client/src/components/App.css index 2e0d618..cda2d42 100644 --- a/client/src/components/App.css +++ b/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; } diff --git a/client/src/components/Container.css b/client/src/components/Container.css index 10c68fe..c66bbb6 100644 --- a/client/src/components/Container.css +++ b/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; diff --git a/client/src/components/todos/Input.js b/client/src/components/todos/Input.js index 25f05ac..4e5f43e 100644 --- a/client/src/components/todos/Input.js +++ b/client/src/components/todos/Input.js @@ -19,6 +19,7 @@ function Input({ onClick, styles }) { return (