From 083c308de8365ba1b9ef6db85d536e5cfc844ec0 Mon Sep 17 00:00:00 2001
From: Abdul Rahman <abdulrahimaneassak@gmail.com>
Date: Tue, 9 Jan 2024 07:52:15 +0530
Subject: [PATCH] Fix(Bug) Update Feedback.tsx component visiblity issue
 (#6533)

* Update Feedback.tsx

* Update Feedback.tsx

Time reduced to 1.5 seconds, also going to update css

* Update index.css

CSS updated for feedback component animation.

* Update Feedback.tsx

* Update index.css

---------

Co-authored-by: Ricky <rickhanlonii@gmail.com>
---
 src/components/Layout/Feedback.tsx | 7 ++++++-
 src/styles/index.css               | 6 ++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
index 8639ce12c..0bdbc6b7c 100644
--- a/src/components/Layout/Feedback.tsx
+++ b/src/components/Layout/Feedback.tsx
@@ -4,6 +4,7 @@
 
 import {useState} from 'react';
 import {useRouter} from 'next/router';
+import cn from 'classnames';
 
 export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
   const {asPath} = useRouter();
@@ -60,7 +61,11 @@ function sendGAEvent(isPositive: boolean) {
 function SendFeedback({onSubmit}: {onSubmit: () => void}) {
   const [isSubmitted, setIsSubmitted] = useState(false);
   return (
-    <div className="max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex">
+    <div
+      className={cn(
+        'max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex',
+        {exit: isSubmitted}
+      )}>
       <p className="w-full font-bold text-primary dark:text-primary-dark text-lg me-4">
         {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
       </p>
diff --git a/src/styles/index.css b/src/styles/index.css
index 9e1ec4aaa..f22784ce0 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -719,3 +719,9 @@ ol.mdx-illustration-block {
     width: 100%;
   }
 }
+
+.exit {
+  opacity: 0;
+  transition: opacity 500ms ease-out;
+  transition-delay: 1s;
+}