html cleanup

step1-07/src/components/TodoFooter.tsx

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

step1-07/src/components/TodoHeader.tsx

@@ -16,13 +16,15 @@ export class TodoHeader extends React.Component<TodoHeaderProps, any> {
   render() {
     const { filter, setFilter } = this.props;
     return (
-      <div>
+      <header>
         <h1>todos</h1>
-        <input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
-        <button onClick={this._onAdd} className="button add">
-          Add
-        </button>
-        <div className="filter">
+        <div className="addTodo">
+          <input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
+          <button onClick={this._onAdd} className="submit">
+            Add
+          </button>
+        </div>
+        <nav className="filter">
           <button onClick={() => setFilter('all')} className={filter == 'all' ? 'active' : ''}>
             all
           </button>
@@ -32,8 +34,8 @@ export class TodoHeader extends React.Component<TodoHeaderProps, any> {
           <button onClick={() => setFilter('completed')} className={filter == 'completed' ? 'active' : ''}>
             completed
           </button>
-        </div>
-      </div>
+        </nav>
+      </header>
     );
   }
 

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