From 16d426c23b76bfd082605889905dde3f6ada1b35 Mon Sep 17 00:00:00 2001
From: waltem01 <simon.waltemathe@ptb.de>
Date: Fri, 16 Feb 2024 13:07:20 +0100
Subject: [PATCH] styling in equal unified format

---
 Webserver/src/routes/image/+page.svelte | 30 +++++++++++++++++++------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/Webserver/src/routes/image/+page.svelte b/Webserver/src/routes/image/+page.svelte
index 8381f2b..8663162 100644
--- a/Webserver/src/routes/image/+page.svelte
+++ b/Webserver/src/routes/image/+page.svelte
@@ -139,10 +139,12 @@
 	});
 </script>
 
-<form on:submit|preventDefault={handleSubmit}>
-		<label for="x">Set X coordinate:</label
+<form class="grid grid-rows-5 m-1" on:submit|preventDefault={handleSubmit}>
+	<div class="grid grid-cols-2">
+		<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="x">Set X coordinate:</label
 		>
 		<input
+			class="border-2 border-black border-b-0 cursor-text pl-1 bg-gray-100"
 			type="number"
 			name="x"
 			id="x"
@@ -151,10 +153,13 @@
 			step="1"
 			value="0"
 		/>
+	</div>
 
-		<label for="y">Set Y coordinate:</label
+	<div class="grid grid-cols-2">
+		<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="y">Set Y coordinate:</label
 		>
 		<input
+			class="border-2 border-black border-b-0 cursor-text pl-1 bg-gray-100"
 			type="number"
 			name="y"
 			id="y"
@@ -163,9 +168,12 @@
 			step="1"
 			value="0"
 		/>
+	</div>
 
-		<label for="w">Set image width:</label>
+	<div class="grid grid-cols-2">
+		<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="w">Set image width:</label>
 		<input
+			class="border-2 border-black border-b-0 cursor-text pl-1 bg-gray-100"
 			type="number"
 			name="w"
 			id="w"
@@ -174,10 +182,13 @@
 			step="1"
 			value={matrix?.width ?? 192}
 		/>
+	</div>
 
-		<label for="h">Set image height:</label
+	<div class="grid grid-cols-2">
+		<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="h">Set image height:</label
 		>
 		<input
+			class="border-2 border-black border-b-0 cursor-text pl-1 bg-gray-100"
 			type="number"
 			name="h"
 			id="h"
@@ -186,10 +197,13 @@
 			step="1"
 			value={matrix?.height ?? 192}
 		/>
+	</div>
 
-		<label for="image">Set an image:</label
+	<div class="grid grid-cols-2">
+		<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="image">Set an image:</label
 		>
 		<input
+			class="border-2 border-black border-b-0 bg-gray-100"
 			type="file"
 			name="image"
 			id="image"
@@ -197,13 +211,15 @@
 			required
 			on:change={getImage}
 		/>
+	</div>
 
 	<input
+		class="border-2 border-black hover:bg-gray-200 cursor-pointer"
 		type="submit"
 		value="Upload!"
 	/>
 	{#if imageURL}
-		<img src={imageURL} alt="User uploaded" />
+		<img class="mt-5 block ml-auto mr-auto" src={imageURL} alt="User uploaded" />
 	{/if}
 </form>
 {#if uploadStarted}