From 5d9f340bf010fa06902cbbfa4abb9ddae54f038e Mon Sep 17 00:00:00 2001
From: Luke Carr <luke_jcarr@pm.me>
Date: Tue, 5 Apr 2022 13:31:47 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Added=20styling=20to=20new=20tas?=
 =?UTF-8?q?k=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Welcome.tsx |  2 +-
 frontend/src/routes/todos.tsx       | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Welcome.tsx b/frontend/src/components/Welcome.tsx
index 18329fa..58df772 100644
--- a/frontend/src/components/Welcome.tsx
+++ b/frontend/src/components/Welcome.tsx
@@ -7,7 +7,7 @@ const Welcome: FunctionalComponent = () => {
 
   if (hidden) return null
 
-  return <section class="mb-4 border-l-4 border-gray-600 p-2 pl-3 font-semibold bg-gray-100">
+  return <section class="mb-8 border-l-4 border-gray-600 p-2 pl-3 font-semibold bg-gray-100">
     <h3>Welcome to tiny-todo!</h3>
     <p>A simple todo app that's: tiny 🐜, lightweight 🔦🏋️‍♀️, and performant ⚡. Built using Go &amp; Preact!</p>
     <button class="text-sm font-semibold underline underline-dotted hover:underline-solid underline-black" onClick={() => setHidden(true)}>don't show again</button>
diff --git a/frontend/src/routes/todos.tsx b/frontend/src/routes/todos.tsx
index 29aad81..cc45254 100644
--- a/frontend/src/routes/todos.tsx
+++ b/frontend/src/routes/todos.tsx
@@ -42,9 +42,13 @@ const NewTask: FunctionalComponent = () => {
     reset()
   }
 
-  return <form onSubmit={handleSubmit(create)} class="mb-8">
-    <input placeholder="Use tiny-todo everyday!" {...register('name', { required: true })} />
-    <input type="submit" value="Create task" />
+  return <form onSubmit={handleSubmit(create)} class="mb-8 space-y-4">
+    <input
+      class="block border-gray-200 border-1 w-full px-4 py-2 rounded-sm focus:border-gray-400 focus:outline-none"
+      placeholder="Use tiny-todo everyday!"
+      {...register('name', { required: true })}
+    />
+    <input class="bg-gray-700 text-white px-3 py-1 font-bold hover:bg-black cursor-pointer rounded-sm" type="submit" value="Create task" />
   </form>
 }