From b2ef8ea7ddc89a85c24ba05773ec19d04674bf40 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Wed, 21 May 2025 10:59:28 -0500
Subject: [PATCH] fix: onboarding styling (#18417)

---
 web/src/routes/+page.svelte                 | 20 ++++++++++----------
 web/src/routes/auth/onboarding/+page.svelte |  4 ++--
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index c5fabdd36f..a414702cfd 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
+  import AuthPageLayout from '$lib/components/layouts/AuthPageLayout.svelte';
   import { AppRoute } from '$lib/constants';
-  import { Heading, Button, Logo } from '@immich/ui';
+  import { Button, Heading } from '@immich/ui';
   import { t } from 'svelte-i18n';
 </script>
 
-<section class="flex h-dvh w-dvw place-content-center place-items-center">
-  <div class="flex max-w-[350px] flex-col place-items-center gap-10 text-center">
-    <div class="flex place-content-center place-items-center">
-      <Logo variant="icon" class="text-center" size="landing" />
+<AuthPageLayout>
+  <div class="flex flex-col place-items-center text-center gap-12">
+    <Heading size="large" color="primary" tag="h1">{$t('welcome_to_immich')}</Heading>
+    <div>
+      <Button href={AppRoute.AUTH_REGISTER} size="medium" shape="round">
+        <span class="px-2 font-semibold">{$t('getting_started')}</span>
+      </Button>
     </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>
-</section>
+</AuthPageLayout>
diff --git a/web/src/routes/auth/onboarding/+page.svelte b/web/src/routes/auth/onboarding/+page.svelte
index 4c6e0878b6..091681002e 100644
--- a/web/src/routes/auth/onboarding/+page.svelte
+++ b/web/src/routes/auth/onboarding/+page.svelte
@@ -58,13 +58,13 @@
 
 <section id="onboarding-page" class="min-w-dvw flex min-h-dvh p-4">
   <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
         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}%"
       ></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} />
     </div>
   </div>