html cleanup

step1-06/src/components/TodoFooter.tsx

@@ -7,7 +7,7 @@ export const TodoFooter = (props: any) => {
       <span>
         {itemCount} item{itemCount > 1 ? 's' : ''} left
       </span>
-      <button className="button">Clear Completed</button>
+      <button className="submit">Clear Completed</button>
     </footer>
   );
 };

step1-06/src/components/TodoHeader.tsx

@@ -3,17 +3,20 @@ import React from 'react';
 export class TodoHeader extends React.Component<any, any> {
   render() {
     const { filter } = this.props;
+
     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={filter == 'all' ? 'active' : ''}>all</button>
           <button className={filter == 'active' ? 'active' : ''}>active</button>
           <button className={filter == 'completed' ? 'active' : ''}>completed</button>
-        </div>
-      </div>
+        </nav>
+      </header>
     );
   }
 }

step1-06/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;
-}