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,23 +1,17 @@
<script lang="ts">
import { mdiArrowRight } from '@mdi/js';
import Button from '../elements/buttons/button.svelte';
import Icon from '../elements/icon.svelte';
import { mdiArrowRight, mdiThemeLightDark } from '@mdi/js';
import Button from '$lib/components/elements/buttons/button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import OnboardingCard from './onboarding-card.svelte';
import { createEventDispatcher } from 'svelte';
import { colorTheme } from '$lib/stores/preferences.store';
import { moonPath, moonViewBox, sunPath, sunViewBox } from '$lib/assets/svg-paths';
import { Theme } from '$lib/constants';
import { t } from 'svelte-i18n';
const dispatch = createEventDispatcher<{
done: void;
previous: void;
}>();
export let onDone: () => void;
</script>
<OnboardingCard>
<p class="text-xl text-immich-primary dark:text-immich-dark-primary">{$t('color_theme').toUpperCase()}</p>
<OnboardingCard icon={mdiThemeLightDark} title={$t('color_theme')}>
<div>
<p class="pb-6 font-light">{$t('onboarding_theme_description')}</p>
</div>
@ -51,8 +45,8 @@
<div class="flex">
<div class="w-full flex place-content-end">
<Button class="flex gap-2 place-content-center" on:click={() => dispatch('done')}>
<p>{$t('admin.storage_template_settings')}</p>
<Button class="flex gap-2 place-content-center" on:click={() => onDone()}>
<p>{$t('privacy')}</p>
<Icon path={mdiArrowRight} size="18" />
</Button>
</div>