feat(frontend): login page makeup

frontend/src/lib/components/CenteredModal.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { SettingsService } from '$lib/gen'
+	import WindmillIcon from './icons/WindmillIcon.svelte'
 
 	export let subtitle: string | undefined = undefined
 	export let title = 'Windmill'
@@ -10,24 +11,32 @@
 	})
 </script>
 
-<div class="flex justify-center min-h-screen bg-gray-50 pt-10">
-	<div class="w-10/12 md:w-7/12 lg:w-6/12 xl:4/12 m-auto">
-		<h1 class="justify-center text-center font-medium pb-2 text-gray-700">
-			{title}
-		</h1>
-		{#if subtitle}
-			<p class="justify-center text-center font-medium pb-2 text-gray-700 text-xs">
-				{subtitle}
-			</p>
-		{/if}
-		<div class="border rounded-md py-12 px-16 shadow-md bg-white">
+<div
+	class="flex justify-center min-h-screen bg-gradient-to-r from-gray-900 to-blue-900 pt-10 relative"
+>
+	<div class="w-10/12 md:w-7/12 lg:w-6/12 xl:4/12 m-auto z-10">
+		<div class="border rounded-md py-4 px-16 shadow-md bg-gray-50">
+			<h1 class="justify-center text-center font-medium pb-4">
+				{title}
+			</h1>
+			{#if subtitle}
+				<p class="justify-center text-center font-medium pb-2 text-xs">
+					{subtitle}
+				</p>
+			{/if}
 			<slot />
 		</div>
 
 		<!-- empty row to make the form a little bit above vertical centering-->
 		<div class="py-12" />
 	</div>
-	<div class="absolute top-0 right-0 text-2xs text-gray-500 italic px-3 py-1">
+	<div class="hidden lg:block absolute top-10 right-50">
+		<div class="animate-[spin_100s_linear_infinite] ">
+			<WindmillIcon white height="100px" width="100px" />
+		</div>
+		<h2 class=" text-center pt-2 text-gray-100">Windmill</h2>
+	</div>
+	<div class="absolute top-0 right-0 text-2xs text-gray-300 italic px-3 py-1">
 		windmill.dev backend v. <span class="font-mono">{version}</span>
 	</div>
 </div>

frontend/src/lib/components/jobs/JobDetail.svelte

@@ -31,7 +31,7 @@
 	export let job: Job
 </script>
 
-<div class="border rounded py-4">
+<div class="border border-gray-400 rounded py-4">
 	<div class="grid grid-cols-1 lg:grid-cols-3 w-full gap-4">
 		<div class="flex-col">
 			<div class="flex flex-row text-sm">

frontend/src/lib/components/landing/FlowLandingBox.svelte

@@ -9,7 +9,7 @@
 
 <a
 	href="#{flow.path}"
-	class="border p-4 rounded-sm shadow-sm space-y-2 hover:border-blue-600 text-gray-800 flex flex-col justify-between cursor-pointer"
+	class="border border-gray-400 p-4 rounded-sm shadow-sm space-y-2 hover:border-blue-600 text-gray-800 flex flex-col justify-between cursor-pointer"
 	on:click={() => goto(`/flows/get/${flow.path}`)}
 >
 	<div class="font-bold">{flow.summary || flow.path}</div>

frontend/src/lib/components/landing/ScriptBox.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <a
-	class="border p-4 rounded-sm shadow-sm space-y-2 hover:border-blue-600 text-gray-800 flex flex-col justify-between"
+	class="border border-gray-400 p-4 rounded-sm shadow-sm space-y-2 hover:border-blue-600 text-gray-800 flex flex-col justify-between"
 	href="/scripts/get/{script.hash}"
 >
 	<div class="font-bold">{script.summary || script.path}</div>

frontend/src/routes/__layout@root.svelte

@@ -202,10 +202,10 @@
 		</div>
 	</div>
 {:else}
-	<CenteredModal title="Loading user">
+	<CenteredModal title="Loading user...">
 		<div class="w-full ">
-			<div class="block m-auto w-20">
-				<WindmillIcon class="animate-[spin_6s_linear_infinite]" height="80px" width="80px" />
+			<div class="block m-auto w-16">
+				<WindmillIcon class="animate-[spin_10s_linear_infinite]" height="60px" width="60px" />
 			</div>
 		</div>
 	</CenteredModal>

frontend/src/routes/flows.svelte

@@ -282,7 +282,7 @@
 						<div class="grid md:grid-cols-2 gap-4 sm:grid-cols-1 xl:grid-cols-3 mt-2">
 							{#each flows as { summary, path, extra_perms, canWrite }}
 								<a
-									class="border p-4 rounded-sm shadow-sm space-y-2 hover:border-blue-600 text-gray-800 flex flex-col justify-between"
+									class="border border-gray-400 p-4 rounded-sm shadow-sm space-y-2 hover:border-blue-600 text-gray-800 flex flex-col justify-between"
 									href="/flows/get/{path}"
 								>
 									<div class="px-6 overflow-auto ">

frontend/src/routes/scripts.svelte

@@ -298,7 +298,7 @@
 						<div class="grid md:grid-cols-2 gap-4 sm:grid-cols-1 xl:grid-cols-3 mt-2">
 							{#each scripts as { summary, path, hash, language, extra_perms, canWrite, lock_error_logs, kind }}
 								<a
-									class="border p-4 rounded-sm shadow-sm space-y-2 hover:border-blue-600 text-gray-800 flex flex-col justify-between"
+									class="border border-gray-400 p-4 rounded-sm shadow-sm space-y-2 hover:border-blue-600 text-gray-800 flex flex-col justify-between"
 									href="/scripts/get/{hash}"
 								>
 									<div class="flex flex-col gap-1">

frontend/src/routes/user/__layout-user@root.svelte

@@ -1,3 +1,3 @@
-<div class="min-h-screen antialiased text-gray-900">
+<div class="min-h-screen antialiased text-gray-900 bg-gradient-to-r from-gray-900 to-blue-900">
 	<slot />
 </div>

frontend/src/routes/user/create_workspace@user.svelte

@@ -80,7 +80,7 @@
 	})
 </script>
 
-<CenteredModal title="Create a new workspace">
+<CenteredModal title="New Workspace">
 	{#if $page.url.hostname != 'app.windmill.dev'}
 		<Alert title="Restricted to 1 workspace - unlimited during beta" type="info">
 			More than 1 user-created workspace for self-hosted will require a team or enterprise license

frontend/src/routes/user/login@user.svelte

@@ -114,7 +114,7 @@
 
 <div class="min-h-screen antialiased text-gray-900">
 	<!-- Enable submit form on enter -->
-	<CenteredModal title="Login to Windmill">
+	<CenteredModal title="Login">
 		<div class="justify-center text-center flex flex-col">
 			{#each providers as { type, icon, name }}
 				{#if logins.includes(type)}