minor corrections and style changes

src/App.js

@@ -18,7 +18,7 @@ function App() {
     {
       id: 2,
       text: 'Todo 2',
-      isEdit: true,
+      isEdit: false,
       isComplete: false
     },
     {

src/components/TodoItem.js

@@ -2,24 +2,24 @@ import React from 'react'
 
 const TodoItem = ({ id, children, edit, complete, onEdit, onComplete, onClick }) => {
 
-  const className = `todos ${complete ? 't-complete' : ''}`
+  const className = `${complete ? 't-complete' : ''}`
+  const padding = `task-body-content ${!edit ? 'custom-padding' : ''}`
 
   return (
     <div className="task">
-      <div className="task-body-content">
+      <div className={padding}>
         {!edit ? (
           <div style={{ display: 'flex' }}>
-            <input type='checkbox' checked={complete} onChange={(e) => onComplete(id, e.target.checked)}></input>
+            <input type='checkbox' style={{ marginRight: '6px' }} checked={complete} onChange={(e) => onComplete(id, e.target.checked)}></input>
             <span style={{ cursor: 'pointer' }} className={className} onClick={() => onClick(id, children)}>{children}</span>
           </div>
         ) :
-          <form>
+          <form onSubmit={(e) => onEdit(id, e.target.editInput.value)}>
             <div className='add-form'>
               <div className='form-control'>
-                <input type='input' defaultValue={children} onChange={(e) => onEdit(id, e.target.value)}
-                />
+                <input type='input' defaultValue={children} name='editInput' />
               </div>
-              <button type='button' className='btn'>Save</button>
+              <button type='submit' className='btn'>Save</button>
             </div>
           </form>
         }

src/index.css

 body {
   font-family: sans-serif;
   background-color: #fff;
+  color: #000;
   font-size: 15px;
   box-sizing: border-box;
 }
 
 .btn {
-  display: inline-block;
-  background-color: #fff;
-  color: #000;
+  background-color: transparent;
   border: 1px solid #ccc;
   padding: 10px 12px;
   margin: 5px 12px;
   border-radius: 5px;
-  cursor: pointer;
-  text-decoration: none;
   font-size: 15px;
-  height: 35px;
-  line-height: 0px;
+  height: 38px;
 }
 
 .add-form {
   display: flex;
   justify-content: space-between;
-  margin: 10px 10px 10px 5px;
+  margin: 10px;
 }
 
 .form-control input {
   width: 18rem;
-  height: 26px;
+  height: 30px;
   margin: 5px 2px 3px 3px;
   padding: 3px 7px;
   font-size: 15px;
@@ -41,24 +37,25 @@ body {
   margin: 15rem auto;
   border-bottom: 1px solid rgba(0, 0, 0, .125);
   border-radius: 4px;
-  color: #000;
   box-shadow: -1px 2px 8px 0px #38383829;
   background-color: #fff;
 }
 
 .task-head {
   border-bottom: 1px solid #ffffff61;
-  padding: 10px;
+  padding: 13px;
   text-align: center;
   box-shadow: 1px 3px 1px #18181812;
-  margin-bottom: 5px;
 }
 
 .task-body-content {
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid #ccc;
-  padding: 4px 6px;
+  border-top: 1px solid #ccc;
+}
+
+.custom-padding {
+  padding: 10px 6px;
 }
 
 .t-complete {