Remove unnecessary fade transitions

watsonindustries · Jun 23, 2024 · 7db2b37 · 7db2b37
1 parent 6831364
commit 7db2b37
Show file tree

Hide file tree

Showing 5 changed files with 4 additions and 16 deletions.
diff --git a/src/lib/components/StampSheet.svelte b/src/lib/components/StampSheet.svelte
@@ -88,7 +88,6 @@
 <!-- MARK: Component body -->
 <div
 	class="mx-8 my-4 mb-8 divide-y-2 divide-dashed divide-slate-900 rounded-xl bg-slate-100"
-	out:fade|global
 >
 	<!-- Stub -->
 	<div
@@ -97,7 +96,6 @@
 		class:border-b-2={isStampSheetTorn}
 		class:border-dashed={isStampSheetTorn}
 		class:border-slate-900={isStampSheetTorn}
-		in:fade|global={{ delay }}
 		on:touchstart={handleTouchStart}
 		on:touchend={handleTouchEnd}
 		on:touchcancel={handleTouchCancel}

diff --git a/src/routes/partner/[hash]/+page.svelte b/src/routes/partner/[hash]/+page.svelte
@@ -1,26 +1,21 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 
-	import { fade } from 'svelte/transition';
-
 	import { Icon } from '@steeze-ui/svelte-icon';
 	import { ArrowTopRightOnSquare, ChevronLeft } from '@steeze-ui/heroicons';
 
 	export let data: PageData;
 
-	const delay = 500;
-
 	const { name, description, image_url, external_url } = data.stamp;
 </script>
 
 <a
 	href="/"
-	in:fade|global={{ delay }}
 	class="btn-ghost btn mb-4 w-fit justify-start gap-2 rounded-full"
 	><Icon src={ChevronLeft} theme="solid" class="color-gray-900" size="20px" /> Back</a
 >
 
-<div class="mx-4 space-y-6" in:fade|global={{ delay }}>
+<div class="mx-4 space-y-6">
 	<img src={image_url} class="mask mask-squircle w-6/12" alt={name + ' promo image.'} />
 
 	<h1 class="break-all font-geologica text-4xl font-bold text-primary">{name}</h1>

diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
 	import { onMount } from 'svelte';
 	import { setToast } from '$lib/stores/toasts';
 	import { nickname } from '$lib/stores/userinfo';
@@ -46,12 +45,11 @@
 
 <h1
 	class="mx-4 my-4 font-geologica text-4xl font-bold text-primary"
-	in:fade|global={{ delay: 500 }}
 >
 	Profile
 </h1>
 
-<div class="mx-4 my-4 space-y-4" in:fade|global={{ delay: 500 }}>
+<div class="mx-4 my-4 space-y-4">
 	<label class="font-geologica text-xl font-bold text-secondary" for="nickname">Nickname</label>
 	<input
 		type="text"

diff --git a/src/routes/scanner/+page.svelte b/src/routes/scanner/+page.svelte
@@ -8,7 +8,6 @@
 
 	import { Icon } from '@steeze-ui/svelte-icon';
 	import { Ticket, QrCode, StopCircle } from '@steeze-ui/heroicons';
-	import { fade } from 'svelte/transition';
 	import { getCollectedCount, getExpectedStampHashes, saveStamp } from '$lib/stores/stamps';
 	import { setToast } from '$lib/stores/toasts';
 	import { minStampCountRequired } from '../../const';
@@ -104,7 +103,7 @@
 	});
 </script>
 
-<div class="space-y-4" in:fade|global={{ delay: 500 }}>
+<div class="space-y-4">
 	<h1 class="text-center font-geologica text-4xl font-bold text-primary">Scanner</h1>
 	<p class="px-2 text-center text-xl">Press Scan, and scan the QR code of the stamp!</p>
 
@@ -129,7 +128,6 @@
 		id="scanner-preview-area"
 		class="h-96"
 		class:hidden={state === SCANNER_STATE.STOPPED}
-		transition:fade|global
 	>
 		<!-- svelte-ignore a11y-media-has-caption -->
 		<video />

diff --git a/vite.config.ts b/vite.config.ts
@@ -8,8 +8,7 @@ export default defineConfig({
 		include: ['src/**/*.{test,spec}.{js,ts}']
 	},
 	server: {
-		host: true,
-		https: false
+		host: true
 	},
 	preview: {
 		host: true