From c23091d102f2df33fc39dfae047eb73ee48c2a64 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 8559e59..dd64f69 100644
--- a/src/components/forms/first-registration/has-child.tsx
+++ b/src/components/forms/first-registration/has-child.tsx
@@ -27,7 +27,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();
@@ -66,7 +66,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 d3e3eb2..7917f3e 100644
--- a/src/components/forms/first-registration/is-first-registration.tsx
+++ b/src/components/forms/first-registration/is-first-registration.tsx
@@ -31,7 +31,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();
@@ -69,7 +69,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 04a0782..31777d8 100644
--- a/src/components/forms/first-registration/is-married.tsx
+++ b/src/components/forms/first-registration/is-married.tsx
@@ -27,7 +27,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();
@@ -65,7 +65,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 3b0b41c..3ffb188 100644
--- a/src/components/forms/first-registration/is-registering-child.tsx
+++ b/src/components/forms/first-registration/is-registering-child.tsx
@@ -31,7 +31,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();
@@ -69,7 +69,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 80d3c09..286dc28 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
@@ -31,7 +31,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();
@@ -70,7 +70,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 e9c4989..296bd6f 100644
--- a/src/components/forms/first-registration/is-registering-spouse.tsx
+++ b/src/components/forms/first-registration/is-registering-spouse.tsx
@@ -31,7 +31,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();
@@ -69,7 +69,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 4d1d5c8..9432daa 100644
--- a/src/components/forms/nationality/is-european.tsx
+++ b/src/components/forms/nationality/is-european.tsx
@@ -27,7 +27,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();
@@ -65,7 +65,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 4a4d597..62baacb 100644
--- a/src/components/forms/nationality/is-german-under-16.tsx
+++ b/src/components/forms/nationality/is-german-under-16.tsx
@@ -29,7 +29,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();
@@ -67,7 +67,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 de370ac..43794cd 100644
--- a/src/components/forms/nationality/is-german.tsx
+++ b/src/components/forms/nationality/is-german.tsx
@@ -27,7 +27,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();
@@ -65,7 +65,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 73c2885..1a29504 100644
--- a/src/components/forms/nationality/is-non-german-under-16.tsx
+++ b/src/components/forms/nationality/is-non-german-under-16.tsx
@@ -31,7 +31,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();
@@ -69,7 +69,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 f5f5d7b..f4c755f 100644
--- a/src/components/forms/nationality/is-refugee.tsx
+++ b/src/components/forms/nationality/is-refugee.tsx
@@ -27,7 +27,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();
@@ -76,7 +76,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 36a43d9..03abbd5 100644
--- a/src/components/forms/other-residence/has-other-residence.tsx
+++ b/src/components/forms/other-residence/has-other-residence.tsx
@@ -31,7 +31,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();
@@ -69,7 +69,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 7c3181d..cf354b7 100644
--- a/src/components/forms/other-residence/is-other-residence-abroad.tsx
+++ b/src/components/forms/other-residence/is-other-residence-abroad.tsx
@@ -31,7 +31,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();
@@ -69,7 +69,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 d327b4c..dcf1afa 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
@@ -33,7 +33,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();
@@ -84,7 +84,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
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 1db9d6c..c2568ee 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
@@ -33,7 +33,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();
@@ -85,7 +85,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
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]}