Merge pull request #13 from FWDP/dev-svelte

Dev svelte
FWDP · Aug 10, 2023 · 0d2a0a2 · 0d2a0a2
2 parents 22374d9 + 0d1e169
commit 0d2a0a2
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 11 deletions.
diff --git a/packages/svelte-todo/package.json b/packages/svelte-todo/package.json
@@ -26,6 +26,7 @@
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "autoprefixer": "^10.4.14",
+    "date-fns": "^2.30.0",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte": "^2.30.0",

diff --git a/packages/svelte-todo/pnpm-lock.yaml b/packages/svelte-todo/pnpm-lock.yaml
diff --git a/packages/svelte-todo/src/lib/components/Todo.svelte b/packages/svelte-todo/src/lib/components/Todo.svelte
@@ -6,10 +6,10 @@
   export let todo: Todo;
 </script>
 
-<div class="flex flex-col p-5 rounded-full shadow-lg shadow-gray-400">
-  <div class="text-left text-lg">{todo.title}</div>
+<div class="flex flex-col p-5 m-4 rounded-md shadow-sm bg-white shadow-gray-400">
+  <div class="text-left text-lg font-semibold">{todo.title}</div>
   <div class="flex flex-row">
-    <span class="flex-1 basis-10/12 pt-5"
+    <span class="flex-1 basis-10/12 pt-5 text-sm"
       >{formatRelative(subDays(new Date(), 6), todo.createdAt)}</span
     >
     <span

diff --git a/packages/svelte-todo/src/routes/+page.svelte b/packages/svelte-todo/src/routes/+page.svelte
@@ -40,30 +40,30 @@
   <button on:click={generateToSelectedUser} disabled={!selected}>Generate</button>
 </div>
 
-<div class="flex flex-col md:flex-row">
-  <div class="basis-1/3 border-red-500 border">
+<div class="flex flex-col md:flex-row bg-white m-4 gap-4">
+  <div class="basis-1/3 border bg-[#ECECEF]">
     <div class="flex flex-col">
-      <h1 class="text-center">Pending</h1>
+      <h1 class="p-4">Pending</h1>
     </div>
     <div>
       {#each $todosPending as todo}
         <Todo {todo} />
       {/each}
     </div>
   </div>
-  <div class="basis-1/3 border-red-500 border">
+  <div class="basis-1/3 border bg-[#ECECEF]">
     <div class="flex flex-col">
-      <h1 class="text-center">In Progress</h1>
+      <h1 class="p-4">In Progress</h1>
     </div>
     <div>
       {#each $todosInProgress as todo}
         <Todo {todo} />
       {/each}
     </div>
   </div>
-  <div class="basis-1/3 border-red-500 border">
+  <div class="basis-1/3 border bg-[#ECECEF]">
     <div class="flex flex-col">
-      <h1 class="text-center">Done</h1>
+      <h1 class="p-4">Done</h1>
     </div>
     <div>
       {#each $todosDone as todo}
@@ -72,7 +72,6 @@
     </div>
   </div>
 </div>
-
 <p>
   Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
 </p>