fix(dashboard): single brand color - electric blue only

DevanshuNEU · DevanshuNEU · commit 28cf75b1531e · 2026-01-08T14:47:40.000-05:00
- Removed ALL gradient colors from stats and repo cards
- Single accent: blue-500 (#2563EB) everywhere
- Clean, minimal design with proper contrast
- Featured card has solid blue accent line
- Consistent hover states with blue glow
- No more rainbow effect
diff --git a/frontend/src/components/RepoList.tsx b/frontend/src/components/RepoList.tsx
@@ -12,80 +12,79 @@ interface RepoListProps {
 
 const StatusBadge = ({ status }: { status: string }) => {
   const isIndexed = status === 'indexed'
-  const isPending = status === 'cloned' || status === 'cloning' || status === 'indexing'
+  
+  if (isIndexed) {
+    return (
+      <span className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full bg-blue-500/10 text-blue-400 border border-blue-500/20">
+        <span className="w-1.5 h-1.5 rounded-full bg-blue-400" />
+        Indexed
+      </span>
+    )
+  }
   
   return (
-    <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full border
-      ${isIndexed 
-        ? 'bg-blue-500/10 text-blue-400 border-blue-500/20' 
-        : isPending
-          ? 'bg-zinc-500/10 text-zinc-400 border-zinc-500/20'
-          : 'bg-red-500/10 text-red-400 border-red-500/20'
-      }`}
-    >
-      <span className={`w-1.5 h-1.5 rounded-full ${isIndexed ? 'bg-blue-400' : isPending ? 'bg-zinc-400 animate-pulse' : 'bg-red-400'}`} />
-      {isIndexed ? 'Indexed' : isPending ? 'Pending' : 'Error'}
+    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full bg-zinc-800 text-zinc-400 border border-zinc-700">
+      <span className="w-1.5 h-1.5 rounded-full bg-zinc-500 animate-pulse" />
+      Pending
     </span>
   )
 }
 
+// Featured card - tall, prominent
 const FeaturedRepoCard = ({ repo, totalFunctions, onSelect }: { 
   repo: Repository
   totalFunctions: number
   onSelect: () => void 
 }) => {
   const cardRef = useRef<HTMLButtonElement>(null)
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
-  const [isHovering, setIsHovering] = useState(false)
-  const percentage = totalFunctions > 0 ? Math.round((repo.file_count || 0) / totalFunctions * 100) : 0
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    if (!cardRef.current) return
-    const rect = cardRef.current.getBoundingClientRect()
-    setMousePosition({ x: e.clientX - rect.left, y: e.clientY - rect.top })
-  }
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
+  const [hovering, setHovering] = useState(false)
+  const pct = totalFunctions > 0 ? Math.round((repo.file_count || 0) / totalFunctions * 100) : 0
 
   return (
     <motion.button
       ref={cardRef}
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.4 }}
-      whileHover={{ y: -2 }}
+      whileHover={{ y: -3 }}
       onClick={onSelect}
-      onMouseMove={handleMouseMove}
-      onMouseEnter={() => setIsHovering(true)}
-      onMouseLeave={() => setIsHovering(false)}
-      className="group relative text-left rounded-2xl overflow-hidden w-full h-full
-        bg-[#111113] border border-white/[0.06] hover:border-blue-500/30
-        focus:outline-none focus:ring-2 focus:ring-blue-500/40 p-6"
+      onMouseMove={(e) => {
+        if (!cardRef.current) return
+        const rect = cardRef.current.getBoundingClientRect()
+        setMousePos({ x: e.clientX - rect.left, y: e.clientY - rect.top })
+      }}
+      onMouseEnter={() => setHovering(true)}
+      onMouseLeave={() => setHovering(false)}
+      className="group relative text-left rounded-2xl overflow-hidden w-full h-full min-h-[300px]
+        bg-[#111113] border border-white/[0.06] hover:border-blue-500/40
+        focus:outline-none focus:ring-2 focus:ring-blue-500/50 p-6 transition-colors"
     >
-      {/* Mouse glow */}
-      {isHovering && (
+      {/* Mouse glow - BLUE only */}
+      {hovering && (
         <div
-          className="pointer-events-none absolute inset-0 transition-opacity duration-300"
+          className="pointer-events-none absolute inset-0"
           style={{
-            background: `radial-gradient(400px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(59, 130, 246, 0.08), transparent 50%)`,
+            background: `radial-gradient(500px circle at ${mousePos.x}px ${mousePos.y}px, rgba(37, 99, 235, 0.1), transparent 50%)`,
           }}
         />
       )}
       
-      {/* Top gradient line */}
-      <div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-blue-500 to-violet-500" />
+      {/* Top accent - solid blue */}
+      <div className="absolute top-0 left-0 right-0 h-[2px] bg-blue-500" />
       
       <div className="relative flex flex-col h-full">
         {/* Header */}
         <div className="flex items-start justify-between mb-6">
-          <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500/10 to-violet-500/10 border border-white/[0.08] flex items-center justify-center">
-            <svg className="w-7 h-7 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <div className="w-14 h-14 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center">
+            <svg className="w-7 h-7 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
             </svg>
           </div>
           <StatusBadge status={repo.status} />
         </div>
 
         {/* Title */}
-        <h3 className="text-xl font-semibold text-white mb-1 group-hover:text-blue-400 transition-colors">
+        <h3 className="text-2xl font-semibold text-white mb-1 group-hover:text-blue-400 transition-colors">
           {repo.name}
         </h3>
         <p className="text-sm text-zinc-500 font-mono mb-auto">{repo.branch}</p>
@@ -94,22 +93,23 @@ const FeaturedRepoCard = ({ repo, totalFunctions, onSelect }: {
         <div className="pt-6 mt-6 border-t border-white/[0.06]">
           <div className="flex items-end justify-between mb-3">
             <span className="text-sm text-zinc-500">Functions indexed</span>
-            <span className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-violet-400">
+            <span className="text-4xl font-bold text-blue-500">
               {(repo.file_count || 0).toLocaleString()}
             </span>
           </div>
           
+          {/* Progress bar */}
           {totalFunctions > 0 && repo.file_count > 0 && (
             <div className="space-y-2">
-              <div className="h-1 bg-white/[0.06] rounded-full overflow-hidden">
+              <div className="h-1.5 bg-zinc-800 rounded-full overflow-hidden">
                 <motion.div 
                   initial={{ width: 0 }}
-                  animate={{ width: `${percentage}%` }}
-                  transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
-                  className="h-full bg-gradient-to-r from-blue-500 to-violet-500 rounded-full"
+                  animate={{ width: `${pct}%` }}
+                  transition={{ duration: 0.8, ease: "easeOut", delay: 0.3 }}
+                  className="h-full bg-blue-500 rounded-full"
                 />
               </div>
-              <p className="text-xs text-zinc-600">{percentage}% of total</p>
+              <p className="text-xs text-zinc-600">{pct}% of total indexed</p>
             </div>
           )}
         </div>
@@ -118,51 +118,50 @@ const FeaturedRepoCard = ({ repo, totalFunctions, onSelect }: {
   )
 }
 
+// Regular card - compact
 const RepoCard = ({ repo, index, onSelect }: { 
   repo: Repository
   index: number
   onSelect: () => void 
 }) => {
   const cardRef = useRef<HTMLButtonElement>(null)
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
-  const [isHovering, setIsHovering] = useState(false)
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    if (!cardRef.current) return
-    const rect = cardRef.current.getBoundingClientRect()
-    setMousePosition({ x: e.clientX - rect.left, y: e.clientY - rect.top })
-  }
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
+  const [hovering, setHovering] = useState(false)
 
   return (
     <motion.button
       ref={cardRef}
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
-      transition={{ delay: index * 0.1, duration: 0.4 }}
-      whileHover={{ y: -2 }}
+      transition={{ delay: index * 0.1 }}
+      whileHover={{ y: -3 }}
       onClick={onSelect}
-      onMouseMove={handleMouseMove}
-      onMouseEnter={() => setIsHovering(true)}
-      onMouseLeave={() => setIsHovering(false)}
-      className="group relative text-left rounded-2xl overflow-hidden w-full
-        bg-[#111113] border border-white/[0.06] hover:border-white/[0.12]
-        focus:outline-none focus:ring-2 focus:ring-blue-500/40 p-5"
+      onMouseMove={(e) => {
+        if (!cardRef.current) return
+        const rect = cardRef.current.getBoundingClientRect()
+        setMousePos({ x: e.clientX - rect.left, y: e.clientY - rect.top })
+      }}
+      onMouseEnter={() => setHovering(true)}
+      onMouseLeave={() => setHovering(false)}
+      className="group relative text-left rounded-2xl overflow-hidden w-full h-full
+        bg-[#111113] border border-white/[0.06] hover:border-white/[0.15]
+        focus:outline-none focus:ring-2 focus:ring-blue-500/50 p-5 transition-colors"
     >
       {/* Mouse glow */}
-      {isHovering && (
+      {hovering && (
         <div
-          className="pointer-events-none absolute inset-0 transition-opacity duration-300"
+          className="pointer-events-none absolute inset-0"
           style={{
-            background: `radial-gradient(250px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(59, 130, 246, 0.06), transparent 50%)`,
+            background: `radial-gradient(300px circle at ${mousePos.x}px ${mousePos.y}px, rgba(37, 99, 235, 0.08), transparent 50%)`,
           }}
         />
       )}
       
-      <div className="relative">
+      <div className="relative flex flex-col h-full">
         {/* Header */}
         <div className="flex items-start justify-between mb-4">
-          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500/10 to-violet-500/10 border border-white/[0.08] flex items-center justify-center">
-            <svg className="w-5 h-5 text-blue-400/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <div className="w-10 h-10 rounded-lg bg-zinc-800 border border-zinc-700 flex items-center justify-center">
+            <svg className="w-5 h-5 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
             </svg>
           </div>
@@ -173,13 +172,13 @@ const RepoCard = ({ repo, index, onSelect }: {
         <h3 className="font-semibold text-white mb-0.5 group-hover:text-blue-400 transition-colors">
           {repo.name}
         </h3>
-        <p className="text-xs text-zinc-500 font-mono mb-4">{repo.branch}</p>
+        <p className="text-xs text-zinc-500 font-mono mb-auto">{repo.branch}</p>
 
         {/* Stats */}
-        <div className="pt-3 border-t border-white/[0.04]">
+        <div className="pt-4 mt-4 border-t border-white/[0.04]">
           <div className="flex items-center justify-between">
             <span className="text-xs text-zinc-500">Functions</span>
-            <span className="text-lg font-semibold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-violet-400">
+            <span className="text-xl font-bold text-blue-500">
               {(repo.file_count || 0).toLocaleString()}
             </span>
           </div>
@@ -199,8 +198,10 @@ export function RepoList({ repos, selectedRepo, onSelect, loading }: RepoListPro
         animate={{ opacity: 1 }}
         className="bg-[#111113] border border-white/[0.06] rounded-2xl p-16 text-center"
       >
-        <div className="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500/10 to-violet-500/10 border border-white/[0.06] flex items-center justify-center">
-          <span className="text-2xl">📦</span>
+        <div className="w-14 h-14 mx-auto mb-4 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center">
+          <svg className="w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 4v16m8-8H4" />
+          </svg>
         </div>
         <h3 className="text-lg font-semibold mb-2 text-white">No repositories yet</h3>
         <p className="text-sm text-zinc-500 max-w-xs mx-auto">
@@ -210,7 +211,7 @@ export function RepoList({ repos, selectedRepo, onSelect, loading }: RepoListPro
     )
   }
 
-  // Sort: indexed first, then by function count
+  // Sort: indexed first, then by function count desc
   const sortedRepos = useMemo(() => {
     return [...repos].sort((a, b) => {
       if (a.status === 'indexed' && b.status !== 'indexed') return -1
@@ -223,10 +224,10 @@ export function RepoList({ repos, selectedRepo, onSelect, loading }: RepoListPro
   const [featured, ...rest] = sortedRepos
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
-      {/* Featured - spans 2 rows */}
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 auto-rows-fr">
+      {/* Featured - spans 2 rows on desktop */}
       {featured && (
-        <div className="lg:row-span-2 min-h-[320px]">
+        <div className="lg:row-span-2">
           <FeaturedRepoCard 
             repo={featured} 
             totalFunctions={totalFunctions}
@@ -235,7 +236,7 @@ export function RepoList({ repos, selectedRepo, onSelect, loading }: RepoListPro
         </div>
       )}
       
-      {/* Rest */}
+      {/* Other repos */}
       {rest.map((repo, index) => (
         <RepoCard 
           key={repo.id}
diff --git a/frontend/src/components/dashboard/DashboardStats.tsx b/frontend/src/components/dashboard/DashboardStats.tsx
@@ -29,51 +29,54 @@ export function DashboardStats({ repos }: DashboardStatsProps) {
   const totalRepos = repos.length
   const indexedRepos = repos.filter(r => r.status === 'indexed').length
   const totalFunctions = repos.reduce((acc, r) => acc + (r.file_count || 0), 0)
-  const indexingRepos = repos.filter(r => r.status === 'indexing' || r.status === 'cloning').length
+  const indexingCount = repos.filter(r => r.status === 'indexing' || r.status === 'cloning').length
 
   const animatedTotal = useAnimatedCounter(totalRepos)
   const animatedIndexed = useAnimatedCounter(indexedRepos)
   const animatedFunctions = useAnimatedCounter(totalFunctions)
 
-  const stats = [
-    { label: 'Total Repositories', value: animatedTotal, suffix: '' },
-    { label: 'Indexed', value: animatedIndexed, suffix: `/${totalRepos}`, hasIndicator: indexingRepos > 0, indicatorText: `${indexingRepos} indexing...` },
-    { label: 'Functions Indexed', value: animatedFunctions, suffix: '' },
-  ]
-
   return (
     <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
-      {stats.map((stat, index) => (
-        <motion.div
-          key={stat.label}
-          initial={{ opacity: 0, y: 16 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: index * 0.1, duration: 0.4 }}
-          className="relative overflow-hidden rounded-2xl bg-[#111113] border border-white/[0.06] p-6"
-        >
-          {/* Subtle glow - same blue-violet for all */}
-          <div className="absolute -top-20 -right-20 w-40 h-40 bg-gradient-to-br from-blue-500/20 to-violet-500/20 blur-3xl" />
-          
-          <div className="relative">
-            <p className="text-sm text-zinc-500 mb-2">{stat.label}</p>
-            <div className="flex items-baseline gap-1">
-              <span className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-violet-400">
-                {stat.value.toLocaleString()}
-              </span>
-              {stat.suffix && (
-                <span className="text-xl text-zinc-600">{stat.suffix}</span>
-              )}
-            </div>
-            
-            {stat.hasIndicator && (
-              <div className="mt-3 flex items-center gap-2 text-xs text-blue-400">
-                <span className="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse" />
-                {stat.indicatorText}
-              </div>
-            )}
+      {/* Total Repos */}
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="relative overflow-hidden rounded-2xl bg-[#111113] border border-white/[0.06] p-6"
+      >
+        <p className="text-sm text-zinc-500 mb-2">Total Repositories</p>
+        <p className="text-4xl font-bold text-blue-500">{animatedTotal}</p>
+      </motion.div>
+
+      {/* Indexed */}
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.05 }}
+        className="relative overflow-hidden rounded-2xl bg-[#111113] border border-white/[0.06] p-6"
+      >
+        <p className="text-sm text-zinc-500 mb-2">Indexed</p>
+        <div className="flex items-baseline gap-1">
+          <span className="text-4xl font-bold text-blue-500">{animatedIndexed}</span>
+          <span className="text-xl text-zinc-600">/{totalRepos}</span>
+        </div>
+        {indexingCount > 0 && (
+          <div className="mt-3 flex items-center gap-2 text-xs text-blue-400">
+            <span className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse" />
+            {indexingCount} indexing...
           </div>
-        </motion.div>
-      ))}
+        )}
+      </motion.div>
+
+      {/* Functions */}
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+        className="relative overflow-hidden rounded-2xl bg-[#111113] border border-white/[0.06] p-6"
+      >
+        <p className="text-sm text-zinc-500 mb-2">Functions Indexed</p>
+        <p className="text-4xl font-bold text-blue-500">{animatedFunctions.toLocaleString()}</p>
+      </motion.div>
     </div>
   )
 }
