From ce62c644bc46ea0bc5029f97b752b2dd1ba3b3aa Mon Sep 17 00:00:00 2001
From: taylanbakircioglu <taylanb@outlook.com>
Date: Wed, 8 Apr 2026 09:26:05 +0300
Subject: [PATCH] style: make upgrade version indicator look clickable with
 pill badge

Adds subtle orange border, rounded corners and light background to the
version text when upgrade is available, making it visually distinct as
an interactive element while staying compact under the HEALTHY tag.

Made-with: Cursor
---
 frontend/src/pages/ClusterManagement.tsx       | 18 ++++++++++++++----
 .../src/pages/Dashboard/tabs/OperationsTab.tsx | 18 +++++++++++++++---
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/ClusterManagement.tsx b/frontend/src/pages/ClusterManagement.tsx
index 599e7a5..3c4ded3 100644
--- a/frontend/src/pages/ClusterManagement.tsx
+++ b/frontend/src/pages/ClusterManagement.tsx
@@ -629,8 +629,18 @@ const ClusterManagement: React.FC = () => {
             {record.gadget_version && (
               needsUpgrade ? (
                 <Tooltip title={`Upgrade available: ${supportedGadgetVersion}. Click to view upgrade script.`}>
-                  <Typography.Text
-                    style={{ fontSize: '11px', color: '#fa8c16', cursor: 'pointer' }}
+                  <span
+                    style={{
+                      fontSize: '11px',
+                      color: '#fa8c16',
+                      cursor: 'pointer',
+                      border: '1px solid #ffd591',
+                      borderRadius: '10px',
+                      padding: '1px 8px',
+                      background: '#fff7e6',
+                      display: 'inline-block',
+                      lineHeight: '18px',
+                    }}
                     onClick={(e) => {
                       e.stopPropagation();
                       setUpgradeCluster(record);
@@ -645,8 +655,8 @@ const ClusterManagement: React.FC = () => {
                         });
                     }}
                   >
-                    {record.gadget_version} <ArrowUpOutlined style={{ fontSize: '10px' }} />
-                  </Typography.Text>
+                    {record.gadget_version} <ArrowUpOutlined style={{ fontSize: '9px' }} />
+                  </span>
                 </Tooltip>
               ) : (
                 <Typography.Text type="secondary" style={{ fontSize: '11px' }}>
diff --git a/frontend/src/pages/Dashboard/tabs/OperationsTab.tsx b/frontend/src/pages/Dashboard/tabs/OperationsTab.tsx
index 9231809..da94294 100644
--- a/frontend/src/pages/Dashboard/tabs/OperationsTab.tsx
+++ b/frontend/src/pages/Dashboard/tabs/OperationsTab.tsx
@@ -269,9 +269,21 @@ const OperationsTab: React.FC<OperationsTabProps> = ({ clusterId, analysisId })
                       }
                       return needsUpgrade ? (
                         <Tooltip title={`Upgrade available: ${supportedGadgetVersion}. Go to Cluster Management to upgrade.`}>
-                          <Text style={{ marginLeft: 8, fontSize: 12, color: '#fa8c16' }}>
-                            {currentCluster.gadget_version} <ArrowUpOutlined style={{ fontSize: 10 }} />
-                          </Text>
+                          <span
+                            style={{
+                              marginLeft: 8,
+                              fontSize: 11,
+                              color: '#fa8c16',
+                              cursor: 'pointer',
+                              border: '1px solid #ffd591',
+                              borderRadius: 10,
+                              padding: '1px 8px',
+                              background: '#fff7e6',
+                              lineHeight: '18px',
+                            }}
+                          >
+                            {currentCluster.gadget_version} <ArrowUpOutlined style={{ fontSize: 9 }} />
+                          </span>
                         </Tooltip>
                       ) : (
                         <Text type="secondary" style={{ marginLeft: 8 }}>