design changes

react/src/components/App.css

@@ -8,7 +8,7 @@
   display: flex;
   flex-direction: row;
   flex-grow: 0;
-  max-width: 50%;
+  max-width: 45%;
 }
 
 .loading {
@@ -37,16 +37,26 @@
 }
 
 #filters {
+  display: flex;
+  justify-content: center;
+  margin: 0.2rem 0.1rem;
+  margin-left: 0.5rem;
   margin-right: 0.75rem;
   align-self: center;
   flex-shrink: 0;
 }
 
+#filters button {
+  min-width: 3rem;
+}
+
 #inputs {
   transition: 0.4s ease-in-out;
   box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
   display: flex;
   height: 2.5rem;
+  position: relative;
+  z-index: 5;
 }
 
 #input {
@@ -104,7 +114,14 @@ li button {
   font-size: 1rem;
   transition: 0.17s ease-in-out;
   overflow: hidden;
-  box-shadow: inset -3px 0 6px -3px rgba(0, 0, 0, 0.3);
+  box-shadow: inset 3px 0 6px -3px rgba(0, 0, 0, 0.3);
+}
+
+/* make buttons bigger on smartphones */
+@media only screen and (max-width: 600px) {
+  li button {
+    padding: 0 1.5rem !important;
+  }
 }
 
 li button.todo {
@@ -157,8 +174,10 @@ textarea.todo--input {
 }
 
 .disabled {
-  width: 1rem;
-  opacity: 0;
+  width: 2rem;
+  background-color: #fafafa;
+  color: #555555;
+  box-shadow: none;
   padding: 0.5rem 1rem;
   border-top: 1px solid #f0f0f0;
 }

react/src/components/Todo.js

@@ -10,6 +10,10 @@ const icon = {
   fontSize: 24,
   padding: 0,
 };
+const disabledAction = {
+  backgroundColor: '#fafafa',
+  color: '#dddddd',
+};
 
 class Todo extends React.Component {
   constructor(props) {
@@ -47,6 +51,7 @@ class Todo extends React.Component {
     this.setState({
       ...this.state,
       editing: false,
+      hover: false,
     });
   }
 
@@ -75,13 +80,11 @@ class Todo extends React.Component {
         style={{
           justifyContent: 'left',
           paddingLeft: '1rem',
-          borderTop: '1px solid #f0f0f0',
           textDecoration: this.props.todo.completed ? 'line-through' : 'none',
           color: this.props.todo.completed ? '#888888' : 'black',
         }}
         className="todo"
         onClick={() => {
-          this.onMouseOut();
           this.props.toggleTodo();
         }}
       >
@@ -102,38 +105,40 @@ class Todo extends React.Component {
       : [
           <ButtonBase
             key="remove"
-            style={{ backgroundColor: 'pink' }}
+            style={
+              this.state.hover ? { backgroundColor: 'pink' } : disabledAction
+            }
             className={deleteClasses.join(' ')}
             onClick={this.props.removeTodo}
-            onMouseOver={this.onMouseOver}
-            onFocus={this.onMouseOver}
-            onMouseOut={this.onMouseOut}
-            onBlur={this.onMouseOut}
           >
             <DeleteIcon style={icon} />
           </ButtonBase>,
           <ButtonBase
             key="edit"
-            style={{ backgroundColor: 'lightcyan' }}
+            style={
+              this.state.hover
+                ? { backgroundColor: 'lightcyan' }
+                : disabledAction
+            }
             className={editClasses.join(' ')}
             onClick={this.startEdit}
-            onMouseOver={this.onMouseOver}
-            onFocus={this.onMouseOver}
-            onMouseOut={this.onMouseOut}
-            onBlur={this.onMouseOut}
           >
             <EditIcon style={icon} />
           </ButtonBase>,
         ];
     return (
       <animated.li
-        style={this.props.style}
-        // onFocus and onBlur are triggered with long press on smartphones
+        style={{
+          ...this.props.style,
+          borderTop: '1px solid #f0f0f0',
+        }}
+        onMouseOver={this.onMouseOver}
         onFocus={this.onMouseOver}
+        onMouseOut={this.onMouseOut}
         onBlur={this.onMouseOut}
       >
-        {ButtonBases}
         {text}
+        {ButtonBases}
       </animated.li>
     );
   }