Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-05-24 01:12:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: onboarding styling (#18417)

Browse Source
This commit is contained in:
Alex 2025-05-21 10:59:28 -05:00 committed by GitHub
parent a6c4bd1555
commit b2ef8ea7dd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/src/routes/+page.svelte
View File

@ -1,17 +1,17 @@
<script lang="ts"> <script lang="ts">
import AuthPageLayout from '$lib/components/layouts/AuthPageLayout.svelte';
import { AppRoute } from '$lib/constants'; import { AppRoute } from '$lib/constants';
import { Heading, Button, Logo } from '@immich/ui'; import { Button, Heading } from '@immich/ui';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
</script> </script>
<section class="flex h-dvh w-dvw place-content-center place-items-center"> <AuthPageLayout>
<div class="flex max-w-[350px] flex-col place-items-center gap-10 text-center"> <div class="flex flex-col place-items-center text-center gap-12">
<div class="flex place-content-center place-items-center"> <Heading size="large" color="primary" tag="h1">{$t('welcome_to_immich')}</Heading>
<Logo variant="icon" class="text-center" size="landing" /> <div>
<Button href={AppRoute.AUTH_REGISTER} size="medium" shape="round">
<span class="px-2 font-semibold">{$t('getting_started')}</span>
</Button>
</div> </div>
<Heading size="giant" color="primary" tag="h1">{$t('welcome_to_immich')}</Heading>
<Button href={AppRoute.AUTH_REGISTER} size="giant" shape="round">
<span class="px-2 font-bold">{$t('getting_started')}</span>
</Button>
</div> </div>
</section> </AuthPageLayout>

4
web/src/routes/auth/onboarding/+page.svelte
View File

@ -58,13 +58,13 @@
<section id="onboarding-page" class="min-w-dvw flex min-h-dvh p-4"> <section id="onboarding-page" class="min-w-dvw flex min-h-dvh p-4">
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<div class="w-full bg-gray-300 dark:bg-gray-600 rounded-md h-2"> <div class=" bg-gray-300 dark:bg-gray-600 rounded-md h-2">
<div <div
class="progress-bar bg-immich-primary dark:bg-immich-dark-primary h-2 rounded-md transition-all duration-200 ease-out" class="progress-bar bg-immich-primary dark:bg-immich-dark-primary h-2 rounded-md transition-all duration-200 ease-out"
style="width: {(index / (onboardingSteps.length - 1)) * 100}%" style="width: {(index / (onboardingSteps.length - 1)) * 100}%"
></div> ></div>
</div> </div>
<div class="w-full min-w-dvw py-8 flex h-full place-content-center place-items-center"> <div class="py-8 flex place-content-center place-items-center m-auto">
<SvelteComponent onDone={handleDoneClicked} onPrevious={handlePrevious} /> <SvelteComponent onDone={handleDoneClicked} onPrevious={handlePrevious} />
</div> </div>
</div> </div>