From 16a067cd5d98796fff26fd002be52f3f1b75733c Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Sun, 7 Apr 2024 19:19:08 +0100
Subject: [PATCH] fix(#16): Ensure DaisyUI styles apply to components

It turns out that tailwind excludes styles it hasn't found in use, so it needs to be explicitly told where to find the component files. This also therefore fixes the styles in the SignUp component.
---
 src/lib/components/SignUp.svelte | 40 +++++++++++++++++++++++++-------
 src/routes/+page.svelte          |  2 --
 tailwind.config.js               |  2 +-
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/SignUp.svelte b/src/lib/components/SignUp.svelte
index 5fe82b6..ef0446c 100644
--- a/src/lib/components/SignUp.svelte
+++ b/src/lib/components/SignUp.svelte
@@ -28,12 +28,36 @@
 	}
 </script>
 
-<input
-	type="text"
-	placeholder="Email"
-	class="input input-bordered w-full max-w-xs"
-	bind:value={email}
-/>
+<div class="flex flex-row gap-x-2">
+	<label class="input input-bordered flex items-center gap-2">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 16 16"
+			fill="currentColor"
+			class="w-4 h-4 opacity-70"
+			><path
+				d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z"
+			/><path
+				d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z"
+			/></svg
+		>
+		<input type="text" class="grow" placeholder="Email" bind:value={email} />
+	</label>
 
-<input type="password" bind:value={password} placeholder="Password" />
-<button class="btn btn-secondary" on:click={signUpNewUser}>Sign Up</button>
+	<label class="input input-bordered flex items-center gap-2">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 16 16"
+			fill="currentColor"
+			class="w-4 h-4 opacity-70"
+			><path
+				fill-rule="evenodd"
+				d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+				clip-rule="evenodd"
+			/></svg
+		>
+		<input type="password" class="grow" bind:value={password} placeholder="Password" />
+	</label>
+
+	<button class="btn btn-primary" on:click={signUpNewUser}>Sign Up</button>
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b17ade1..919de56 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -58,5 +58,3 @@
 	<PokemonSprite pokedexNumber={666} form={''} />
 	<PokemonSprite pokedexNumber={'003'} form={''} />
 </div>
-
-<div class="bg-blue-500 text-white p-4">This is a component styled with Tailwind CSS</div>
diff --git a/tailwind.config.js b/tailwind.config.js
index d088db0..a216401 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-	content: ['./src/routes/**/*.{svelte,js,ts}'],
+	content: ['./src/routes/**/*.{svelte,js,ts}', './src/lib/components/**/*.{svelte,js,ts}'],
 	theme: {
 		extend: {}
 	},