html cleanup

step1-05/src/components/TodoFooter.tsx

@@ -1,13 +1,12 @@
-import React from "react";
+import React from 'react';
 
 export const TodoFooter = (props: any) => {
-
   return (
     <footer>
       <span>
         <span className="remaining">4</span> items left
       </span>
-      <button className="button">Clear Completed</button>
+      <button className="submit">Clear Completed</button>
     </footer>
   );
 };

step1-05/src/components/TodoHeader.tsx

@@ -3,16 +3,18 @@ import React from 'react';
 export class TodoHeader extends React.Component {
   render() {
     return (
-      <div>
+      <header>
         <h1>todos</h1>
-        <input className="textfield" placeholder="add todo" />
-        <button className="button add">Add</button>
-        <div className="filter">
+        <div className="addTodo">
+          <input className="textfield" placeholder="add todo" />
+          <button className="submit">Add</button>
+        </div>
+        <nav className="filter">
           <button className="active">all</button>
           <button>active</button>
           <button>completed</button>
-        </div>
-      </div>
+        </nav>
+      </header>
     );
   }
 }

step1-05/src/style.css

@@ -1,21 +1,23 @@
 body {
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   width: 400px;
   margin: 20px auto;
 }
+
 h1 {
   text-align: center;
 }
 
+.addTodo {
+  display: flex;
+}
+
 .textfield {
-  width: 80%;
+  flex-grow: 1;
+  margin-right: 10px;
 }
 
-.add {
-  margin-left: 5%;
-}
-
-.button {
+.submit {
   border: none;
   padding: 5px 10px;
 }
@@ -28,6 +30,7 @@ h1 {
   background: transparent;
   border: none;
 }
+
 .filter .active {
   border-bottom: 2px solid blue;
 }
@@ -44,7 +47,3 @@ footer {
 footer span {
   flex-grow: 1;
 }
-
-.hidden {
-  display: none;
-}