Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add link for typeform datenschutz and impressum #25

Merged
merged 5 commits into from
Feb 15, 2024
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 5 additions & 36 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { Progress } from "./components/progress";
import { HomeButton } from "./components/buttons/home-button";
import { HeaderTitle } from "./components/header-title";
import { useProgressStore } from "./components/steps/store";
import { Feedback } from "./components/feedback/index.tsx";
import { Footer } from "./components/footer/index.tsx";

function App() {
const currentStep = useProgressStore((state) => state.currentStep);
Expand Down Expand Up @@ -31,6 +33,8 @@ function App() {
<Steps />
</main>

<Feedback />

<div className="hidden w-full print:hidden md:flex">
<Progress id={"desktop-progress-bar"} />
</div>
Expand All @@ -41,42 +45,7 @@ function App() {
} `}
></div>

<footer
className={`flex py-5
${currentStep === 0 || currentStep === 16 ? "flex" : "hidden md:flex"}
`}
id="footer"
>
<div className="flex w-full flex-wrap justify-start gap-x-10 gap-y-8 px-8 text-sm sm:justify-center md:gap-x-20 md:px-5">
<div className="flex flex-col gap-4">
Durchgeführt von
<img
src="/images/logo-citylab-berlin-outline.svg"
alt="Logo von CityLab Berlin"
className="w-32"
loading="lazy"
/>
</div>
<div className="flex flex-col gap-4">
Ein Projekt der
<img
src="/images/logo-technologiestiftung-berlin-de.svg"
alt="Logo von Technologiestiftung Berlin"
className="w-32"
loading="lazy"
/>
</div>
<div className="flex flex-col gap-4">
Mit Unterstützung von
<img
src="/images/logo-senatskanzlei-buergermeister-vertikal.svg"
alt="Logo von Berlins Regierender Bürgermeister"
className="w-28"
loading="lazy"
/>
</div>
</div>
</footer>
<Footer />
</>
);
}
Expand Down
25 changes: 25 additions & 0 deletions src/components/feedback/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { t } from "../../i18n/translations";
import { useI18nStore } from "../../i18n/store";
import { availableLanguages } from "../../../src/i18n/store/types";

export function Feedback() {
const language = useI18nStore((state) => state.language);

return (
<>
{language === availableLanguages[0] && (
<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-500 underline"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@aeschi just noticed that this is not the same color than other links, the other links are text-blue-700 to have enough contrast

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Woops, my bad, I only I compared it with the download links on the checklist overview page. The link colors are inconsistent, sometimes 500, sometimes 700. Should we stick to one? Or does it make sense to go for a darker tone when the backgground is darker?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's try to stick to one color with the most contrast and check again for the darker backgrounds. But technically a darker background would be better with a brighter text color.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes I agree 👍

href={t("feedback.link", language)}
target="_blank"
rel="noopener noreferrer"
>
{t("feedback.link.label", language)}
</a>
</div>
)}
</>
);
}
68 changes: 68 additions & 0 deletions src/components/footer/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { t } from "../../i18n/translations";
import { useI18nStore } from "../../i18n/store";
import { useProgressStore } from "../steps/store";

export function Footer() {
const language = useI18nStore((state) => state.language);
const currentStep = useProgressStore((state) => state.currentStep);

return (
<footer
className={`flex py-4
${currentStep === 0 || currentStep === 16 ? "flex" : "hidden md:flex"}
`}
id="footer"
>
<div className="flex w-full flex-wrap justify-start gap-y-5">
<div className="flex w-full flex-wrap justify-start gap-x-10 gap-y-5 px-8 py-2 text-sm sm:justify-center md:gap-x-20 md:px-5">
<div className="flex flex-col gap-4">
{t("logo.t1", language)}
<img
src="/images/logo-citylab-berlin-outline.svg"
alt="Logo von CityLab Berlin"
className="w-32"
loading="lazy"
/>
</div>
<div className="flex flex-col gap-4">
{t("logo.t2", language)}
<img
src="/images/logo-technologiestiftung-berlin-de.svg"
alt="Logo von Technologiestiftung Berlin"
className="w-32"
loading="lazy"
/>
</div>
<div className="flex flex-col gap-4">
{t("logo.t3", language)}
<img
src="/images/logo-senatskanzlei-buergermeister-vertikal.svg"
alt="Logo von Berlins Regierender Bürgermeister"
className="w-28"
loading="lazy"
/>
</div>
</div>

<div className="flex w-full flex-wrap justify-center gap-x-5 px-5 text-sm ">
<a
className="flex flex-col gap-4 text-gray-400 underline"
href="https://www.technologiestiftung-berlin.de/datenschutz"
target="_blank"
rel="noopener noreferrer"
>
{t("dataPrivacy", language)}
</a>
<a
className="flex flex-col gap-4 text-gray-400 underline"
href={t("imprint.link", language)}
target="_blank"
rel="noopener noreferrer"
>
{t("imprint", language)}
</a>
</div>
</div>
</footer>
);
}
28 changes: 26 additions & 2 deletions src/i18n/translations/translations.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@
"intro.p2": "Du hast noch keinen Termin?",
"intro.p2.link": "Termin buchen.",

"feedback.question": "Wie gefällt Dir die Anwendung?",
"feedback.link": "https://citylabberlin.typeform.com/to/kCdnCgvC?product_id=checklist",
"feedback.link.label": "Beantworte uns gerne einige Fragen.",

"first-registration.q1": "Meldest Du Dich zum ersten Mal in Berlin an?",
"first-registration.q1.tooltip": "Wenn ja, müssen eventuell Dokumente wie Geburts- oder Heiratsurkunde vorgezeigt werden.",
"first-registration.q2": "Bist Du verheiratet?",
Expand Down Expand Up @@ -104,7 +108,15 @@
"nonEuIdOrPassportOrReplacement": "Reisepass oder Passersatzpapiere",
"nonEuIdOrPassportOrReplacement.tooltip": "Dieses Dokument ist notwendig, um Dich auszuweisen.",
"supplement": "Beiblatt zur Anmeldung/Hauptwohnungserklärung",
"supplement.tooltip": "Dieses Dokument ist notwendig, weil Du weiterhin in einer weiteren Wohnung gemeldet bleiben möchtest."
"supplement.tooltip": "Dieses Dokument ist notwendig, weil Du weiterhin in einer weiteren Wohnung gemeldet bleiben möchtest.",

"logo.t1": "Durchgeführt von",
"logo.t2": "Ein Projekt der",
"logo.t3": "Mit Unterstützung von",

"dataPrivacy": "Datenschutz",
"imprint": "Impressum",
"imprint.link": "https://www.technologiestiftung-berlin.de/impressum"
},
"en-DE": {
"de-DE.mobile": "DE",
Expand Down Expand Up @@ -139,6 +151,10 @@
"intro.p2": "Don't have an appointment yet?",
"intro.p2.link": " Book an appointment.",

"feedback.question": "How do you like the application?",
"feedback.link": "https://citylabberlin.typeform.com/to/kCdnCgvC?product_id=checklist",
"feedback.link.label": "Feel free to give us some feedback",

"first-registration.q1": "Are you registering in Berlin for the first time?",
"first-registration.q1.tooltip": "If yes, documents such as a birth or marriage certificate may need to be presented.",
"first-registration.q2": "Are you married?",
Expand Down Expand Up @@ -211,6 +227,14 @@
"nonEuIdOrPassportOrReplacement": "Passport or Passport Replacement Documents",
"nonEuIdOrPassportOrReplacement.tooltip": "This document is necessary to identify yourself.",
"supplement": "Supplement to Registration/Main Residence Declaration",
"supplement.tooltip": "This document is necessary because you want to remain registered in another apartment."
"supplement.tooltip": "This document is necessary because you want to remain registered in another apartment.",

"logo.t1": "Executed by",
"logo.t2": "A project by",
"logo.t3": "Supported by",

"dataPrivacy": "Data Privacy",
"imprint": "Imprint",
"imprint.link": "https://www.technologiestiftung-berlin.de/en/imprint"
}
}
Loading