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/CloseButton.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+
+interface CloseButtonProps {
+  onClick?: () => void;
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+/**
+ * CloseButton component
+ *
+ * A button with an X icon used for closing dialogs, modals, etc.
+ * The button has a transparent background and only shows a background on hover.
+ */
+export function CloseButton({ onClick, className, size = 'md' }: CloseButtonProps) {
+  const sizeClasses = {
+    sm: 'p-1',
+    md: 'p-2',
+    lg: 'p-3',
+  };
+
+  const iconSizeClasses = {
+    sm: 'w-3 h-3',
+    md: 'w-4 h-4',
+    lg: 'w-5 h-5',
+  };
+
+  return (
+    <motion.button
+      type="button"
+      onClick={onClick}
+      className={classNames(
+        'text-bolt-elements-textTertiary hover:text-bolt-elements-textSecondary dark:text-bolt-elements-textTertiary-dark dark:hover:text-bolt-elements-textSecondary-dark',
+        'rounded-lg hover:bg-bolt-elements-background-depth-2 dark:hover:bg-bolt-elements-background-depth-3',
+        'transition-colors duration-200',
+        'focus:outline-none focus:ring-2 focus:ring-purple-500/50',
+        sizeClasses[size],
+        className,
+      )}
+      whileHover={{ scale: 1.05 }}
+      whileTap={{ scale: 0.95 }}
+      aria-label="Close"
+    >
+      <div className={classNames('i-ph:x', iconSizeClasses[size])} />
+    </motion.button>
+  );
+}