consistent and distinct colors for status

This commit is contained in:
Arunavo Ray
2025-07-18 08:37:00 +05:30
parent 7bd862606b
commit d388f2e691
2 changed files with 9 additions and 19 deletions

View File

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

View File

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