UI cleanup

package.json

@@ -23,15 +23,19 @@
         "@types/nodemailer": "^6.4.13",
         "@typescript-eslint/eslint-plugin": "^6.0.0",
         "@typescript-eslint/parser": "^6.0.0",
+        "autoprefixer": "^10.4.17",
+        "daisyui": "^4.6.0",
         "eslint": "^8.28.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-svelte": "^2.30.0",
         "nodemailer": "^6.9.7",
+        "postcss": "^8.4.33",
         "prettier": "^2.8.0",
         "prettier-plugin-svelte": "^2.10.1",
         "prisma": "^5.4.2",
         "svelte": "^4.0.5",
         "svelte-check": "^3.4.3",
+        "tailwindcss": "^3.4.1",
         "ts-node": "^10.9.1",
         "tslib": "^2.4.1",
         "typescript": "^5.0.0",

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {}
+    }
+};

src/app.postcss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/components/AppMetadata.svelte

@@ -0,0 +1,38 @@
+<!-- AppDetails.svelte -->
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { createEventDispatcher } from 'svelte';
+
+    import type { PageData } from '../routes/app/[id]/$types';
+    export let data: PageData;
+
+    let isExpanded = false;
+    const dispatch = createEventDispatcher();
+
+    onMount(() => {
+        // You can initialize any necessary logic here
+    });
+
+    const toggleDescription = () => {
+        isExpanded = !isExpanded;
+        dispatch('toggle', { isExpanded });
+    };
+</script>
+
+<div>
+    <img
+        src={data.app?.appIcon}
+        alt={data.app?.listings[0].title}
+        class="w-32 h-32 object-cover rounded-md shadow-md mx-auto mb-4"
+    />
+    <h1 class="text-2xl font-bold">{data.app?.listings[0].title}</h1>
+    <main class="max-w-screen-md prose sm:prose-lg md:prose-xl lg:prose-2xl xl:prose-3xl">
+        <p class="text-3xl">{data.app?.listings[0].shortDescription}</p>
+        <div class={isExpanded ? 'block' : 'hidden'}>
+            <p>{data.app?.listings[0].fullDescription}</p>
+        </div>
+        <button on:click={toggleDescription} class="text-blue-500 cursor-pointer">
+            {isExpanded ? 'Collapse' : 'Expand'} Description
+        </button>
+    </main>
+</div>

src/routes/+layout.svelte

@@ -0,0 +1,5 @@
+<script>
+    import '../app.postcss';
+</script>
+
+<slot />

src/routes/+page.svelte

@@ -1,2 +1,19 @@
 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<button class="btn">asdfasd</button>
+
+<div class="card w-96 bg-base-100 shadow-xl">
+    <figure>
+        <img
+            src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
+            alt="Shoes"
+        />
+    </figure>
+    <div class="card-body">
+        <h2 class="card-title">Shoes!</h2>
+        <p>If a dog chews shoes whose shoes does he choose?</p>
+        <div class="card-actions justify-end">
+            <button class="btn btn-primary">Buy Now</button>
+        </div>
+    </div>
+</div>

src/routes/app/[id]/+page.svelte

@@ -2,32 +2,37 @@
 
 <!-- 1. -->
 <script lang="ts">
-    //	import Post from '$lib/components/Post.svelte';
+    //    import Post from '$lib/components/Post.svelte';
     import type { PageData } from './$types';
+    import AppMetadata from '../../../components/AppMetadata.svelte';
 
     export let data: PageData;
     export let form: HTMLFormElement;
 </script>
 
-<div>
-    <h1>{data.app?.listings[0].title}</h1>
-    <main>
-        <p>
-            {data.app?.listings[0].shortDescription}
-        </p>
-        <p>
-            {data.app?.listings[0].fullDescription}
-        </p>
-    </main>
-    <fieldset>
-        <legend>Verify Email</legend>
-        <form bind:this={form} method="POST" class="container">
-            <div class="input">
-                <label for="">Email Address:</label>
-                <input name="to" type="email" value="" />
-            </div>
-            <button type="submit">Send</button>
-        </form>
-        <p class="success">{form?.success || ''}</p>
-    </fieldset>
+<div class="flex justify-center p-4 bg-gray-100">
+    <div class="text-center">
+        <AppMetadata {data} />
+        <fieldset class="border p-4 space-y-4">
+            <legend class="text-lg font-semibold">Verify Email</legend>
+            <form bind:this={form} method="POST" class="space-y-4">
+                <div class="flex flex-col items-center">
+                    <label for="email" class="text-sm font-semibold">Email Address:</label>
+                    <input
+                        name="to"
+                        id="email"
+                        type="email"
+                        value=""
+                        class="w-full p-2 border rounded-md focus:outline-none focus:ring focus:border-blue-300"
+                    />
+                </div>
+                <button
+                    type="submit"
+                    class="bg-blue-500 text-white p-3 rounded-md w-48 hover:bg-blue-600 focus:outline-none focus:ring focus:border-blue-300 text-lg"
+                    >Send</button
+                >
+            </form>
+            <p class="text-green-500">{form?.success || ''}</p>
+        </fieldset>
+    </div>
 </div>

src/routes/request/[id]/+page.svelte

@@ -1,43 +1,72 @@
 <script lang="ts">
     let group = 'delete-account';
+
+    import type { PageData } from './$types';
+    import AppMetadata from '../../../components/AppMetadata.svelte';
+
+    export let data: PageData;
+    export let form: HTMLFormElement;
 </script>
 
-<form method="POST" class="container">
-    <div class="question">
-        <legend>Options for User Data Management:</legend>
-        <div class="option">
-            <input
-                name="option"
-                type="radio"
-                id="delete-account"
-                bind:group
-                value="delete-account"
-            />
-            <label for="delete-account">Delete Account</label>
-        </div>
-        <div class="option">
-            <input
-                name="option"
-                type="radio"
-                id="delete-user-data"
-                bind:group
-                value="delete-user-data"
-            />
-            <label for="delete-user-data">Delete User Data</label>
+<div class="center">
+    <div class="flex flex-col w-full lg:flex-row">
+        <div class="card w-96 bg-base-100 shadow-xl">
+            <div class="card-body">
+                <form method="POST" class="container">
+                    <div class="question">
+                        <legend>I want to delete</legend>
+                        <div class="option">
+                            <input
+                                name="option"
+                                type="radio"
+                                id="delete-account"
+                                bind:group
+                                value="delete-account"
+                            />
+                            <label for="delete-account">My User Data</label>
+                        </div>
+                        <div class="option">
+                            <input
+                                name="option"
+                                type="radio"
+                                id="delete-user-data"
+                                bind:group
+                                value="delete-user-data"
+                            />
+                            <label for="delete-user-data">My Account</label>
+                        </div>
+                    </div>
+                </form>
+            </div>
         </div>
-        <button type="submit">Send</button>
     </div>
-</form>
+</div>
+
+<button class="btn send">Send</button>
 
 <style>
+    .send {
+        position: absolute;
+        top: 75%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        padding: 10px 20px;
+        background-color: #007bff;
+        color: white;
+    }
+    .center {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        padding: 10px;
+    }
     div.question {
         display: flex;
         flex-direction: column;
         max-width: 300px;
         margin: auto;
         padding: 20px;
-        border: 1px solid #ccc;
-        border-radius: 5px;
         text-align: left;
     }