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.

Sign up for GitHub

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

feat: add link for typeform datenschutz and impressum #25

Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2a288dd
feat: add link for typeform datenschutz and impressum
aeschi Feb 8, 2024
8a506e5
feat: exchange german tag with variable
aeschi Feb 8, 2024
fcfad09
feat: refactor feedback and footer to components
aeschi Feb 12, 2024
5fee5cc
fix: exchange imprint link and data privacy name
aeschi Feb 13, 2024
b73b48e
feat: change all link colors to blue-700
aeschi Feb 15, 2024
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
92 changes: 65 additions & 27 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,12 @@ 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 { useI18nStore } from "../src/i18n/store";
import { availableLanguages } from "../src/i18n/store/types.ts";

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

return (
<>
Expand All @@ -31,6 +34,20 @@ function App() {
<Steps />
</main>

{language === availableLanguages[0] && (
Copy link
Contributor

Choose a reason for hiding this comment

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

I think we should rather use a named variable here, e.g. availableLanguages['de-DE], to make it easier to understand which language is used, and also to make sure no type error occurs. I looked a bit into it and realized the current state of implementation won't allow it. I think we'd need to use zod native enums instead of zod enums to type the availableLanguages. This is probably a bigger change than what is scoped in this ticket so maybe we can discuss and prioritize it first before implementing it.

<div className="flex w-full flex-wrap justify-center gap-x-2 px-8 py-4 text-sm">
Wie gefällt Dir die Anwendung?
<a
className="text-blue-500 underline"
href="https://citylabberlin.typeform.com/to/kCdnCgvC?product_id=checklist"
target="_blank"
rel="noopener noreferrer"
>
Beantworte uns gerne einige Fragen.
</a>
</div>
)}
Copy link
Contributor

Choose a reason for hiding this comment

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

I think it would make sense to move what is above in its own component, e. g. <Feedback />👍


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

<footer
className={`flex py-5
className={`flex py-4
${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 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">
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>
<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 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"
>
Datenschutz
</a>
<a
className="flex flex-col gap-4 text-gray-400 underline"
href="https://www.technologiestiftung-berlin.de/impressum"
target="_blank"
rel="noopener noreferrer"
>
Impressum
</a>
</div>
</div>
Copy link
Contributor

Choose a reason for hiding this comment

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

Same here. Maybe let's move what is above in its own component (e.g. <Footer />) to keep the App.tsx short and easy to understand.

</footer>
Expand Down
Loading