64302dc191
--------- Co-authored-by: DavidMaliglowka <13022280+DavidMaliglowka@users.noreply.github.com> Co-authored-by: Ralph Khreish <35776126+Crunchyman-ralph@users.noreply.github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import type React from 'react';
|
|
import type { TaskMasterTask } from '../../webview/types';
|
|
|
|
// Custom Priority Badge Component with theme-adaptive styling
|
|
export const PriorityBadge: React.FC<{
|
|
priority: TaskMasterTask['priority'];
|
|
}> = ({ priority }) => {
|
|
const getPriorityColors = (priority: string) => {
|
|
switch (priority) {
|
|
case 'high':
|
|
return {
|
|
backgroundColor: 'rgba(239, 68, 68, 0.2)', // red-500 with opacity
|
|
color: '#dc2626', // red-600 - works in both themes
|
|
borderColor: 'rgba(239, 68, 68, 0.4)'
|
|
};
|
|
case 'medium':
|
|
return {
|
|
backgroundColor: 'rgba(245, 158, 11, 0.2)', // amber-500 with opacity
|
|
color: '#d97706', // amber-600 - works in both themes
|
|
borderColor: 'rgba(245, 158, 11, 0.4)'
|
|
};
|
|
case 'low':
|
|
return {
|
|
backgroundColor: 'rgba(34, 197, 94, 0.2)', // green-500 with opacity
|
|
color: '#16a34a', // green-600 - works in both themes
|
|
borderColor: 'rgba(34, 197, 94, 0.4)'
|
|
};
|
|
default:
|
|
return {
|
|
backgroundColor: 'rgba(156, 163, 175, 0.2)',
|
|
color: 'var(--vscode-foreground)',
|
|
borderColor: 'rgba(156, 163, 175, 0.4)'
|
|
};
|
|
}
|
|
};
|
|
|
|
const colors = getPriorityColors(priority || '');
|
|
|
|
return (
|
|
<span
|
|
className="inline-flex items-center px-2 py-1 text-xs font-medium rounded-md border"
|
|
style={colors}
|
|
>
|
|
{priority || 'None'}
|
|
</span>
|
|
);
|
|
};
|