Improve timeline UI for upgrade tool

This commit is contained in:
Carlos Monastyrski
2025-09-26 15:19:03 -03:00
parent 3c80456c32
commit 62c3092942

View File

@@ -411,29 +411,14 @@ export const UpgradePathPage = () => {
<div key={step.version} className="relative flex">
{/* Timeline Column */}
<div className="mr-4 flex flex-col items-center">
{/* Timeline Circle */}
<div className="z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 border-mineshaft-500 bg-mineshaft-700">
{isFirst || isLast ? (
<div className="h-3 w-3 rounded-full bg-primary" />
) : hasBreakingChanges || hasDbMigration ? (
<svg
className="h-4 w-4 text-yellow-400"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
clipRule="evenodd"
/>
</svg>
) : (
<div className="h-2 w-2 rounded-full bg-bunker-300" />
)}
<div className="z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 border-primary bg-primary text-black">
<span className="text-xs font-bold">{index + 1}</span>
</div>
{/* Timeline Line */}
{!isLast && <div className="w-px flex-1 bg-mineshaft-500" />}
{!isLast && (
<div className="-mb-4 -mt-4 h-full w-px flex-1 bg-mineshaft-500" />
)}
</div>
{/* Content Column */}