Changed colour of button and made all same

components/dashboard/filter-selector.tsx

@@ -39,7 +39,7 @@ export function FilterSelector({
         <div className="flex flex-wrap items-center gap-3 p-3 rounded-xl bg-card border border-[var(--border)] shadow-sm">
             {/* Project Dropdown */}
             <div className="flex items-center gap-2">
-                <div className="p-1.5 rounded-lg bg-indigo-100 dark:bg-indigo-900/50">
+                <div className="p-1.5 rounded-lg bg-blue-100 dark:bg-blue-900/50">
                     <FolderOpen className="h-4 w-4 text-indigo-500" />
                 </div>
                 <Select

components/data-table.tsx

@@ -36,7 +36,7 @@ export function DataTable<T extends Record<string, any>>({
                 </div>
                 <Button
                     onClick={onAddNew}
-                    className="bg-blue-600 hover:bg-blue-800 text-white shadow-md transition-all duration-300 hover:scale-105 active:scale-95 border-none h-8 px-4 text-xs font-semibold"
+                    className="bg-blue-600 hover:bg-blue-700 text-white shadow-lg shadow-blue-500/25 transition-all duration-300 hover:scale-105 active:scale-95 border-none h-8 px-4 text-xs font-semibold"
                 >
                     <Plus className="h-3.5 w-3.5 mr-1.5 stroke-[3px]" />
                     {addButtonText}

components/summary-section.tsx

@@ -2,7 +2,7 @@
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Target, AlertTriangle, Film, Activity, Gauge, Monitor } from "lucide-react"
-import type { DetectionData } from "@/app/page"
+import type { DetectionData } from "@/lib/types"
 
 type SummarySectionProps = {
   data: DetectionData

components/upload-section.tsx

@@ -8,7 +8,7 @@ import { Label } from "@/components/ui/label"
 import { Progress } from "@/components/ui/progress"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Upload, Loader2, AlertCircle } from "lucide-react"
-import type { DetectionData, DetectionType } from "@/app/page"
+import type { DetectionData, DetectionType } from "@/lib/types"
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000/api/v1"
 const WS_URL = process.env.NEXT_PUBLIC_WS_URL || "ws://127.0.0.1:8000/api/v1"
@@ -57,14 +57,14 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
         setProgress(progressValue)
 
         let message = data.message || "Processing..."
-        
+
         // Handle both pothole and signboard progress messages
         if (data.unique_potholes !== undefined) {
           message += ` | Unique: ${data.unique_potholes} | Total: ${data.total_detections || 0}`
         } else if (data.unique_signboards !== undefined) {
           message += ` | Unique: ${data.unique_signboards} | Total: ${data.total_detections || 0}`
         }
-        
+
         setStatusMessage(message)
       }
 
@@ -135,7 +135,7 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
     formData.append("file", file)
     formData.append("detection_type", detectionType)
     formData.append("speed_kmh", speed.toString())
-    
+
     // Add JSON file if provided
     if (jsonFile) {
       formData.append("json_file", jsonFile)
@@ -153,7 +153,7 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
       console.log("  - file:", file.name)
       console.log("  - detection_type:", detectionType)
       console.log("  - speed_kmh:", speed)
-      
+
       const response = await fetch(`${API_URL}/upload`, {
         method: "POST",
         headers: {
@@ -183,7 +183,7 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
       console.error("[Upload] Upload error:", error)
 
       let errorMessage = "Upload failed"
-      
+
       if (error instanceof TypeError && error.message === "Failed to fetch") {
         errorMessage = "Cannot connect to server. Please check:\n• Backend is running on " + API_URL + "\n• CORS is configured properly\n• No firewall blocking the connection"
       } else if (error instanceof Error) {
@@ -305,10 +305,11 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
         )}
 
         {/* Upload Button */}
-        <Button 
-          onClick={handleUpload} 
-          disabled={!file || uploading} 
-          className="w-full transition-all" 
+        <Button
+          onClick={handleUpload}
+          disabled={!file || uploading}
+          className="w-full transition-all bg-blue-600 hover:bg-blue-700 text-white shadow-lg shadow-blue-500/25"
+
           size="lg"
         >
           {uploading ? (

components/video-player-section.tsx

@@ -296,7 +296,8 @@ function DetailedSummarySection({
               {allDetections.map(({ detection, locationName, packageName }, idx) => (
                 <div
                   key={`${detection.id}-${idx}`}
-                  className="text-xs p-2 bg-card rounded border-l-2 border-blue-500"
+                  className="text-xs p-2 bg-white dark:bg-gray-900 rounded shadow-sm border border-gray-100 dark:border-gray-800"
+
                 >
                   <div className="flex items-center justify-between mb-1">
                     <span className="font-semibold">
@@ -413,8 +414,8 @@ function SummarySection({ data, show, detectionType }: { data: DetectionData; sh
                 className="flex flex-col items-center justify-center p-3 rounded-xl transition-all hover:scale-105 animate-in fade-in slide-in-from-bottom duration-500 border border-gray-100 dark:border-gray-800 bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-800 shadow-sm hover:shadow-md"
                 style={{ animationDelay: `${index * 100}ms` }}
               >
-                <div className={`${stat.bgColor} p-2.5 rounded-lg mb-2 transition-all shadow-inner`}>
-                  <Icon className={`h-5 w-5 ${stat.color}`} />
+                <div className={`${stat.bgColor} p-3 rounded-lg mb-2 transition-all shadow-inner`}>
+                  <Icon className={`h-6 w-6 ${stat.color}`} />
                 </div>
                 <div className={`text-xl font-bold ${stat.color} mb-1`}>{stat.value}</div>
                 <div className="text-[10px] text-muted-foreground text-center leading-tight font-medium uppercase tracking-wide">{stat.label}</div>
@@ -940,8 +941,8 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
                       <div
                         key={`${log.frame}-${index}`}
                         onClick={() => seekToFrame(log.frame)}
-                        className={`text-xs p-3 bg-card rounded-md border-l-2 cursor-pointer hover:bg-accent/50 transition-colors ${isPothole ? "border-red-500" : "border-blue-500"
-                          }`}
+                        className="text-xs p-3 bg-white dark:bg-gray-900 rounded-md cursor-pointer hover:bg-accent/50 transition-colors shadow-sm"
+
                       >
                         <div className="flex items-center justify-between mb-2">
                           <span className="font-semibold text-foreground">Frame: {log.frame}</span>