From 62c3092942d2faacc3cc2544e2404d9cd4ffbe98 Mon Sep 17 00:00:00 2001
From: Carlos Monastyrski <charly.monastyrski@gmail.com>
Date: Fri, 26 Sep 2025 15:19:03 -0300
Subject: [PATCH] Improve timeline UI for upgrade tool

---
 .../UpgradePathPage/UpgradePathPage.tsx       | 25 ++++---------------
 1 file changed, 5 insertions(+), 20 deletions(-)

diff --git a/frontend/src/pages/public/UpgradePathPage/UpgradePathPage.tsx b/frontend/src/pages/public/UpgradePathPage/UpgradePathPage.tsx
index 79dbed9ef..4e81afcd5 100644
--- a/frontend/src/pages/public/UpgradePathPage/UpgradePathPage.tsx
+++ b/frontend/src/pages/public/UpgradePathPage/UpgradePathPage.tsx
@@ -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 */}