Fuck with the colors a bit

This commit is contained in:
2025-07-10 01:14:12 +02:00
parent 40c91f9f2b
commit 929f7d170b
2 changed files with 33 additions and 16 deletions

View File

@@ -2,7 +2,7 @@
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { IndJob } from '@/lib/types';
import { getNextStatus, getPreviousStatus, getStatusColor } from '@/utils/jobStatusUtils';
import { getNextStatus, getPreviousStatus, getStatusBackgroundColor, getStatusBackgroundColorBright, getStatusColor } from '@/utils/jobStatusUtils';
import { useJobs } from '@/hooks/useDataService';
import { useToast } from '@/hooks/use-toast';
@@ -74,7 +74,7 @@ const JobStatusNavigation: React.FC<JobStatusNavigationProps> = ({ job }) => {
e.stopPropagation();
handleStatusChange(previousStatus);
}}
className={`${getStatusColor(previousStatus)} text-white px-4 py-2 rounded flex items-center justify-center gap-1 hover:opacity-80 transition-opacity w-32`}
className={`${getStatusBackgroundColorBright(previousStatus)} text-white px-4 py-2 rounded flex items-center justify-center gap-1 hover:opacity-80 transition-opacity w-32`}
data-no-navigate
title={`Move to ${previousStatus}`}
>
@@ -88,7 +88,7 @@ const JobStatusNavigation: React.FC<JobStatusNavigationProps> = ({ job }) => {
e.stopPropagation();
handleStatusChange(nextStatus);
}}
className={`${getStatusColor(nextStatus)} text-white px-4 py-2 rounded flex items-center justify-center gap-1 hover:opacity-80 transition-opacity w-32`}
className={`${getStatusBackgroundColorBright(nextStatus)} text-white px-4 py-2 rounded flex items-center justify-center gap-1 hover:opacity-80 transition-opacity w-32`}
data-no-navigate
title={`Move to ${nextStatus}`}
>

View File

@@ -20,18 +20,35 @@ export const getStatusColor = (status: string) => {
export const getStatusBackgroundColor = (status: string) => {
switch (status) {
case 'Planned': return 'bg-gray-600/20';
case 'Acquisition': return 'bg-yellow-600/20';
case 'Staging': return 'bg-amber-600/20';
case 'Inbound': return 'bg-orange-600/20';
case 'Running': return 'bg-blue-600/20';
case 'Done': return 'bg-purple-600/20';
case 'Delivered': return 'bg-indigo-600/20';
case 'Outbound': return 'bg-pink-600/20';
case 'Selling': return 'bg-emerald-600/20';
case 'Closed': return 'bg-green-600/20';
case 'Tracked': return 'bg-cyan-600/20';
default: return 'bg-gray-600/20';
case 'Planned': return `bg-gray-600/25`;
case 'Acquisition': return `bg-yellow-600/25`;
case 'Staging': return `bg-amber-600/25`;
case 'Inbound': return `bg-orange-600/25`;
case 'Running': return `bg-blue-600/25`;
case 'Done': return `bg-purple-600/25`;
case 'Delivered': return `bg-indigo-600/25`;
case 'Outbound': return `bg-pink-600/25`;
case 'Selling': return `bg-emerald-600/25`;
case 'Closed': return `bg-green-600/25`;
case 'Tracked': return `bg-cyan-600/25`;
default: return `bg-gray-600/25`;
}
};
export const getStatusBackgroundColorBright = (status: string) => {
switch (status) {
case 'Planned': return `bg-gray-600/55`;
case 'Acquisition': return `bg-yellow-600/55`;
case 'Staging': return `bg-amber-600/55`;
case 'Inbound': return `bg-orange-600/55`;
case 'Running': return `bg-blue-600/55`;
case 'Done': return `bg-purple-600/55`;
case 'Delivered': return `bg-indigo-600/55`;
case 'Outbound': return `bg-pink-600/55`;
case 'Selling': return `bg-emerald-600/55`;
case 'Closed': return `bg-green-600/55`;
case 'Tracked': return `bg-cyan-600/55`;
default: return `bg-gray-600/55`;
}
};