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

app/components/@settings/tabs/connections/components/PushToGitHubDialog.tsx

@@ -13,7 +13,7 @@ import type { FileMap, File } from '~/lib/stores/files';
 import { Octokit } from '@octokit/rest';
 
 // Import UI components
-import { Badge, EmptyState, StatusIndicator, SearchInput } from '~/components/ui';
+import { Badge, EmptyState, StatusIndicator, SearchInput, CloseButton } from '~/components/ui';
 
 interface PushToGitHubDialogProps {
   isOpen: boolean;
@@ -303,11 +303,8 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
                         </p>
                       </div>
                     </div>
-                    <Dialog.Close
-                      onClick={handleClose}
-                      className="p-2 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"
-                    >
-                      <div className="i-ph:x w-5 h-5" />
+                    <Dialog.Close asChild>
+                      <CloseButton onClick={handleClose} size="md" />
                     </Dialog.Close>
                   </div>
 
@@ -414,11 +411,8 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
                 aria-describedby="connection-required-description"
               >
                 <div className="relative text-center space-y-4">
-                  <Dialog.Close
-                    className="absolute right-0 top-0 p-2 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"
-                    onClick={handleClose}
-                  >
-                    <div className="i-ph:x w-5 h-5" />
+                  <Dialog.Close asChild>
+                    <CloseButton onClick={handleClose} className="absolute right-0 top-0" size="md" />
                   </Dialog.Close>
                   <motion.div
                     initial={{ scale: 0.8 }}
@@ -503,11 +497,8 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
                       Push your code to a new or existing GitHub repository
                     </p>
                   </div>
-                  <Dialog.Close
-                    className="ml-auto p-2 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"
-                    onClick={handleClose}
-                  >
-                    <div className="i-ph:x w-5 h-5" />
+                  <Dialog.Close asChild>
+                    <CloseButton onClick={handleClose} className="ml-auto" size="md" />
                   </Dialog.Close>
                 </div>
 

app/components/@settings/tabs/connections/components/RepositoryDialogContext.tsx

@@ -6,7 +6,9 @@ export interface RepositoryDialogContextType {
 }
 
 // Default context value with a no-op function
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 export const RepositoryDialogContext = createContext<RepositoryDialogContextType>({
-  setShowAuthDialog: () => {},
+  // This is intentionally empty as it will be overridden by the provider
+  setShowAuthDialog: () => {
+    // No operation
+  },
 });

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

app/components/ui/index.ts

@@ -21,6 +21,7 @@ export * from './LoadingOverlay';
 
 // New components
 export * from './Breadcrumbs';
+export * from './CloseButton';
 export * from './CodeBlock';
 export * from './EmptyState';
 export * from './FileIcon';