add close button to items with error

src/components/ListItem.js

@@ -5,15 +5,20 @@ export default class ListItem extends React.Component {
         let isCompleted = this.props.item.completed;
         let isError = this.props.item.error;
 
-        const Buttons = () => {
+        const Buttons = ({ completeButton = true, closeButton = true }) => {
             return (
                 <>
-                    <span className="complete" onClick={this.complete.bind(this, this.props.item.id)}>
-                        ✔
-                    </span>
-                    <span className="close" onClick={this.delete.bind(this, this.props.item.id)}>
-                        ✕
-                    </span>
+                    {completeButton ? (
+                        <span className="complete" onClick={this.complete.bind(this, this.props.item.id)}>
+                            ✔
+                        </span>
+                    ) : null}
+
+                    {closeButton ? (
+                        <span className="close" onClick={this.delete.bind(this, this.props.item.id)}>
+                            ✕
+                        </span>
+                    ) : null}
                 </>
             );
         };
@@ -23,7 +28,7 @@ export default class ListItem extends React.Component {
                 <li className={"todo-item " + (isCompleted ? "complete " : "") + (isError ? "error " : "")}>
                     <span className="todo-item-number">{this.props.number}</span>
                     <span className="todo-item-text">{this.props.item.text}</span>
-                    {isCompleted || isError ? null : <Buttons />}
+                    {isCompleted ? null : <Buttons completeButton={!isError} />}
                 </li>
             </>
         );

src/static/css/styles.scss

@@ -54,8 +54,8 @@
             }
 
             & .close{
-                padding-left: 7px;
-                padding-right: 7px;
+                padding-left: 10px;
+                padding-right: 10px;
                 cursor: pointer;
                 font-size: 1.25em;
 
@@ -64,8 +64,8 @@
                 }
             }
             & .complete{
-                padding-left: 7px;
-                padding-right: 7px;
+                padding-left: 10px;
+                padding-right: 10px;
                 cursor: pointer;
                 font-size: 1.25em;
 
@@ -80,7 +80,10 @@
             }
             &.error{
                 background: #d3d3d3;
-                text-decoration:line-through;
+                & .todo-item-text{
+                    text-decoration:line-through;
+
+                }
             }
 
         }