added animations for dialog and tooltip (#2648)

* added animations for dialog and tooltip

* Update .env.example

apps/api

@@ -1 +1 @@
-Subproject commit 9239b27216d04f60870186b69c5e1bb1642d5d44
+Subproject commit 2449d90bcbbf4c0a379f4d766aee299caad488a2

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}>

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()}>

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>

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 }
+}

apps/website

@@ -1 +1 @@
-Subproject commit 300d090ebe5772b2b22432931ba1a837b4e5e759
+Subproject commit 797f725d982988ec7c2767ee2250b6fb83a82086

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>

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>