From d3ac4390009dab66144d37400279b4092049d827 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sun, 3 Nov 2024 03:04:35 -0800
Subject: [PATCH] refac: styling

---
 src/lib/components/OnBoarding.svelte | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/OnBoarding.svelte b/src/lib/components/OnBoarding.svelte
index cb85ab9b2..2add98a6c 100644
--- a/src/lib/components/OnBoarding.svelte
+++ b/src/lib/components/OnBoarding.svelte
@@ -2,6 +2,8 @@
 	import { getContext } from 'svelte';
 	const i18n = getContext('i18n');
 
+	import { WEBUI_BASE_URL } from '$lib/constants';
+
 	import Marquee from './common/Marquee.svelte';
 	import SlideShow from './common/SlideShow.svelte';
 	import ArrowRightCircle from './icons/ArrowRightCircle.svelte';
@@ -12,16 +14,29 @@
 
 {#if show}
 	<div class="w-full h-screen max-h-[100dvh] text-white relative">
+		<div class="fixed m-10 z-50">
+			<div class="flex space-x-2">
+				<div class=" self-center">
+					<img
+						crossorigin="anonymous"
+						src="{WEBUI_BASE_URL}/static/favicon.png"
+						class=" w-6 rounded-full"
+						alt="logo"
+					/>
+				</div>
+			</div>
+		</div>
+
 		<SlideShow duration={5000} />
 
 		<div
-			class="w-full h-full absolute top-0 left-0 bg-gradient-to-t dark:from-black dark:to-black/60"
+			class="w-full h-full absolute top-0 left-0 bg-gradient-to-t from-20% from-black to-transparent"
 		></div>
 
-		<div class="w-full h-full absolute top-0 left-0 backdrop-blur-xl"></div>
+		<div class="w-full h-full absolute top-0 left-0 backdrop-blur-sm bg-black/50"></div>
 
 		<div class="relative bg-transparent w-full min-h-screen flex z-10">
-			<div class="flex flex-col justify-center w-full items-center pb-10 text-center">
+			<div class="flex flex-col justify-end w-full items-center pb-10 text-center">
 				<div class="text-5xl lg:text-7xl font-secondary">
 					<Marquee
 						duration={5000}
@@ -41,10 +56,8 @@
 
 					<div class="mt-0.5">{$i18n.t(`wherever you are`)}</div>
 				</div>
-			</div>
 
-			<div class="absolute bottom-12 left-0 right-0 w-full">
-				<div class="flex justify-center">
+				<div class="flex justify-center mt-8">
 					<div class="flex flex-col justify-center items-center">
 						<button
 							class="relative z-20 flex p-1 rounded-full bg-white/5 hover:bg-white/10 transition font-medium text-sm"
@@ -58,6 +71,8 @@
 					</div>
 				</div>
 			</div>
+
+			<!-- <div class="absolute bottom-12 left-0 right-0 w-full"></div> -->
 		</div>
 	</div>
 {/if}