feat: updated intro screen, removed unnecessary describe block in tes…

…t, reworded question regarding age, more small polishing

Signed-off-by: Raphael Arce <[email protected]>

src/components/appointment/index.tsx

@@ -42,7 +42,8 @@ export function Appointment() {
         </p>
       ) : (
         <p className="print:hidden">
-          {t("intro.p2", language)}{" "}
+          {t("intro.p2", language)}
+          <br />
           <a
             href="https://service.berlin.de/dienstleistung/120686/"
             target="_blank"

src/components/feedback/index.tsx

@@ -6,16 +6,19 @@ export function Feedback() {
 
   return (
     <>
-      <div className="flex w-full flex-wrap justify-center gap-x-2 px-8 py-4 text-sm">
-        {t("feedback.question", language)}
-        <a
-          className="text-blue-700 underline"
-          href={t("feedback.link", language)}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {t("feedback.link.label", language)}
-        </a>
+      <div className="flex w-full flex-wrap justify-center gap-x-2 px-4 py-4 text-sm">
+        <p>
+          {t("feedback.intro", language)} <br className="hidden md:inline" />{" "}
+          {t("feedback.question", language)}{" "}
+          <a
+            className="text-blue-700 underline"
+            href={t("feedback.link", language)}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {t("feedback.link.label", language)}
+          </a>
+        </p>
       </div>
     </>
   );

src/components/footer/index.tsx

@@ -18,7 +18,7 @@ export function Footer() {
           <div className="flex flex-col gap-4">
             {t("logo.t1", language)}
             <img
-              src="/images/logo-citylab-berlin-outline.svg"
+              src="/images/logo-citylab-berlin.svg"
               alt="Logo von CityLab Berlin"
               className="w-32"
               loading="lazy"

src/components/forms/nationality/index.tsx

@@ -1,5 +1,5 @@
 export * from "./is-german";
-export * from "./is-german-under-16";
+export * from "./is-german-over-16.tsx";
 export * from "./is-european";
-export * from "./is-non-german-under-16";
+export * from "./is-non-german-over-16.tsx";
 export * from "./is-refugee.tsx";

src/components/forms/nationality/is-german-under-16.tsx → src/components/forms/nationality/is-german-over-16.tsx

@@ -8,13 +8,13 @@ import { PrimaryButton } from "../../buttons/primary-button";
 import { SecondaryButton } from "../../buttons/secondary-button";
 import { useTimeout } from "../../../hooks/useTimeout.tsx";
 
-export function IsGermanUnder16() {
-  const isGermanUnder16 = useNationalityStore((state) => state.isGermanUnder16);
-  const setIsGermanUnder16 = useNationalityStore(
-    (state) => state.setIsGermanUnder16,
+export function IsGermanOver16() {
+  const isGermanOver16 = useNationalityStore((state) => state.isGermanOver16);
+  const setIsGermanOver16 = useNationalityStore(
+    (state) => state.setIsGermanOver16,
   );
 
-  const isValid = isGermanUnder16 !== null;
+  const isValid = isGermanOver16 !== null;
 
   const goToPreviousStep = useProgressStore((state) => state.goToPreviousStep);
   const goToNextStep = useProgressStore((state) => state.goToNextStep);
@@ -49,9 +49,9 @@ export function IsGermanUnder16() {
           {options.map((option) => {
             const name = "nationality.q2.radio";
             const isChecked =
-              (option === "yes" && isGermanUnder16 === true) ||
-              (option === "no" && isGermanUnder16 === false);
-            const onChange = () => setIsGermanUnder16(option === "yes");
+              (option === "yes" && isGermanOver16 === true) ||
+              (option === "no" && isGermanOver16 === false);
+            const onChange = () => setIsGermanOver16(option === "yes");
             const label = t(option, language);
 
             return (

src/components/forms/nationality/is-non-german-under-16.tsx → src/components/forms/nationality/is-non-german-over-16.tsx

@@ -8,15 +8,15 @@ import { PrimaryButton } from "../../buttons/primary-button";
 import { SecondaryButton } from "../../buttons/secondary-button";
 import { useTimeout } from "../../../hooks/useTimeout.tsx";
 
-export function IsNonGermanUnder16() {
-  const isNonGermanUnder16 = useNationalityStore(
-    (state) => state.isNonGermanUnder16,
+export function IsNonGermanOver16() {
+  const isNonGermanOver16 = useNationalityStore(
+    (state) => state.isNonGermanOver16,
   );
-  const setIsNonGermanUnder16 = useNationalityStore(
-    (state) => state.setIsNonGermanUnder16,
+  const setIsNonGermanOver16 = useNationalityStore(
+    (state) => state.setIsNonGermanOver16,
   );
 
-  const isValid = isNonGermanUnder16 !== null;
+  const isValid = isNonGermanOver16 !== null;
 
   const goToPreviousStep = useProgressStore((state) => state.goToPreviousStep);
   const goToNextStep = useProgressStore((state) => state.goToNextStep);
@@ -51,9 +51,9 @@ export function IsNonGermanUnder16() {
           {options.map((option) => {
             const name = "nationality.q4.radio";
             const isChecked =
-              (option === "yes" && isNonGermanUnder16 === true) ||
-              (option === "no" && isNonGermanUnder16 === false);
-            const onChange = () => setIsNonGermanUnder16(option === "yes");
+              (option === "yes" && isNonGermanOver16 === true) ||
+              (option === "no" && isNonGermanOver16 === false);
+            const onChange = () => setIsNonGermanOver16(option === "yes");
             const label = t(option, language);
 
             return (