julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor theme management and enhance color customization

Browse Source 
- Cleaned up theme architecture by consolidating CSS variables and removing redundant theme applications, ensuring a single source of truth for theming.
- Implemented a dark mode override and improved color management using CSS variables for better customization.
- Updated various components to utilize new color variables, enhancing maintainability and visual consistency across the application.
- Added detailed tasks in TODO.md for future enhancements related to user preferences and color customization features.
This commit is contained in:
Julien Froidefond
2025-09-28 10:14:25 +02:00
parent 97770917c1
commit b5d6967fcd
21 changed files with 404 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/jira/CollaborationMatrix.tsx
View File

@@ -80,7 +80,7 @@ export function CollaborationMatrix({ analytics, className }: CollaborationMatri
if (!isClient) {
return (
<div className={className}>
<div className="animate-pulse bg-gray-200 dark:bg-gray-700 rounded-lg h-96" />
<div className="animate-pulse rounded-lg h-96" style={{ backgroundColor: 'var(--gray-light)' }} />
</div>
);
}
@@ -96,9 +96,9 @@ const mostIsolated = collaborationData.reduce((max, current) =>
// Couleur d'intensité
const getIntensityColor = (intensity: 'low' | 'medium' | 'high') => {
switch (intensity) {
case 'high': return 'bg-green-600 dark:bg-green-500';
case 'medium': return 'bg-yellow-600 dark:bg-yellow-500';
case 'low': return 'bg-gray-500 dark:bg-gray-400';
case 'high': return { backgroundColor: 'var(--green)' };
case 'medium': return { backgroundColor: 'var(--yellow)' };
case 'low': return { backgroundColor: 'var(--gray)' };
}
};
@@ -117,10 +117,13 @@ const mostIsolated = collaborationData.reduce((max, current) =>
<span className="text-xs text-[var(--muted-foreground)]">
Score: {person.collaborationScore}
</span>
<div className={`w-3 h-3 rounded-full ${
person.isolation < 30 ? 'bg-green-600 dark:bg-green-500' :
person.isolation < 60 ? 'bg-yellow-600 dark:bg-yellow-500' : 'bg-red-600 dark:bg-red-500'
}`} />
<div
className="w-3 h-3 rounded-full"
style={{
backgroundColor: person.isolation < 30 ? 'var(--green)' :
person.isolation < 60 ? 'var(--yellow)' : 'var(--destructive)'
}}
/>
</div>
</div>
<div className="space-y-1">
@@ -132,7 +135,7 @@ const mostIsolated = collaborationData.reduce((max, current) =>
</span>
<div className="flex items-center gap-2 flex-shrink-0">
<span>{dep.sharedTickets} tickets</span>
<div className={`w-2 h-2 rounded-full ${getIntensityColor(dep.intensity)}`} />
<div className="w-2 h-2 rounded-full" style={getIntensityColor(dep.intensity)} />
</div>
</div>
))
@@ -159,11 +162,11 @@ const mostIsolated = collaborationData.reduce((max, current) =>
const ranges = [[0, 30], [30, 50], [50, 70], [70, 100]];
const [min, max] = ranges[index];
const count = collaborationData.filter(d => d.isolation >= min && d.isolation < max).length;
const colors = ['bg-green-600 dark:bg-green-500', 'bg-blue-600 dark:bg-blue-500', 'bg-yellow-600 dark:bg-yellow-500', 'bg-red-600 dark:bg-red-500'];
const colors = ['var(--green)', 'var(--blue)', 'var(--yellow)', 'var(--destructive)'];
return (
<div key={level} className="flex items-center gap-2 text-xs">
<div className={`w-3 h-3 rounded-sm ${colors[index]}`} />
<div className="w-3 h-3 rounded-sm" style={{ backgroundColor: colors[index] }} />
<span className="flex-1 truncate">{level}</span>
<span className="font-mono text-xs">{count}</span>
</div>
@@ -203,7 +206,7 @@ const mostIsolated = collaborationData.reduce((max, current) =>
{ intensity: 'low' as const, label: 'Faible' }
].map(item => (
<div key={item.intensity} className="flex items-center gap-2 text-xs">
<div className={`w-2 h-2 rounded-full ${getIntensityColor(item.intensity)}`} />
<div className="w-2 h-2 rounded-full" style={getIntensityColor(item.intensity)} />
<span>{item.label}</span>
</div>
))}
@@ -257,25 +260,25 @@ const mostIsolated = collaborationData.reduce((max, current) =>
<h4 className="text-sm font-medium mb-2">Recommandations d&apos;équipe</h4>
<div className="space-y-2 text-sm">
{avgIsolation > 60 && (
<div className="flex items-center gap-2 text-red-600 dark:text-red-400">
<div className="flex items-center gap-2" style={{ color: 'var(--destructive)' }}>
<span>⚠️</span>
<span>Isolation élevée - Encourager le pair programming et les reviews croisées</span>
</div>
)}
{avgIsolation < 30 && (
<div className="flex items-center gap-2 text-green-600 dark:text-green-400">
<div className="flex items-center gap-2" style={{ color: 'var(--green)' }}>
<span>✅</span>
<span>Excellente collaboration - L&apos;équipe travaille bien ensemble</span>
</div>
)}
{mostIsolated && mostIsolated.isolation > 80 && (
<div className="flex items-center gap-2 text-orange-600 dark:text-orange-400">
<div className="flex items-center gap-2" style={{ color: 'var(--accent)' }}>
<span>👥</span>
<span>Attention à {mostIsolated.displayName} - Considérer du mentoring ou du binômage</span>
</div>
)}
{collaborationData.filter(d => d.dependencies.length === 0).length > 0 && (
<div className="flex items-center gap-2 text-blue-600 dark:text-blue-400">
<div className="flex items-center gap-2" style={{ color: 'var(--blue)' }}>
<span>🔗</span>
<span>Quelques membres travaillent en silo - Organiser des sessions de partage</span>
</div>