From a327013a3f481e5c90ddc846c11e81f1f438ca1f Mon Sep 17 00:00:00 2001
From: Raphael Arce <raphael.arce@ts.berlin>
Date: Wed, 14 Feb 2024 17:35:57 +0100
Subject: [PATCH] feat: move the previous/next buttons further up

Signed-off-by: Raphael Arce <raphael.arce@ts.berlin>
---
 src/components/forms/first-registration/has-child.tsx     | 4 ++--
 .../forms/first-registration/is-first-registration.tsx    | 4 ++--
 src/components/forms/first-registration/is-married.tsx    | 4 ++--
 .../forms/first-registration/is-registering-child.tsx     | 4 ++--
 .../first-registration/is-registering-more-than-two.tsx   | 4 ++--
 .../forms/first-registration/is-registering-spouse.tsx    | 4 ++--
 src/components/forms/intro/index.tsx                      | 8 ++------
 src/components/forms/nationality/is-european.tsx          | 4 ++--
 src/components/forms/nationality/is-german-under-16.tsx   | 4 ++--
 src/components/forms/nationality/is-german.tsx            | 4 ++--
 .../forms/nationality/is-non-german-under-16.tsx          | 4 ++--
 src/components/forms/nationality/is-refugee.tsx           | 4 ++--
 .../forms/other-residence/has-other-residence.tsx         | 4 ++--
 .../forms/other-residence/is-other-residence-abroad.tsx   | 4 ++--
 .../is-registering-for-more-than-six-months.tsx           | 4 ++--
 .../is-registering-for-more-than-three-months.tsx         | 4 ++--
 src/components/steps/index.tsx                            | 4 ++--
 17 files changed, 34 insertions(+), 38 deletions(-)

diff --git a/src/components/forms/first-registration/has-child.tsx b/src/components/forms/first-registration/has-child.tsx
index fb0d041..0497acc 100644
--- a/src/components/forms/first-registration/has-child.tsx
+++ b/src/components/forms/first-registration/has-child.tsx
@@ -22,7 +22,7 @@ export function HasChild() {
 
   return (
     <form
-      className="flex h-full w-full flex-col gap-5"
+      className="flex h-80 w-full flex-col gap-12 lg:h-96"
       onSubmit={(e) => {
         e.preventDefault();
         goToNextStep();
@@ -61,7 +61,7 @@ export function HasChild() {
         </div>
       </div>
 
-      <div className="flex h-full w-full flex-row-reverse items-end justify-between pt-10">
+      <div className="flex w-full flex-row-reverse items-end justify-between">
         <div
           className={`${
             !isValid
diff --git a/src/components/forms/first-registration/is-first-registration.tsx b/src/components/forms/first-registration/is-first-registration.tsx
index ad3f517..bf88873 100644
--- a/src/components/forms/first-registration/is-first-registration.tsx
+++ b/src/components/forms/first-registration/is-first-registration.tsx
@@ -26,7 +26,7 @@ export function IsFirstRegistration() {
 
   return (
     <form
-      className="flex h-full w-full flex-col gap-5"
+      className="flex h-80 w-full flex-col gap-12 lg:h-96"
       onSubmit={(e) => {
         e.preventDefault();
         goToNextStep();
@@ -64,7 +64,7 @@ export function IsFirstRegistration() {
         </div>
       </div>
 
-      <div className="flex h-full w-full flex-row-reverse items-end justify-between pt-10">
+      <div className="flex w-full flex-row-reverse items-end justify-between">
         <div
           className={
             !isValid
diff --git a/src/components/forms/first-registration/is-married.tsx b/src/components/forms/first-registration/is-married.tsx
index 170adb5..ae342dd 100644
--- a/src/components/forms/first-registration/is-married.tsx
+++ b/src/components/forms/first-registration/is-married.tsx
@@ -22,7 +22,7 @@ export function IsMarried() {
 
   return (
     <form
-      className="flex h-full w-full flex-col gap-5"
+      className="flex h-80 w-full flex-col gap-12 lg:h-96"
       onSubmit={(e) => {
         e.preventDefault();
         goToNextStep();
@@ -60,7 +60,7 @@ export function IsMarried() {
         </div>
       </div>
 
-      <div className="flex h-full w-full flex-row-reverse items-end justify-between pt-10">
+      <div className="flex w-full flex-row-reverse items-end justify-between">
         <div
           className={`${
             !isValid
diff --git a/src/components/forms/first-registration/is-registering-child.tsx b/src/components/forms/first-registration/is-registering-child.tsx
index da2afdc..dba5054 100644
--- a/src/components/forms/first-registration/is-registering-child.tsx
+++ b/src/components/forms/first-registration/is-registering-child.tsx
@@ -26,7 +26,7 @@ export function IsRegisteringChild() {
 
   return (
     <form
-      className="flex h-full w-full flex-col gap-5"
+      className="flex h-80 w-full flex-col gap-12 lg:h-96"
       onSubmit={(e) => {
         e.preventDefault();
         goToNextStep();
@@ -64,7 +64,7 @@ export function IsRegisteringChild() {
         </div>
       </div>
 
-      <div className="flex h-full w-full flex-row-reverse items-end justify-between pt-10">
+      <div className="flex w-full flex-row-reverse items-end justify-between">
         <div
           className={`${
             !isValid
diff --git a/src/components/forms/first-registration/is-registering-more-than-two.tsx b/src/components/forms/first-registration/is-registering-more-than-two.tsx
index 7f5dd3e..875bc2a 100644
--- a/src/components/forms/first-registration/is-registering-more-than-two.tsx
+++ b/src/components/forms/first-registration/is-registering-more-than-two.tsx
@@ -26,7 +26,7 @@ export function IsRegisteringMoreThanTwo() {
 
   return (
     <form
-      className="flex h-full w-full flex-col gap-5"
+      className="flex h-80 w-full flex-col gap-12 lg:h-96"
       onSubmit={(e) => {
         e.preventDefault();
         goToNextStep();
@@ -65,7 +65,7 @@ export function IsRegisteringMoreThanTwo() {
         </div>
       </div>
 
-      <div className="flex h-full w-full flex-row-reverse items-end justify-between pt-10">
+      <div className="flex w-full flex-row-reverse items-end justify-between">
         <div
           className={`${
             !isValid
diff --git a/src/components/forms/first-registration/is-registering-spouse.tsx b/src/components/forms/first-registration/is-registering-spouse.tsx
index d5209c5..bf11c26 100644
--- a/src/components/forms/first-registration/is-registering-spouse.tsx
+++ b/src/components/forms/first-registration/is-registering-spouse.tsx
@@ -26,7 +26,7 @@ export function IsRegisteringSpouse() {
 
   return (
     <form
-      className="flex h-full w-full flex-col gap-5"
+      className="flex h-80 w-full flex-col gap-12 lg:h-96"
       onSubmit={(e) => {
         e.preventDefault();
         goToNextStep();
@@ -64,7 +64,7 @@ export function IsRegisteringSpouse() {
         </div>
       </div>
 
-      <div className="flex h-full w-full flex-row-reverse items-end justify-between pt-10">
+      <div className="flex w-full flex-row-reverse items-end justify-between">
         <div
           className={`${
             !isValid
diff --git a/src/components/forms/intro/index.tsx b/src/components/forms/intro/index.tsx
index 15c1073..f5b1559 100644
--- a/src/components/forms/intro/index.tsx
+++ b/src/components/forms/intro/index.tsx
@@ -15,18 +15,14 @@ export function Intro() {
           e.preventDefault();
           goToNextStep();
         }}
-        className="flex h-full flex-col justify-end gap-10"
+        className="flex w-full flex-col gap-9 lg:h-96"
       >
         <div className="flex flex-col gap-4">
-          <h1 className="text-xl font-semibold">
-            {t("intro.title", language)}
-          </h1>
-
           <p>{t("intro.p1", language)}</p>
 
           <Appointment />
         </div>
-        <div className="flex h-full w-full items-end justify-end">
+        <div className="flex w-full justify-end">
           <PrimaryButton label={t("button.next", language)} type="submit" />
         </div>
       </form>
diff --git a/src/components/forms/nationality/is-european.tsx b/src/components/forms/nationality/is-european.tsx
index 95b2c1d..9b9decf 100644
--- a/src/components/forms/nationality/is-european.tsx
+++ b/src/components/forms/nationality/is-european.tsx
@@ -22,7 +22,7 @@ export function IsEuropean() {
 
   return (
     <form
-      className="flex h-full w-full flex-col gap-5"
+      className="flex h-80 w-full flex-col gap-12 lg:h-96"
       onSubmit={(e) => {
         e.preventDefault();
         goToNextStep();
@@ -60,7 +60,7 @@ export function IsEuropean() {
         </div>
       </div>
 
-      <div className="flex h-full w-full flex-row-reverse items-end justify-between pt-10">
+      <div className="flex w-full flex-row-reverse items-end justify-between">
         <div
           className={
             !isValid
diff --git a/src/components/forms/nationality/is-german-under-16.tsx b/src/components/forms/nationality/is-german-under-16.tsx
index 3f40b7a..b498258 100644
--- a/src/components/forms/nationality/is-german-under-16.tsx
+++ b/src/components/forms/nationality/is-german-under-16.tsx
@@ -24,7 +24,7 @@ export function IsGermanUnder16() {
 
   return (
     <form
-      className="flex h-full w-full flex-col gap-5"
+      className="flex h-80 w-full flex-col gap-12 lg:h-96"
       onSubmit={(e) => {
         e.preventDefault();
         goToNextStep();
@@ -62,7 +62,7 @@ export function IsGermanUnder16() {
         </div>
       </div>
 
-      <div className="flex h-full w-full flex-row-reverse items-end justify-between pt-10">
+      <div className="flex w-full flex-row-reverse items-end justify-between">
         <div
           className={
             !isValid
diff --git a/src/components/forms/nationality/is-german.tsx b/src/components/forms/nationality/is-german.tsx
index 51c6331..69d25e1 100644
--- a/src/components/forms/nationality/is-german.tsx
+++ b/src/components/forms/nationality/is-german.tsx
@@ -22,7 +22,7 @@ export function IsGerman() {
 
   return (
     <form
-      className="flex h-full w-full flex-col gap-5"
+      className="flex h-80 w-full flex-col gap-12 lg:h-96"
       onSubmit={(e) => {
         e.preventDefault();
         goToNextStep();
@@ -60,7 +60,7 @@ export function IsGerman() {
         </div>
       </div>
 
-      <div className="flex h-full w-full flex-row-reverse items-end justify-between pt-10">
+      <div className="flex w-full flex-row-reverse items-end justify-between">
         <div
           className={
             !isValid
diff --git a/src/components/forms/nationality/is-non-german-under-16.tsx b/src/components/forms/nationality/is-non-german-under-16.tsx
index 6838e4e..1a81c0c 100644
--- a/src/components/forms/nationality/is-non-german-under-16.tsx
+++ b/src/components/forms/nationality/is-non-german-under-16.tsx
@@ -26,7 +26,7 @@ export function IsNonGermanUnder16() {
 
   return (
     <form
-      className="flex h-full w-full flex-col gap-5"
+      className="flex h-80 w-full flex-col gap-12 lg:h-96"
       onSubmit={(e) => {
         e.preventDefault();
         goToNextStep();
@@ -64,7 +64,7 @@ export function IsNonGermanUnder16() {
         </div>
       </div>
 
-      <div className="flex h-full w-full flex-row-reverse items-end justify-between pt-10">
+      <div className="flex w-full flex-row-reverse items-end justify-between">
         <div
           className={
             !isValid
diff --git a/src/components/forms/nationality/is-refugee.tsx b/src/components/forms/nationality/is-refugee.tsx
index 2dfd4d2..84451e8 100644
--- a/src/components/forms/nationality/is-refugee.tsx
+++ b/src/components/forms/nationality/is-refugee.tsx
@@ -22,7 +22,7 @@ export function IsRefugee() {
 
   return (
     <form
-      className="flex h-full w-full flex-col gap-5"
+      className="flex h-80 w-full flex-col gap-12 lg:h-96"
       onSubmit={(e) => {
         e.preventDefault();
         goToNextStep();
@@ -71,7 +71,7 @@ export function IsRefugee() {
         </a>
       </p>
 
-      <div className="flex h-full w-full flex-row-reverse items-end justify-between pt-10">
+      <div className="flex w-full flex-row-reverse items-end justify-between">
         <div
           className={
             !isValid
diff --git a/src/components/forms/other-residence/has-other-residence.tsx b/src/components/forms/other-residence/has-other-residence.tsx
index 79a2d27..824edd6 100644
--- a/src/components/forms/other-residence/has-other-residence.tsx
+++ b/src/components/forms/other-residence/has-other-residence.tsx
@@ -26,7 +26,7 @@ export function HasOtherResidence() {
 
   return (
     <form
-      className="flex h-full w-full flex-col gap-5"
+      className="flex h-80 w-full flex-col gap-12 lg:h-96"
       onSubmit={(e) => {
         e.preventDefault();
         goToNextStep();
@@ -64,7 +64,7 @@ export function HasOtherResidence() {
         </div>
       </div>
 
-      <div className="flex h-full w-full flex-row-reverse items-end justify-between pt-10">
+      <div className="flex w-full flex-row-reverse items-end justify-between">
         <div
           className={
             !isValid
diff --git a/src/components/forms/other-residence/is-other-residence-abroad.tsx b/src/components/forms/other-residence/is-other-residence-abroad.tsx
index b2d30ac..a2c652f 100644
--- a/src/components/forms/other-residence/is-other-residence-abroad.tsx
+++ b/src/components/forms/other-residence/is-other-residence-abroad.tsx
@@ -26,7 +26,7 @@ export function IsOtherResidenceAbroad() {
 
   return (
     <form
-      className="flex h-full w-full flex-col gap-5"
+      className="flex h-80 w-full flex-col gap-12 lg:h-96"
       onSubmit={(e) => {
         e.preventDefault();
         goToNextStep();
@@ -64,7 +64,7 @@ export function IsOtherResidenceAbroad() {
         </div>
       </div>
 
-      <div className="flex h-full w-full flex-row-reverse items-end justify-between pt-10">
+      <div className="flex w-full flex-row-reverse items-end justify-between">
         <div
           className={
             !isValid
diff --git a/src/components/forms/other-residence/is-registering-for-more-than-six-months.tsx b/src/components/forms/other-residence/is-registering-for-more-than-six-months.tsx
index ced1e79..15912c3 100644
--- a/src/components/forms/other-residence/is-registering-for-more-than-six-months.tsx
+++ b/src/components/forms/other-residence/is-registering-for-more-than-six-months.tsx
@@ -28,7 +28,7 @@ export function IsRegisteringForMoreThanSixMonths() {
 
   return (
     <form
-      className="flex h-full w-full flex-col gap-5"
+      className="flex h-80 w-full flex-col gap-12 lg:h-96"
       onSubmit={(e) => {
         e.preventDefault();
         goToNextStep();
@@ -79,7 +79,7 @@ export function IsRegisteringForMoreThanSixMonths() {
         </a>
       </p>
 
-      <div className="flex h-full w-full flex-row-reverse items-end justify-between pt-10">
+      <div className="flex w-full flex-row-reverse items-end justify-between">
         <div
           className={
             !isValid || !needsRegistration
diff --git a/src/components/forms/other-residence/is-registering-for-more-than-three-months.tsx b/src/components/forms/other-residence/is-registering-for-more-than-three-months.tsx
index 015e49e..728a950 100644
--- a/src/components/forms/other-residence/is-registering-for-more-than-three-months.tsx
+++ b/src/components/forms/other-residence/is-registering-for-more-than-three-months.tsx
@@ -28,7 +28,7 @@ export function IsRegisteringForMoreThanThreeMonths() {
 
   return (
     <form
-      className="flex h-full w-full flex-col gap-5"
+      className="flex h-80 w-full flex-col gap-12 lg:h-96"
       onSubmit={(e) => {
         e.preventDefault();
         goToNextStep();
@@ -80,7 +80,7 @@ export function IsRegisteringForMoreThanThreeMonths() {
         </a>
       </p>
 
-      <div className="flex h-full w-full flex-row-reverse items-end justify-between pt-10">
+      <div className="flex w-full flex-row-reverse items-end justify-between">
         <div
           className={
             !isValid || !needsRegistration
diff --git a/src/components/steps/index.tsx b/src/components/steps/index.tsx
index 54fb2bd..40b4a16 100644
--- a/src/components/steps/index.tsx
+++ b/src/components/steps/index.tsx
@@ -48,8 +48,8 @@ export function Steps() {
 
   return (
     <div
-      className={`flex h-full w-[22rem] flex-col items-end gap-4 print:w-full lg:text-lg ${
-        currentStep < 16 && "pt-12"
+      className={`flex h-full w-[22rem] flex-col gap-4 print:w-full lg:text-lg ${
+        currentStep < 16 && "pt-4 lg:pt-12"
       }`}
     >
       {steps[currentStep]}