From 503773b1213a2443af3fbb0706e986a2d08bf82b Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Tue, 8 Aug 2023 16:15:54 +0200
Subject: [PATCH] Updated Summary page UI

---
 .../components/composer/ComposerForm.svelte   | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/composer/ComposerForm.svelte b/src/lib/components/composer/ComposerForm.svelte
index 0c3f9d0..c6fdd52 100644
--- a/src/lib/components/composer/ComposerForm.svelte
+++ b/src/lib/components/composer/ComposerForm.svelte
@@ -45,7 +45,7 @@
 				on: {
 					NEXT: [
 						{
-							target: 'submitting',
+							target: 'summary',
 							actions: assign({
 								formData: (context, event) => ({
 									...context.formData,
@@ -76,7 +76,7 @@
 					}
 				}
 			},
-			submitting: {
+			summary: {
 				on: {
 					SUBMIT: 'submitted',
 					PREV: {
@@ -123,7 +123,7 @@
 		}
 
 		const fieldValue = $form[currentFieldName];
-		if ($state.matches('submitting')) {
+		if ($state.matches('summary')) {
 			send('SUBMIT');
 		} else {
 			send('NEXT', { fieldValue });
@@ -192,12 +192,20 @@
 				{/if}
 			</div>
 		{/if}
-		{#if $state.matches('submitting')}
+		{#if $state.matches('summary')}
 			<div class="mb-4">
-				<h2 class="text-lg font-semibold text-white">Summary</h2>
-				{#each Object.entries($state.context.formData) as [key, value]}
-					<p class="mt-1 text-white">{key}: {value}</p>
-				{/each}
+				<h2 class="mb-2 text-5xl font-semibold text-center text-white">Summary</h2>
+				<p class="text-2xl text-center text-white">Please verify your summary</p>
+				<dl class="list-dl">
+					{#each Object.entries($state.context.formData) as [key, value]}
+						<div>
+							<span class="flex-auto">
+								<dt class="text-sm text-gray-300">{key}</dt>
+								<dd class="text-2xl font-semibold">{value}</dd>
+							</span>
+						</div>
+					{/each}
+				</dl>
 			</div>
 		{/if}
 		{#if $state.matches('submitted')}