consistent and distinct colors for status

Author: arunavo4

src/components/repositories/Repository.tsx

@@ -9,7 +9,7 @@ import {
   type RepositoryApiResponse,
   type RepoStatus,
 } from "@/types/Repository";
-import { apiRequest, showErrorToast } from "@/lib/utils";
+import { apiRequest, showErrorToast, getStatusColor } from "@/lib/utils";
 import {
   Select,
   SelectContent,
@@ -707,12 +707,7 @@ export default function Repository() {
                         <SelectItem key={status} value={status}>
                           <span className="flex items-center gap-2">
                             {status !== "all" && (
-                              <span className={`h-2 w-2 rounded-full ${
-                                status === "synced" ? "bg-green-500" :
-                                status === "failed" ? "bg-red-500" :
-                                status === "syncing" ? "bg-blue-500" :
-                                "bg-yellow-500"
-                              }`} />
+                              <span className={`h-2 w-2 rounded-full ${getStatusColor(status)}`} />
                             )}
                             {status === "all"
                               ? "All statuses"
@@ -814,12 +809,7 @@ export default function Repository() {
                   <SelectItem key={status} value={status}>
                     <span className="flex items-center gap-2">
                       {status !== "all" && (
-                        <span className={`h-2 w-2 rounded-full ${
-                          status === "synced" ? "bg-green-500" :
-                          status === "failed" ? "bg-red-500" :
-                          status === "syncing" ? "bg-blue-500" :
-                          "bg-yellow-500"
-                        }`} />
+                        <span className={`h-2 w-2 rounded-full ${getStatusColor(status)}`} />
                       )}
                       {status === "all"
                         ? "All statuses"

src/lib/utils.ts

@@ -197,17 +197,17 @@ export async function apiRequest<T>(
 export const getStatusColor = (status: string): string => {
   switch (status) {
     case "imported":
-      return "bg-blue-500"; // Info/primary-like
+      return "bg-yellow-500"; // Ready to mirror
     case "mirroring":
-      return "bg-yellow-400"; // In progress
+      return "bg-amber-500"; // In progress
     case "mirrored":
-      return "bg-emerald-500"; // Success
+      return "bg-green-500"; // Successfully mirrored
     case "failed":
-      return "bg-rose-500"; // Error
+      return "bg-red-500"; // Error
     case "syncing":
-      return "bg-indigo-500"; // Sync in progress
+      return "bg-blue-500"; // Sync in progress
     case "synced":
-      return "bg-teal-500"; // Sync complete
+      return "bg-emerald-500"; // Successfully synced
     case "skipped":
       return "bg-gray-500"; // Skipped
     case "deleting":