Brand title and about modal

src/lib/app.css

@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.brand-name {
+	background-image: url('./giphy.gif');
+	background-position: top;
+	background-clip: text;
+	-webkit-background-clip: text;
+}

src/lib/elements/About.svelte

@@ -0,0 +1,12 @@
+<div class="flex flex-col text-center items-center">
+	<img class="h-10 w-10 rounded-full" src="/logo.jpeg" alt="logo" />
+	<p class="text-lg font-bold">Paper Cost</p>
+
+	<p class="mt-5">Developed by</p>
+	<div class="text-sm flex flex-col">
+		<p>Sheba Queue</p>
+		<p>Kawsar Ahmed</p>
+		<p>+880 1915983757</p>
+	</div>
+	<p class="mt-10 text-slate-500 text-xs">Version: 1.0.0</p>
+</div>

src/lib/elements/BrandTitle.svelte

@@ -0,0 +1,3 @@
+<p class="brand-name text-center text-[26px] text-transparent font-bold tracking-wide">
+	Molla Printing & Packaging
+</p>

src/lib/elements/Modal.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
+	import { makeid, receive, send } from '$lib/utils/tools'
 	import Icon from '@iconify/svelte'
 
 	export let show = false
+	const id = makeid(6)
 </script>
 
 <div class="absolute bg-black bg-opacity-20 flex h-full w-full items-center justify-center z-10">
-	<div class="bg-white p-2 rounded relative flex flex-col w-3/4">
+	<div
+		in:receive={{ key: id, duration: 200 }}
+		out:send={{ key: id, duration: 200 }}
+		class="bg-white p-2 rounded relative flex flex-col w-3/4"
+	>
 		<button
 			class="absolute top-0 right-0 p-[3px] rounded-full w-fit"
 			on:click|stopPropagation|preventDefault={() => (show = false)}

src/lib/utils/tools.ts

@@ -18,7 +18,7 @@ export const [send, receive] = crossfade({
 		const transform = style.transform === 'none' ? '' : style.transform
 
 		return {
-			duration: 300,
+			duration: params.duration,
 			easing: params.easing,
 			css: (t) => `
 				transform: ${transform} scale(${t});

src/routes/(app)/+layout.svelte

@@ -11,6 +11,8 @@
 	import { Toaster } from 'svelte-sonner'
 	import Icon from '@iconify/svelte'
 	import Modal from '$lib/elements/Modal.svelte'
+	import BrandTitle from '$lib/elements/BrandTitle.svelte'
+	import About from '$lib/elements/About.svelte'
 
 	//Import Mixpanel SDK
 	mixpanel.init(PUBLIC_MIX_TOKEN, {
@@ -44,24 +46,13 @@
 	{/if}
 	{#if showAbout}
 		<Modal bind:show={showAbout}>
-			<div class="flex flex-col text-center items-center">
-				<img class="h-10 w-10 rounded-full" src="/logo.jpeg" alt="logo" />
-				<p class="text-lg font-bold">Paper Cost</p>
-
-				<p class="mt-5">Developer</p>
-				<div class="text-sm flex flex-col">
-					<p>Sheba Queue</p>
-					<p>Kawsar Ahmed</p>
-					<p>+880 1915983757</p>
-				</div>
-				<p class="mt-10 text-slate-500">Version: 1.0.0</p>
-			</div>
+			<About />
 		</Modal>
 	{/if}
 	<div class="flex flex-col h-[92%]">
 		<nav class="max-w-6xl mx-auto w-full">
 			<div class="flex justify-center py-2">
-				<p class="text-center text-2xl text-red-600 font-semibold">Molla Printing & Packaging</p>
+				<BrandTitle />
 			</div>
 			<div class="bg-gradient-to-r from-transparent via-orange-800/40 to-transparent p-[1px]" />
 		</nav>

src/routes/(app)/history/[id]/+page.svelte

@@ -14,7 +14,7 @@
 	<title>History</title>
 </svelte:head>
 
-<section class="max-w-6xl mx-auto flex w-full max-h-[90%] flex-col gap-4 px-4 pt-5">
+<section class="max-w-6xl mx-auto flex w-full max-h-[90%] flex-col gap-3 px-4 pt-3">
 	<h1 class="text-xl text-center">Cost Details</h1>
 	<div class="w-full bg-gradient-to-r from-transparent via-slate-600/10 to-transparent p-[1px]" />
 	{#if history}
@@ -30,7 +30,7 @@
 			</h1>
 		</div>
 
-		<div class="flex flex-col w-full justify-between gap-3 h-[80%] items-center">
+		<div class="flex flex-col w-full justify-between gap-3 h-[85%] items-center">
 			<div class="flex flex-col overflow-y-auto w-full max-w-3xl py-2">
 				{#if history.papers.length}
 					{#each history.papers as { length, width, thickness, rate, id }}

src/routes/auth/+layout.svelte

@@ -2,6 +2,7 @@
 	import { page } from '$app/stores'
 	import { PUBLIC_MIX_TOKEN } from '$env/static/public'
 	import '$lib/app.css'
+	import BrandTitle from '$lib/elements/BrandTitle.svelte'
 	import '@fontsource/jost'
 
 	//Import Mixpanel SDK
@@ -16,7 +17,7 @@
 <main class="h-[100svh] flex flex-col">
 	<nav>
 		<div class="flex justify-center py-2">
-			<p class="text-center text-2xl text-red-600 font-semibold">Molla Printing & Packaging</p>
+			<BrandTitle />
 		</div>
 		<div
 			class="w-full max-w-6xl mx-auto bg-gradient-to-r from-transparent via-orange-800/40 to-transparent p-[1px]"