feat: move the previous/next buttons further up

Signed-off-by: Raphael Arce <[email protected]>
technologiestiftung · Feb 19, 2024 · c23091d · c23091d
1 parent 955e9a1
commit c23091d
Show file tree

Hide file tree

Showing 17 changed files with 34 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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]}