add buttonbar for registration page

ssciwr · Aug 26, 2024 · 4b6df30 · 4b6df30
1 parent 4cabe5d
commit 4b6df30
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 25 deletions.
diff --git a/src/lib/components/DataDisplay/CardDisplay.svelte b/src/lib/components/DataDisplay/CardDisplay.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <Card class="m-4 w-full p-6">
-	<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+	<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-800 dark:text-white">
 		{header}
 	</h5>
 	<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">

diff --git a/src/lib/components/DataInput/AbstractDataInput.svelte b/src/lib/components/DataInput/AbstractDataInput.svelte
@@ -6,7 +6,7 @@
 	export let buttons = null;
 </script>
 
-<div class="space-y-6rtl:space-x-reverse items-center space-x-4">
+<div class="space-y-6rtl:space-x-reverse items-center justify-center space-x-4">
 	{#if heading}
 		<Heading
 			tag="h1"
@@ -34,19 +34,17 @@
 			{/if}
 			<svelte:component this={prop.itemComponent} {...prop.componentProps} />
 		{/each}
-
-		{#if buttons}
-			<ButtonGroup>
-				{#each buttons as bprops}
-					<Button
-						outline
-						pill={true}
-						href={bprops.href}
-						class="text-gray-500 hover:text-primary-800 group-hover:text-primary-800 dark:text-gray-400 dark:hover:text-primary-500 dark:group-hover:text-primary-500"
-						>{bprops.label}</Button
-					>
-				{/each}
-			</ButtonGroup>
-		{/if}
 	</form>
+
+	{#if buttons}
+		<ButtonGroup class="mt-6 flex justify-center">
+			{#each buttons as bprops}
+				<Button
+					href={bprops.href}
+					class="dark:bg-primay-700 bg-primary-700 text-center text-sm text-white hover:bg-primary-800 hover:text-white dark:hover:bg-primary-800"
+					>{bprops.label}</Button
+				>
+			{/each}
+		</ButtonGroup>
+	{/if}
 </div>
diff --git a/src/routes/userLand/userDataValidation/+page.svelte b/src/routes/userLand/userDataValidation/+page.svelte
@@ -1,5 +1,4 @@
 <script>
-	import AbstractContent from '$lib/components/AbstractContent.svelte';
 	import AbstractDropdownItem from '$lib/components/DataInput/AbstractDropdownItem.svelte';
 	import AbstractRegistrationForm from '$lib/components/DataInput/AbstractRegistrationForm.svelte';
 	import { Input } from 'flowbite-svelte';
@@ -83,12 +82,6 @@
 	const buttons = [{ label: 'Abschicken', href: '/' }];
 </script>
 
-<div class="m-1 w-full max-w-md items-center justify-center">
-	<AbstractContent
-		infopage={'/info'}
-		lastpage={'/registerUser/userDataInput'}
-		nextpage={'/registerChild'}
-	>
-		<AbstractRegistrationForm {props} {heading} {description} {buttons} />
-	</AbstractContent>
+<div class="container m-1 mx-auto w-full max-w-md">
+	<AbstractRegistrationForm {props} {heading} {description} {buttons} />
 </div>