From 6bf608a37a5839b53cfe2deb7271b3f6fd9faf85 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Thu, 2 Mar 2023 13:36:20 +0530
Subject: [PATCH] style: transsition

---
 apps/app/components/issues/select/assignee.tsx | 13 ++++++++-----
 apps/app/components/issues/select/label.tsx    | 13 ++++++++-----
 apps/app/components/issues/select/priority.tsx | 13 ++++++++-----
 apps/app/components/issues/select/state.tsx    | 13 ++++++++-----
 4 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/apps/app/components/issues/select/assignee.tsx b/apps/app/components/issues/select/assignee.tsx
index e76acf886..0926c1d6a 100644
--- a/apps/app/components/issues/select/assignee.tsx
+++ b/apps/app/components/issues/select/assignee.tsx
@@ -66,11 +66,11 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
         <>
           <Combobox.Button
             className={({ open }) =>
-              `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-300 
+              `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
               ${
                 open
                   ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
-                  : "hover:bg-[rgba(63,118,255,0.05)] focus:bg-[rgba(63,118,255,0.05)]"
+                  : "hover:bg-[rgba(63,118,255,0.05)] "
               }`
             }
           >
@@ -90,9 +90,12 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
           <Transition
             show={open}
             as={Fragment}
-            leave="transition ease-in duration-100"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
           >
             <Combobox.Options
               className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx
index bed23fce5..1f8590f5d 100644
--- a/apps/app/components/issues/select/label.tsx
+++ b/apps/app/components/issues/select/label.tsx
@@ -61,11 +61,11 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
           <>
             <Combobox.Button
               className={({ open }) =>
-                `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-300 
+                `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
               ${
                 open
                   ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
-                  : "hover:bg-[rgba(63,118,255,0.05)] focus:bg-[rgba(63,118,255,0.05)]"
+                  : "hover:bg-[rgba(63,118,255,0.05)] "
               }`
               }
             >
@@ -89,9 +89,12 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
             <Transition
               show={open}
               as={React.Fragment}
-              leave="transition ease-in duration-100"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
             >
               <Combobox.Options
                 className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
diff --git a/apps/app/components/issues/select/priority.tsx b/apps/app/components/issues/select/priority.tsx
index 3497bf959..bfdda5b74 100644
--- a/apps/app/components/issues/select/priority.tsx
+++ b/apps/app/components/issues/select/priority.tsx
@@ -19,11 +19,11 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
       <>
         <Listbox.Button
           className={({ open }) =>
-            `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-300 
+            `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
             ${
               open
                 ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
-                : "hover:bg-[rgba(63,118,255,0.05)] focus:bg-[rgba(63,118,255,0.05)]"
+                : "hover:bg-[rgba(63,118,255,0.05)]"
             }`
           }
         >
@@ -40,9 +40,12 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
         <Transition
           show={open}
           as={React.Fragment}
-          leave="transition ease-in duration-100"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
+          enter="transition ease-out duration-200"
+          enterFrom="opacity-0 translate-y-1"
+          enterTo="opacity-100 translate-y-0"
+          leave="transition ease-in duration-150"
+          leaveFrom="opacity-100 translate-y-0"
+          leaveTo="opacity-0 translate-y-1"
         >
           <Listbox.Options
             className={`absolute z-10 max-h-52 min-w-[8rem] px-2 py-2  text-xs 
diff --git a/apps/app/components/issues/select/state.tsx b/apps/app/components/issues/select/state.tsx
index fcf2533e8..e94a24999 100644
--- a/apps/app/components/issues/select/state.tsx
+++ b/apps/app/components/issues/select/state.tsx
@@ -67,11 +67,11 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
         <>
           <Combobox.Button
             className={({ open }) =>
-              `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-300 
+              `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
             ${
               open
                 ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
-                : "hover:bg-[rgba(63,118,255,0.05)] focus:bg-[rgba(63,118,255,0.05)]"
+                : "hover:bg-[rgba(63,118,255,0.05)]"
             }`
             }
           >
@@ -93,9 +93,12 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
           <Transition
             show={open}
             as={React.Fragment}
-            leave="transition ease-in duration-100"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
           >
             <Combobox.Options
               className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs