add clear all

src/App.css

@@ -3,9 +3,20 @@
   padding-top: 10px;
   width: 600px;
 }
-
+.todo-settings-toggle {
+  fill: #b7b9bd;
+  width: 25px;
+  margin-left: 10px;
+  cursor: pointer;
+}
 .todo-create-wrapper {
   margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+}
+.todo-actions {
+  display: flex;
+  align-items: center;
 }
 .todo-create-input {
   font-size: 14px;
@@ -62,12 +73,17 @@
     max-width: 80%;
     margin-left: 40px;
   }
+  .todo-create-wrapper {
+    flex-direction: column;
+    align-items: flex-start;
+  }
   .todo-create-input {
     appearance: none;
-    margin-bottom: 15px;
     border: 1px solid rgba(120, 130, 152, 0.25);
     /* Disable Auto Zoom in Input “Text” tag - Safari on iPhone */
     font-size: 16px;
+    margin-bottom: 15px;
+    min-width: 85%;
   }
   .todo-item button {
     padding: 4px 12px;

src/App.js

@@ -1,21 +1,22 @@
 import React, { Component } from 'react'
 import ContentEditable from './components/ContentEditable'
 import AppHeader from './components/AppHeader'
+import SettingsMenu from './components/SettingsMenu'
 import api from './utils/api'
 import sortByDate from './utils/sortByDate'
 import './App.css'
 
 export default class App extends Component {
   state = {
-    todos: []
+    todos: [],
+    showMenu: false
   }
   componentDidMount() {
     // Fetch all todos
-    api.readAll().then((response) => {
-      console.log('all todos', response)
-
+    api.readAll().then((todos) => {
+      console.log('all todos', todos)
       this.setState({
-        todos: response
+        todos: todos
       })
     })
   }
@@ -156,6 +157,17 @@ export default class App extends Component {
       })
     }
   }
+  closeModal = (e) => {
+    this.setState({
+      showMenu: false
+    })
+  }
+  openModal = () => {
+    console.log('settings')
+    this.setState({
+      showMenu: true
+    })
+  }
   renderTodos() {
     const { todos } = this.state
 
@@ -228,12 +240,21 @@ export default class App extends Component {
               autoComplete='off'
               style={{marginRight: 20}}
             />
-            <button className='todo-create-button'>
-              Create todo
-            </button>
+            <div className='todo-actions'>
+              <button className='todo-create-button'>
+                Create todo
+              </button>
+              <span onClick={this.openModal}>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125" className="todo-settings-toggle">
+                  <use xlinkHref="#settings" className="settings-gear"></use>
+                </svg>
+              </span>
+            </div>
           </form>
+
           {this.renderTodos()}
         </div>
+        <SettingsMenu showMenu={this.state.showMenu} handleModalClose={this.closeModal} />
       </div>
     )
   }

src/components/SettingsMenu/SettingsMenu.css

@@ -0,0 +1,56 @@
+
+.settings-wrapper {
+  position: fixed;
+  left: 0;
+  top: 0;
+  background: rgba(95, 95, 95, 0.50);
+  font-size: 13px;
+  width: 100%;
+  height: 100%;
+  z-index: 9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.settings-content {
+  margin-top: 3em;
+  margin-bottom: 3em;
+  padding: 1.5em 3em;
+  padding-bottom: 3em;
+  background: #fff;
+  color: rgba(14,30,37,0.54);
+  border-radius: 8px;
+  box-shadow: 0 1px 6px 0 rgba(14,30,37,0.12);
+  position: relative;
+}
+.settings-close {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+  cursor: pointer;
+}
+.settings-content h2 {
+ color: #000;
+}
+.settings-section {
+  margin-top: 20px;
+}
+.settings-header {
+  font-size: 16px;
+  font-weight: 600;
+}
+.settings-options-wrapper {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.settings-option {
+  padding: 3px 8px;
+  margin: 5px;
+  border: 1px solid;
+  font-size: 12px;
+  cursor: pointer;
+  &:hover, &.activeClass {
+    color: #fff;
+  }
+}

src/components/SettingsMenu/index.js

@@ -0,0 +1,59 @@
+import React, { Component } from 'react'
+import styles from './SettingsMenu.css' // eslint-disable-line
+
+export default class Menu extends Component {
+  componentDidMount() {
+    // attach event listeners
+    document.body.addEventListener('keydown', this.handleEscKey)
+  }
+  componentWillUnmount() {
+    // remove event listeners
+    document.body.removeEventListener('keydown', this.handleEscKey)
+  }
+  handleEscKey = (e) => {
+    if (this.props.showMenu && e.which === 27) {
+      this.props.handleModalClose()
+    }
+  }
+  handleDelete = (e) => {
+    e.preventDefault()
+    const deleteConfirm = window.confirm("Are you sure you want to clear all completed todos?");
+    if (deleteConfirm) {
+      console.log('delete')
+    }
+  }
+  render() {
+    const { showMenu } = this.props
+    const showOrHide = (showMenu) ? 'flex' : 'none'
+    return (
+      <div className='settings-wrapper' style={{display: showOrHide}}>
+        <div className='settings-content'>
+          <span className='settings-close' onClick={this.props.handleModalClose}>❌</span>
+          <h2>Settings</h2>
+          <div className='settings-section' onClick={this.handleDelete}>
+            <button className='btn-danger'>
+              Clear All Completed Todos
+            </button>
+          </div>
+          <div className='settings-section' style={{display: 'none'}}>
+            <div className='settings-header'>Sort Todos:</div>
+            <div className='settings-options-wrapper' data-setting='sortOrder'>
+              <div
+                className='settings-option'
+                onClick={this.changeSetting}
+                data-value='desc'>
+                Oldest First ▼
+              </div>
+              <div
+                className='settings-option'
+                onClick={this.changeSetting}
+                data-value='asc'>
+                Most Recent First ▲
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}

src/index.css

@@ -32,3 +32,16 @@ button:focus, button:hover {
   box-shadow: 0 8px 12px 0 rgba(233,235,235,.16), 0 2px 8px 0 rgba(0,0,0,.08);
   text-decoration: none;
 }
+
+
+.btn-danger {
+  background-color: #fb6d77;
+  border-color: #fb6d77;
+  border-bottom-color: #e6636b;
+  color: #fff;
+}
+.btn-danger:focus, .btn-danger:hover {
+    background-color: #fa3b49;
+    border-color: #fa3b49;
+    color: #fff;
+}