From e77104fcac31153f81fae1a549d7ae0c052e4430 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 7 Aug 2022 10:02:00 +0200
Subject: [PATCH] some reactive changes

---
 frontend/src/lib/components/SchemaEditor.svelte  |  8 ++++++--
 .../lib/components/SchemaEditorProperty.svelte   | 16 +++++++++-------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/SchemaEditor.svelte b/frontend/src/lib/components/SchemaEditor.svelte
index face2f7bfd..47931e8e19 100644
--- a/frontend/src/lib/components/SchemaEditor.svelte
+++ b/frontend/src/lib/components/SchemaEditor.svelte
@@ -188,8 +188,12 @@
 										<SchemaEditorProperty {property} />
 									</td>
 									<td>{property.description}</td>
-									<td>{JSON.stringify(property.default) ?? ''}</td>
-									<td>{schema.required.includes(name) ? 'Required' : 'Optional'}</td>
+									<td>{property.default ? JSON.stringify(property.default) : ''}</td>
+									<td
+										>{#if schema.required.includes(name)}
+											<span class="text-red-600 font-bold text-lg">*</span>
+										{/if}</td
+									>
 									<td class="justify-end flex">
 										<Button
 											color="red"
diff --git a/frontend/src/lib/components/SchemaEditorProperty.svelte b/frontend/src/lib/components/SchemaEditorProperty.svelte
index dda90b77d4..af611e2798 100644
--- a/frontend/src/lib/components/SchemaEditorProperty.svelte
+++ b/frontend/src/lib/components/SchemaEditorProperty.svelte
@@ -5,10 +5,12 @@
 	export let property: SchemaProperty
 </script>
 
-<Badge color="blue">{property.type?.toUpperCase() ?? 'ANY'}</Badge>
-{#if property.format}
-	<Badge color="green">{property.format?.toUpperCase()}</Badge>
-{/if}
-{#if property.contentEncoding}
-	<Badge color="indigo">{property.contentEncoding?.toUpperCase()}</Badge>
-{/if}
+<div class="flex flex-row flex-wrap gap-1">
+	<Badge color="blue">{property.type?.toUpperCase() ?? 'ANY'}</Badge>
+	{#if property.format}
+		<Badge color="green">{property.format?.toUpperCase()}</Badge>
+	{/if}
+	{#if property.contentEncoding}
+		<Badge color="indigo">{property.contentEncoding?.toUpperCase()}</Badge>
+	{/if}
+</div>