Separate styles and moved utils

src/App.scss

@@ -0,0 +1,34 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 100%;
+  vertical-align: baseline;
+  font-family: inherit;
+  font-weight: inherit;
+  color: inherit;
+  -webkit-appearance: none;
+  appearance: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
+  line-height: 1.4em;
+  background: #f5f5f5;
+  color: #4d4d4d;
+  min-width: 230px;
+  max-width: 550px;
+  margin: 0 auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 300;
+}

src/App.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+
+import './App.scss';
 import { TodoApp } from './components/TodoApp/TodoApp';
 import { TodosContext } from './components/TodosContext';
 

src/components/Footer/Footer.scss

@@ -0,0 +1,53 @@
+.footer {
+  color: #777;
+  padding: 10px 15px;
+  height: 20px;
+  text-align: center;
+  border-top: 1px solid #e6e6e6;
+
+  &:before {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 50px;
+    overflow: hidden;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+      0 8px 0 -3px #f6f6f6,
+      0 9px 1px -3px rgba(0, 0, 0, 0.2),
+      0 16px 0 -6px #f6f6f6,
+      0 17px 2px -6px rgba(0, 0, 0, 0.2);
+  }
+
+  @media (max-width: 430px) {
+    & {
+      height: 50px;
+    }
+  }
+}
+
+.todo-count {
+  float: left;
+  text-align: left;
+
+  & strong {
+    font-weight: 300;
+  }
+}
+
+.clear-completed {
+  float: right;
+  position: relative;
+  line-height: 20px;
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:active {
+    text-decoration: none;
+  }
+}

src/components/Footer/Footer.tsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 
+import './Footer.scss';
 import { DispatchContext, StateContext } from '../TodosContext';
 import { TodosFilter } from '../TodosFilter';
 

src/components/Header/Header.scss

@@ -0,0 +1,10 @@
+@import "../../utils/mixins.scss";
+
+.new-todo {
+  @include editTitle;
+
+  padding: 16px 16px 16px 60px;
+  border: none;
+  background: rgba(0, 0, 0, 0.01);
+  box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}

src/components/Header/Header.tsx

@@ -1,4 +1,6 @@
 import React, { useContext, useState } from 'react';
+
+import './Header.scss';
 import { DispatchContext } from '../TodosContext';
 
 export const Header: React.FC = () => {

src/components/Main/Main.scss

@@ -0,0 +1,43 @@
+.main {
+  position: relative;
+  z-index: 2;
+  border-top: 1px solid #e6e6e6;
+}
+
+.toggle-all {
+  width: 1px;
+  height: 1px;
+  border: none;
+  opacity: 0;
+  position: absolute;
+  right: 100%;
+  bottom: 100%;
+
+  & + label {
+    width: 60px;
+    height: 34px;
+    font-size: 0;
+    position: absolute;
+    top: -52px;
+    left: -13px;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+
+    &:before {
+      content: "❯";
+      font-size: 22px;
+      color: #e6e6e6;
+      padding: 10px 27px;
+    }
+  }
+
+  &:checked + label:before {
+    color: #737373;
+  }
+
+  @media screen and (-webkit-min-device-pixel-ratio:0) {
+    & {
+      background: none;
+    }
+  }
+}

src/components/Main/Main.tsx

@@ -1,4 +1,6 @@
 import React, { useContext, useState, useMemo } from 'react';
+
+import './Main.scss';
 import { TodoList } from '../TodoList';
 import { DispatchContext, FilterContext, StateContext } from '../TodosContext';
 import { Status } from '../../types/Status';

src/components/TodoApp/TodoApp.scss

@@ -0,0 +1,44 @@
+.todoapp {
+  background: #fff;
+  margin: 130px 0 40px;
+  position: relative;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+    0 25px 50px 0 rgba(0, 0, 0, 0.1);
+
+  & h1 {
+    position: absolute;
+    top: -155px;
+    width: 100%;
+    font-size: 100px;
+    font-weight: 100;
+    text-align: center;
+    color: rgba(175, 47, 47, 0.15);
+    -webkit-text-rendering: optimizeLegibility;
+    -moz-text-rendering: optimizeLegibility;
+    text-rendering: optimizeLegibility;
+  }
+
+  & input::-webkit-input-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+
+    &::-moz-placeholder {
+      font-style: italic;
+      font-weight: 300;
+      color: #e6e6e6;
+    }
+
+    &::-ms-input-placeholder {
+      font-style: italic;
+      font-weight: 300;
+      color: #e6e6e6;
+    }
+
+    &::placeholder {
+      font-style: italic;
+      font-weight: 300;
+      color: #e6e6e6;
+    }
+  }
+}

src/components/TodoApp/TodoApp.tsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 
+import './TodoApp.scss';
 import { Header } from '../Header';
 import { Main } from '../Main';
 import { Footer } from '../Footer';

src/components/TodoItem/TodoItem.scss

@@ -0,0 +1,5 @@
+@import "../../utils/mixins.scss";
+
+.edit {
+  @include editTitle;
+}

src/components/TodoItem/TodoItem.tsx

@@ -2,9 +2,9 @@
 import React, {
   useContext, useRef, useState, useEffect,
 } from 'react';
-
 import classNames from 'classnames';
 
+import './TodoItem.scss';
 import { Todo } from '../../types/Todo';
 import { DispatchContext } from '../TodosContext';
 
@@ -19,16 +19,30 @@ export const TodoItem: React.FC<Props> = ({ item }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [editedTodoTitle, setEditedTodoTitle] = useState(item.title);
 
-  const handleRemoveItem = () => dispatch({
-    type: 'remove',
-    payload: item.id,
-  });
+  useEffect(() => {
+    if (isEditing) {
+      editRef.current?.focus();
+    }
+  }, [isEditing]);
 
   const handleCompletedClick = () => dispatch({
     type: 'toggle',
     payload: item,
   });
 
+  const handleDoubleClick = () => {
+    setIsEditing(true);
+  };
+
+  const handleRemoveItem = () => dispatch({
+    type: 'remove',
+    payload: item.id,
+  });
+
+  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setEditedTodoTitle(event.target.value);
+  };
+
   const saveChanges = () => {
     if (editedTodoTitle.trim().length !== 0) {
       dispatch({
@@ -42,16 +56,6 @@ export const TodoItem: React.FC<Props> = ({ item }) => {
     setIsEditing(false);
   };
 
-  useEffect(() => {
-    if (isEditing) {
-      editRef.current?.focus();
-    }
-  }, [isEditing]);
-
-  const handleDoubleClick = () => {
-    setIsEditing(true);
-  };
-
   const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Escape') {
       setEditedTodoTitle(item.title);
@@ -63,10 +67,6 @@ export const TodoItem: React.FC<Props> = ({ item }) => {
     }
   };
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setEditedTodoTitle(event.target.value);
-  };
-
   return (
     <li
       className={classNames({
@@ -99,7 +99,7 @@ export const TodoItem: React.FC<Props> = ({ item }) => {
           type="text"
           className="edit"
           value={editedTodoTitle}
-          onChange={handleChange}
+          onChange={handleTitleChange}
           onKeyUp={handleKeyUp}
           onBlur={saveChanges}
         />