From f0febbcd4007218acf4eb335bca1ed576104eb2d Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Thu, 21 Nov 2024 21:40:07 -0300
Subject: [PATCH] fix: changed tooltip position on playground to improve
 visibility, fixed color of theme switcher on light mode (#4766)

* Implemented avoidCollisions on ShadTooltip

* Added type for avoidCollisions

* Changed tooltip position for buttons on IOModal

* Fix color of light theme switcher
---
 .../appHeaderComponent/components/ThemeButtons/index.tsx   | 2 +-
 src/frontend/src/components/shadTooltipComponent/index.tsx | 3 ++-
 src/frontend/src/components/ui/dialog.tsx                  | 7 ++++++-
 src/frontend/src/modals/IOModal/newModal.tsx               | 6 +++++-
 src/frontend/src/types/components/index.ts                 | 1 +
 5 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/components/appHeaderComponent/components/ThemeButtons/index.tsx b/src/frontend/src/components/appHeaderComponent/components/ThemeButtons/index.tsx
index 4c67813e3..35ae89d60 100644
--- a/src/frontend/src/components/appHeaderComponent/components/ThemeButtons/index.tsx
+++ b/src/frontend/src/components/appHeaderComponent/components/ThemeButtons/index.tsx
@@ -54,7 +54,7 @@ export const ThemeButtons = () => {
         className={`relative z-10 inline-flex items-center rounded-full px-1 ${
           selectedTheme === "light"
             ? "text-foreground"
-            : "text-foreground hover:text-background dark:hover:bg-amber-400"
+            : "text-foreground hover:bg-amber-400 hover:text-background"
         }`}
         onClick={() => handleThemeChange("light")}
       >
diff --git a/src/frontend/src/components/shadTooltipComponent/index.tsx b/src/frontend/src/components/shadTooltipComponent/index.tsx
index d67b63e00..8fb831d5f 100644
--- a/src/frontend/src/components/shadTooltipComponent/index.tsx
+++ b/src/frontend/src/components/shadTooltipComponent/index.tsx
@@ -13,6 +13,7 @@ const ShadTooltip: React.FC<ShadToolTipType> = ({
   open,
   align,
   setOpen,
+  avoidCollisions = false,
 }) => {
   if (!content) {
     return <>{children}</>;
@@ -32,7 +33,7 @@ const ShadTooltip: React.FC<ShadToolTipType> = ({
           styleClasses,
         )}
         side={side}
-        avoidCollisions={false}
+        avoidCollisions={avoidCollisions}
         align={align}
         sticky="always"
       >
diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx
index b29c4fae4..c823595fa 100644
--- a/src/frontend/src/components/ui/dialog.tsx
+++ b/src/frontend/src/components/ui/dialog.tsx
@@ -50,7 +50,12 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <ShadTooltip styleClasses="z-50" side="left" content="Close">
+      <ShadTooltip
+        styleClasses="z-50"
+        content="Close"
+        side="bottom"
+        avoidCollisions
+      >
         <DialogPrimitive.Close className="absolute right-2 top-2 flex h-8 w-8 items-center justify-center rounded-sm ring-offset-background transition-opacity hover:bg-secondary-hover hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
           <Cross2Icon className="h-[18px] w-[18px]" />
           <span className="sr-only">Close</span>
diff --git a/src/frontend/src/modals/IOModal/newModal.tsx b/src/frontend/src/modals/IOModal/newModal.tsx
index a72a78caa..818553390 100644
--- a/src/frontend/src/modals/IOModal/newModal.tsx
+++ b/src/frontend/src/modals/IOModal/newModal.tsx
@@ -443,7 +443,11 @@ export default function IOModal({
                     "absolute right-12 top-2 flex h-8 items-center justify-center rounded-sm ring-offset-background transition-opacity focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
                   )}
                 >
-                  <ShadTooltip styleClasses="z-50" content="New Chat">
+                  <ShadTooltip
+                    side="bottom"
+                    styleClasses="z-50"
+                    content="New Chat"
+                  >
                     <Button
                       className="mr-2 h-[32px] w-[32px] hover:bg-secondary-hover"
                       variant="ghost"
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index affe79719..2f5ea77c7 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -253,6 +253,7 @@ export type ShadToolTipType = {
   children?: ReactElement;
   delayDuration?: number;
   styleClasses?: string;
+  avoidCollisions?: boolean;
 };
 
 export type TextHighlightType = {