feat: move the previous/next buttons further up

Signed-off-by: Raphael Arce <[email protected]>
technologiestiftung · Feb 15, 2024 · a327013 · a327013
1 parent 1bce679
commit a327013
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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]}