From 85c1c79c4b6abc27e94c4d8095d5e73a1b56c0f1 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Thu, 27 Mar 2025 15:52:57 +0530
Subject: [PATCH] fix UX enhancements

---
 .../src/AppBuilder/WidgetManager/widgets/link.js  |  2 +-
 frontend/src/Editor/Components/Link/Link.jsx      | 15 +++++++--------
 frontend/src/Editor/WidgetManager/configs/link.js |  2 +-
 .../modules/apps/services/widget-config/link.js   |  2 +-
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/link.js b/frontend/src/AppBuilder/WidgetManager/widgets/link.js
index 9a8dbc48e6..673abb1e75 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/link.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/link.js
@@ -215,7 +215,7 @@ export const linkConfig = {
       horizontalAlignment: { value: 'left' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
-      icon: { value: 'IconHome2' },
+      icon: { value: 'IconLink' },
       iconVisibility: { value: false },
     },
   },
diff --git a/frontend/src/Editor/Components/Link/Link.jsx b/frontend/src/Editor/Components/Link/Link.jsx
index fa904d1790..0b33686278 100644
--- a/frontend/src/Editor/Components/Link/Link.jsx
+++ b/frontend/src/Editor/Components/Link/Link.jsx
@@ -24,7 +24,6 @@ export const Link = ({ height, properties, styles, fireEvent, setExposedVariable
     height: '100%',
     width: '100%',
     boxShadow,
-    cursor: isDisabled ? 'not-allowed' : 'pointer',
     opacity: isDisabled ? 0.5 : 1,
     pointerEvents: isDisabled ? 'none' : 'auto',
     fontWeight: '500',
@@ -32,7 +31,7 @@ export const Link = ({ height, properties, styles, fireEvent, setExposedVariable
   };
   // eslint-disable-next-line import/namespace
   const IconElement = Icons?.[icon] == undefined ? Icons['IconHome2'] : Icons[icon];
-
+  const iconSize = textSize + 2;
   // Update the state when the linkTarget or linkText changes
   useEffect(() => {
     setLinkTargetState(linkTarget);
@@ -114,19 +113,19 @@ export const Link = ({ height, properties, styles, fireEvent, setExposedVariable
         onMouseOver={() => {
           fireEvent('onHover');
         }}
-        style={{ color: textColor, fontSize: textSize }}
+        style={{ color: textColor, fontSize: textSize, cursor: isDisabled ? 'not-allowed' : 'pointer' }}
         ref={clickRef}
       >
         <span className="d-flex justify-content-center">
           {iconVisibility && (
             <IconElement
               style={{
-                width: `${textSize}px`,
-                height: `${textSize}px`,
-                minWidth: `${textSize}px`,
-                minHeight: `${textSize}px`,
+                width: `${iconSize}px`,
+                height: `${iconSize}px`,
+                minWidth: `${iconSize}px`,
+                minHeight: `${iconSize}px`,
                 marginRight: '4px',
-                marginTop: '3px',
+                marginTop: '2px',
               }}
               stroke={1.5}
             />
diff --git a/frontend/src/Editor/WidgetManager/configs/link.js b/frontend/src/Editor/WidgetManager/configs/link.js
index 9a8dbc48e6..673abb1e75 100644
--- a/frontend/src/Editor/WidgetManager/configs/link.js
+++ b/frontend/src/Editor/WidgetManager/configs/link.js
@@ -215,7 +215,7 @@ export const linkConfig = {
       horizontalAlignment: { value: 'left' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
-      icon: { value: 'IconHome2' },
+      icon: { value: 'IconLink' },
       iconVisibility: { value: false },
     },
   },
diff --git a/server/src/modules/apps/services/widget-config/link.js b/server/src/modules/apps/services/widget-config/link.js
index 9a8dbc48e6..673abb1e75 100644
--- a/server/src/modules/apps/services/widget-config/link.js
+++ b/server/src/modules/apps/services/widget-config/link.js
@@ -215,7 +215,7 @@ export const linkConfig = {
       horizontalAlignment: { value: 'left' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
-      icon: { value: 'IconHome2' },
+      icon: { value: 'IconLink' },
       iconVisibility: { value: false },
     },
   },