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

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

@@ -10,21 +10,9 @@ interface RepositoryCardProps {
 import { useMemo } from 'react';
 
 export function RepositoryCard({ repo, onSelect }: RepositoryCardProps) {
-  // Calculate a gradient color based on the repository name for visual variety
-  const getGradientColor = (name: string) => {
-    const colors = [
-      'from-purple-500/10 to-blue-500/5',
-      'from-blue-500/10 to-cyan-500/5',
-      'from-cyan-500/10 to-green-500/5',
-      'from-green-500/10 to-yellow-500/5',
-      'from-yellow-500/10 to-orange-500/5',
-      'from-orange-500/10 to-red-500/5',
-      'from-red-500/10 to-pink-500/5',
-      'from-pink-500/10 to-purple-500/5',
-    ];
-    const index = name.length % colors.length;
-
-    return colors[index];
+  // Use a consistent styling for all repository cards
+  const getCardStyle = () => {
+    return 'from-bolt-elements-background-depth-1 to-bolt-elements-background-depth-1 dark:from-bolt-elements-background-depth-2-dark dark:to-bolt-elements-background-depth-2-dark';
   };
 
   // Format the date in a more readable format
@@ -57,13 +45,13 @@ export function RepositoryCard({ repo, onSelect }: RepositoryCardProps) {
     });
   };
 
-  const gradient = useMemo(() => getGradientColor(repo.name), [repo.name]);
+  const cardStyle = useMemo(() => getCardStyle(), []);
 
   // const formattedDate = useMemo(() => formatDate(repo.updated_at), [repo.updated_at]);
 
   return (
     <motion.div
-      className={`p-5 rounded-xl bg-gradient-to-br ${gradient} border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark hover:border-purple-500/40 transition-all duration-300 shadow-sm hover:shadow-md`}
+      className={`p-5 rounded-xl bg-gradient-to-br ${cardStyle} border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark hover:border-purple-500/40 transition-all duration-300 shadow-sm hover:shadow-md`}
       whileHover={{
         scale: 1.02,
         y: -2,

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

@@ -8,7 +8,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import Cookies from 'js-cookie';
 
 // Import UI components
-import { Input, SearchInput, Badge, FilterChip, Tabs, TabsList, TabsTrigger } from '~/components/ui';
+import { Input, SearchInput, Badge, FilterChip } from '~/components/ui';
 
 // Import the components we've extracted
 import { RepositoryList } from './RepositoryList';
@@ -597,19 +597,49 @@ export function RepositorySelectionDialog({ isOpen, onClose, onSelect }: Reposit
             {/* Content */}
             <div className="p-5">
               {/* Tabs */}
-              <div className="flex gap-2 mb-6">
-                <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as 'my-repos' | 'search' | 'url')}>
-                  <TabsList>
-                    <TabsTrigger value="my-repos">My Repos</TabsTrigger>
-                    <TabsTrigger value="search">Search</TabsTrigger>
-                    <TabsTrigger value="url">From URL</TabsTrigger>
-                  </TabsList>
-                </Tabs>
+              <div className="mb-6">
+                <div className="bg-[#f0f0f0] dark:bg-[#1e1e1e] rounded-lg overflow-hidden border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark">
+                  <div className="flex">
+                    <button
+                      onClick={() => setActiveTab('my-repos')}
+                      className={classNames(
+                        'flex-1 py-3 px-4 text-center text-sm font-medium transition-colors',
+                        activeTab === 'my-repos'
+                          ? 'bg-[#e6e6e6] dark:bg-[#2a2a2a] text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark'
+                          : 'bg-[#f0f0f0] dark:bg-[#1e1e1e] text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark hover:bg-[#e6e6e6] dark:hover:bg-[#2a2a2a]/50',
+                      )}
+                    >
+                      My Repos
+                    </button>
+                    <button
+                      onClick={() => setActiveTab('search')}
+                      className={classNames(
+                        'flex-1 py-3 px-4 text-center text-sm font-medium transition-colors',
+                        activeTab === 'search'
+                          ? 'bg-[#e6e6e6] dark:bg-[#2a2a2a] text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark'
+                          : 'bg-[#f0f0f0] dark:bg-[#1e1e1e] text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark hover:bg-[#e6e6e6] dark:hover:bg-[#2a2a2a]/50',
+                      )}
+                    >
+                      Search
+                    </button>
+                    <button
+                      onClick={() => setActiveTab('url')}
+                      className={classNames(
+                        'flex-1 py-3 px-4 text-center text-sm font-medium transition-colors',
+                        activeTab === 'url'
+                          ? 'bg-[#e6e6e6] dark:bg-[#2a2a2a] text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark'
+                          : 'bg-[#f0f0f0] dark:bg-[#1e1e1e] text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark hover:bg-[#e6e6e6] dark:hover:bg-[#2a2a2a]/50',
+                      )}
+                    >
+                      From URL
+                    </button>
+                  </div>
+                </div>
               </div>
 
               {activeTab === 'url' ? (
                 <div className="space-y-5">
-                  <div className="bg-gradient-to-br from-purple-500/5 to-blue-500/5 p-5 rounded-xl border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark">
+                  <div className="bg-gradient-to-br from-bolt-elements-background-depth-1 to-bolt-elements-background-depth-1 dark:from-bolt-elements-background-depth-2-dark dark:to-bolt-elements-background-depth-2-dark p-5 rounded-xl border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark">
                     <h3 className="text-base font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark mb-3 flex items-center gap-2">
                       <span className="i-ph:link-simple w-4 h-4 text-purple-500" />
                       Repository URL

app/components/ui/Tabs.tsx

@@ -11,7 +11,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={classNames(
-      'inline-flex h-10 items-center justify-center rounded-md bg-bolt-elements-background p-1 text-bolt-elements-textSecondary',
+      'inline-flex h-10 items-center justify-center rounded-md bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-3-dark p-1 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark',
       className,
     )}
     {...props}
@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={classNames(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-bolt-elements-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bolt-elements-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-bolt-elements-background data-[state=active]:text-bolt-elements-textPrimary data-[state=active]:shadow-sm',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-bolt-elements-background dark:ring-offset-bolt-elements-background-dark transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bolt-elements-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-bolt-elements-background-depth-0 dark:data-[state=active]:bg-bolt-elements-background-depth-2-dark data-[state=active]:text-bolt-elements-textPrimary dark:data-[state=active]:text-bolt-elements-textPrimary-dark data-[state=active]:shadow-sm',
       className,
     )}
     {...props}