From 7e57c192ee91189bd5593fafefce5624fd3eccc1 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Fri, 29 Apr 2022 19:17:34 +0200
Subject: [PATCH] added animations for dialog and tooltip (#2648)

* added animations for dialog and tooltip

* Update .env.example
---
 apps/api                             |  2 +-
 apps/web/components/Tooltip.tsx      |  4 +--
 apps/web/pages/bookings/[status].tsx |  1 +
 apps/web/pages/event-types/index.tsx |  4 +--
 apps/web/styles/globals.css          | 49 ++++++++++++++++++++++++++++
 apps/website                         |  2 +-
 packages/ui/Dialog.tsx               |  6 ++--
 packages/ui/Dropdown.tsx             |  2 +-
 8 files changed, 60 insertions(+), 10 deletions(-)

diff --git a/apps/api b/apps/api
index 9239b272..2449d90b 160000
--- a/apps/api
+++ b/apps/api
@@ -1 +1 @@
-Subproject commit 9239b27216d04f60870186b69c5e1bb1642d5d44
+Subproject commit 2449d90bcbbf4c0a379f4d766aee299caad488a2
diff --git a/apps/web/components/Tooltip.tsx b/apps/web/components/Tooltip.tsx
index 0bf5ff31..e6b07120 100644
--- a/apps/web/components/Tooltip.tsx
+++ b/apps/web/components/Tooltip.tsx
@@ -17,13 +17,13 @@ export function Tooltip({
 }) {
   return (
     <TooltipPrimitive.Root
-      delayDuration={150}
+      delayDuration={50}
       open={open}
       defaultOpen={defaultOpen}
       onOpenChange={onOpenChange}>
       <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
       <TooltipPrimitive.Content
-        className="-mt-2 rounded-sm bg-black px-1 py-0.5 text-xs text-white shadow-lg"
+        className="slideInBottom -mt-2 rounded-sm bg-black px-1 py-0.5 text-xs text-white shadow-lg"
         side="top"
         align="center"
         {...props}>
diff --git a/apps/web/pages/bookings/[status].tsx b/apps/web/pages/bookings/[status].tsx
index b804c58b..9f7833b5 100644
--- a/apps/web/pages/bookings/[status].tsx
+++ b/apps/web/pages/bookings/[status].tsx
@@ -75,6 +75,7 @@ export default function Bookings() {
                   </div>
                   <div className="p-4 text-center" ref={buttonInView.ref}>
                     <Button
+                      color="minimal"
                       loading={query.isFetchingNextPage}
                       disabled={!query.hasNextPage}
                       onClick={() => query.fetchNextPage()}>
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index ba010aee..2550cb20 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -232,7 +232,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                 )}
                 <MemoizedItem type={type} group={group} readOnly={readOnly} />
                 <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 sm:flex">
-                  <div className="flex justify-between rtl:space-x-reverse">
+                  <div className="flex justify-between space-x-2 rtl:space-x-reverse">
                     {type.users?.length > 1 && (
                       <AvatarGroup
                         border="border-2 border-white"
@@ -269,7 +269,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                     </Tooltip>
                     <Dropdown>
                       <DropdownMenuTrigger
-                        className="h-10 w-10 cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900"
+                        className="h-10 w-10 cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900 focus:border-gray-300"
                         data-testid={"event-type-options-" + type.id}>
                         <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
                       </DropdownMenuTrigger>
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index d3e54f5d..480828ac 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -398,3 +398,52 @@ hr {
 .react-date-picker__wrapper {
   border: none !important;
 }
+
+/* animations */
+.slideInBottom { 
+  animation-duration: .3s;
+  animation-fill-mode: both;
+  animation-name: slideInBottom 
+}
+
+@keyframes slideInBottom {
+    from {
+        opacity: 0;
+        transform: translateY(30%);
+    }
+    to { opacity: 1 }
+}
+
+/* animations */
+.slideInTop { 
+  animation-duration: .3s;
+  animation-fill-mode: both;
+  animation-name: slideInTop 
+}
+
+@keyframes slideInTop {
+    from {
+        opacity: 0;
+      transform: translateY(-20%);
+
+    }
+    to { 
+      opacity: 1;
+      transform: translateY(0%);
+
+    }
+}
+
+.fadeIn { 
+  animation-duration: .3s;
+  animation-fill-mode: both;
+  animation-name: fadeIn;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to { opacity: 1 }
+}
\ No newline at end of file
diff --git a/apps/website b/apps/website
index 300d090e..797f725d 160000
--- a/apps/website
+++ b/apps/website
@@ -1 +1 @@
-Subproject commit 300d090ebe5772b2b22432931ba1a837b4e5e759
+Subproject commit 797f725d982988ec7c2767ee2250b6fb83a82086
diff --git a/packages/ui/Dialog.tsx b/packages/ui/Dialog.tsx
index 277756d3..80d8fa3c 100644
--- a/packages/ui/Dialog.tsx
+++ b/packages/ui/Dialog.tsx
@@ -50,7 +50,7 @@ export function Dialog(props: DialogProps) {
 
   return (
     <DialogPrimitive.Root {...dialogProps}>
-      <DialogPrimitive.Overlay className="fixed inset-0 z-40 bg-gray-500 bg-opacity-75 transition-opacity" />
+      <DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-40 bg-black bg-opacity-50 transition-opacity" />
       {children}
     </DialogPrimitive.Root>
   );
@@ -60,10 +60,10 @@ type DialogContentProps = React.ComponentProps<typeof DialogPrimitive["Content"]
 export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
   ({ children, ...props }, forwardedRef) => (
     <DialogPrimitive.Portal>
-      <DialogPrimitive.Overlay className="fixed inset-0 z-40 bg-gray-500 bg-opacity-75 transition-opacity" />
+      <DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-40 bg-black bg-opacity-50 transition-opacity" />
       <DialogPrimitive.Content
         {...props}
-        className="fixed left-1/2 top-1/2 z-[9999999999] min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white p-6 text-left shadow-xl focus-visible:outline-none sm:w-full sm:max-w-[35rem] sm:align-middle"
+        className="fadeIn fixed left-1/2 top-1/2 z-[9999999999] min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white p-6 text-left shadow-xl focus-visible:outline-none sm:w-full sm:max-w-[35rem] sm:align-middle"
         ref={forwardedRef}>
         {children}
       </DialogPrimitive.Content>
diff --git a/packages/ui/Dropdown.tsx b/packages/ui/Dropdown.tsx
index bf19f029..dbab4ac9 100644
--- a/packages/ui/Dropdown.tsx
+++ b/packages/ui/Dropdown.tsx
@@ -29,7 +29,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
       <DropdownMenuPrimitive.Content
         portalled={props.portalled}
         {...props}
-        className={`w-50 z-10 mt-1 -ml-0 origin-top-right rounded-sm bg-white text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
+        className={`w-50 slideInTop relative z-10 mt-1 -ml-0 origin-top-right rounded-sm bg-white text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
         ref={forwardedRef}>
         {children}
       </DropdownMenuPrimitive.Content>