feat(Download): incompatibility warning

resolves #83

src/layout/Navbar/NavHost.svelte

@@ -125,11 +125,12 @@
 				</Svg>
 			</button>
 		</div>
-		<div class="buttons">
-			<Button kind="tertiary" on:click={clear_and_reload}>Clear cache</Button>
-			<Button kind="tertiary" on:click={save}>Save</Button>
-		</div>
 	</div>
+
+	<svelte:fragment slot="buttons">
+		<Button type="text" on:click={clear_and_reload}>Clear cache</Button>
+		<Button type="text" on:click={save}>Save</Button>
+	</svelte:fragment>
 </Modal>
 
 <style>
@@ -157,22 +158,17 @@
 		position: relative;
 	}
 
-	.buttons {
-		display: flex;
-		justify-content: flex-end;
-		gap: 2rem;
-		margin-top: 2rem;
-	}
-
 	input {
 		width: 100%;
+		position: relative;
 		padding-right: 3rem;
+		margin-top: 1rem;
 	}
 
 	#button-reset {
 		position: absolute;
 		right: 12px;
-		top: 14px;
+		top: 30px;
 	}
 
 	nav {

src/lib/components/Button.svelte

@@ -1,6 +1,5 @@
-<script>
-	export let kind = 'secondary';
-	$: type = 'button-' + kind;
+<script lang="ts">
+	export let type: 'filled' | 'tonal' | 'text' | 'outlined';
 	export let icon = '';
 	export let href = '';
 	export let target = '';
@@ -8,22 +7,14 @@
 
 <button on:click>
 	{#if href}
-		<a
-			{href}
-			{target}
-			{...$$restProps}
-			class={type}
-		>
+		<a {href} {target} {...$$restProps} class={`button-${type}`}>
 			{#if icon}
 				<img src="../icons/{icon}.svg" alt={icon} />
 			{/if}
 			<slot />
 		</a>
 	{:else}
-		<div
-			{...$$restProps}
-			class={type}
-		>
+		<div {...$$restProps} class={`button-${type}`}>
 			{#if icon}
 				<img src="../icons/{icon}.svg" alt={icon} />
 			{/if}
@@ -58,19 +49,20 @@
 		user-select: none;
 	}
 
-	.button-primary {
+	.button-filled {
 		background-color: var(--accent-color);
 		color: var(--grey-four);
 	}
-	.button-secondary {
+	.button-tonal {
 		background-color: var(--grey-two);
 	}
 
-	.button-primary, .button-secondary {
+	.button-filled,
+	.button-tonal {
 		padding: 16px 24px;
 	}
 
-	.button-tertiary {
+	.button-text {
 		background-color: transparent;
 		color: var(--accent-color);
 		font-weight: 500;

src/lib/components/Dialogue.svelte

@@ -42,9 +42,16 @@
 					<slot name="description" />
 				</p>
 			{/if}
-		</div>
 
-		<div class="slot"><slot /></div>
+			<div class="slot"><slot /></div>
+
+			{#if $$slots.buttons}
+				<div class="buttons">
+					<slot name="buttons" />
+				</div>
+			{/if}
+		</div>
+		
 	</div>
 {/if}
 
@@ -63,7 +70,7 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		margin-bottom: 20px;
+		margin-bottom: 0.75rem;
 	}
 
 	.title {
@@ -78,8 +85,17 @@
 		margin-bottom: 8px;
 	}
 
+	.buttons {
+		display: flex;
+		gap: 2rem;
+		margin-top: 1rem;
+		justify-content: flex-end;
+		width: 100%;
+	}
+
+
 	.hasIcon {
-		flex-direction: column;
+		flex-direction: column;	
 	}
 
 	.modal {
@@ -131,9 +147,12 @@
 		display: flex;
 		flex-direction: column;
 		align-content: center;
+		width: 100%;
 	}
 
 	.modal::-webkit-scrollbar {
 		display: none;
 	}
 </style>
+
+

src/routes/+error.svelte

@@ -14,7 +14,7 @@
 	{#if status == 404}
 		<p>This page received a cease and desist letter from a multi-billion dollar tech company.</p>
 		<br />
-		<Button kind="primary">Return Home</Button>	
+		<Button kind="primary" href="/">Return Home</Button>	
 	{:else}
 		<p>
 			{$page.error?.message}

src/routes/download/+page.svelte

@@ -12,22 +12,79 @@
 	import Button from '$lib/components/Button.svelte';
 	import Footer from '$layout/Footer.svelte';
 	import Picture from '$lib/components/Picture.svelte';
+	import Dialogue from '$lib/components/Dialogue.svelte';
+	import { onMount } from 'svelte';
 
 	const query = createQuery(['manager'], queries.manager);
+
+	let warning: string;
+	let warningDialogue = false;
+
+	let userAgent: string;
+	let isAndroid: boolean;
+	let androidVersionMatch: RegExpExecArray | null;
+	let androidVersion: number;
+
+	onMount(() => {
+		userAgent = navigator.userAgent;
+		androidVersionMatch = /Android\s([\d.]+)/i.exec(userAgent);
+		androidVersion = androidVersionMatch ? parseInt(androidVersionMatch[1]) : 0;
+		isAndroid = !!androidVersion;
+	});
+
+	function handleClick() {
+		if (!isAndroid) {
+			warning = 'Your device is not running Android.';
+			warningDialogue = true;
+		} else if (androidVersion < 8) {
+			warning = `Your device is running ${androidVersion}. ReVanced only supports Android versions 8 and above.`;
+			warningDialogue = true;
+		}
+	}
 </script>
 
 <Meta title="Download" />
 
+<Dialogue bind:modalOpen={warningDialogue}>
+	<svelte:fragment slot="title">Warning</svelte:fragment>
+	<svelte:fragment slot="description">{warning} Do you still want to download?</svelte:fragment>
+	<svelte:fragment slot="buttons">
+		<Query {query} let:data>
+			<Button
+				type="text"
+				href={data.assets[0].url}
+				download
+				on:click={() => (warningDialogue = false)}>Okay</Button
+			>
+		</Query>
+		<Button type="text" on:click={() => (warningDialogue = false)}>Cancel</Button>
+	</svelte:fragment>
+</Dialogue>
+
 <div class="wrapper center" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 	<h2>ReVanced <span>Manager</span></h2>
 	<p>Patch your favourite apps, right on your device.</p>
 	<div class="buttons">
 		<Query {query} let:data>
-			<Button kind="primary" icon="download" href={data.assets[0].url} download>
-				{data.version}
-			</Button>
+			{#if !isAndroid || androidVersion < 8}
+				<Button on:click={handleClick} type="filled" icon="download">
+					{data.version}
+				</Button>
+			{:else}
+				<Button
+					on:click={handleClick}
+					type="filled"
+					icon="download"
+					href={data.assets[0].url}
+					download
+				>
+					{data.version}
+				</Button>
+			{/if}
 		</Query>
-		<Button href="https://github.com/revanced/revanced-manager" target="_blank">View Source</Button>
+		<Button type="tonal" href="https://github.com/revanced/revanced-manager" target="_blank">
+			View Source
+		</Button>
 	</div>
 	<div class="screenshot">
 		<Picture data={manager_screenshot} alt="Manager Screenshot" />