basic styling init

frontend/src/app.css

@@ -0,0 +1,188 @@
+/* Reset and base styles */
+:root {
+	--primary-color: #4a90e2;
+	--secondary-color: #f5f5f5;
+	--border-color: #ddd;
+	--text-color: #333;
+	--error-color: #e74c3c;
+	--success-color: #2ecc71;
+	--shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+		sans-serif;
+	line-height: 1.6;
+	color: var(--text-color);
+	background-color: #fff;
+	padding: 2rem;
+}
+
+/* Typography */
+h1 {
+	font-size: 2rem;
+	margin-bottom: 1.5rem;
+	color: var(--text-color);
+}
+
+h2 {
+	font-size: 1.5rem;
+	margin: 1.5rem 0 1rem;
+}
+
+/* Links */
+a {
+	color: var(--primary-color);
+	text-decoration: none;
+	transition: color 0.2s;
+}
+
+a:hover {
+	color: #357abd;
+	text-decoration: underline;
+}
+
+/* Lists */
+ul {
+	list-style: none;
+	margin: 1rem 0;
+}
+
+li {
+	padding: 0.75rem;
+	border-bottom: 1px solid var(--border-color);
+}
+
+li:last-child {
+	border-bottom: none;
+}
+
+/* Forms */
+form {
+	max-width: 800px;
+	margin: 2rem 0;
+}
+
+.form-group {
+	margin-bottom: 1.5rem;
+}
+
+label {
+	display: block;
+	margin-bottom: 0.5rem;
+	font-weight: 500;
+}
+
+input[type='text'],
+input[type='number'],
+input[type='date'],
+select,
+textarea {
+	width: 100%;
+	padding: 0.75rem;
+	border: 1px solid var(--border-color);
+	border-radius: 4px;
+	font-size: 1rem;
+	margin-bottom: 1rem;
+	transition: border-color 0.2s;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+	outline: none;
+	border-color: var(--primary-color);
+	box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
+}
+
+textarea {
+	min-height: 100px;
+	resize: vertical;
+}
+
+/* Buttons */
+button {
+	background-color: var(--primary-color);
+	color: white;
+	border: none;
+	padding: 0.75rem 1.5rem;
+	border-radius: 4px;
+	cursor: pointer;
+	font-size: 1rem;
+	transition: background-color 0.2s;
+}
+
+button:hover:not(:disabled) {
+	background-color: #357abd;
+}
+
+button:disabled {
+	background-color: #ccc;
+	cursor: not-allowed;
+}
+
+button.secondary {
+	background-color: var(--secondary-color);
+	color: var(--text-color);
+	border: 1px solid var(--border-color);
+}
+
+button.secondary:hover:not(:disabled) {
+	background-color: #e8e8e8;
+}
+
+button + button {
+	margin-left: 1rem;
+}
+
+/* Field management */
+.field-container {
+	background-color: var(--secondary-color);
+	padding: 1rem;
+	border-radius: 4px;
+	margin-bottom: 1rem;
+}
+
+/* Submissions */
+.submissions-list {
+	background-color: var(--secondary-color);
+	padding: 1rem;
+	border-radius: 4px;
+}
+
+.submission-item {
+	background-color: white;
+	padding: 1rem;
+	margin-bottom: 0.5rem;
+	border-radius: 4px;
+	box-shadow: var(--shadow);
+}
+
+/* Utility classes */
+.container {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 0 1rem;
+}
+
+.loading {
+	text-align: center;
+	padding: 2rem;
+	color: #666;
+}
+
+.error {
+	color: var(--error-color);
+	margin: 1rem 0;
+}
+
+.success {
+	color: var(--success-color);
+	margin: 1rem 0;
+}

frontend/src/routes/(auth)/create/+page.svelte

@@ -6,12 +6,10 @@
 	let fields: FormField[] = [];
 
 	function addField() {
-		// Use a new array assignment to trigger reactivity
 		fields = [...fields, { label: '', name: '', field_type: 'text' }];
 	}
 
 	function removeField(index: number) {
-		// Reassign to trigger reactivity
 		fields = fields.filter((_, i) => i !== index);
 	}
 
@@ -27,36 +25,38 @@
 	}
 </script>
 
-<h1>Create Form</h1>
+<div class="container">
-
+	<h1>Create Form</h1>
-<label>
+	<form on:submit|preventDefault={saveForm}>
-	Form Name:
+		<div class="form-group">
+			<label>Form Name:</label>
 			<input type="text" bind:value={name} placeholder="Enter form name" />
-</label>
+		</div>
 
-<h2>Fields</h2>
+		<h2>Fields</h2>
-{#each fields as field, i}
+		{#each fields as field, i}
-	<div>
+			<div class="field-container">
-		<label>
+				<div class="form-group">
-			Label:
+					<label>Label:</label>
 					<input type="text" bind:value={field.label} placeholder="Enter field label" />
-		</label>
+				</div>
-		<label>
+				<div class="form-group">
-			Name:
+					<label>Name:</label>
 					<input type="text" bind:value={field.name} placeholder="Enter field name" />
-		</label>
+				</div>
-		<label>
+				<div class="form-group">
-			Type:
+					<label>Type:</label>
 					<select bind:value={field.field_type}>
 						<option value="text">Text</option>
 						<option value="number">Number</option>
 						<option value="date">Date</option>
 						<option value="textarea">Textarea</option>
 					</select>
-		</label>
-		<button on:click={() => removeField(i)}>Remove</button>
 				</div>
-{/each}
+				<button class="secondary" on:click={() => removeField(i)}>Remove</button>
-
+			</div>
-<button on:click={addField}>Add Field</button>
+		{/each}
-<button on:click={saveForm} disabled={!name || fields.length === 0}> Save Form </button>
+		<button class="secondary" on:click={addField}>Add Field</button>
+		<button type="submit" disabled={!name || fields.length === 0}>Save Form</button>
+	</form>
+</div>

frontend/src/routes/(auth)/form/[id]/+page.svelte

@@ -5,13 +5,12 @@
 	import { page } from '$app/stores';
 
 	export let params: { id: string };
-	console.log('params.id:', params);
 	let form: any | null = null;
 	let submissions: any[] = [];
 	let responseData: Record<string, any> = {};
 
 	onMount(async () => {
-		const { id } = $page.params; // Use $page.params to access route parameters
+		const { id } = $page.params;
 		if (id) {
 			form = await getForms().then((forms) => forms.find((f: any) => f.id === id) || null);
 			submissions = await getSubmissions(id);
@@ -21,20 +20,19 @@
 	});
 
 	async function submitResponse() {
-		const { id } = $page.params; // Use $page.params to access route parameters
+		const { id } = $page.params;
 		await submitForm(id, responseData);
 		alert('Response submitted successfully!');
-		submissions = await getSubmissions(params.id); // Refresh submissions
+		submissions = await getSubmissions(params.id);
 	}
 </script>
 
-<h1>{form?.name}</h1>
+<div class="container">
-
+	<h1>{form?.name}</h1>
-{#if form}
+	{#if form}
 		<form on:submit|preventDefault={submitResponse}>
 			{#each form.fields as field}
-			<div>
+				<div class="form-group">
-				<!-- svelte-ignore a11y_label_has_associated_control -->
 					<label>{field.label}</label>
 					{#if field.field_type === 'text'}
 						<input type="text" bind:value={responseData[field.name]} />
@@ -49,13 +47,15 @@
 			{/each}
 			<button type="submit">Submit</button>
 		</form>
-
 		<h2>Submissions</h2>
-	<ul>
+		<div class="submissions-list">
 			{#each submissions as submission}
-			<li>{JSON.stringify(submission.data)}</li>
+				<div class="submission-item">
+					{JSON.stringify(submission.data)}
+				</div>
 			{/each}
-	</ul>
+		</div>
-{:else}
+	{:else}
-	<p>Loading...</p>
+		<p class="loading">Loading...</p>
-{/if}
+	{/if}
+</div>

frontend/src/routes/(auth)/main/+page.svelte

@@ -10,14 +10,14 @@
 	});
 </script>
 
-<h1>Form Management Tool</h1>
+<div class="container">
-
+	<h1>Formies</h1>
-<a href="/create">Create a New Form</a>
+	<a href="/create" class="button">Create a New Form</a>
-
+	<ul class="forms-list">
-<ul>
 		{#each forms as form}
 			<li>
 				<a href={`/form/${form.id}`}>{form.name}</a>
 			</li>
 		{/each}
-</ul>
+	</ul>
+</div>