styling, DateOfBirth corrected

frontend/src/lib/components/InputField.svelte

@@ -283,7 +283,6 @@
 
 	.input {
 		width: 100%;
-		margin: 0.5rem 0;
 	}
 	input,
 	textarea,
@@ -316,7 +315,6 @@
 	}
 	/* Add consistent spacing between input boxes */
 	.input-box {
-		margin: 1rem 0;
 		padding: 0.5rem;
 		background-color: var(--surface0);
 		border-radius: 6px;

frontend/src/lib/components/Modal.svelte

@@ -28,28 +28,6 @@
 
 <div class="modal-background">
 	<div transition:modal|global={{ duration: 1000 }} class="modal" role="dialog" aria-modal="true">
-		<!-- svelte-ignore a11y-missing-attribute -->
-		<a
-			title={$t('cancel')}
-			class="modal-close"
-			on:click={closeModal}
-			role="button"
-			tabindex="0"
-			on:keydown={(e) => e.key == 'Enter' && closeModal()}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="20"
-				height="20"
-				viewBox="0 0 384 512"
-				aria-hidden="true"
-			>
-				<path
-					d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
-				/>
-			</svg>
-			<span class="sr-only">{$t('cancel')}</span>
-		</a>
 		<div class="container">
 			<slot />
 		</div>
@@ -64,7 +42,7 @@
 		top: 0;
 		right: 0;
 		bottom: 0;
-		background: rgba(30, 30, 46, 0.65); /* var(--base) with 0.75 opacity */
+		background: var(--modal-backdrop); /* var(--base) with 0.75 opacity */
 		backdrop-filter: blur(4px); /* Optional: adds a slight blur effect */
 		z-index: 9999;
 		display: flex;
@@ -149,7 +127,6 @@
 		.modal .container {
 			flex-direction: column;
 			left: 0;
-			width: 100%;
 		}
 	}
 </style>

frontend/src/lib/components/UserEditForm.svelte

@@ -23,7 +23,7 @@
 		zip_code: '',
 		city: '',
 		company: '',
-		date_of_birth: '',
+		dateofbirth: '',
 		notes: '',
 		profile_picture: '',
 		payment_status: 0,
@@ -297,11 +297,11 @@
 				placeholder={$t('placeholder.phone')}
 			/>
 			<InputField
-				name="user[date_of_birth]"
+				name="user[dateofbirth]"
 				type="date"
-				label={$t('date_of_birth')}
-				bind:value={localUser.date_of_birth}
-				placeholder={$t('placeholder.date_of_birth')}
+				label={$t('dateofbirth')}
+				bind:value={localUser.dateofbirth}
+				placeholder={$t('placeholder.dateofbirth')}
 			/>
 			<InputField
 				name="user[address]"
@@ -529,7 +529,7 @@
 	.category-break {
 		grid-column: 1 / -1;
 		height: 1px;
-		background-color: var(--surface0);
+		background-color: var(--overlay0);
 		margin-top: 10px;
 		margin-left: 20%;
 		width: 60%;