From 4173b1bc852f603e8d076522c2f672e462f64018 Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Fri, 5 Apr 2024 11:31:44 +0200
Subject: [PATCH 1/3] animate panel route

---
 client/src/containers/panel/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/containers/panel/index.tsx b/client/src/containers/panel/index.tsx
index e10f411d..cfec53d0 100644
--- a/client/src/containers/panel/index.tsx
+++ b/client/src/containers/panel/index.tsx
@@ -28,7 +28,7 @@ export default function Panel({ children }: { children: React.ReactNode }) {
   return (
     <div
       className={cn({
-        'rounded-4xl bg-background after:rounded-b-4xl before:rounded-t-4xl absolute bottom-0 top-0 z-10 my-2 flex w-full max-w-[342px] flex-col shadow-md transition-transform duration-500 before:absolute before:left-0 before:top-1 before:h-6 before:w-full before:bg-gradient-to-b before:from-white/100 before:to-white/0 before:content-[""] after:absolute after:bottom-1 after:left-0 after:h-6 after:w-full after:bg-gradient-to-t after:from-white/0 after:to-white/100 after:content-[""] xl:max-w-[400px]':
+        'animate-in slide-in-from-left fade-in rounded-4xl bg-background after:rounded-b-4xl before:rounded-t-4xl absolute bottom-0 top-0 z-10 my-2 flex w-full max-w-[342px] flex-col shadow-md transition-transform duration-700 before:absolute before:left-0 before:top-1 before:h-6 before:w-full before:bg-gradient-to-b before:from-white/100 before:to-white/0 before:content-[""] after:absolute after:bottom-1 after:left-0 after:h-6 after:w-full after:bg-gradient-to-t after:from-white/0 after:to-white/100 after:content-[""] xl:max-w-[400px]':
           true,
         'left-20 translate-x-0 xl:left-[106px]': open,
         'left-[70px] -translate-x-full xl:left-24': !open,

From 1bde7d3d934988efd89100d19ac2302c83fdba9c Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Fri, 5 Apr 2024 16:28:14 +0200
Subject: [PATCH 2/3] hide bg when close panel

---
 client/src/containers/panel/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/containers/panel/index.tsx b/client/src/containers/panel/index.tsx
index cfec53d0..2aadacb2 100644
--- a/client/src/containers/panel/index.tsx
+++ b/client/src/containers/panel/index.tsx
@@ -31,7 +31,8 @@ export default function Panel({ children }: { children: React.ReactNode }) {
         'animate-in slide-in-from-left fade-in rounded-4xl bg-background after:rounded-b-4xl before:rounded-t-4xl absolute bottom-0 top-0 z-10 my-2 flex w-full max-w-[342px] flex-col shadow-md transition-transform duration-700 before:absolute before:left-0 before:top-1 before:h-6 before:w-full before:bg-gradient-to-b before:from-white/100 before:to-white/0 before:content-[""] after:absolute after:bottom-1 after:left-0 after:h-6 after:w-full after:bg-gradient-to-t after:from-white/0 after:to-white/100 after:content-[""] xl:max-w-[400px]':
           true,
         'left-20 translate-x-0 xl:left-[106px]': open,
-        'left-[70px] -translate-x-full xl:left-24': !open,
+        'left-[70px] -translate-x-full rounded-[42px] bg-transparent duration-[2000ms] before:content-[] after:content-[] xl:left-24':
+          !open,
       })}
     >
       <div

From de1b925099c99cb0430b159595ecdffb79ba795d Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Fri, 5 Apr 2024 17:13:28 +0200
Subject: [PATCH 3/3] legend animation

---
 client/src/containers/map/legend/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/containers/map/legend/index.tsx b/client/src/containers/map/legend/index.tsx
index 9f7ac648..ed599449 100644
--- a/client/src/containers/map/legend/index.tsx
+++ b/client/src/containers/map/legend/index.tsx
@@ -37,7 +37,7 @@ const MapLegends = ({ className = '' }) => {
       {openLegend && (
         <Legend
           className={cn(
-            'max-h-[calc(100vh_-_theme(space.16)_-_theme(space.6)_-_theme(space.48))]',
+            'animate-in fade-in-50 max-h-[calc(100vh_-_theme(space.16)_-_theme(space.6)_-_theme(space.48))] duration-300',
             className
           )}
           sortable={{