From 31ee2a507db9bd668bc6e1a917cd2fe2bbb733d8 Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Tue, 8 Aug 2023 13:04:02 +0200
Subject: [PATCH] updated button design of Forms

---
 .../components/refactor/ComposerForm.svelte   | 81 +++++++++----------
 1 file changed, 37 insertions(+), 44 deletions(-)

diff --git a/src/lib/components/refactor/ComposerForm.svelte b/src/lib/components/refactor/ComposerForm.svelte
index 5ec4820..ea6b789 100644
--- a/src/lib/components/refactor/ComposerForm.svelte
+++ b/src/lib/components/refactor/ComposerForm.svelte
@@ -167,13 +167,6 @@
 						<p class="text-2xl text-center text-white">
 							{fields[$state.context.currentField].description}
 						</p>
-						<!-- <label
-						for={fields[$state.context.currentField].name}
-						class="block mb-2 font-semibold text-center text-white"
-					>
-						{fields[$state.context.currentField].name.charAt(0).toUpperCase() +
-							fields[$state.context.currentField].name.slice(1)}
-					</label> -->
 					{/if}
 				</div>
 				{#if fields[$state.context.currentField].type === 'text'}
@@ -205,43 +198,43 @@
 			submitted
 		{/if}
 		<div class="flex justify-between mt-4">
-			{#each $possibleActions as action (action)}
-				{#if action === 'PREV'}
-					<button
-						type="button"
-						on:click={() => send(action)}
-						class="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
-						disabled={$state.context.currentField === 0}
-					>
-						{action}
-					</button>
-				{/if}
-			{/each}
-
-			{#each $possibleActions as action (action)}
-				{#if action !== 'NEXT' && action !== 'PREV' && action !== 'SUBMIT'}
-					<button
-						type="button"
-						on:click={() => send(action)}
-						class="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
-					>
-						{action}
-					</button>
-				{/if}
-			{/each}
-
-			{#each $possibleActions as action (action)}
-				{#if action === 'NEXT' || action === 'SUBMIT'}
-					<button
-						type="button"
-						on:click={() => handleNext()}
-						class="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
-						disabled={$errors[fields[$state.context.currentField].name]}
-					>
-						{action}
-					</button>
-				{/if}
-			{/each}
+			<div>
+				{#each $possibleActions as action (action)}
+					{#if action === 'PREV'}
+						<button
+							type="button"
+							on:click={() => send(action)}
+							class="btn btn-xl variant-filled"
+							disabled={$state.context.currentField === 0}
+						>
+							{action}
+						</button>
+					{/if}
+				{/each}
+			</div>
+			<div>
+				{#each $possibleActions as action (action)}
+					{#if action !== 'NEXT' && action !== 'PREV' && action !== 'SUBMIT'}
+						<button type="button" on:click={() => send(action)} class="btn btn-xl variant-filled">
+							{action}
+						</button>
+					{/if}
+				{/each}
+			</div>
+			<div>
+				{#each $possibleActions as action (action)}
+					{#if action === 'NEXT' || action === 'SUBMIT'}
+						<button
+							type="button"
+							on:click={() => handleNext()}
+							class="btn btn-xl variant-filled"
+							disabled={$errors[fields[$state.context.currentField].name]}
+						>
+							{action}
+						</button>
+					{/if}
+				{/each}
+			</div>
 		</div>
 	</form>
 </div>