From 16ab9536499e06104960b9e174aa429f4ad30620 Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Tue, 25 Mar 2025 02:25:34 +0530 Subject: [PATCH] Fix ui feedback --- .../src/AppBuilder/WidgetManager/widgets/link.js | 4 ++-- frontend/src/AppBuilder/_helpers/editorHelpers.js | 2 +- frontend/src/Editor/Components/{ => Link}/Link.jsx | 14 ++++++++++---- frontend/src/Editor/Components/Link/link.scss | 8 ++++++++ frontend/src/Editor/WidgetManager/configs/link.js | 4 ++-- frontend/src/_helpers/editorHelpers.js | 2 +- .../modules/apps/services/widget-config/link.js | 4 ++-- 7 files changed, 26 insertions(+), 12 deletions(-) rename frontend/src/Editor/Components/{ => Link}/Link.jsx (92%) create mode 100644 frontend/src/Editor/Components/Link/link.scss diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/link.js b/frontend/src/AppBuilder/WidgetManager/widgets/link.js index be42994124..9a8dbc48e6 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/link.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/link.js @@ -83,7 +83,7 @@ export const linkConfig = { accordian: 'Link text', }, textSize: { - type: 'number', + type: 'numberInput', displayName: 'Text size', validation: { schema: { type: 'number' }, @@ -208,7 +208,7 @@ export const linkConfig = { }, events: [], styles: { - textColor: { value: '#375FCF' }, + textColor: { value: '#4368E3' }, textSize: { value: '{{14}}' }, underline: { value: 'on-hover' }, verticalAlignment: { value: 'center' }, diff --git a/frontend/src/AppBuilder/_helpers/editorHelpers.js b/frontend/src/AppBuilder/_helpers/editorHelpers.js index 5e817c7f7e..a8fc3efca1 100644 --- a/frontend/src/AppBuilder/_helpers/editorHelpers.js +++ b/frontend/src/AppBuilder/_helpers/editorHelpers.js @@ -53,7 +53,7 @@ import { KanbanBoard } from '@/Editor/Components/KanbanBoard/KanbanBoard'; import { Steps } from '@/Editor/Components/Steps'; import { TreeSelect } from '@/Editor/Components/TreeSelect'; import { Icon } from '@/Editor/Components/Icon'; -import { Link } from '@/Editor/Components/Link'; +import { Link } from '@/Editor/Components/Link/Link'; // import { Form } from '@/Editor/Components/Form/Form'; import { BoundedBox } from '@/Editor/Components/BoundedBox/BoundedBox'; import { isPDFSupported } from '@/_helpers/appUtils'; diff --git a/frontend/src/Editor/Components/Link.jsx b/frontend/src/Editor/Components/Link/Link.jsx similarity index 92% rename from frontend/src/Editor/Components/Link.jsx rename to frontend/src/Editor/Components/Link/Link.jsx index d20f700e8d..44cec3715b 100644 --- a/frontend/src/Editor/Components/Link.jsx +++ b/frontend/src/Editor/Components/Link/Link.jsx @@ -2,6 +2,7 @@ import React, { useRef, useEffect, useState } from 'react'; import * as Icons from '@tabler/icons-react'; import cx from 'classnames'; import Loader from '@/ToolJetUI/Loader/Loader'; +import './link.scss'; export const Link = ({ height, properties, styles, fireEvent, setExposedVariables, dataCy }) => { const { linkTarget, linkText, targetType, visibility, disabledState, loadingState } = properties; @@ -19,11 +20,13 @@ export const Link = ({ height, properties, styles, fireEvent, setExposedVariable alignItems: verticalAlignment === 'top' ? 'flex-start' : verticalAlignment === 'center' ? 'center' : 'flex-end', justifyContent: horizontalAlignment === 'left' ? 'flex-start' : horizontalAlignment === 'center' ? 'center' : 'flex-end', - height, + height: '100%', + width: '100%', boxShadow, cursor: isDisabled ? 'not-allowed' : 'pointer', opacity: isDisabled ? 0.5 : 1, pointerEvents: isDisabled ? 'none' : 'auto', + fontWeight: '500', }; // eslint-disable-next-line import/namespace const IconElement = Icons?.[icon] == undefined ? Icons['IconHome2'] : Icons[icon]; @@ -112,13 +115,16 @@ export const Link = ({ height, properties, styles, fireEvent, setExposedVariable style={{ color: textColor, fontSize: textSize }} ref={clickRef} > - + {iconVisibility && ( diff --git a/frontend/src/Editor/Components/Link/link.scss b/frontend/src/Editor/Components/Link/link.scss new file mode 100644 index 0000000000..c028f620e5 --- /dev/null +++ b/frontend/src/Editor/Components/Link/link.scss @@ -0,0 +1,8 @@ +.link-widget { + a { + text-underline-offset: 4px; // Adds space between text and underline + &:hover { + // color: var(--interactive-overlays-fill-hover) !important; + } + } +} diff --git a/frontend/src/Editor/WidgetManager/configs/link.js b/frontend/src/Editor/WidgetManager/configs/link.js index be42994124..9a8dbc48e6 100644 --- a/frontend/src/Editor/WidgetManager/configs/link.js +++ b/frontend/src/Editor/WidgetManager/configs/link.js @@ -83,7 +83,7 @@ export const linkConfig = { accordian: 'Link text', }, textSize: { - type: 'number', + type: 'numberInput', displayName: 'Text size', validation: { schema: { type: 'number' }, @@ -208,7 +208,7 @@ export const linkConfig = { }, events: [], styles: { - textColor: { value: '#375FCF' }, + textColor: { value: '#4368E3' }, textSize: { value: '{{14}}' }, underline: { value: 'on-hover' }, verticalAlignment: { value: 'center' }, diff --git a/frontend/src/_helpers/editorHelpers.js b/frontend/src/_helpers/editorHelpers.js index 1f97cc42ee..a1fb6f953f 100644 --- a/frontend/src/_helpers/editorHelpers.js +++ b/frontend/src/_helpers/editorHelpers.js @@ -50,7 +50,7 @@ import { Kanban } from '@/Editor/Components/Kanban/Kanban'; import { Steps } from '@/Editor/Components/Steps'; import { TreeSelect } from '@/Editor/Components/TreeSelect'; import { Icon } from '@/Editor/Components/Icon'; -import { Link } from '@/Editor/Components/Link'; +import { Link } from '@/Editor/Components/Link/Link'; import { Form } from '@/Editor/Components/Form/Form'; import { BoundedBox } from '@/Editor/Components/BoundedBox/BoundedBox'; import { isPDFSupported } from '@/_helpers/appUtils'; diff --git a/server/src/modules/apps/services/widget-config/link.js b/server/src/modules/apps/services/widget-config/link.js index be42994124..9a8dbc48e6 100644 --- a/server/src/modules/apps/services/widget-config/link.js +++ b/server/src/modules/apps/services/widget-config/link.js @@ -83,7 +83,7 @@ export const linkConfig = { accordian: 'Link text', }, textSize: { - type: 'number', + type: 'numberInput', displayName: 'Text size', validation: { schema: { type: 'number' }, @@ -208,7 +208,7 @@ export const linkConfig = { }, events: [], styles: { - textColor: { value: '#375FCF' }, + textColor: { value: '#4368E3' }, textSize: { value: '{{14}}' }, underline: { value: 'on-hover' }, verticalAlignment: { value: 'center' },