From 396b865b051b9cb68d27c793c0c082069fe001b4 Mon Sep 17 00:00:00 2001
From: Giulio Alessandrini <giulioa@wolfram.com>
Date: Tue, 3 Aug 2021 09:43:26 +0200
Subject: [PATCH] todo restyling

---
 src/lib/apps/todoApp.svelte | 116 ++++++++++++++++++++++++++----------
 src/routes/__layout.svelte  |   6 --
 2 files changed, 83 insertions(+), 39 deletions(-)

diff --git a/src/lib/apps/todoApp.svelte b/src/lib/apps/todoApp.svelte
index d364f70..8dda0c4 100644
--- a/src/lib/apps/todoApp.svelte
+++ b/src/lib/apps/todoApp.svelte
@@ -10,6 +10,7 @@
                 date: Date.now,
                 done: false
             }
+            todo_text = "";
             if (todo_type == "done") todo_type = "all";
             $todos = [todo, ...$todos];
         }
@@ -46,8 +47,10 @@
 <div class = "panel">
     <h2 class= "title">TODO</h2>
     <hr/>
-    <input bind:value="{todo_text}" placeholder="title"/>
-    <button on:click="{addTodo}" disabled = {todo_text.length == 0} class = {todo_text.length == 0 ? 'disabled' : ''}>add</button>
+    <div class="todo-input">
+        <input class="todo-text" bind:value="{todo_text}" placeholder="title"/>
+        <button on:click="{addTodo}" disabled = {todo_text.length == 0} class = "todo-add {todo_text.length == 0 ? 'disabled' : ''}">add</button>    
+    </div>
     <div class="todo-filter">
         <button on:click="{() => filterTodo('active')}" class = {todo_type == 'active' ? 'disabled' : ''}>active</button>
         <button on:click="{() => filterTodo('done')}" class = {todo_type == 'done' ? 'disabled' : ''}>done</button>
@@ -65,49 +68,86 @@
 
 <style>
 
-input {
-    padding: 5px;
-    margin: 0px;
-    border: solid var(--gray) 1px;
-    border-radius: 5px;
+* {
+    --cream: #FEF9EF;
+    --blue: #227c9d;
+    --green: #17C3B2;
+    --yellow: #FFCB77;
+    --red: #FE6D73;
+}
+
+
+.panel {
+        padding: 10px;
+        background-color: var(--cream);
+}
+@media only screen and (min-width: 500px) {
+    .panel {
+        margin-left: auto;
+        margin-right: auto;
+        width: 500px;
+        border: solid var(--cream) 1px;
+        border-radius: 5px;
+    }
+}
+
+hr {
+    margin-top: 10px;
+    margin-bottom: 20px;
+    border: 1px solid var(--yellow);
 }
 
 button {
     padding: 5px;
     margin: 0px;
-    background-color: var(--lightgray);
-    border: solid var(--gray) 1px;
+    background-color: var(--blue);
+    border: solid var(--blue) 1px;
     border-radius: 5px;
+    color: var(--cream);
+}
+
+.todo-input {
+    font-size: 0px;
+}
+.todo-text {
+    padding: 8px;
+    margin: 0px;
+    border: solid white 1px;
+    border-right: 0px;
+    border-radius: 0px;
+    border-bottom-left-radius: 5px;
+    border-top-left-radius: 5px;
+}
+
+.todo-text:focus {
+    outline: none;
+}
+
+.todo-add {
+    padding: 8px;
+    border-radius: 0px;
+    border-bottom-right-radius: 5px;
+    border-top-right-radius: 5px;
 }
 
 .disabled {
-    background-color: var(--gray);
+    background-color: var(--yellow);
+    border-color: var(--yellow);
+    color: black;
 }
 
 button:active {
-    background-color: var(--gray);
-}
-
-hr {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    border: 1px solid var(--gray);
-}
-
-.panel {
-    background-color: rgb(245, 253, 255);
-    padding: 10px;
-    border: solid var(--gray) 1px;
-    border-radius: 5px;
+    background-color: var(--yellow);
+    color: black;
 }
 
 .title {
     padding: 0px;
     margin: 0px;
     margin-left: 5px;
-    font-family: Georgia, 'Times New Roman', Times, serif;
     font-weight: 400;
     font-size: 1.5rem;
+    color: var(--yellow);
 }
 
 .todo-filter {
@@ -131,25 +171,35 @@ hr {
 .todo {
     padding: 10px;
     margin: 5px 0px 5px 0px;
-    background-color: rgb(255, 255, 255);
-    border: solid var(--gray) 1px;
+    background-color: var(--yellow);
     border-radius: 5px;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
+    font-size: 1.2rem;
+}
+
+.todo.done {
+    /* background-color: #FEF9EF; */
 }
 
 .done p {
-    text-decoration: line-through
-}
-
-.todo p {
-    padding: 0px;
-    margin: 0px 10px 0px 0px;
+    /* text-decoration: line-through; */
+    color: var(--cream);
 }
 
 .todo button {
     margin-left: auto;
+    background-color: var(--green);
+    border-color: var(--green);
+    font-size: 1rem;
+    color: var(--cream)
+}
+
+.todo.done button {
+    background-color: var(--red);
+    border-color: var(--red);
+    color:var(--cream);
 }
 
 </style>
\ No newline at end of file
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 99de269..67514f0 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -21,13 +21,7 @@
 }
 
 .site {
-    padding: 2em;
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 50em;
-
     display: flex;
     flex-direction: column;
-    align-items: center;
 }
 </style>
\ No newline at end of file