Split clear and solve button

src/lib/apps/todoApp.svelte

@@ -15,14 +15,17 @@
             $todos = [todo, ...$todos];
         }
     }
-    let clearTodo = (todo) => {
+    let solveTodo = (todo) => {
         if(todo.done) {
-            $todos = $todos.filter(x => x != todo)
+            todo.done = false;
         }
         else {
             todo.done = true;
+        }
         $todos = $todos
     }
+    let clearTodo = (todo) => {
+        $todos = $todos.filter(x => x != todo)
     }
     let filterTodo = (type) => {
         todo_type = type;
@@ -60,7 +63,12 @@
         {#each filteredTodo as todo}
         <li class = "todo {todo.done ? 'done' : ''}">
             <p>{todo.text}</p>
-            <button on:click="{() => clearTodo(todo)}">{todo.done ? '✗' : '✓'}</button>
+            <div class = "todo-buttons">
+                {#if todo.done}
+                  <button class = "clear" on:click="{() => clearTodo(todo)}">✗</button>
+                {/if}
+                <button class = "solve" on:click="{() => solveTodo(todo)}">✓</button>
+            </div>
         </li>
         {/each}
     </ul>
@@ -122,9 +130,10 @@ button {
 .todo-input {
     font-size: 0px;
     margin: 1rem;
+    display: flex;
 }
 .todo-text {
-    padding: 4px;
+    padding: 1rem;
     margin: 0px;
     border: solid white 2px;
     border-right: 0px;
@@ -133,6 +142,7 @@ button {
     border-top-left-radius: 5px;
     font-family: 'Atkinson Hyperlegible', sans-serif;
     font-size: 1rem;
+    width: 100%;
 }
 
 .todo-text:focus {
@@ -141,6 +151,7 @@ button {
 }
 
 .todo-add {
+    padding: 1rem;
     border-bottom-left-radius: 0px;
     border-top-left-radius: 0px;
 }
@@ -166,19 +177,27 @@ button:active.disabled {
     margin-top: 1rem;
     display: flex;
     align-items: center;
-    justify-content: center;
+    padding-left: 1rem;
 }
 
 .todo-filter button {
-    margin-right: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin-right: 1px;
     border-bottom-left-radius: 0px;
     border-bottom-right-radius: 0px;
 }
 
 .todo-list {
+    margin-left: 1rem;
+    margin-right: 1rem;
     padding: 1rem;
     padding-bottom: 0.5rem;
     background-color: var(--blue-disabled);
+    border-bottom-left-radius: 0px;
+    border-top-right-radius: 5px;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
     /* list
         * padding 1.5rem
        todo
@@ -199,33 +218,56 @@ button:active.disabled {
 .todo {
     padding: 0.5rem;
     margin-bottom: 0.5rem;
-    background-color: var(--yellow);
+    background-color: var(--cream);
     border-radius: 5px;
     display: flex;
     align-items: center;
 }
 
+.todo-buttons {
+    margin-left: auto;
+}
+
 .todo.done {
     background-color: var(--cream);
 }
 
+/* common properties */
 .todo button {
-    padding: 3px;
-    margin-left: auto;
-    background-color: var(--green);
-    border: solid 3px var(--green);
-    color: var(--cream)
+    width: 2rem;
+    height: 2rem;
+    padding: 0rem;
+    border: solid 0.2rem;
+    border-radius: 1rem;
 }
 
-.todo.done button {
+
+/* sovle button */
+.todo button.solve {
+    background-color: var(--cream);
+    border-color: var(--green);
+    color: transparent;
+}
+.todo.done button.solve {
+    background-color: var(--cream);
+    color: var(--green)
+}
+
+/* clear button */
+.todo button.clear {
     background-color: var(--red);
     border-color: var(--red);
     color: var(--cream);
 }
 
+/* active buttons */
 .todo button:active {
     background-color: var(--yellow);
-    color: black;
+    border-color: var(--yellow)
+}
+.todo.done button:active {
+    background-color: var(--yellow);
+    border-color: var(--yellow)
 }
 
 </style>