From 8219905d279595ee6fcdb59e9522a08924fe4d7c Mon Sep 17 00:00:00 2001
From: Yatharth Verma <yatharthverma@Yatharths-MacBook-Pro.local>
Date: Mon, 2 Oct 2023 18:19:51 +0530
Subject: [PATCH] feat: Improve animation

---
 .../[environmentId]/Navigation.tsx            |  2 +-
 .../[environmentId]/surveys/PreviewSurvey.tsx | 25 ++++++++++++++-----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/apps/web/app/(app)/environments/[environmentId]/Navigation.tsx b/apps/web/app/(app)/environments/[environmentId]/Navigation.tsx
index 00a054f784..32b04c3afc 100644
--- a/apps/web/app/(app)/environments/[environmentId]/Navigation.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/Navigation.tsx
@@ -221,7 +221,7 @@ export default function Navigation({
   return (
     <>
       {product && (
-        <nav className="top-0 z-10 w-full border-b border-slate-200 bg-white">
+        <nav className="top-0 w-full border-b border-slate-200 bg-white">
           {environment?.type === "development" && (
             <div className="h-6 w-full bg-[#A33700] p-0.5 text-center text-sm text-white">
               You&apos;re in development mode. Use it to test surveys, actions and attributes.
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/PreviewSurvey.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/PreviewSurvey.tsx
index 0ff8e5381b..0733ff8a27 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/PreviewSurvey.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/PreviewSurvey.tsx
@@ -30,13 +30,17 @@ let surveyNameTemp;
 const previewParentContainerVariant: Variants = {
   expanded: {
     position: "fixed",
-    height: "100vh",
-    width: "100vw",
+    height: "100%",
+    width: "100%",
     backgroundColor: "rgba(0, 0, 0, 0.4)",
     backdropFilter: "blur(15px)",
     left: 0,
     top: 0,
     zIndex: 1040,
+    transition: {
+      ease: "easeIn",
+      duration: 0.001,
+    },
   },
   shrink: {
     backgroundColor: "transparent",
@@ -46,15 +50,24 @@ const previewParentContainerVariant: Variants = {
 const previewScreenVariants: Variants = {
   expanded: {
     position: "absolute",
-    width: "90%",
-    height: "90%",
+    width: ["0%", "20%", "45%", "90%"],
+    height: ["0%", "20%", "45%", "90%"],
     left: "5%",
     top: "5%",
-    transform: "translate(0%, 0%)",
     boxShadow: "0px 4px 5px 4px rgba(169, 169, 169, 0.25)",
+    transition: {
+      ease: "easeInOut",
+      duration: 0.3, // Adjust the duration to your preference
+    },
   },
-  preview: {
+  shrink: {
     position: "relative",
+    width: ["0%", "100%"],
+    height: ["0%", "100%"],
+    transition: {
+      ease: "easeIn",
+      duration: 0.3, // Adjust the duration to your preference
+    },
   },
 };