From 052e5975fd948b69b23c6cf0a585e3da8556aad0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roman=20Kr=C4=8Dek?= <roman.krcek@tietoevry.com>
Date: Wed, 30 Jul 2025 17:50:23 +0200
Subject: [PATCH] Restyling of column mapping

---
 .../components/wizard/StepColumnMap.svelte    | 119 ++++++++++++------
 src/lib/components/wizard/StepGenerate.svelte |   1 -
 2 files changed, 79 insertions(+), 41 deletions(-)

diff --git a/src/lib/components/wizard/StepColumnMap.svelte b/src/lib/components/wizard/StepColumnMap.svelte
index c11a23b..ba58459 100644
--- a/src/lib/components/wizard/StepColumnMap.svelte
+++ b/src/lib/components/wizard/StepColumnMap.svelte
@@ -488,42 +488,42 @@
 
 	{#if hasSavedMapping && !showMappingEditor}
 		<!-- Simplified view when we have saved mapping -->
-		<div class="mb-6 rounded-lg border border-green-200 bg-green-50 p-6">
-			<div class="text-center">
-				<svg class="mx-auto mb-4 h-16 w-16 text-green-600" fill="currentColor" viewBox="0 0 20 20">
-					<path
-						fill-rule="evenodd"
-						d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-						clip-rule="evenodd"
-					/>
-				</svg>
-				<h3 class="mb-3 text-xl font-semibold text-green-800">Configuration Complete</h3>
-				<p class="mb-2 text-green-700">
-					<span class="font-medium">Spreadsheet:</span>
-					{savedSheetInfo?.name}
-				</p>
-				<p class="mb-2 text-green-700">
-					<span class="font-medium">Sheet:</span>
-					{selectedSheetName}
-				</p>
-				<p class="mb-6 text-green-700">
-					Column mapping loaded from your previous session.<br />
-					Everything is ready to proceed to the next step.
-				</p>
-				<button
-					onclick={handleShowEditor}
-					class="inline-flex items-center rounded-lg border border-green-300 px-4 py-2 text-sm font-medium text-green-700 transition-colors hover:bg-green-100 hover:text-green-900"
-				>
-					<svg class="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+		<div class="mb-6 rounded-lg border border-blue-200 bg-blue-50 p-4">
+			<div class="flex">
+				<div class="flex-shrink-0">
+					<svg
+						class="h-5 w-5 text-blue-400"
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 20 20"
+						fill="currentColor"
+						aria-hidden="true"
+					>
 						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+							fill-rule="evenodd"
+							d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+							clip-rule="evenodd"
 						/>
 					</svg>
-					Make changes if needed
-				</button>
+				</div>
+				<div class="ml-3 flex-1 md:flex md:justify-between">
+					<div>
+						<h3 class="text-sm font-medium text-blue-800">Saved Configuration Found</h3>
+						<div class="mt-2 text-sm text-blue-700">
+							<p>
+								Using saved mapping for sheet <span class="font-semibold">"{selectedSheetName}"</span> from
+								spreadsheet <span class="font-semibold">"{savedSheetInfo?.name}"</span>.
+							</p>
+						</div>
+					</div>
+					<div class="mt-3 md:mt-0 md:ml-6">
+						<button
+							onclick={handleShowEditor}
+							class="whitespace-nowrap rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+						>
+							Edit Mapping
+						</button>
+					</div>
+				</div>
 			</div>
 		</div>
 	{:else}
@@ -735,16 +735,55 @@
 						</div>
 					{/if}
 
-					<!-- Mapping status -->
 					{#if mappingComplete}
-						<div class="rounded border border-green-200 bg-green-50 p-3">
-							<p class="text-sm text-green-800">
-								✓ All required fields are mapped! You can continue to the next step.
-							</p>
+						<div class="rounded-md border border-green-200 bg-green-50 p-4">
+							<div class="flex">
+								<div class="flex-shrink-0">
+									<svg
+										class="h-5 w-5 text-green-400"
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+										aria-hidden="true"
+									>
+										<path
+											fill-rule="evenodd"
+											d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+											clip-rule="evenodd"
+										/>
+									</svg>
+								</div>
+								<div class="ml-3">
+									<p class="text-sm font-medium text-green-800">
+										All required fields are mapped. You can now proceed.
+									</p>
+								</div>
+							</div>
 						</div>
 					{:else}
-						<div class="rounded border border-yellow-200 bg-yellow-50 p-3">
-							<p class="text-sm text-yellow-800">Please map all required fields to continue.</p>
+						<div class="rounded-md bg-yellow-50 p-4">
+							<div class="flex">
+								<div class="flex-shrink-0">
+									<svg
+										class="h-5 w-5 text-yellow-400"
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+										aria-hidden="true"
+									>
+										<path
+											fill-rule="evenodd"
+											d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 3.01-1.742 3.01H4.42c-1.53 0-2.493-1.676-1.743-3.01l5.58-9.92zM10 5a1 1 0 011 1v3a1 1 0 01-2 0V6a1 1 0 011-1zm1 5a1 1 0 10-2 0v2a1 1 0 102 0v-2z"
+											clip-rule="evenodd"
+										/>
+									</svg>
+								</div>
+								<div class="ml-3">
+									<p class="text-sm text-yellow-800">
+										Please map all required fields (<span class="text-red-500">*</span>) to continue.
+									</p>
+								</div>
+							</div>
 						</div>
 					{/if}
 				</div>
diff --git a/src/lib/components/wizard/StepGenerate.svelte b/src/lib/components/wizard/StepGenerate.svelte
index c189080..8ca7e30 100644
--- a/src/lib/components/wizard/StepGenerate.svelte
+++ b/src/lib/components/wizard/StepGenerate.svelte
@@ -7,7 +7,6 @@
 	import {
 		BORDER_CONFIG,
 		TEXT_CONFIG,
-		PLACEHOLDER_CONFIG,
 		calculateGrid,
 		getAbsolutePositionPt,
 		getAbsolutePhotoDimensionsPt,