feat(web): add privacy step in the onboarding (#11359)

* feat: add privacy step in the onboarding

* fix: remove console.log

* feat:Details the implications of enabling the map on the settings page

Added a link to the guide on customizing map styles as well

* feat: add map implication

* refactor: onboarding style

* fix: tile provider

* fix: remove long explanations

* chore: cleanup

---------

Co-authored-by: pcouy <contact@pierre-couy.dev>
Co-authored-by: Jason Rasmussen <jason@rasm.me>
This commit is contained in:
martin 2024-08-13 19:01:30 +02:00 committed by GitHub
parent c924f6c27c
commit fdf0b16fe3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 136 additions and 49 deletions

View file

@ -1,11 +1,27 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import { fade } from 'svelte/transition';
export let title: string | undefined = undefined;
export let icon: string | undefined = undefined;
</script>
<div
id="onboarding-card"
class="flex w-full max-w-4xl flex-col gap-4 rounded-3xl border-2 border-gray-500 px-8 py-14 dark:border-immich-dark-gray dark:bg-immich-dark-gray text-black dark:text-immich-dark-fg bg-gray-50"
class="flex w-full max-w-4xl flex-col gap-4 rounded-3xl border-2 border-gray-500 px-8 py-8 dark:border-immich-dark-gray dark:bg-immich-dark-gray text-black dark:text-immich-dark-fg bg-gray-50"
in:fade={{ duration: 250 }}
>
{#if title || icon}
<div class="flex gap-2 items-center justify-center w-fit">
{#if icon}
<Icon path={icon} size="30" class="text-immich-primary dark:text-immich-dark-primary" />
{/if}
{#if title}
<p class="text-xl text-immich-primary dark:text-immich-dark-primary">
{title.toUpperCase()}
</p>
{/if}
</div>
{/if}
<slot />
</div>