From 3e0aa296832ff1e3b39347b7658972caf84aaa1e Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sun, 24 Mar 2024 15:43:03 -0700
Subject: [PATCH] refac: transition

---
 src/lib/components/common/Dropdown.svelte         | 3 +++
 src/lib/components/common/Modal.svelte            | 6 ++++--
 src/lib/components/layout/Sidebar.svelte          | 3 ++-
 src/lib/components/layout/Sidebar/ChatMenu.svelte | 2 ++
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/common/Dropdown.svelte b/src/lib/components/common/Dropdown.svelte
index 89d6b694..e8284a50 100644
--- a/src/lib/components/common/Dropdown.svelte
+++ b/src/lib/components/common/Dropdown.svelte
@@ -2,6 +2,8 @@
 	import { DropdownMenu } from 'bits-ui';
 	import { createEventDispatcher } from 'svelte';
 
+	import { flyAndScale } from '$lib/utils/transitions';
+
 	const dispatch = createEventDispatcher();
 </script>
 
@@ -20,6 +22,7 @@
 			sideOffset={8}
 			side="bottom"
 			align="start"
+			transition={flyAndScale}
 		>
 			<DropdownMenu.Item class="flex items-center px-3 py-2 text-sm  font-medium">
 				<div class="flex items-center">Profile</div>
diff --git a/src/lib/components/common/Modal.svelte b/src/lib/components/common/Modal.svelte
index f223b823..038fa48d 100644
--- a/src/lib/components/common/Modal.svelte
+++ b/src/lib/components/common/Modal.svelte
@@ -2,6 +2,8 @@
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 
+	import { flyAndScale } from '$lib/utils/transitions';
+
 	export let show = true;
 	export let size = 'md';
 
@@ -41,10 +43,10 @@
 		}}
 	>
 		<div
-			class=" modal-content m-auto rounded-2xl max-w-full {sizeToWidth(
+			class=" m-auto rounded-2xl max-w-full {sizeToWidth(
 				size
 			)} mx-2 bg-gray-50 dark:bg-gray-900 shadow-3xl"
-			in:fade={{ duration: 10 }}
+			in:flyAndScale
 			on:click={(e) => {
 				e.stopPropagation();
 			}}
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 96f25342..bf772e15 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -25,6 +25,7 @@
 	import Tooltip from '../common/Tooltip.svelte';
 	import Dropdown from '../common/Dropdown.svelte';
 	import ChatMenu from './Sidebar/ChatMenu.svelte';
+	import { flyAndScale } from '$lib/utils/transitions';
 
 	let show = false;
 	let navElement;
@@ -577,7 +578,7 @@
 						<div
 							id="dropdownDots"
 							class="absolute z-40 bottom-[70px] 4.5rem rounded-xl shadow w-[240px] bg-white dark:bg-gray-900"
-							in:slide={{ duration: 150 }}
+							in:flyAndScale={{ y: 5 }}
 						>
 							<div class="py-2 w-full">
 								{#if $user.role === 'admin'}
diff --git a/src/lib/components/layout/Sidebar/ChatMenu.svelte b/src/lib/components/layout/Sidebar/ChatMenu.svelte
index 30553e2b..36ac1457 100644
--- a/src/lib/components/layout/Sidebar/ChatMenu.svelte
+++ b/src/lib/components/layout/Sidebar/ChatMenu.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu } from 'bits-ui';
+	import { flyAndScale } from '$lib/utils/transitions';
 
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
@@ -29,6 +30,7 @@
 			sideOffset={-2}
 			side="bottom"
 			align="start"
+			transition={flyAndScale}
 		>
 			<DropdownMenu.Item
 				class="flex gap-2 items-center px-3 py-2 text-sm  font-medium cursor-pointer"