Merge branch 'dev' into pr/madkarmaa/257

ReVanced · Dec 22, 2024 · 2003fc5 · 2003fc5
2 parents 467c082 + 24650c7
commit 2003fc5
Show file tree

Hide file tree

Showing 30 changed files with 121 additions and 141 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,7 +28,6 @@
 		"prettier-plugin-svelte": "3.3.2",
 		"qrious": "^4.0.2",
 		"sass": "1.81.0",
-		"semver": "7.6.3",
 		"sirv-cli": "3.0.0",
 		"svelte": "4.2.18",
 		"svelte-check": "4.1.0",
@@ -47,6 +46,7 @@
 		"@tanstack/query-sync-storage-persister": "^4.36.1",
 		"@tanstack/svelte-query": "^4.36.1",
 		"datetrigger": "^1.1.1",
-		"moment": "^2.30.1"
+		"moment": "^2.30.1",
+		"svelte-material-icons": "^3.0.5"
 	}
 }
diff --git a/src/app.html b/src/app.html
@@ -1,26 +1,26 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="/favicon.ico" />
-		<meta
-			name="robots"
-			content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
-		/>
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
 
-		<!-- OpenGraph -->
-		<meta property="og:type" content="website" />
-		<meta property="og:image" content="/logo.png" />
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="/favicon.ico" />
+	<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
 
-		<!-- Twitter -->
-		<meta name="twitter:image" itemprop="image" content="/logo.png" />
-		<meta name="twitter:card" content="summary" />
+	<!-- OpenGraph -->
+	<meta property="og:type" content="website" />
+	<meta property="og:image" content="/logo.png" />
 
-		%sveltekit.head%
-	</head>
-	<body>
-		<div>%sveltekit.body%</div>
-	</body>
-</html>
+	<!-- Twitter -->
+	<meta name="twitter:image" itemprop="image" content="/logo.png" />
+	<meta name="twitter:card" content="summary" />
+
+	%sveltekit.head%
+</head>
+
+<body>
+	<div>%sveltekit.body%</div>
+</body>
+
+</html>
diff --git a/src/layout/Footer/FooterSection.svelte b/src/layout/Footer/FooterSection.svelte
@@ -2,6 +2,8 @@
 	import { slide } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
+	import ChevronDown from 'svelte-material-icons/ChevronDown.svelte';
+
 	export let title: string;
 	let expanded: boolean = false;
 </script>
@@ -19,10 +21,9 @@
 		<span>
 			{title}
 		</span>
-		<img
-			src="/icons/{expanded ? 'expand_less' : 'expand_more'}.svg"
-			alt={expanded ? 'Close' : 'Expand'}
-		/>
+		<div class="arrow" style:transform={expanded ? 'rotate(180deg)' : 'rotate(0deg)'}>
+			<ChevronDown size="24px" color="var(--surface-six)" />
+		</div>
 	</button>
 	{#if expanded}
 		<ul transition:slide={{ easing: quintOut, duration: 500 }}>
@@ -65,6 +66,11 @@
 		display: none;
 	}
 
+	.arrow {
+		transition: all 0.2s var(--bezier-one);
+		user-select: none;
+	}
+
 	@media screen and (max-width: 768px) {
 		.mobile-only {
 			display: block;
@@ -73,8 +79,4 @@
 			display: none;
 		}
 	}
-
-	img {
-		height: 24px;
-	}
 </style>
diff --git a/src/layout/Hero/HeroSection.svelte b/src/layout/Hero/HeroSection.svelte
@@ -1,5 +1,8 @@
 <script>
 	import Button from '$lib/components/Button.svelte';
+
+	import TrayArrowDown from 'svelte-material-icons/TrayArrowDown.svelte';
+	import FileDocumentOutline from 'svelte-material-icons/FileDocumentOutline.svelte';
 </script>
 
 <section class="hero">
@@ -9,8 +12,8 @@
 			Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
 		</p>
 		<div class="hero-buttons">
-			<Button icon="download" type="filled" href="download">Download</Button>
-			<Button icon="docs" type="tonal" href="patches">View patches</Button>
+			<Button type="filled" icon={TrayArrowDown} href="download">Download</Button>
+			<Button type="tonal" icon={FileDocumentOutline} href="patches">View patches</Button>
 		</div>
 	</div>
 </section>

diff --git a/src/layout/Navbar/NavHost.svelte b/src/layout/Navbar/NavHost.svelte
@@ -5,10 +5,12 @@
 	import { expoOut } from 'svelte/easing';
 
 	import Navigation from './NavButton.svelte';
-	import Svg from '$lib/components/Svg.svelte';
 	import Modal from '$lib/components/Dialogue.svelte';
 	import Button from '$lib/components/Button.svelte';
 
+	import Cog from 'svelte-material-icons/Cog.svelte';
+	import Replay from 'svelte-material-icons/Replay.svelte';
+
 	import { api_base_url, set_api_base_url, default_api_url } from '$data/api/settings';
 	import RouterEvents from '$data/RouterEvents';
 	import { admin_login } from '$lib/stores';
@@ -118,11 +120,7 @@
 			</div>
 			<div id="secondary-navigation">
 				<button on:click={() => (modalOpen = !modalOpen)} aria-label="Settings">
-					<Svg viewBoxHeight={24} svgHeight={20}>
-						<path
-							d="M 19.1 12.9 C 19.1 12.6 19.2 12.3 19.2 12 C 19.2 11.7 19.2 11.4 19.1 11.1 L 21.1 9.5 C 21.3 9.4 21.3 9.1 21.2 8.9 L 19.3 5.6 C 19.2 5.4 18.9 5.3 18.7 5.4 L 16.3 6.4 C 15.8 6 15.3 5.7 14.7 5.5 L 14.3 3 C 14.3 2.8 14.1 2.6 13.8 2.6 L 10 2.6 C 9.8 2.6 9.6 2.8 9.5 3 L 9.2 5.3 C 8.7 5.6 8.1 5.9 7.6 6.3 L 5.2 5.3 C 5 5.2 4.8 5.3 4.6 5.5 L 2.7 8.9 C 2.6 9.1 2.7 9.3 2.9 9.5 L 4.9 11.1 C 4.9 11.4 4.8 11.7 4.8 12 C 4.8 12.3 4.8 12.6 4.9 12.9 L 2.9 14.5 C 2.7 14.6 2.7 14.9 2.8 15.1 L 4.7 18.4 C 4.8 18.6 5.1 18.7 5.3 18.6 L 7.7 17.6 C 8.2 18 8.7 18.3 9.3 18.5 L 9.7 21 C 9.8 21.2 9.9 21.4 10.2 21.4 L 14 21.4 C 14.2 21.4 14.4 21.2 14.5 21 L 14.9 18.5 C 15.5 18.3 16 17.9 16.5 17.6 L 18.9 18.6 C 19.1 18.7 19.4 18.6 19.5 18.4 L 21.4 15.1 C 21.5 14.9 21.5 14.6 21.3 14.5 L 19.1 12.9 Z M 12 15.6 C 10 15.6 8.4 14 8.4 12 C 8.4 10 10 8.4 12 8.4 C 14 8.4 15.6 10 15.6 12 C 15.6 14 14 15.6 12 15.6 Z"
-						/>
-					</Svg>
+					<Cog size="20px" color="var(--surface-six)" />
 				</button>
 			</div>
 		</div>
@@ -142,24 +140,15 @@
 <!-- settings -->
 <Modal bind:modalOpen>
 	<svelte:fragment slot="icon">
-		<Svg viewBoxHeight={24} viewBoxWidth={24} svgHeight={24}>
-			<rect fill="none" height="24" width="24" />
-			<path
-				d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"
-			/>
-		</Svg>
+		<Cog size="24px" color="var(--surface-six)" />
 	</svelte:fragment>
 	<svelte:fragment slot="title">Settings</svelte:fragment>
 	<div id="settings-content">
 		<p>Configure the API for this website.</p>
 		<div class="input-wrapper">
 			<input name="api-url" id="api-url" type="text" bind:value={url} />
 			<button id="button-reset" on:click={reset} aria-label="Reset Button">
-				<Svg viewBoxHeight={48} svgHeight={24}>
-					<path
-						d="M11.2 36.725C14.6667 40.2417 18.8833 42 23.85 42C26.35 42 28.7 41.525 30.9 40.575C33.1 39.625 35.025 38.3333 36.675 36.7C38.325 35.0667 39.625 33.15 40.575 30.95C41.525 28.75 42 26.4 42 23.9C42 21.4 41.525 19.0667 40.575 16.9C39.625 14.7333 38.325 12.8417 36.675 11.225C35.025 9.60833 33.1 8.33333 30.9 7.4C28.7 6.46667 26.35 6 23.85 6C21.1833 6 18.6583 6.58333 16.275 7.75C13.8917 8.91667 11.8333 10.5167 10.1 12.55V7.25H7.1V17.65H17.55V14.65H12.3C13.7667 12.95 15.4917 11.5833 17.475 10.55C19.4583 9.51667 21.5833 9 23.85 9C28.0167 9 31.5833 10.425 34.55 13.275C37.5167 16.125 39 19.6167 39 23.75C39 27.9833 37.5333 31.5833 34.6 34.55C31.6667 37.5167 28.0833 39 23.85 39C19.6833 39 16.1667 37.5333 13.3 34.6C10.4333 31.6667 9 28.1167 9 23.95H6C6 28.95 7.73333 33.2083 11.2 36.725Z"
-					/>
-				</Svg>
+				<Replay size="24px" color="var(--surface-six)" />
 			</button>
 		</div>
 	</div>
@@ -307,14 +296,6 @@
 		padding: 0.5rem;
 	}
 
-	path {
-		fill: var(--surface-six);
-	}
-
-	button:hover path {
-		fill: var(--secondary);
-	}
-
 	button {
 		background-color: transparent;
 		border: none;

diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
-	export let type: 'filled' | 'tonal' | 'text' | 'outlined' | 'icon';
+	export let type: 'filled' | 'tonal' | 'text' | 'outlined' | 'icon' = 'filled';
 	export let functionType: typeof HTMLButtonElement.prototype.type = 'button';
-	export let icon = '';
-	export let href = '';
-	export let target = '';
-	export let label = '';
+	export let icon: any | undefined = undefined;
+	export let iconSize = 20;
+	export let iconColor = 'currentColor';
+	export let href: string = '';
+	export let target: string = '';
+	export let label: string = '';
 	export let disabled = false;
 	export let danger = false;
+
+	$: type = $$slots.default ? type : 'icon';
 </script>
 
 {#if href}
 	<a {href} {target} aria-label={label} class={type} class:disabled class:danger>
-		{#if icon}
-			<img src={`../icons/${icon}.svg`} alt={icon} />
-		{/if}
-		{#if type !== 'icon'}
-			<slot />
-		{/if}
+		<svelte:component this={icon} size={iconSize} color={iconColor} />
+		<slot />
 	</a>
 {:else}
 	<button
@@ -28,12 +28,8 @@
 		type={functionType}
 		{disabled}
 	>
-		{#if icon}
-			<img src="../icons/{icon}.svg" alt={icon} />
-		{/if}
-		{#if type !== 'icon'}
-			<slot />
-		{/if}
+		<svelte:component this={icon} size={iconSize} color={iconColor} />
+		<slot />
 	</button>
 {/if}
 
@@ -100,9 +96,5 @@
 			background-color: var(--red-one);
 			color: var(--surface-four);
 		}
-
-		img {
-			height: 20px;
-		}
 	}
 </style>
diff --git a/src/lib/components/Dialogue.svelte b/src/lib/components/Dialogue.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 	import { quadInOut } from 'svelte/easing';
+
+	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+
 	export let modalOpen = false;
 	export let fullscreen = false;
 	export let notDismissible = false;
@@ -39,7 +42,7 @@
 			<div class="title" class:hasIcon={$$slots.icon}>
 				{#if fullscreen}
 					<button id="back-button" on:click={() => (modalOpen = !modalOpen)}>
-						<img src="../icons/back.svg" id="back" alt="back" />
+						<ArrowLeft size="24px" color="var(--surface-six)" />
 					</button>
 				{/if}
 				{#if $$slots.icon}
@@ -145,10 +148,6 @@
 		align-items: center;
 	}
 
-	#back {
-		height: 24px;
-	}
-
 	.fullscreen {
 		padding: 0;
 		max-height: 100%;

diff --git a/src/lib/components/FilterChip.svelte b/src/lib/components/FilterChip.svelte
@@ -1,16 +1,19 @@
 <script>
+	import Check from 'svelte-material-icons/Check.svelte';
+	import ChevronDown from 'svelte-material-icons/ChevronDown.svelte';
+
 	export let dropdown = false;
 	export let check = false;
 	export let selected = false;
 </script>
 
 <button class:selected on:click>
 	{#if check}
-		<img id="check" src="/icons/check.svg" alt="selected" />
+		<Check size="18px" color="var(--surface-six)" />
 	{/if}
 	<slot />
 	{#if dropdown}
-		<img id="dropdown" src="/icons/expand_more.svg" alt="dropdown" />
+		<ChevronDown size="18px" color="var(--surface-six)" />
 	{/if}
 </button>
 
@@ -36,10 +39,6 @@
 		color: var(--primary);
 	}
 
-	img {
-		height: 18px;
-	}
-
 	#dropdown {
 		margin-right: -6px;
 	}

diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
@@ -4,6 +4,9 @@
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 
+	import Close from 'svelte-material-icons/Close.svelte';
+	import Magnify from 'svelte-material-icons/Magnify.svelte';
+
 	export let title: string;
 	export let searchTerm: string | null;
 	export let displayedTerm: string | undefined;
@@ -19,16 +22,18 @@
 </script>
 
 <div class="search-container">
-	<img src="../icons/search.svg" id="search" alt="Search" />
+	<div id="search">
+		<Magnify size="24px" color="var(--surface-six)" />
+	</div>
 	{#if searchTerm}
-		<img
-			src="../icons/close.svg"
+		<div
 			id="clear"
-			alt="Clear"
 			on:click={clear}
 			on:keypress={clear}
 			transition:fade={{ easing: quintOut, duration: 250 }}
-		/>
+		>
+			<Close size="24px" color="var(--surface-six)" />
+		</div>
 	{/if}
 	<input
 		type="text"