feat(ui): better styling and guidance for custom library (#3440)

* feat(ui): better styling and guidance for custom library

* fix typo

* fix typo

Author: ab-smith

frontend/messages/en.json

@@ -526,8 +526,10 @@
 	"evidencesBiaHelpText": "Evidences specific to resiliency implementation or testing",
 	"scopedAsset": "Usually a primary asset / business process to focus on for this entry",
 	"copyright": "Copyright",
+	"customExternalLibrary": "Custom/external library",
 	"addYourLibrary": "Add your own library",
-	"libraryFileInYamlOrXlsx": "Library file in .yaml or .xlsx format",
+	"libraryFileInYamlOrXlsx": "Supported formats: .yaml or .xlsx",
+	"libraryAddHelpText": "You can import your library defined in CISO Assistant format or external ones like CIS or CCM. Libraries can be directly imported as Excel file or converted using the external toolbox.",
 	"importBackup": "Import backup",
 	"exportBackup": "Export backup",
 	"confirmImportBackup": "Are you sure you want to import this backup? This will overwrite all existing data inlcuding your actual credentials.",

frontend/messages/fr.json

@@ -483,8 +483,10 @@
 	"evidencesBiaHelpText": "Des preuves liées à l'implémentation ou les tests de résilience",
 	"scopedAsset": "Typiquement un actif primaire / fonction métier qui sera le focus de cette entrée",
 	"copyright": "Copyright",
+	"customExternalLibrary": "Bibliothèque personnalisée/externe",
 	"addYourLibrary": "Ajouter votre propre bibliothèque",
-	"libraryFileInYamlOrXlsx": "Fichier de librairie en format YAML ou XLSX",
+	"libraryFileInYamlOrXlsx": "Formats supportés : .yaml ou .xlsx",
+	"libraryAddHelpText": "Vous pouvez importer vos bibliothèques définies dans le format CISO Assistant ou d'autres externes comme le CIS ou CCM. Les bibliothèques peuvent être en format Excel ou converties avec la boîte à outils externe.",
 	"importBackup": "Importer une sauvegarde",
 	"exportBackup": "Exporter une sauvegarde",
 	"confirmImportBackup": "Êtes-vous sûr de vouloir importer cette sauvegarde ? Cela écrasera toutes les données existantes avec tous les utilisateurs et leur mot de passe",

frontend/src/lib/components/Modals/UploadLibraryModal.svelte

@@ -8,19 +8,44 @@
 	import { superValidate } from 'sveltekit-superforms';
 	import { zod } from 'sveltekit-superforms/adapters';
 	import { tableHandlers } from '$lib/utils/stores';
+	import { getModalStore } from './stores';
+
+	const modalStore = getModalStore();
 
 	let fileResetSignal = $state(false);
 
 	let { parent } = $props();
 </script>
 
 {#if page.data.user.is_admin}
-	<div class="card bg-white p-4 mt-4 shadow-sm">
+	<div class="card bg-white p-6 w-full max-w-lg shadow-xl space-y-4 rounded-xl">
+		<div class="flex items-center justify-between">
+			<header class="flex items-center gap-3">
+				<div
+					class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary-100 text-primary-600"
+				>
+					<i class="fa-solid fa-file-circle-plus text-lg"></i>
+				</div>
+				<h3 class="text-xl font-bold text-gray-800">
+					{m.customExternalLibrary()}
+				</h3>
+			</header>
+			<button
+				type="button"
+				class="flex items-center justify-center w-8 h-8 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors"
+				onclick={parent.onClose}
+				aria-label="Close"
+			>
+				<i class="fa-solid fa-xmark"></i>
+			</button>
+		</div>
+		<p class="text-sm text-gray-500">{m.libraryAddHelpText()}</p>
+		<hr class="border-gray-200" />
 		{#await superValidate(zod(LibraryUploadSchema))}
-			<h1>{m.loadingLibraryUploadButton()}...</h1>
+			<p class="text-gray-500">{m.loadingLibraryUploadButton()}...</p>
 		{:then form}
 			<SuperForm
-				class="flex flex-col space-y-3"
+				class="flex flex-col space-y-4"
 				dataType="form"
 				enctype="multipart/form-data"
 				data={form}
@@ -51,14 +76,17 @@
 						allowedExtensions={['yaml', 'yml', 'xlsx']}
 					/>
 					<button
-						class="btn preset-filled-primary-500 font-semibold w-full"
+						class="btn preset-filled-primary-500 font-semibold w-full rounded-lg py-2.5"
 						data-testid="save-button"
-						type="submit">{m.add()}</button
+						type="submit"
 					>
+						<i class="fa-solid fa-upload mr-2"></i>
+						{m.add()}
+					</button>
 				{/snippet}
 			</SuperForm>
 		{:catch err}
-			<h1>{m.errorOccurredWhileLoadingLibrary()}: {err}</h1>
+			<p class="text-red-600">{m.errorOccurredWhileLoadingLibrary()}: {err}</p>
 		{/await}
 	</div>
 {/if}