miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(graph): make migrate ui future migration circles cleaner (#30898)

Browse Source 
we put a lot of focus on making the migrate ui clean and easy to parse. 
The repeated icons were more distracting than valuable so let's remove
them.
This commit is contained in:
MaxKless 2025-05-01 22:19:43 +02:00 committed by GitHub
parent 413a01159f
commit 1029ecb9fd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
graph/migrate/src/lib/components/migration-timeline.tsx
View File

@ -554,7 +554,7 @@ function MigrationStateCircle({
}: MigrationStateCircleProps) { }: MigrationStateCircleProps) {
let bgColor = ''; let bgColor = '';
let textColor = ''; let textColor = '';
let Icon = ClockIcon; let Icon = null;
// Check if this migration is in the completed migrations // Check if this migration is in the completed migrations
const completedMigration = const completedMigration =
@ -584,22 +584,22 @@ function MigrationStateCircle({
// Future migration (none of the states above) // Future migration (none of the states above)
bgColor = 'bg-slate-300'; bgColor = 'bg-slate-300';
textColor = 'text-slate-700'; textColor = 'text-slate-700';
Icon = ClockIcon;
} }
return ( return (
<div <div
className={twMerge( className={twMerge(
`absolute left-0 top-0 flex h-8 w-8 -translate-x-1/2 cursor-pointer items-center justify-center rounded-full ${bgColor} ${textColor}`, !!Icon ? ' h-8 w-8' : 'mt-1 h-6 w-6',
`absolute left-0 top-0 flex -translate-x-1/2 cursor-pointer items-center justify-center rounded-full ${bgColor} ${textColor}`,
needsAttention ? 'animate-pulse' : '' needsAttention ? 'animate-pulse' : ''
)} )}
onClick={onClick} onClick={onClick}
> >
{isRunning ? ( {isRunning ? (
<span className="inline-block h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent" /> <span className="inline-block h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent" />
) : ( ) : Icon ? (
<Icon className="h-6 w-6" /> <Icon className="h-6 w-6" />
)} ) : null}
</div> </div>
); );
} }