refactor: landing page

src/lib/components/common/DragRegion.svelte

@@ -0,0 +1,10 @@
+<div class="drag-region" data-tauri-drag-region />
+
+<style lang="scss">
+	.drag-region {
+		position: fixed;
+		z-index: 9999;
+		height: 28px;
+		inset: 0 0 auto;
+	}
+</style>

src/lib/components/common/index.ts

@@ -1,5 +1,6 @@
 export { default as AnimatedLogo } from './AnimatedLogo.svelte';
 export { default as Button } from './Button.svelte';
+export { default as DragRegion } from './DragRegion.svelte';
 export { default as IconButton } from './IconButton.svelte';
 export { default as InlineSelect } from './InlineSelect.svelte';
 export { default as Input } from './Input.svelte';

src/lib/components/dashboard/LoadingScreen.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { AnimatedLogo } from '$lib/components';
+	import { AnimatedLogo, DragRegion } from '$lib/components';
 </script>
 
-<section class="container" data-tauri-drag-region>
+<DragRegion />
+<section class="container">
 	<AnimatedLogo />
 	<div class="text-container">
 		<h2 class="title">Loading your data...</h2>

src/lib/components/dashboard/notifications/Notification.svelte

@@ -28,7 +28,6 @@
 
 	export let data: NotificationData;
 	export let dragged = false;
-	export let interactive = true;
 
 	let {
 		id,
@@ -188,7 +187,7 @@
 				<span>{priority.label}</span>
 			</div>
 		{/if}
-		{#if !dragged && interactive}
+		{#if !dragged}
 			<div
 				class="over"
 				class:large-shadow={hoverAction}

src/lib/components/landing/index.ts

@@ -1,3 +1 @@
 export { default as DownloadButton } from './DownloadButton.svelte';
-export { default as FakeNotifications } from './FakeNotifications.svelte';
-export { default as Footer } from './Footer.svelte';

src/lib/icons/XIcon.svelte

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M11.331 8.928 16.543 3h-1.235l-4.524 5.147L7.169 3H3l5.466 7.784L3 17h1.235l4.778-5.436L12.831 17H17l-5.669-8.072Zm-1.69 1.924-.555-.775L4.68 3.91h1.897l3.555 4.977.554.775 4.623 6.47h-1.897l-3.772-5.28Z"
+		fill="currentColor"
+	/>
+</svg>

src/lib/icons/index.ts

@@ -19,7 +19,6 @@ export { default as GitlabIcon } from './GitlabIcon.svelte';
 export { default as HeartIcon } from './HeartIcon.svelte';
 export { default as LightningIcon } from './LightningIcon.svelte';
 export { default as LinuxIcon } from './LinuxIcon.svelte';
-export { default as Logo } from './Logo.svelte';
 export { default as MacosIcon } from './MacosIcon.svelte';
 export { default as MergedPullRequestIcon } from './MergedPullRequestIcon.svelte';
 export { default as OpenIssueIcon } from './OpenIssueIcon.svelte';
@@ -45,3 +44,4 @@ export { default as UnreadIcon } from './UnreadIcon.svelte';
 export { default as WindowsIcon } from './WindowsIcon.svelte';
 export { default as WorkflowFailIcon } from './WorkflowFailIcon.svelte';
 export { default as WorkflowSuccessIcon } from './WorkflowSuccessIcon.svelte';
+export { default as XIcon } from './XIcon.svelte';

src/routes/(app)/login/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
-	import { Footer, GithubLoginButton, GitlabLoginButton, IconButton } from '$lib/components';
+	import { DragRegion, GithubLoginButton, GitlabLoginButton, IconButton } from '$lib/components';
 	import { ArrowRightIcon, GithubIcon, GitlabIcon } from '$lib/icons';
 
 	$: onTauriApp = browser && !!window.__TAURI__;
@@ -10,8 +10,8 @@
 	<title>GitLight • Log in</title>
 </svelte:head>
 
+<DragRegion />
 <div class="wrapper">
-	<img src="/images/large-light.webp" alt="" class="background-image" width="1600" height="384" />
 	<main class="main">
 		{#if !onTauriApp}
 			<a href="/" class="back-button">
@@ -32,7 +32,6 @@
 			Log in to GitLab
 		</GitlabLoginButton>
 	</main>
-	<Footer />
 </div>
 
 <style lang="scss">
@@ -47,18 +46,6 @@
 		padding: 0 2rem;
 	}
 
-	.background-image {
-		position: absolute;
-		z-index: -1;
-		top: 0;
-
-		@include screens.mobile {
-			width: 40rem;
-			max-width: unset;
-			height: auto;
-		}
-	}
-
 	.main {
 		position: relative;
 		display: flex;