mobile toggle

src/App.css

@@ -60,13 +60,32 @@
   color: #adadad;
   letter-spacing: 1px;
 }
+.mobile-toggle {
+  display: none;
+}
+.desktop-toggle {
+  margin-left: 10px;
+}
 
 @media (max-width: 768px) {
+  .mobile-toggle {
+    display: inline-flex;
+  }
+  .desktop-toggle {
+    display: none;
+  }
   .todo-list {
     padding: 15px;
     padding-top: 10px;
     width: auto;
   }
+  .todo-list h2 {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+    max-width: 95%;
+  }
   .todo-list-title {
     /* Disable Auto Zoom in Input “Text” tag - Safari on iPhone */
     font-size: 16px;
@@ -76,6 +95,7 @@
   .todo-create-wrapper {
     flex-direction: column;
     align-items: flex-start;
+    margin-bottom: 15px;
   }
   .todo-create-input {
     appearance: none;

src/App.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import ContentEditable from './components/ContentEditable'
 import AppHeader from './components/AppHeader'
 import SettingsMenu from './components/SettingsMenu'
+import SettingsIcon from './components/SettingsIcon'
 import api from './utils/api'
 import sortByDate from './utils/sortByDate'
 import './App.css'
@@ -230,7 +231,10 @@ export default class App extends Component {
         <AppHeader />
 
         <div className='todo-list'>
-          <h2>Create todo</h2>
+          <h2>
+            Create todo
+            <SettingsIcon onClick={this.openModal} className='mobile-toggle' />
+          </h2>
           <form className='todo-create-wrapper' onSubmit={this.saveTodo}>
             <input
               className='todo-create-input'
@@ -244,11 +248,7 @@ export default class App extends Component {
               <button className='todo-create-button'>
                 Create todo
               </button>
-              <span onClick={this.openModal}>
+              <SettingsIcon onClick={this.openModal}  className='desktop-toggle' />
-                <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>
 

src/components/SettingsIcon/SettingIcon.css

@@ -0,0 +1,11 @@
+.setting-toggle-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.settings-toggle {
+  fill: #b7b9bd;
+  width: 35px;
+  height: 35px;
+  cursor: pointer;
+}

src/components/SettingsIcon/index.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import styles from './SettingIcon.css' // eslint-disable-line
+
+const SettingIcon = (props) => {
+  const className = props.className || ''
+  return (
+    <span onClick={props.onClick} class={`setting-toggle-wrapper ${className}`}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125" className="settings-toggle">
+        <use xlinkHref="#settings" className="settings-gear"></use>
+      </svg>
+    </span>
+  )
+}
+
+export default SettingIcon