feat: github fix and ui improvements (#1685)

* feat: Add reusable UI components and fix GitHub repository display

* style: Fix linting issues in UI components

* fix: Add close icon to GitHub Connection Required dialog

* fix: Add CloseButton component to fix white background issue in dialog close icons

* Fix close button styling in dialog components to address ghost white issue in dark mode

* fix: update icon color to tertiary for consistency

The icon color was changed from `text-bolt-elements-icon-info` to `text-bolt-elements-icon-tertiary`

* fix: improve repository selection dialog tab styling for dark mode

- Update tab menu styling to prevent white background in dark mode
- Use explicit color values for better dark/light mode compatibility
- Improve hover and active states for better visual hierarchy
- Remove unused Tabs imports

---------

Co-authored-by: KevIsDev <zennerd404@gmail.com>

app/components/ui/Tooltip.tsx

@@ -1,7 +1,9 @@
-import * as Tooltip from '@radix-ui/react-tooltip';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { forwardRef, type ForwardedRef, type ReactElement } from 'react';
+import { classNames } from '~/utils/classNames';
 
-interface TooltipProps {
+// Original WithTooltip component
+interface WithTooltipProps {
   tooltip: React.ReactNode;
   children: ReactElement;
   sideOffset?: number;
@@ -25,55 +27,96 @@ const WithTooltip = forwardRef(
       position = 'top',
       maxWidth = 250,
       delay = 0,
-    }: TooltipProps,
+    }: WithTooltipProps,
     _ref: ForwardedRef<HTMLElement>,
   ) => {
     return (
-      <Tooltip.Root delayDuration={delay}>
-        <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
-        <Tooltip.Portal>
-          <Tooltip.Content
-            side={position}
-            className={`
-              z-[2000]
-              px-2.5
-              py-1.5
-              max-h-[300px]
-              select-none
-              rounded-md
-              bg-bolt-elements-background-depth-3
-              text-bolt-elements-textPrimary
-              text-sm
-              leading-tight
-              shadow-lg
-              animate-in
-              fade-in-0
-              zoom-in-95
-              data-[state=closed]:animate-out
-              data-[state=closed]:fade-out-0
-              data-[state=closed]:zoom-out-95
-              ${className}
-            `}
-            sideOffset={sideOffset}
-            style={{
-              maxWidth,
-              ...tooltipStyle,
-            }}
-          >
-            <div className="break-words">{tooltip}</div>
-            <Tooltip.Arrow
+      <TooltipPrimitive.Provider>
+        <TooltipPrimitive.Root delayDuration={delay}>
+          <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+          <TooltipPrimitive.Portal>
+            <TooltipPrimitive.Content
+              side={position}
               className={`
-                fill-bolt-elements-background-depth-3
-                ${arrowClassName}
+                z-[2000]
+                px-2.5
+                py-1.5
+                max-h-[300px]
+                select-none
+                rounded-md
+                bg-bolt-elements-background-depth-3
+                text-bolt-elements-textPrimary
+                text-sm
+                leading-tight
+                shadow-lg
+                animate-in
+                fade-in-0
+                zoom-in-95
+                data-[state=closed]:animate-out
+                data-[state=closed]:fade-out-0
+                data-[state=closed]:zoom-out-95
+                ${className}
               `}
-              width={12}
-              height={6}
-            />
-          </Tooltip.Content>
-        </Tooltip.Portal>
-      </Tooltip.Root>
+              sideOffset={sideOffset}
+              style={{
+                maxWidth,
+                ...tooltipStyle,
+              }}
+            >
+              <div className="break-words">{tooltip}</div>
+              <TooltipPrimitive.Arrow
+                className={`
+                  fill-bolt-elements-background-depth-3
+                  ${arrowClassName}
+                `}
+                width={12}
+                height={6}
+              />
+            </TooltipPrimitive.Content>
+          </TooltipPrimitive.Portal>
+        </TooltipPrimitive.Root>
+      </TooltipPrimitive.Provider>
     );
   },
 );
 
+// New Tooltip component with simpler API
+interface TooltipProps {
+  content: React.ReactNode;
+  children: React.ReactNode;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  align?: 'start' | 'center' | 'end';
+  delayDuration?: number;
+  className?: string;
+}
+
+export function Tooltip({
+  content,
+  children,
+  side = 'top',
+  align = 'center',
+  delayDuration = 300,
+  className,
+}: TooltipProps) {
+  return (
+    <TooltipPrimitive.Provider>
+      <TooltipPrimitive.Root delayDuration={delayDuration}>
+        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Content
+          side={side}
+          align={align}
+          className={classNames(
+            'z-50 overflow-hidden rounded-md bg-bolt-elements-background-depth-3 dark:bg-bolt-elements-background-depth-4 px-3 py-1.5 text-xs text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+            className,
+          )}
+          sideOffset={5}
+        >
+          {content}
+          <TooltipPrimitive.Arrow className="fill-bolt-elements-background-depth-3 dark:fill-bolt-elements-background-depth-4" />
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  );
+}
+
 export default WithTooltip;