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

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

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

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>

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"

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 = {